Today I learned : Html&Css Day 1

3월 04, 2019

Learn Css | Codecademy

1. css 연결해보기

<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>

Html <head> 에 link 태그를 통해 style.css라는 참조 코드를 추가함으로써 html에 스타일을 입힐 수 있었다.

2. inline style

<p style="font-family: Arial;"> I love brew </p>

style 태그를 사용해서 css 파일을 따로 작성하지 않더라도 직접 인라인 스타일링을 할 수 있다.

3. head에 style 넣기

<head>
	<style>
	p {
		font-family: Arial;
		font-size: 20px;
		color: red;
	}
	</style>
</head>

head 블록안에 style 블록을 사용해서 문서에 있는 모든 p에 스타일을 적용할 수도 있다.

4. css 파일 작성해보기

# index.html 
<head>
<title> Hello world </title>
<link href="./mystyle.css" type="text/css" rel="stylesheet">
</head>
<body>
...
</body>

# mystyle.css
p {
	font-size: 20px;
	font-family: Arial;
}

내용을 담는 html 파일과 꾸며주는 css 파일을 따로 나누어서 관리하면 보기에 좋다. link 태그를 통해서 연결해줄 수 있는데 href는 연결해주려는 파일의 경로를 나타내고 type은 해당 파일이 어떤 타입인지를 알려준다. rel은 연결할 파일을 어떻게 연결할 지를 알려주는데 stylesheet로 연결하면 <style> </style> 블록을 형성해주는 것 같다.

type
- text/css
- text/javascript
- application/xml

5. class

# index.html
<body>
<h1 class="title"> Good Morning </h1>
</body>

# mystyle.css
.title {
	color: maroon;
}

“.이름” 을 사용하면 일치하는 class 태그에만 선택 적용할 수 있다.

6. 중첩 class

.bold {
	font-weight: bold;
}
.upppercase {
	text-transform: uppercase;
}

위와 같이 작성하면 html에 있는 클래스들 중 class이름이 bold와 uppercase에는 각각 진하고 대문자로 표시된다. 만약 두 개를 중첩해서 쓰고 싶다면 다음과 같이 쓸 수 있다.

<h1 class="bold uppercase"> important information </h1>

즉 class는 중복이 가능하다.

7. id에 적용하기

# index.html
<body>
<h1 class="title" id="article-title"> Good Morning </h1>
</body>

.bold {
	font-weight: bold;
}
.upppercase {
	text-transform: uppercase;
}
#article-title {
	text-transform: capitalize;
	font-family: cursive;
}

id 태그는 css 파일에서는 #으로 접근이 가능한데 재밌는 사실은 class 태그에는 uppercase를 적용하고 id 태그에는 capitalize를 적용하면 두 스타일이 상충한다. 이 때에는 id에 지정된 스타일일 실행된다.

8. id와 class의 차이점

지금까지 공부한 내용만 보면 class와 id의 차이는 두 스타일이 충돌할 경우 id가 우선순위가 더 높다는 점밖에 없다. 이 경우 두 스타일을 충돌시키지 않고 css를 작성하는 것이 충분히 가능해보이기 때문에 왜 굳이 id를 만들었는지 의문이 든다.
차이점을 살펴보면 class는 여러 태그에 중복적으로 사용될 수 있으나 id는단 하나의 태그에만 고유한 값으로 사용된다. id가 identity의 약자이니 그럴듯해 보인다.

이 블로그 검색

I love brew