| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- heroku
- JAVA11
- 카데인 알고리즘
- R
- hash table
- 자바 스레드 실행 순서 제어
- SpringBoot 2
- array
- 자바입력
- scanner
- Easy
- input
- Kadane's Algorithm
- 자바 thread 실행 순서 제어
- 수학
- 사칙연산
- Today
- Total
DeFacto-Standard IT
CSS 규칙, 셀렉터 본문
* CSS는 상위에서 적용한 스타일과, 하위에서 적용한 스타일에 대한 태그가 있는 경우
기본적으로 상위에서 적용한 스타일이 적용된다.
만약 하위에서 또다시 스타일을 적용한다면, 오버라이딩 된다.
셀렉터(Selector)
- HTML태그의 모양을 꾸밀 스타일 시트를 선택할 수 있다.
1. 태그 타입 셀렉터
h3 { color : brown } : html 내의 모든 <h3>에 대해 color : brown을 적용한다.
h3, li { color : brown; } : html내의 모든 <h3>, <li>태그에 대해 적용
2. class 셀렉터
'.'으로 시작하는 셀렉터, HTML태그의 'class' 속성으로만 지정 가능
body.main { backrground : aliceblue; } : html내의 <body class="main"> 태그에만 적용
3. id 셀렉터
'#'으로 시작하는 셀렉터. HTML태그의 'id' 속성으로만 지정 가능
div#list2 { background : mistyrose; } : html내의 <div id="list"> 태그에만 적용
4. * 셀렉터
전체에 적용하는 셀렉터.
* { color:green; } : html내의 모든 태그에 적용
5. 셀렉터 조합
2개 이상의 셀렉터를 조합하여 사용
- 자식 셀렉터(Child Selector) : 부모 자식 관계인 두 셀렉터를 '>'기호로 조합(부모 태그 안에 있는 자식 태그)
div > strong { color : dodgetblue; } : <div>의 직계 자식인 <strong>에 적용
div > div > strong { background : yellow; } : <div>의 자식인 <div>의 자식인 <strong>에 적용
- 자손 셀렉터(Descendent Slector)
자손 관계인 2개 이상의 태그 나열
ul strong { color : dodgerblue; }
- 속성 셀렉터
HTML 태그의 특정 속성(attribute)에 대해 값이 일치하는 태그에만 적용
input[type=text] { color : red; } : <input type="text">태그에만 적용
- 가상 클래스(pseudo-class)셀렉터
상황이 발생할 때 스타일을 적용, 40개 이상의 많은 가상 셀렉터 존재
a:visited { color : green; } : 방문한 <a> 태그의 텍스트 색을 green으로 출력
li:hover { background : yellow; } : <li>태그에 마우스를 올리면 배경을 yellowgreen색으로 출력. 마우스를 떼면 이전 상태로 돌아옴
|
유형 |
셀렉터 |
설명 |
|
마우스 |
:hover |
마우스가 올라 갈 때 스타일 적용 |
|
:active |
마우스로 누르고 있는 상황에서 스타일 적용 | |
|
폼 요소 |
:focus |
폼 요소가 키보드나 마우스 클릭으로 포커스를 받을 때 스타일 적용 |
|
링크 |
:link |
방문하지 않은 링크에 스타일 적용 |
|
:visited |
방문한 링크에 스타일 적용 | |
|
블록 |
::first-letter |
<p>, <div> 등과 같은 블록형 태그의 첫 글자에 스타일 적용. :first-letter와 동일하며, <span>과 같은 인라인 태그에는 적용되지 않음 |
|
::first-line |
<p>, <div> 등과 같은 블록형 태그의 첫 라인에 스타일 적용. :first-line과 동일 | |
|
구조 |
:nth-child(even) |
짝수 번째 모든 자식 태그에 스타일 적용 |
|
:nth-child(1) |
첫 번째 자식 태그에 스타일 적용 |
'Web > CSS' 카테고리의 다른 글
| CSS 박스 모델 (0) | 2017.11.18 |
|---|---|
| CSS에서 색깔 표현 (0) | 2017.11.18 |
| CSS 구성 및 작성 (0) | 2017.11.18 |
| CSS 속성 정리 *유지보수중 (0) | 2017.11.18 |
| [CSS] link 방식과 @import 방식 (0) | 2017.11.16 |
