선택자(Selector)는 딱딱한 html에 스타일을 넣어줄 때 기준이 되는 기호라고 할 수 있습니다. 가령 html로 뼈대를 잡아왔는데 특정 부분에 효과를 넣고 싶다면 그 특정 부분을 불러올 때 사용되는 기호입니다. 이러한 선택자는 여러가지 종류가 있습니다.
선택자는 위 그림에서 보이는 것처럼 아래와 같이 표현을 해주어야 웹브라우저에 적용되어 나타납니다.
선택자 {속성:값; 속성:값; 속성:값;}
여기서 속성과 값은 여러개가 나와도 상관없으며, 속성과 값 사이에는 : 표시를, 속성과 속성 사이에는 ; 표시를 반드시 해주어야 합니다.
여러가지 선택자를 차근차근 정리해보겠습니다.
1. 태그선택자 element{속성:값; 속성:값;}
html을 짤 때 가장 기본이 되는 것이 각종 태그들입니다. 아래 예제에서 style 밑에 h1{background-color:blue; color:white; font-size:24px font-weight:bold;} 이 바로 태그선택자로 표현한 스타일입니다.
<html>
<head>
<style>
h1{background-color:blue; color:white; font-size:24px; font-weight:bold;}
.color{color:blue;}
.line{text-decoration:underline;}
</style>
</head>
<body>
<h1>선택자의 정의</h1>
<h2>
<ol>
<li class="color">태그선택자</li>
<li class="color line">class선택자</li>
<li class="color line">id선택자</li>
</ol>
</h2>
</body>
</html>
2. 전체선택자 *{속성:값; 속성:값;}
전체선택자는 모든 요소들에 동일한 효과를 줄 때 사용하는 선택자입니다. *{ } 로 사용하면 됩니다. 또한, h2태그 밑의 모든 요소에 같은 속성을 부여하고 싶다면, * h2{ } 로 사용하면 됩니다.
3. class 선택자 .class명{속성:값; 속성:값;}
<li class="color line"> 이 표시는 class를 두 개 지정해준 것입니다. color라는 클래스와 line이라는 클래스.
따라서 style에 color 속성을 활용해 속성값을 넣어주면 위 리스트에서 세 가지가 색상이 파란색으로 바뀌지만, line 속성을 활용해 속성값을 넣어주면 위 리스트에서 두 가지만 밑줄이 생깁니다. class선택자는 스타일을 지정할 때 .class명{ } 과 같이 쩜을 찍고 클래스명을 나타낸 후 { } 안에 속성과 속성값을 넣습니다.
4. id 선택자 #id명{속성:값; 속성:값}
딱 한군데에만 고유한 속성을 넣고 싶을 때 사용하는 선택자입니다. id는 개인 아이디처럼 고유한 성격이죠.(반면 클래스는 학교의 반처럼 특정 그룹의 성격을 가집니다.) id선택자는 가급적이면 쓰지 않습니다. 많아지면 수정이 어려워짐.
코딩이 잘 되었는지 검사해주는 사이트 : http://csslint.net
'Etc2' 카테고리의 다른 글
| [CSS] 선택자(Selector) 우선순위 (0) | 2020.02.24 |
|---|---|
| [CSS] 선택자(Selector) - 의사요소선택자, 구조선택자, 부정선택자 (0) | 2020.02.24 |
| [CSS] 선택자(Selector) - 속성선택자, 가상선택자 (0) | 2020.02.23 |
| [CSS] 선택자(Selector) - 자손, 자식, 인접형제선택자 / 그룹화 (0) | 2020.02.23 |
| [CSS] 단위 - vm, vh, vmin, vmax (0) | 2020.02.23 |
| [CSS] 단위 - px, %, em, rem (0) | 2020.02.23 |
| 티스토리 마우스 드래그 금지, 마우스 우클릭 금지 소스 (4) | 2019.10.12 |
| 마우스 드래그 색상 변경. 마우스 드래그한 부분 색상 바꾸는 방법 (0) | 2019.09.29 |