[CSS] CSS란? 적용방법과 선택자 selector
by 우와한개발자
[CSS]
- HTML 문서 내에서 어떤 요소에 CSS의 스타일을 적용시킬 것인가 결정하기 위한 것
선택자 {
속성명1:속성값1;
속성명2:속성값2;
...
}- 속성값에 공백이 포함된 경우 : quote(“”) 사용
[CSS 적용 방법]
1. 외부 스타일 시트 (External Style Sheet)
- 별도의 CSS 파일을 만들어 HTML에 연결하는 방식
- 보통 <head> 태그 안에 작성
- <link> 태그 사용
<head>
...
<link rel="stylesheet" href="/css/default.css">
</head>
/* /css/default.css */
h1 {
color: blue;
}
2. 내부 스타일 시트 (Internal Style Sheet)
- HTML 문서 안에 CSS 스타일을 직접 작성할 때 사용하는 태그
- 보통 <head> 태그 안에 작성
- <style type=text>
<head>
...
<style>
h1 {
color: blue;
text-align: center;
}
</style>
</head>
3. 인라인 스타일 (Inline Style)
- HTML 태그 안에 style 속성으로 직접 스타일 지정
- 해당 요소에만 적용
<h1 style="color: blue; text-align: center;">제목</h1>
⚠️ 스타 우선순위
- !important 속성은 2중 선언된 스타일 시트에 대하여 선언순서와 상관 없이 우선순위가 적용
!important > Inline > Internal > External > 브라우저
[CSS 선택자]
1. 기본 선택자 (Basic Selector)
| 선택자 | 문법 | 설명 | 예시 |
| 전체 선택자 | * {} | 모든 요소 선택 (CSS 초기화 시 사용) | * { margin:0; padding:0; } |
| 타입 선택자 | 태그명 {} | 해당 태그 모두 선택 | p { color:red; } |
| 클래스 선택자 | .클래스명{} | 같은 class 이름을 가진 요소 선택 (여러 개 가능) | .title { color:blue; } |
| ID 선택자 | #아이디명 {} | id가 같은 요소 선택 (문서에서 하나만 사용) | #header { background:black; } |
2. 속성 선택자 (Attribute Selector)
- 속성값이 그렇게 길지 않아서 대부분 그냥 풀네임으로 사용
| 문법 | 설명 | 예시 |
| [속성] | 해당 속성이 있는 요소 | a[href] |
| [속성="값"] | 속성값이 정확히 일치 | a[href="<http://naver.com>"] |
| [속성*="값"] | 특정 문자열 포함 | [href*="naver"] |
| [속성^="값"] | 특정 문자열로 시작 | [href^="https"] |
| [속성$="값"] | 특정 문자열로 끝 | [href$=".com"] |
| [속성~="값"] | 특정 단어 포함 (공백 기준) | [class~="menu"] |
| `[속성 | ="값"]` | 값이 정확히 일치하거나 값-으로 시작 |
a[href] { color:blue; }
a[href="<http://www.naver.com>"] {
color:green;
}
[href*="naver"] {
color:red;
}
3. 그룹 선택자 (Group Selector)
- 여러 선택자를 쉼표(,) 로 나열
- 합집합 개념
h1,h2 {
color:red;
}
4. 결합자 (Combinator)
- 요소 사이의 관계
| 종류 | 기호 | 문법 | 설명 |
| 자손 선택자 | 공백 | A B | A 안에 있는 모든 B (자식 + 자손) |
| 자식 선택자 | > | A > B | A의 직접 자식 B만 |
| 일반 형제 선택자 | ~ | A ~ B | A 뒤에 나오는 모든 B 형제 |
| 인접 형제 선택자 | + | A + B | A 바로 뒤에 있는 한 개의 B 형제 |
div p { color: red; } /* div 안 모든 p */
div > p { color: blue; } /* div 바로 아래 p */
h1 + p { color: green; } /* h1 바로 다음 p */
h1 ~ p { color: orange; } /* h1 뒤에 나오는 모든 p */
5. 가상 클래스 선택자 (Pseudo Class Selector)
- 콜론 : 사용
- 요소의 특정 상태(state) 나 위치, 이벤트에 따라 스타일을 적용
- 사용자가 마우스를 올리거나 클릭하는 등 특정 상태에서 적용
선택자:가상클래스 {
속성:값;
}
1) 링크 상태 가상 클래스
| 가상 클래스 | 설명 | 예시 |
| :link | 방문하지 않은 링크 | a:link {color:blue;} |
| :visited | 방문한 링크 | a:visited {color:purple;} |
| :hover | 마우스를 올렸을 때 | a:hover {color:red;} |
| :active | 클릭하고 있는 상태 | a:active {color:green;} |
| :focus | 포커스 상태 | input:focus {border:1px solid red;} |
⚠️ 선언 순서
link → visited → hover → active
2) 위치 기반 가상 클래스
| 가상 클래스 | 설명 | 예시 |
| :first-child | 첫 번째 자식 요소 | li:first-child |
| :last-child | 마지막 자식 요소 | li:last-child |
| :nth-child(n) | n번째 자식 요소 | li:nth-child(3) |
| :nth-last-child(n) | 뒤에서 n번째 자식 | li:nth-last-child(2) |
p:nth-child(2n+1) { color:red; }
3) 타입 기반 위치 선택
| 가상 클래스 | 설명 | 예시 |
| :first-of-type | 같은 타입 중 첫 번째 | p:first-of-type |
| :last-of-type | 같은 타입 중 마지막 | p:last-of-type |
| :nth-of-type(n) | 같은 타입 중 n번째 | span:nth-of-type(2) |
| :nth-last-of-type(n) | 같은 타입 뒤에서 n번째 | span:nth-last-of-type(2) |
| :only-of-type | 같은 타입이 하나만 있을 때 | p:only-of-type |
4)상태 관련 가상 클래스
| 가상 클래스 | 설명 |
| :checked | 체크된 요소 |
| :disabled | 비활성화 요소 |
| :enabled | 활성화 요소 |
| :selected | 선택된 요소 |
| :empty | 자식 요소가 없는 요소 |
input:checked {
background:yellow;
}
5) 폼 관련 가상 클래스
| 가상 클래스 | 설명 |
| :button | button 요소 |
| :checkbox | checkbox 타입 |
| :radio | radio 타입 |
| :file | file 타입 |
| :password | password 타입 |
| :text | text 타입 |
| :submit | submit 타입 |
| :reset | reset 타입 |
| :input | input 요소 |
6) 기타 가상 클래스
| 가상 클래스 | 설명 |
| :root | 문서의 최상위 요소(html) |
| :target | URL의 앵커 대상 |
| :header | 헤더 요소(h1~h6) |
| :image | image 요소 |
| :parent | 자식이 있는 요소 |
| :odd | 홀수 요소 |
| :even | 짝수 요소 |
| :visible | 화면에 보이는 요소 |
| :hidden | 숨겨진 요소 |
| :animated | 애니메이션 진행 중 요소 |
6. 가상 요소 선택자 (Pseudo Element)
- :: 사용
- 요소의 특정 부분을 선택
| 선택자 | 설명 | 예시 |
| ::before | 요소 앞에 content 추가 | p::before |
| ::after | 요소 뒤에 content 추가 | p::after |
| ::first-letter | 첫 글자 선택 | p::first-letter |
| ::first-line | 첫 줄 선택 | p::first-line |
| ::marker | 리스트 마커 선택 | li::marker |
| ::selection | 사용자가 드래그한 영역 | p::selection |
p::after {
content:"lbs";
color: #bbb;
}
'Web > CSS' 카테고리의 다른 글
| [CSS] 스타일 속성 - 미디어쿼리(@media) (0) | 2026.03.10 |
|---|---|
| [CSS] 스타일 속성 - transform, transition, animation(@keyframes) (0) | 2026.03.10 |
| [CSS] 웹 폰트 (Web Font) 적용하는 방법 (0) | 2026.03.09 |
| [CSS] 단위(px, em, rm, % 등)와 색상(rgb, hsl) (0) | 2026.03.09 |
| [CSS] 스타일 속성 - font, text, layout, float, box (0) | 2026.03.09 |
블로그의 정보
우와한개발자 님의 블로그
우와한개발자