[CSS] 선택자의 표현방법 및 종류
문자 형식
- 필수로 입력해야 합니다.
@charset "utf-8";
크기의 단위
- px : 해상도에 의존
- % : 상위태그의 비율
- em : 상위태그의 font-size x 100
- rem : <html> 태그의 font-size x 100
기본선택자
- 태그 선택 (h1, h2, h3, a, p ... )
/* p 태그 : <p></p> */
p {
color: black;
}
- 클래스 선택 (p.green, a.big, a.small ... )
/* p 태그 이면서 class가 green 인 태그 : <p class="green"></p> */
p.green {
color: green;
}
- 아이디 선택
/* id가 content 인 태그 */
#content {
background-color: orange;
}
- 복수 선택
/* 위 세개를 전부 선택 */
p, p.green, #content {
font-size: 20px;
}속성선택자
속성값이 특정 문자열로 시작하는 태그
ex) 속성값이 http:// 로 시작하는
a[href ^= 'http://'] {
color: red;
}
속성값이 특정 문자열로 끝나는 태그
ex) 속성값이 .pdf 로 끝나는
a[href $= '.pdf'] {
color: yellow;
}
속성값이 특정 단어를 포함되는 태그 (완전한 단어를 작성해야 한다.)
ex) 속성값이 sample 단어를 포함하는 samples ( X )
li[title ~= 'sample']{
color: aqua;
}
속성값이 특정 문자열이 포함되는 태그 (불완전한 단어만 입력해도 가능하다.)
ex) 속성값이 sample 문자열을 포함하는 samples ( O )
li[title *= 'sam']{
color: aqua;
}a 태그 선택자
아래와같은 순서로 선언해 주는 것이 좋습니다.
a:link {}
a:visited {}
a:hover {}
a:active {}
a:focus {}
클릭한적이 없는 a 태그 (링크가 있다.)
a:link {
color: green;
text-decoration: underline;
}
클릭한적이 있는 a 태그 (링크가 있다.)
a:visited {
color: chartreuse;
text-decoration: underline;
}
마우스를 올렸을 때
a:hover {
color: green;
}
마우스를 클릭했을 때
a:active {
color: green;
}
탭키로 접근하여 포커스를 가졌을 때
a:focus {
color: green;
}
실제로 적용하는경우에는 이렇게 많이 사용합니다.
a {
color: red;
text-decoration: none;
}
a:hover, a:active, a:focus {
color: red;
text-decoration: underline;
}p 태그 선택자
첫줄 선택하기
p:first-line{
background-color: green;
}
첫글자 선택하기
p:first-letter{
background-color: red;
}before/after 선택자
태그의 시작하는 내용
ex) <p> 바로 다음에 들어갈 내용
p:before{
content: 'Before area ';
}
태그의 끝나는 내용
ex) </p> 바로 전에 들어갈 내용
p:after{
content: 'After area ';
}선택자 우선순위
태그 - 1
div {
color:black;
}
클래스 - 10
div.box {
color:black;
}
아이디 - 100
#content {
color:black;
}
태그의 style 속성에 직접 입력 - 1000
<div style="color:black;"></div>
!important - 무조건 적용되는 속성
div {
color:black !important;
}
'CSS > CSS' 카테고리의 다른 글
| 코드카데미 Learn HTML & CSS: Part I (0) | 2021.03.23 |
|---|---|
| CSS 선택자의 우선순위, 명시도 계산법, 박스 모델링 (0) | 2021.03.23 |
| CSS 선언방식, 선택자 (0) | 2021.03.23 |