1. Style
1-1. inline style(인라인 스타일)
- 별도로 스타일을 넣을 곳을 지정하지 않아도 해당 태그에 바로 적용된다.
<h1 style="color: red;"></h1>1-2. inner style(내부 스타일)
<head>
<style>
p{color: blue;} <!-- p 태그에 적용하도록 지정(셀렉터) -->
</style>
</head>1-3. external style(외부 스타일)
sample.css
div{font-size: 40px;}sample.html
<head>
<link href="sample.css" rel="stylesheet"/>
</head>
<body>
<div>
div tag 내용
외부 스타일 적용
</div>
</body>
1-4. 스타일 적용의 우선 순위
- 코드와 가까운 스타일이 우선 적용된다.
- 인라인 스타일은 항상 가장 우선 적용된다.
2. 셀렉터(선택자)
- html 문서에 어떤 스타일을 적용할 때 적용 대상을 추출하는 역할을 한다.
- 내부&외부 스타일은 셀렉터가 반드시 필요하다.
2-1. 기본 선택자
2-1-1. 전체(Universal) 셀렉터
패턴 Description * head를 포함한 HTML 문서 내의 모든 요소를 선택한다. 2-1-2. 태그(요소, Type) 셀렉터
패턴 Description 태그명 지정된 태그명을 가지는 요소를 선택한다. 2-1-3. ID 셀렉터
패턴 Description #id 어트리뷰트 값 id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다.
✔️ id 어트리뷰트 값은 중복될 수 없는 유일한 값이다.2-1-4. 클래스(Class) 셀렉터
패턴 Description .class 어트리뷰트 값 class 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다.
✔️ class 어트리뷰트 값은 중복될 수 있다.
2-2. 어트리뷰트(속성, Attribute) 셀렉터
| 패턴 | Description |
|---|---|
| 셀렉터[어트리뷰트] | 지정된 어트리뷰트를 갖는 모든 요소를 선택한다. |
| 셀렉터[어트리뷰트="값] | 지정된 어트리뷰트를 가지며 지정된 값과 어트리뷰트의 값이 일치하는 모든 요소를 선택한다. |
| 셀렉터[어트리뷰트~="값"] | 지정된 어트리뷰트의 값이 지정된 값을 (공백으로 분리된) 단어로 포함하는 요소를 선택한다. |
| 셀렉터[어트리뷰트|="값"] | 지정된 어트리뷰트의 값과 일치하거나 지정 어트리뷰트 값 뒤 연이은 하이픈(“값-“)으로 시작하는 요소를 선택한다. |
| 셀렉터[어트리뷰트^="값"] | 지정된 어트리뷰트 값으로 시작하는 요소를 선택한다. |
| 셀렉터[어트리뷰트$="값"] | 지정된 어트리뷰트 값으로 끝나는 요소를 선택한다. |
| 셀렉터[어트리뷰트*="값"] | 지정된 어트리뷰트 값을 포함하는 요소를 선택한다. |
2-3. 복합(Combinator) 셀렉터
- html은 계층 구조이다.
2-3-1. 후손(Descendant) 셀렉터
- 자신의 1 level 상위에 속하는 요소를 부모 요소, 1 level 하위에 속하는 요소를 자손 요소(자식 요소)라한다.
- 자신보다 n level 하위에 속하는 요소는 후손 요소(하위 요소)라 한다.
- 후손 셀렉터는 셀렉터A의 모든 후손 요소 중 셀렉터B와 일치하는 요소를 선택한다.
<style> div p {} <!-- 셀렉터 A 셀렉터 B --> </style>2-3-2. 자식(Child) 셀렉터
- 셀렉터A의 모든 자식 요소 중 셀렉터B와 일치하는 요소를 선택한다.
<style> div > p {} <!-- 셀렉터A > 셀렉터B --> </style>2-3-3. 형제(동위, Sibling) 셀렉터
- 형제 관계(동위 관계)에서 뒤에 위치하는 요소를 선택할 때 사용한다.
2-3-3-1. 인접(Adjacent) 형제 셀렉터
- 셀렉터A의 형제 요소 중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택한다. A와 B 사이에 다른 요소가 존재하면 선택되지 않는다.
<style> p + ul {} <!-- 셀렉터A + 셀렉터B --> </style>2-3-3-1. 일반(General) 형제 셀렉터
- 셀렉터A의 형제 요소 중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택한다.
<style> p ~ ul {} <!-- 셀렉터A ~ 셀렉터B --> </style>
2-4. 가상 클래스(Pseudo-Class) 셀렉터
- 요소의 특정 상태에 따라 스타일을 정의할 때 사용한다.
특정 상태: 마우스가 올라와 있을 때, 링크를 방문했을 때와 아직 방문하지 않았을 때, 포커스가 들어와 있을 때 등 - 특정 상태에는 원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법이다.
- 가상 클래스는 마침표(.) 대신 콜론(:)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.
2-4-1. 링크(Link) & 동적(User action) 셀렉터
pseudo-class Description :link 셀렉터가 방문하지 않은 링크일 때 :visited 셀렉터가 방문한 링크일 때 :hover 셀렉터에 마우스가 올라와 있을 때 :active 셀렉터가 클릭된 상태일 때 :focus 셀렉터에 포커스가 들어와 있을 때 2-4-2. UI 요소 상태(UI element states) 셀렉터
pseudo-class Description :checked 셀렉터가 체크 상태일 때 :enabled 셀렉터가 사용 가능한 상태일 때 :disabled 셀렉터가 사용 불가능한 상태일 때 2-4-3. 구조 가상 클래스(Structural) 셀렉터
pseudo-class Description :first-child 셀렉터에 해당하는 모든 요소 중
첫번째 자식인 요소를 선택한다.:last-child 셀렉터에 해당하는 모든 요소 중
마지막 자식인 요소를 선택한다.:nth-child(n) 셀렉터에 해당하는 모든 요소 중
앞에서 n번째 자식인 요소를 선택한다.:nth-last-child(n) 셀렉터에 해당하는 모든 요소 중
뒤에서 n번째 자식인 요소를 선택한다.:first-of-type 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중
첫번째 등장하는 요소를 선택한다.:last-of-type 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중
마지막에 등장하는 요소를 선택한다.:nth-of-type(n) 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중
앞에서 n번째에 등장하는 요소를 선택한다.:nth-last-of-type(n) 셀렉터에 해당하는 요소의 부모 요소의 자식 요소 중
뒤에서 n번째에 등장하는 요소를 선택한다.✔️ n번재에서 0과 음수는 생략된다.2-4-4. 부정(Negation) 셀렉터
pseudo-class Description :not(셀렉터) 셀렉터에 해당하지 않는 모든 요소를 선택한다. 2-4-5. 정합성 체크(validity) 셀렉터
pseudo-class Description :valid(셀렉터) 정합성 검증이 성공한 input 요소 또는 form 요소를 선택한다. :invalid(셀렉터) 정합성 검증이 실패한 input 요소 또는 form 요소를 선택한다.
2-5. 가상 요소(Pseudo-Element) 셀렉터
- 요소의 특정 부분에 스타일을 적용하기 위하여 사용된다.
특정 부분: 요소 콘텐츠의 첫글자 또는 첫줄, 요소 콘텐츠의 앞 또는 뒤 등 - 가상 요소에는 두개의 콜론(::)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.
| pseudo-element | Description |
|---|---|
| ::first-letter | 콘텐츠의 첫글자를 선택한다. |
| ::first-line | 콘텐츠의 첫줄을 선택한다. 블록 요소에만 적용할 수 있다. |
| ::after | 콘텐츠의 뒤에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다. |
| ::before | 콘텐츠의 앞에 위치하는 공간을 선택한다. 일반적으로 content 프로퍼티와 함께 사용된다. |
| ::selection | 드래그한 콘텐츠를 선택한다. iOS Safari 등 일부 브라우저에서 동작 않는다. |
3. 추가적인 CSS 참고 사항
참조: 웹 프로그래밍 튜토리얼
