CSS 기초
CSS 기초
CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어입니다. HTML이 콘텐츠의 구조를 정의한다면, CSS는 그 구조의 시각적 표현을 담당합니다.
CSS 문법 및 선택자
기본 문법
CSS는 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다:
```css 선택자 {
속성: 값; 속성: 값;
} ```
예시: ```css h1 {
color: blue; font-size: 24px;
} ```
CSS 적용 방법
CSS를 HTML에 적용하는 세 가지 방법이 있습니다:
1. 인라인 스타일: HTML 요소의 style 속성을 사용 ```html
텍스트
```
2. 내부 스타일 시트: HTML 문서의 <head> 섹션 내 <style> 태그 사용 ```html <head>
<style>
p { color: red; font-size: 16px; }
</style>
</head> ```
3. 외부 스타일 시트: 별도의 CSS 파일을 생성하고 <link> 태그로 연결 (권장) ```html <head>
<link rel="stylesheet" href="styles.css">
</head> ```
선택자 유형
| 선택자 유형 | 예시 | 설명 |
|---|---|---|
| 요소 선택자 | p { } | 특정 HTML 태그를 선택 |
| 클래스 선택자 | .example { } | class 속성이 "example"인 모든 요소를 선택 |
| ID 선택자 | #unique { } | id 속성이 "unique"인 요소를 선택 |
| 속성 선택자 | [type="text"] { } | 특정 속성 값을 가진 요소를 선택 |
| 자손 선택자 | div p { } | div 내의 모든 p 요소를 선택 |
| 자식 선택자 | div > p { } | div의 직계 자식인 p 요소만 선택 |
| 인접 형제 선택자 | h1 + p { } | h1 바로 다음에 오는 p 요소를 선택 |
| 가상 클래스 | a:hover { } | 특정 상태의 요소를 선택 (마우스가 링크 위에 있을 때) |
| 가상 요소 | p::first-line { } | 요소의 특정 부분을 선택 (단락의 첫 번째 줄) |
선택자 우선순위
CSS에서 충돌하는 스타일이 있을 때 적용되는 우선순위는 다음과 같습니다:
- 인라인 스타일 (style 속성)
- ID 선택자 (#example)
- 클래스 선택자 (.example), 속성 선택자 ([type="text"]), 가상 클래스 (:hover)
- 요소 선택자 (p), 가상 요소 (::first-line)
!important 선언은 모든 우선순위를 무시하므로 신중하게 사용해야 합니다.
박스 모델과 레이아웃
CSS 박스 모델
모든 HTML 요소는 박스로 간주되며, 다음 영역으로 구성됩니다:
- 콘텐츠(Content): 텍스트나 이미지가 표시되는 영역
- 패딩(Padding): 콘텐츠와 테두리 사이의 공간
- 테두리(Border): 패딩 주위를 감싸는 선
- 마진(Margin): 테두리 바깥쪽의 공간
```css div {
width: 300px; padding: 20px; border: 5px solid black; margin: 30px;
} ```
box-sizing 속성은 요소의 전체 크기를 계산하는 방법을 결정합니다:
- content-box: 기본값, width/height는 콘텐츠 영역만 포함
- border-box: width/height에 패딩과 테두리까지 포함 (더 직관적)
```css
- {
box-sizing: border-box;
} ```
디스플레이와 포지셔닝
display 속성
display 속성은 요소가 레이아웃에서 어떻게 처리되는지 정의합니다:
| 값 | 설명 |
|---|---|
| block | 항상 새 줄에서 시작하며, 가능한 모든 너비를 차지 (div, p, h1) |
| inline | 줄 바꿈 없이 필요한 만큼의 너비만 차지 (span, a) |
| inline-block | inline처럼 한 줄에 표시되지만 block처럼 width/height 속성 적용 가능 |
| none | 요소를 화면에서 완전히 제거 |
| flex | 유연한 레이아웃 구성 가능 |
| grid | 격자 기반 레이아웃 구성 가능 |
position 속성
position 속성은 요소의 배치 방법을 결정합니다:
| 값 | 설명 |
|---|---|
| static | 기본값, 일반적인 문서 흐름에 따라 배치 |
| relative | 일반 위치를 기준으로 상대적 오프셋 적용 |
| absolute | 가장 가까운 position이 static이 아닌 조상 요소를 기준으로 배치 |
| fixed | 브라우저 창을 기준으로 고정 배치 (스크롤해도 위치 유지) |
| sticky | 스크롤 위치에 따라 relative와 fixed 사이를 전환 |
반응형 디자인과 미디어 쿼리
반응형 웹 디자인은 다양한 화면 크기와 장치에 웹사이트가 적절하게 대응하도록 하는 접근 방식입니다.
미디어 쿼리
미디어 쿼리는 장치의 특성(주로 화면 크기)에 따라 다른 스타일을 적용할 수 있게 합니다:
```css /* 모바일 우선 접근법 */ /* 기본 스타일: 모바일용 */
/* 태블릿 스타일 */ @media (min-width: 768px) {
.container {
width: 750px;
}
}
/* 데스크톱 스타일 */ @media (min-width: 1024px) {
.container {
width: 970px;
}
} ```
뷰포트 설정
반응형 디자인을 위해 HTML 문서에 뷰포트 메타 태그를 추가해야 합니다:
```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ```
Flexbox와 Grid
Flexbox
Flexbox는 일차원(행 또는 열) 레이아웃을 위한 모던 CSS 기술입니다.
```css .container {
display: flex; flex-direction: row; /* row, column, row-reverse, column-reverse */ justify-content: space-between; /* 주축 정렬: flex-start, flex-end, center, space-around, space-between */ align-items: center; /* 교차축 정렬: flex-start, flex-end, center, stretch, baseline */ flex-wrap: wrap; /* 여러 줄에 걸쳐 표시할지 여부: nowrap, wrap, wrap-reverse */
}
.item {
flex: 1; /* flex-grow, flex-shrink, flex-basis의 축약형 */ order: 2; /* 요소의 순서 지정 */
} ```
CSS Grid
Grid는 이차원(행과 열) 레이아웃을 위한 강력한 CSS 시스템입니다.
```css .container {
display: grid; grid-template-columns: 1fr 2fr 1fr; /* 열 크기 지정 */ grid-template-rows: 100px auto; /* 행 크기 지정 */ gap: 20px; /* 격자 사이 간격 */
}
.item {
grid-column: 1 / 3; /* 열 시작/종료 위치 */ grid-row: 1 / 2; /* 행 시작/종료 위치 */
} ```
CSS 변수
CSS 변수(사용자 정의 속성)는 재사용 가능한 값을 저장합니다:
```css
- root {
--primary-color: #3498db; --secondary-color: #2ecc71; --font-size-base: 16px;
}
h1 {
color: var(--primary-color); font-size: calc(var(--font-size-base) * 2);
}
button {
background-color: var(--secondary-color); border: 1px solid var(--primary-color);
} ```
모범 사례
CSS 구조화
- 논리적인 섹션별로 코드 구성 (레이아웃, 타이포그래피, 컬러 등)
- 일관된 네이밍 규칙 사용 (BEM, SMACSS, OOCSS)
- 주석을 통한 코드 문서화
성능 최적화
- 불필요한 선택자 및 복잡한 선택자 피하기
- 속성 단축형 사용 (margin, padding, border 등)
- CSS 스프라이트, 최소화 활용
유지보수성
- CSS 변수를 활용한 테마 관리
- 미디어 쿼리의 체계적 관리
- 스타일 재사용성 고려
학습 자료
- MDN Web Docs - CSS
- W3Schools CSS Tutorial
- CSS-Tricks
- Flexbox Froggy - Flexbox 게임
- Grid Garden - CSS Grid 게임
다음 학습 단계
- HTML 기초: HTML 구조에 대한 이해 심화
- JavaScript 기초: 웹 페이지에 동적 기능 추가
- CSS 전처리기: Sass, Less, PostCSS 학습
- CSS 프레임워크: Bootstrap, Tailwind CSS 사용법
