CSS 기초
기술노트
CSS 기초
CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어입니다. HTML이 웹페이지의 구조를 정의한다면, CSS는 시각적 표현을 담당하여 스타일과 레이아웃을 관리합니다.
CSS 기본 문법
CSS는 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다:
선택자 {
속성: 값;
속성: 값;
}
예시:
h1 {
color: blue;
font-size: 24px;
}
CSS 적용 방법
CSS를 HTML 문서에 적용하는 방법에는 세 가지가 있습니다:
- 인라인 스타일: 요소에 직접 적용
- 내부 스타일 시트: HTML 문서 내에 작성
- 외부 스타일 시트: 별도의 CSS 파일로 분리 (권장)
CSS 선택자 유형
| 선택자 유형 | 예시 | 설명 |
|---|---|---|
| 요소 선택자 | p {} |
모든 p 태그를 선택 |
| 클래스 선택자 | .example {} |
클래스가 example인 요소 선택 |
| ID 선택자 | #unique {} |
ID가 unique인 요소 선택 |
| 속성 선택자 | [type="text"] {} |
속성 값이 text인 요소 선택 |
| 자손 선택자 | div p {} |
div 안의 모든 p 요소 선택 |
| 자식 선택자 | div > p {} |
div의 직계 자식 p 요소만 선택 |
| 인접 형제 선택자 | h1 + p {} |
h1 바로 다음의 p 요소 선택 |
| 가상 클래스 | a:hover {} |
마우스를 올렸을 때 선택 |
| 가상 요소 | p::first-line {} |
단락의 첫 번째 줄 선택 |
CSS 박스 모델
모든 HTML 요소는 박스 모델로 구성됩니다:
- 콘텐츠 (Content): 내용
- 패딩 (Padding): 콘텐츠와 테두리 사이
- 테두리 (Border): 박스의 경계선
- 마진 (Margin): 테두리 바깥의 여백
디스플레이와 포지셔닝
display 속성
| 값 | 설명 |
|---|---|
| block | 새 줄에서 시작 |
| inline | 한 줄에서 계속 이어짐 |
| inline-block | inline처럼 행동하지만 크기 지정 가능 |
| none | 화면에서 숨김 |
| flex | 유연한 레이아웃 |
| grid | 격자 기반 레이아웃 |
position 속성
| 값 | 설명 |
|---|---|
| static | 기본값 |
| relative | 현재 위치 기준 상대적 이동 |
| absolute | 가장 가까운 비-static 부모 기준 위치 지정 |
| fixed | 브라우저 창에 고정 |
| sticky | 스크롤 위치에 따라 고정 및 이동 |
반응형 디자인과 미디어 쿼리
반응형 디자인은 다양한 화면 크기에 대응하는 방법입니다.
@media (min-width: 768px) {
.container { width: 750px; }
}
Flexbox와 Grid
Flexbox
한 방향(행 또는 열) 레이아웃을 쉽게 관리할 수 있습니다.
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
CSS Grid
이차원(행과 열) 레이아웃을 관리할 수 있습니다.
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
CSS 변수
CSS 변수는 값을 쉽게 재사용할 수 있게 합니다.
:root {
--primary-color: #3498db;
}
h1 { color: var(--primary-color); }
모범 사례
- 논리적 코드 구조
- 선택자의 간결성 유지
- 변수와 미디어 쿼리의 적극 활용
