티스토리 뷰
Section 6. CSS 사용법과 선택자
1. CSS3 개요
- CSS3의 구성
- 선택자(Selector) : 스타일 시트를 적용할 대상을 지정한다.
- 속성(Property) : 어떤 속성을 적용할지 선택한다.
- 속성값(Value) : 속성에 어떤 값을 반영할지 선택한다.
h1 { color: blue; front-sxie: 120px;}
h1 : 선택자
color, fornt-size : 속성
blue;, 12px : 속성값
{} : 중괄호는 내용을 뜻한다.
2. CSS3 기본 사용법
- CSS의 정의 문법
div { width : 960px; }
div : 선택자
width : 속성
960 : 속성값
px : 단위
: : 콜론 (HTML의 = 와 같은 역할)
; : 세미콜론
- CSS의 적용 우선 순위
1 순위 . 인라인 스타일 시트
2 순위 . 내부 스타일 시트 : <head> 안에 작성
3 순위 :외부 스타일 시트 : 문서를 따로 작성한다.
* 속성을 강제로 적용할 떄는 (!important) 표시를 사용한다.
* 만약, 외부에서 적용 후 인라인에서 적용하면 우선순위에 따라 인라인 스타일 시트의 것이 적용된다.
3. CSS3 선택자
CSS의 기본 선택자
| 종류 | 사용 방법 | 설명 |
| 전체 선택자 | *{속성선언;} | 모든 태그에 스타일을 적용한다. |
| 타입선택자 | 태그 {속성선언;} | 지정한 태그에 스타일을 적용한다. (태그 그룹) |
| 클래스 선택자 | .클래스 이름 {속성선언;} | 지정한 클래스에 스타일을 적용한다. |
| 아이디 선택자 | #아이디 {속성선언;} | 지정한 아이디에 스타일을 적용한다. |
| 속성 선택자 | [속성] {속성선언;} [속성=값] {속성선언;} |
지정한 속성 또는 속성값이 있는 태그에 스타일을 적용한다. |
1. 전체 선택자
(= 유니버셜)
2. 타입 선택자
3. 클래스 선택자
4. 아이디 선택자
: id는유일해야한다(class처럼 두개를 적용할 수 없다.)
5. 속성 선택자
: select 범위가 좁아진다.(정확성 높아짐)
속성 선택자의 형식
- *는 any를 뜻한다.
- p[text|~= "값1 값2"] 일 경우 값1에서 값2까지라는 뜻이다.
| 형식 | 설명 | 사용 예 |
| [속성] | 해당 속성이 정의된 모든 태그를 선택한다. 속성의 결과는 무관하다 | p[text] |
| [속성=값] | 정의된 속성과 속성값이 동일한 태그를 선택한다. | p[text="red"] |
| [속성~=값] | 공백으로 구분된 속성값 목록 중 하나가 주어진 값과 동일한 태그를 선택한다. | p[text~="red blue"] |
| [속성!=값] | 속성 값이 해당 값과 동일하거나, 또는 주어진 값으로 시작하고 '-' 기호로 이어지는 값을 가진 태그를 선택한다. | p[text~="red-blue"] |
| [속성^=값] | 속성값이 주어진 값으로 시작하는 태그를 선택한다. | p[text^="img"] |
| [속성$=값] | 속성값이 주어진 값으로 끝내는 태그를 선택한다. | p[text$=".png"] |
| [속성*=값] | 속성값이 주어진 값을 부분 문자열로 가지는 태그를 선택한다. | p[text*="ong"] |
속성 선택자 사용 형식 살펴보는 예제
- 가상 선택자
웹 문서에는 보이지 않지만 동작에 영향을 주는 속성을 가상 선택자라고 한다.
- 이벤트 가상 클래스 선택자
사용자가 마우스 이벤트 행위를 어떻게 하는지에 따라서 스타일 시트를 다르게 적용한다.
a:link{color:blue;}
위의 코드에서 link는 가상 선택자이다.
이벤트 가상 클래스 선택자의 종류
| 사용방법 | 설명 | 사용 예 |
| : link 선택자 | 웹 문서에 사용자가 방문하지 않았던 곳을 표시한다. | a:link{color:red; text-decoration:none;} |
| : visited 선택자 | 웹 문서에 사용자가 방문한 곳을 표시한다. | a:visited{color:blue;} |
| : active 선택자 | 웹 문서에 사용자가 링크를 클릭하는 순간을 나타낸다. | a:active{color:black;} |
| : hover 선택자 | 웹 문서에 사용자가 링크에 마우스 포인터를 올리는 순간을 나타낸다. | a:hover{color:green;} |
| : focus 선택자 | 해당 요소에 초점이 맞춰졌을때 적용된다. | a:focus{color:yellow;} |
* overLine : 취소선
* text-decoration : 문자 꾸며주는 것
* underline : 밑줄
'코딩 > HTML&CSS' 카테고리의 다른 글
| [5주차 5일] CSS (0) | 2023.11.10 |
|---|---|
| [5주차 4일] CSS (0) | 2023.11.09 |
| [5주차 3일] HTML (0) | 2023.11.08 |
| [5주차 2일] HTML (0) | 2023.11.07 |
| [5주차 1일] HTML (0) | 2023.11.06 |
- Total
- Today
- Yesterday