다양한 선택자들
- 태그 선택자 (h1, p, li, a 등 태그들)
<head>
<style>
h1 {
font-size: 50px;
text-align: center;
}
li {
font-size: 25px;
color: gray;
}
</style>
</head>
- 클래스 선택자(.클래스명)
여러 코드에 중복되는 속성을 주고 싶을 때 클래스라는 속성을 사용해서 그룹으로 묶어주면 코드를 한 번만 작성 할 수 있다.
1. class="클래스명" : 묶어주고 싶은 태그에 class속성 써주기.
2. <style> .클래스명 {Declaration;} </style> : 선택자 자리에 .클래스명 써주기.
3. class="클래스명 클래스명" : 클래스명을 두 번 써서 이미 묶인 태그를 또 다른 그룹으로도 묶을 수 있다.
<head>
<style>
.abcd {
color: black;
}
</style>
</head>
<body>
<li class="abcd">style 태그</li>
<li class="abcd">style 속성</li>
<li class="abcd efg">Property</li>
</ol>
</body>
- 아이디 선택자(#아이디명)
클래스로 묶인 속성들 중 해당 웹페이에서는 다른 속성을 나타내고 싶은 부분은 아이디 속성으로 지정해서 사용 할 수 있다.
1. id="id명" : '이 부분을 이 페이지에서는 다른 속성을 주고 싶어요.'하는 곳에 id속성으 써주기.
2. <style> #아이디명 {Declaration;} </style> : 선택자 자리에 #아이디명 써주기.
3. class와 다르게 id는 웹페이지에서 이름을 한 번 만 사용 가능하다. (밑에서는 id="xzy" 더이상 사용 불가)
<head>
<style>
#xzy {
color: red;
}
.abcd {
color: black;
}
</style>
</head>
<body>
<ol>
<li class="abcd">style 태그</li>
<li class="abcd">style 속성</li>
<li class="abcd">Property</li>
<li class="abcd">Property Value</li>
<li class="abcd" id="xzy">Selector</li>
</ol>
</body>
- 다른 선택자들 검색해보기
'css selector' 검색
https://www.w3schools.com/cssref/css_selectors.asp
선택자들의 우선순위
태그선택자보다는 class선택자가 우선순위가 높다.
class선택자가 여러개로 지정되어 있는 경우엔 본문이랑 더 가까운(마지막으로 작성 된) 선택자가 우선순위가 높다.
class선택자 보다는 id선택자가 우선순위가 높다.
<head>
<title>CSS 공부</title>
<style>
h1 {
font-size: 50px;
text-align: center;
}
li {
font-size: 25px;
color: gray;
}
.efg {
color: blue;
}
#xzy {
color: red;
}
.abcd {
color: black;
}
</style>
</head>
<body>
<h1>CSS 공부</h1>
<ol>
<li class="abcd">style 태그</li>
<li class="abcd">style 속성</li>
<li class="abcd efg">Property</li>
<li class="abcd">Property Value</li>
<li class="abcd" id="xzy">Selector</li>
</ol>
</body>
위 문서를 예로 우선순위를 알아보자.
태그선택자 < class선택자 < 마지막에 작성 된 class선택자 < id선택자
<li>선택자 < class="efg" < class="abcd" < id="xzy"
'프로그래밍언어 > CSS' 카테고리의 다른 글
| [CSS] Grid(그리드) (0) | 2020.12.01 |
|---|---|
| [CSS] 박스모델 (0) | 2020.11.25 |
| [CSS] Property(속성) 검색 하는 법(+폰트 크기 속성, 글 정렬 속성) (0) | 2020.11.20 |
| [CSS] CSS의 기본 문법 (0) | 2020.11.20 |
| [CSS] CSS언어의 등장 전과 후 (0) | 2020.11.18 |
