Study/HTML & CSS
[코드스테이츠 TIL] CSS 선택자 : CLASS, ID
xiubin
2019. 11. 22. 21:53
반응형
[ CSS ]
Cascading Style Sheets의 약자 웹 페이지 구성요소의 스타일을 정의하는 언어
CSS를 HTML에 적용하는 세가지 방법
1. inline
HTML의 특정 태그에 직접 style을 적용
<h1 style="color: red; font-style: italic">Hello world<h1>
2. HTML 내부에 stylesheet 작성
<style> 태그 이용하여 <head> 태그 안에 삽입
태그를 선택하는 규칙(Selector)에 따라 일괄 적용
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<style>
h1 {
color: red;
font-style: italic;
}
/* 모든 h1 태그에 빨간색, 기울임꼴을 적용 */
</style>
</head>
<body>
<h1>Hello world</h1>
<div>Contents here
<span>Here too!<span>
</div>
</body>
</html>
3. HTML 외부에 stylesheet 작성
<link>태그 이용
css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" type="text/css" href="myFirstStyle.css" />
</head>
<body>
<h1>Hello world</h1>
<div>Contents here
<span>Here too!<span>
</div>
</body>
</html>
[ CSS SELECTOR ]
CSS 선택자 : CSS에서 요소(element)를 선택하는 규칙
1. 각각의 ELEMENT에 고유한 ID를 부여 : #ID
id 속성 이용
#identifier와 같이 #을 이용해 고유한 id를 선택
<!-- 생략 -->
<h1 id="hello">Hello world</h1>
<h1 id="codestates">Code States</h1>
<!-- 생략 -->#hello { color: red; }
#codestates { color: blue; }
2. 종류(CLASS)를 만들고 ELEMENT에 CLASS 부여 : .CLASS
각기 다른 특성을 가진 종류를 만들고, 해당 element에 적용
여러 태그에 class를 부여할 수 있으며, 한 태그에 여러 class 적용도 가능
.className과 같이 .(dot)을 이용해 class 선택
<!-- 생략 -->
<h1 class="red underline">Hello world</h1>
<h1 class="blue">Code States</h1>
<!-- 생략 -->.red { color: red; }
.blue { color: blue; }
.underline { text-decoration: underline; }
Class 선택자와 Id 선택자 비교
| CLASS | ID |
| 자유롭게 이름 붙임 | 자유롭게 이름 붙임 |
| 동일한 값을 갖는 element는 많음 | 문서 내에서 단 하나의 element가 유일한 값을 가짐 |
| element가 여러 값을 가질 수 있음 | element는 단 하나의 값을 가짐 |
| 스타일의 분류(classification)에 사용 | 특정 element를 이름 붙이는 데 사용 |
반응형