반응형
CSS 적용은 아래 링크 참고.
[CSS] 외부 CSS 링크하기
moong-story.tistory.com
<style>
// 모든 항목에 적용 됨.
* {
}
// 모든 <p> 태그에 적용 됨.
p {
}
// <태그 class="class_name"> 동일한 클래스를 가지는 모든 태그에 적용 됨.
.class_name {
}
// <h3> 태그 중 <h3 class="class_name"> 인 태그에만 적용 됨.
h3.class_name {
}
// <ul id="ID_name"> 처럼 id로 ID_name을 가지는 태그에 적용 됨.
#ID_name {
}
// <section> 태그 하위의 모든 <p> 태그에 적용 됨.
section p {
}
// id로 container를 가지는 태그 하위의 모든 <ul> 태그에 적용 됨.
#container ul {
}
// <section> 태그 하위의 첫번째 <p> 태그(자식 태그)에 적용 됨.
section > p {
}
// id로 container를 가지는 태그 하위의 첫번째 <ul> 태그(자식 태그)에 적용 됨.
#container > ul {
}
// 동일 레벨에 위치하는 <h1> 태그 다음에 나오는 첫번째 <p> 태그에만 적용 됨.
h1 + p {
}
// 동일 레벨에 위치하는 id로 container를 가지는 태그 다음에 나오는 첫번째 <ul> 태그에만 적용 됨.
#container + ul {
}
// <h1> 태그 다음에 오는 모든 형제 <p> 태그에 적용 됨.
h1~p {
}
// <a> 태그와 <p> 태그 모두에 적용 됨.
a, p {
}
// href 속성이 있는 <a> 태그만 적용 됨.
a [href] {
}
// type 속성 값이 "text"인 <input> 태그만 적용 됨.
input [type = "text"] {
}
// title 속성에 "임의지정" 값이 포함 된 <h4> 태그만 적용 됨.
// title="사용자 임의지정" 적용 O
// title="사용자-임의지정" 적용 X
h4 [title ~= "임의지정"] {
}
// href 속성의 값이 "http://"로 시작하는 <a> 태그만 적용 됨.
a [href ^= "http://"] {
}
// href 속성의 값이 ".zip"로 끝나는 <a> 태그만 적용 됨.
a [href $= ".zip"] {
}
// title 속성에 "임의지정" 값으로 시작되는 <h4> 태그만 적용 됨.
// title="임의지정" 적용 O
// title="임의지정-값" 적용 O
// title="임의지정값" 적용 X
h4 [title |= "임의지정"] {
}
// title 속성에 위치 상관없이 "임의지정" 값이 포함되어 있는 <h4> 태그만 적용 됨.
h4 [title *= "임의지정"] {
}
// <a> 태그로 링크를 건 부분에 적용 됨.
a:link {
}
// <a> 태그로 링크를 건 부분 중 방문했던 링크에 적용 됨.
a:visited {
}
// <a> 태그로 링크를 건 부분을 클릭할 때 적용 됨.
a:active {
}
// <a> 태그로 링크를 건 부분에 마우스 포인터를 올려놓았을 때 적용 됨.
a:hover {
}
// <p> 태그에 포커스가 왔을 때 적용 됨.
p:focus {
}
// 최상위 태그(<html>)에 적용 됨.
:root {
}
// <div> 태그 안에서 3번째 자식 태그인 <p>태그에 스타일 적용 됨.
div p:nth-child(3) {
}
// <div> 태그 안에서 홀수 번째로 나타나는 자식 태그인 <p> 태그에 스타일 적용 됨.
div p:nth-child(odd), div p:nth-child(2n + 1) {
}
// <div> 태그 안에서 짝수 번째로 나타나는 자식 태그인 <p> 태그에 스타일 적용 됨.
div p:nth-child(even), div p:nth-child(2n + 0), div p:nth-child(2n) {
}
// 앞에서 세어서 n번째 태그에 스타일 적용 됨.
p:nth-of-type(n) {
}
// 끝에서부터 세어 n번째 나타나는 태그에 스타일 적용 됨.
p:nth-last-of-type(n) {
}
// 첫 번째 자식 태그에 스타일 적용 됨.
p:first-child {
}
// 마지막 자식 태그에 스타일 적용 됨.
p:last-child {
}
// 형제 관계에 있는 태그 중에서 첫 번째 태그에 스타일 적용 됨.
p:first-of-type {
}
// 형제 관계에 있는 태그 중에서 마지막 태그에 스타일 적용 됨.
p:last-of-type {
}
// 부모 태그 안의 자식 태그가 유일하게 하나일 때 스타일 적용 됨.
p:only-child {
}
// 해당 태그가 유일한 태그일 때 스타일 적용 됨.
p:only-of-type {
}
// 앵커 이름이 intro인 곳으로 링크를 클릭하게 될 경우 #intro에 스타일 적용 됨.
#intro:target {
}
// 활성화 상태일 때 적용 됨.
textarea:enabled {
}
// 비활성화 상태일 때 적용 됨.
textarea:disabled {
}
// 체크되었을 때 적용 됨.
textarea:checked {
}
// <p> 태그 앞에 "내용:" 이라는 내용을 추가.
p::before {
content:"내용:";
}
// <p> 태그 뒤에 스타일 적용 됨.
p::after {
}
// 마우스로 드래그했을 때 스타일 적용 됨.
::selection {
}
// <h1> 태그가 아닌 나머지 모든 태그에 적용 됨.
:not(h1) {
}
// ex) input:not([type="text"])
// type="text"가 아닌 <input> 태그에 적용 됨.
</style>반응형
'HTML & CSS > Reference' 카테고리의 다른 글
| [HTML] HTML5 문서의 기본 구조 (0) | 2024.12.08 |
|---|---|
| [HTML] HTML5 태그 (0) | 2024.12.08 |
| [HTML] HTML5 태그를 지원하지 않는 브라우저 처리 (0) | 2024.12.08 |
| [HTML] HTML5 지원하는지 확인 (0) | 2024.12.08 |
| [CSS] 속성 (0) | 2024.12.07 |