Minwoo Dev.
[HTML/CSS] CSS 선택자 (CSS Selector) 본문
CSS에서는 HTML 요소를 지정하여 스타일을 설정한다.
CSS에서 요소를 선택하는 방법에는 크게 세 가지가 있다.
- 태그 이름을 사용하여 지정
- id 선택자를 사용하여 지정(#name)
- class 를 사용하여 지정 (.name)
태그 이름을 사용하여 지정하는 방법
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
li{
color: blue;
}
</style>
</head>
<body>
<h1>저녁메뉴 후보</h1>
<ol>
<li>짜장면</li>
<li>라면</li>
<li>김치볶음밥</li>
<li>규동</li>
</ol>
</body>
위와 같은 HTML 코드에서, style 요소는 HTML 문서를 꾸며주는 CSS 이다.
li{
color : blue;
}
위 부분은 이 HTML 문서에서 li 요소 전체에 대하여 색상을 blue로 설정한다는 뜻이다.
결과
이처럼 CSS에서는 HTML 태그 이름을 통하여 속성을 지정할 수 있다.
하지만 태그 이름을 사용하여 속성을 지정한다면 원치 않는 부분까지 속성이 지정된다는 단점이 있다.
예를 들어, "김치볶음밥" 이라는 li 요소에만 색상을 빨간색으로 하려면 태그 이름을 사용하면 안된다.
그럴 때, 우리는 id 선택자를 사용한다.
id 선택자를 사용하여 지정하는 방법
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
#kimchi{
color: red;
}
</style>
</head>
<body>
<h1>저녁메뉴 후보</h1>
<ol>
<li>짜장면</li>
<li>라면</li>
<li id="kimchi">김치볶음밥</li>
<li>규동</li>
</ol>
</body>위 코드에서는 요소를 선택할 때 #kimchi를 사용한 것을 알 수 있다.
"김치볶음밥" 이라는 요소만 빨간색으로 정해줄 때, 우리는 김치볶음밥 요소에 id 속성을 지정해준다.
그리고 style 속성에서 #을 사용하여 kimchi의 주소값을 불러와서 스타일을 지정한다.
결과
Class를 이용하여 지정
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
.kimchi{
color: red;
}
</style>
</head>
<body>
<h1>저녁메뉴 후보</h1>
<ol>
<li>짜장면</li>
<li>라면</li>
<li class="kimchi">김치볶음밥</li>
<li>규동</li>
</ol>
</body>
위 코드에서는 #이 아니라 .을 사용한 것을 알 수 있다.
이 코드는 id 선택자가 아닌 class 선택자를 사용한 것이다.
class 선택자는 id 선택자와 비슷하게 HTML에서 class를 지정해주고 css에서 class명을 사용하여 속성을 부여한다.
결과
사용 방법이 id 선택자와 비슷해서 혼란스러울 수 있다.
id 선택자는 HTML 내에서 한번만 사용이 가능하다. 즉 하나의 아이디를 중복할 수 없다는 말이다.
그래서 특정한 위치나 태그를 선택할 때만 사용하곤 한다.
class 선택자는 만들어둔 CSS 형식을 찍어내는 것이라고 생각하면 편하다.
여러 요소에 같은 클래스를 지정할 수 있고, 같은 클래스 이름으로 여러 개를 설정할 수 있다.
'Web' 카테고리의 다른 글
| [HTML/CSS] CSS position:relative , static (1) | 2023.12.17 |
|---|---|
| [HTML/CSS] CSS 결합자 (CSS Combinters) (0) | 2023.12.14 |
| [HTML/CSS] text-overflow : clip | ellipsis , 말 줄이기, 생략 처리하기 (0) | 2023.12.09 |
| [HTML/CSS] display : inline | inline-block | block | flex (2) | 2023.12.03 |
| [HTML/CSS] 가상 요소(Pseudo-Element), ::before, ::after (2) | 2023.12.02 |
