CSS3

작성자

익명

작성일

2026.07.22

조회수

버전

CSS3

1. 개요

CSS3(Cascading Style Sheets Level 3)는 웹 페이지의 시각적 표현을 정의하는 스타일 시트 언어의 세 번째 주요 표준 단계로, HTML 문서의 구조와 디자인을 완전히 분리하여 웹 페이지의 레이아웃, 색상, 폰트 및 다양한 시각적 효과를 제어하는 역할을 합니다.

CSS3는 이전 버전인 CSS2.1과 달리 하나의 거대한 명세서가 아닌 여러 개의 독립적인 모듈(Module) 형태로 분리되어 개발 및 업데이트가 이루어집니다. CSS3 이후로는 전체 버전 번호를 매기는 방식 대신, 각 모듈별로 레벨(Level 3, 4 등)을 부여하여 독립적으로 발전시키고 있습니다. 이는 새로운 기능의 추가와 표준화 속도를 높여 웹 표준의 유연성을 확보하고, 브라우저 제조사들이 각 기능을 단계적으로 구현할 수 있도록 하는 데 큰 의미가 있습니다.

2. 주요 특징 및 핵심 모듈

CSS3의 가장 큰 특징은 모듈화(Modularization)입니다. 모든 기능을 한 번에 업데이트하는 대신, 선택자(Selectors), 박스 모델(Box Model), 배경(Backgrounds) 등 기능별로 모듈을 나누어 관리합니다. 이를 통해 특정 기능의 업데이트가 전체 표준에 영향을 주지 않고 독립적으로 발전할 수 있습니다.

강화된 선택자 (Advanced Selectors)

CSS3에서는 HTML 구조를 변경하지 않고도 특정 요소를 정밀하게 선택할 수 있는 강력한 선택자들이 도입되었습니다.

속성 선택자: 특정 속성을 가졌거나 특정 값과 일치하는 요소를 선택합니다. (예: [type="text"])
가상 클래스: 요소의 특정 상태나 구조적 위치를 선택합니다. (예: :nth-child(n), :not())
가상 요소: 요소의 특정 부분에 스타일을 적용하거나 가상의 콘텐츠를 삽입합니다. (예: ::before, ::after)

/* 속성 선택자: type이 text인 input 요소만 선택 */
input[type="text"] { border: 1px solid blue; }

/* 가상 클래스: 리스트의 짝수 번째 항목만 배경색 변경 */
li:nth-child(even) { background-color: #eee; }

/* 가상 요소: 요소의 앞부분에 아이콘이나 텍스트 추가 */
.warning::before { content: "⚠️ "; }

CSS2 vs CSS3 주요 변경 사항 비교

구분	CSS2 / CSS2.1	CSS3
구조	단일 명세서 (Monolithic)	모듈형 구조 (Modular)
디자인	단순한 색상 및 테두리	둥근 모서리, 그림자, 그라데이션 지원
레이아웃	Float, Table 기반 레이아웃	Flexbox, CSS Grid 도입
동적 효과	JavaScript 의존도가 높음	Transition, Animation 내장
미디어 대응	고정 너비 중심	미디어 쿼리를 통한 반응형 디자인
텍스트 제어	기본적인 정렬 및 크기	웹 폰트(@font-face) 및 고급 타이포그래피

3. 시각적 효과 및 디자인 기능

CSS3는 과거 이미지 파일로만 구현 가능했던 복잡한 디자인 요소들을 순수 코드로 구현할 수 있게 하여, 웹 페이지의 로딩 속도를 개선하고 유지보수성을 높였습니다.

border-radius: 요소의 모서리를 둥글게 처리합니다.
box-shadow: 요소의 외곽 또는 내부에 그림자 효과를 부여합니다.
Linear/Radial Gradient: 색상이 점진적으로 변하는 그라데이션 효과를 생성합니다.
opacity: 요소의 투명도를 0(완전 투명)에서 1(완전 불투명) 사이로 조절합니다.
box-sizing: 박스 모델의 크기 계산 방식을 정의합니다. 특히 border-box 설정 시, 패딩과 테두리가 요소의 전체 너비와 높이에 포함되어 레이아웃 계산이 훨씬 직관적이고 쉬워집니다.

기본 디자인 속성 적용 예시

.card {
  width: 300px;
  padding: 20px;
  box-sizing: border-box; /* 패딩과 테두리를 너비에 포함 */
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
  border: 1px solid #ddd;
}

4. 레이아웃 시스템 (Flexbox & Grid)

현대적인 웹 레이아웃은 더 이상 float나 table에 의존하지 않고, 목적에 따라 Flexbox와 CSS Grid를 혼용하여 사용합니다.

Flexbox (Flexible Box Layout)

1차원 레이아웃 모델로, 가로 또는 세로 중 하나의 축을 기준으로 요소를 배치하는 데 최적화되어 있습니다. 주로 내비게이션 바, 리스트 정렬 등 작은 단위의 컴포넌트 배치에 사용됩니다.

코드 설명: - display: flex: 해당 요소를 플렉스 컨테이너로 설정합니다. - justify-content: space-between: 아이템들을 양 끝으로 밀어내고 그 사이 간격을 동일하게 배분합니다. - align-items: center: 교차축(수직)을 기준으로 아이템들을 중앙에 정렬합니다.

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

CSS Grid (Grid Layout)

2차원 레이아웃 모델로, 행(Row)과 열(Column)을 동시에 정의하여 페이지 전체의 복잡한 구조를 설계하는 데 최적화되어 있습니다.

코드 설명: - display: grid: 해당 요소를 그리드 컨테이너로 설정합니다. - grid-template-columns: 열의 너비를 정의합니다. 1fr은 가용 공간의 비율을 의미합니다. - grid-template-rows: 행의 높이를 정의합니다. auto는 콘텐츠 크기에 맞게 조절됩니다. - gap: 그리드 아이템 사이의 간격을 설정합니다.

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

5. 애니메이션 및 전환 효과

CSS3는 자바스크립트 없이도 요소의 상태 변화를 부드럽게 처리하거나 복잡한 움직임을 구현할 수 있는 기능을 제공합니다. 이는 브라우저의 GPU 가속을 활용하므로 성능상 이점이 큽니다.

Transition: 속성 값이 변경될 때 지정된 시간 동안 서서히 변화하게 합니다.
Animation (@keyframes): 시작과 끝, 그리고 중간 단계(Keyframe)를 정의하여 복잡한 반복 동작을 구현합니다.

호버(Hover) 애니메이션 예시

코드 설명: - transition: 배경색은 0.3초 동안 부드럽게, 변형(transform)은 0.2초 동안 변화하도록 설정합니다. - transform: scale(1.1): 요소의 크기를 1.1배로 확대합니다. - @keyframes pulse: 0% $\rightarrow$ 50% $\rightarrow$ 100% 단계로 크기가 커졌다 작아지는 애니메이션을 정의합니다.

.btn {
  background-color: #3498db;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
  background-color: #2980b9;
  transform: scale(1.1);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pulse-element {
  animation: pulse 2s infinite;
}

6. 반응형 웹 디자인과 미디어 쿼리

반응형 웹 디자인(Responsive Web Design)은 하나의 HTML 소스로 데스크톱, 태블릿, 모바일 등 다양한 화면 크기에 최적화된 레이아웃을 제공하는 설계 방식입니다. 이를 가능하게 하는 핵심 기술이 미디어 쿼리(@media)입니다.

브레이크포인트(Breakpoint) 설정 예시

브레이크포인트란 레이아웃이 변경되는 특정 화면 너비 지점을 의미합니다.

/* 기본 스타일 (모바일 우선 설계: Mobile First) */
.container {
  width: 100%;
  padding: 10px;
  background-color: lightblue;
}

/* 태블릿: 화면 너비가 768px 이상일 때 적용 */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
    background-color: lightgreen;
  }
}

/* 데스크톱: 화면 너비가 1024px 이상일 때 적용 */
@media (min-width: 1024px) {
  .container {
    width: 960px;
    background-color: lightcoral;
  }
}

7. CSS 변수 및 최신 함수

최신 CSS 표준은 프로그래밍 언어와 유사한 변수 개념과 동적 계산 함수를 도입하여 코드의 재사용성과 유연성을 극대화하고 있습니다.

CSS 변수 (Custom Properties)

-- 접두사를 사용하여 변수를 정의하고, var() 함수로 호출합니다. 테마 변경(다크 모드 등) 구현 시 매우 효율적입니다.

:root {
  --main-color: #ff5722;
  --base-padding: 16px;
}

.header {
  color: var(--main-color);
  padding: var(--base-padding);
}

8. 브라우저 호환성 및 벤더 프리픽스

웹 브라우저마다 표준을 구현하는 시점과 방식이 다르기 때문에, 동일한 CSS 속성이라도 브라우저별로 다르게 작동할 수 있습니다.

벤더 프리픽스 (Vendor Prefix)

표준이 확정되기 전, 브라우저 제조사가 실험적인 기능을 구현하기 위해 속성 앞에 붙이는 접두사입니다. * -webkit-: Chrome, Safari, Edge (최신) * -moz-: Firefox * -ms-: Internet Explorer

호환성 확인 방법

특정 속성이 어떤 브라우저 버전부터 지원되는지 확인하기 위해 다음 사이트를 활용하는 것이 권장됩니다. * Can I Use: 가장 널리 쓰이는 브라우저 호환성 체크 사이트로, 속성별 지원 현황을 표 형태로 제공합니다. * MDN Web Docs: 상세한 API 명세 및 브라우저 호환성 표를 제공하는 개발자 문서입니다.

📝 마크다운 원본

이 문서의 마크다운 원본 내용입니다.

# CSS3

## 1. 개요
**CSS3(Cascading Style Sheets Level 3)**는 웹 페이지의 시각적 표현을 정의하는 스타일 시트 언어의 세 번째 주요 표준 단계로, HTML 문서의 구조와 디자인을 완전히 분리하여 웹 페이지의 레이아웃, 색상, 폰트 및 다양한 시각적 효과를 제어하는 역할을 합니다.

CSS3는 이전 버전인 CSS2.1과 달리 하나의 거대한 명세서가 아닌 여러 개의 독립적인 **모듈(Module)** 형태로 분리되어 개발 및 업데이트가 이루어집니다. CSS3 이후로는 전체 버전 번호를 매기는 방식 대신, 각 모듈별로 레벨(Level 3, 4 등)을 부여하여 독립적으로 발전시키고 있습니다. 이는 새로운 기능의 추가와 표준화 속도를 높여 웹 표준의 유연성을 확보하고, 브라우저 제조사들이 각 기능을 단계적으로 구현할 수 있도록 하는 데 큰 의미가 있습니다.

## 2. 주요 특징 및 핵심 모듈
CSS3의 가장 큰 특징은 **모듈화(Modularization)**입니다. 모든 기능을 한 번에 업데이트하는 대신, 선택자(Selectors), 박스 모델(Box Model), 배경(Backgrounds) 등 기능별로 모듈을 나누어 관리합니다. 이를 통해 특정 기능의 업데이트가 전체 표준에 영향을 주지 않고 독립적으로 발전할 수 있습니다.

### 강화된 선택자 (Advanced Selectors)
CSS3에서는 HTML 구조를 변경하지 않고도 특정 요소를 정밀하게 선택할 수 있는 강력한 선택자들이 도입되었습니다.

*   **속성 선택자**: 특정 속성을 가졌거나 특정 값과 일치하는 요소를 선택합니다. (예: `[type="text"]`)
*   **가상 클래스**: 요소의 특정 상태나 구조적 위치를 선택합니다. (예: `:nth-child(n)`, `:not()`)
*   **가상 요소**: 요소의 특정 부분에 스타일을 적용하거나 가상의 콘텐츠를 삽입합니다. (예: `::before`, `::after`)

```css
/* 속성 선택자: type이 text인 input 요소만 선택 */
input[type="text"] { border: 1px solid blue; }

/* 가상 클래스: 리스트의 짝수 번째 항목만 배경색 변경 */
li:nth-child(even) { background-color: #eee; }

/* 가상 요소: 요소의 앞부분에 아이콘이나 텍스트 추가 */
.warning::before { content: "⚠️ "; }
```

### CSS2 vs CSS3 주요 변경 사항 비교

| 구분 | CSS2 / CSS2.1 | CSS3 |
| :--- | :--- | :--- |
| **구조** | 단일 명세서 (Monolithic) | 모듈형 구조 (Modular) |
| **디자인** | 단순한 색상 및 테두리 | 둥근 모서리, 그림자, 그라데이션 지원 |
| **레이아웃** | Float, Table 기반 레이아웃 | Flexbox, CSS Grid 도입 |
| **동적 효과** | JavaScript 의존도가 높음 | Transition, Animation 내장 |
| **미디어 대응** | 고정 너비 중심 | 미디어 쿼리를 통한 반응형 디자인 |
| **텍스트 제어** | 기본적인 정렬 및 크기 | 웹 폰트(@font-face) 및 고급 타이포그래피 |

## 3. 시각적 효과 및 디자인 기능
CSS3는 과거 이미지 파일로만 구현 가능했던 복잡한 디자인 요소들을 순수 코드로 구현할 수 있게 하여, 웹 페이지의 로딩 속도를 개선하고 유지보수성을 높였습니다.

*   **border-radius**: 요소의 모서리를 둥글게 처리합니다.
*   **box-shadow**: 요소의 외곽 또는 내부에 그림자 효과를 부여합니다.
*   **Linear/Radial Gradient**: 색상이 점진적으로 변하는 그라데이션 효과를 생성합니다.
*   **opacity**: 요소의 투명도를 0(완전 투명)에서 1(완전 불투명) 사이로 조절합니다.
*   **box-sizing**: 박스 모델의 크기 계산 방식을 정의합니다. 특히 `border-box` 설정 시, 패딩과 테두리가 요소의 전체 너비와 높이에 포함되어 레이아웃 계산이 훨씬 직관적이고 쉬워집니다.

### 기본 디자인 속성 적용 예시
```css
.card {
  width: 300px;
  padding: 20px;
  box-sizing: border-box; /* 패딩과 테두리를 너비에 포함 */
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
  border: 1px solid #ddd;
}
```

## 4. 레이아웃 시스템 (Flexbox & Grid)
현대적인 웹 레이아웃은 더 이상 `float`나 `table`에 의존하지 않고, 목적에 따라 **Flexbox**와 **CSS Grid**를 혼용하여 사용합니다.

### Flexbox (Flexible Box Layout)
1차원 레이아웃 모델로, 가로 또는 세로 중 하나의 축을 기준으로 요소를 배치하는 데 최적화되어 있습니다. 주로 내비게이션 바, 리스트 정렬 등 작은 단위의 컴포넌트 배치에 사용됩니다.

**코드 설명:**
- `display: flex`: 해당 요소를 플렉스 컨테이너로 설정합니다.
- `justify-content: space-between`: 아이템들을 양 끝으로 밀어내고 그 사이 간격을 동일하게 배분합니다.
- `align-items: center`: 교차축(수직)을 기준으로 아이템들을 중앙에 정렬합니다.

```css
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
```

### CSS Grid (Grid Layout)
2차원 레이아웃 모델로, 행(Row)과 열(Column)을 동시에 정의하여 페이지 전체의 복잡한 구조를 설계하는 데 최적화되어 있습니다.

**코드 설명:**
- `display: grid`: 해당 요소를 그리드 컨테이너로 설정합니다.
- `grid-template-columns`: 열의 너비를 정의합니다. `1fr`은 가용 공간의 비율을 의미합니다.
- `grid-template-rows`: 행의 높이를 정의합니다. `auto`는 콘텐츠 크기에 맞게 조절됩니다.
- `gap`: 그리드 아이템 사이의 간격을 설정합니다.

```css
.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}
```

## 5. 애니메이션 및 전환 효과
CSS3는 자바스크립트 없이도 요소의 상태 변화를 부드럽게 처리하거나 복잡한 움직임을 구현할 수 있는 기능을 제공합니다. 이는 브라우저의 GPU 가속을 활용하므로 성능상 이점이 큽니다.

*   **Transition**: 속성 값이 변경될 때 지정된 시간 동안 서서히 변화하게 합니다.
*   **Animation (@keyframes)**: 시작과 끝, 그리고 중간 단계(Keyframe)를 정의하여 복잡한 반복 동작을 구현합니다.

### 호버(Hover) 애니메이션 예시
**코드 설명:**
- `transition`: 배경색은 0.3초 동안 부드럽게, 변형(transform)은 0.2초 동안 변화하도록 설정합니다.
- `transform: scale(1.1)`: 요소의 크기를 1.1배로 확대합니다.
- `@keyframes pulse`: 0% $\rightarrow$ 50% $\rightarrow$ 100% 단계로 크기가 커졌다 작아지는 애니메이션을 정의합니다.

```css
.btn {
  background-color: #3498db;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
  background-color: #2980b9;
  transform: scale(1.1);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pulse-element {
  animation: pulse 2s infinite;
}
```

## 6. 반응형 웹 디자인과 미디어 쿼리
**반응형 웹 디자인(Responsive Web Design)**은 하나의 HTML 소스로 데스크톱, 태블릿, 모바일 등 다양한 화면 크기에 최적화된 레이아웃을 제공하는 설계 방식입니다. 이를 가능하게 하는 핵심 기술이 **미디어 쿼리(@media)**입니다.

### 브레이크포인트(Breakpoint) 설정 예시
브레이크포인트란 레이아웃이 변경되는 특정 화면 너비 지점을 의미합니다.

```css
/* 기본 스타일 (모바일 우선 설계: Mobile First) */
.container {
  width: 100%;
  padding: 10px;
  background-color: lightblue;
}

/* 태블릿: 화면 너비가 768px 이상일 때 적용 */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
    background-color: lightgreen;
  }
}

/* 데스크톱: 화면 너비가 1024px 이상일 때 적용 */
@media (min-width: 1024px) {
  .container {
    width: 960px;
    background-color: lightcoral;
  }
}
```

## 7. CSS 변수 및 최신 함수
최신 CSS 표준은 프로그래밍 언어와 유사한 변수 개념과 동적 계산 함수를 도입하여 코드의 재사용성과 유연성을 극대화하고 있습니다.

### CSS 변수 (Custom Properties)
`--` 접두사를 사용하여 변수를 정의하고, `var()` 함수로 호출합니다. 테마 변경(다크 모드 등) 구현 시 매우 효율적입니다.

```css
:root {
  --main-color: #ff5722;
  --base-padding: 16px;
}

.header {
  color: var(--main-color);
  padding: var(--base-padding);
}
```

### 최신 CSS 함수
*   **calc()**: 서로 다른 단위(예: `%`와 `px`)를 혼합하여 계산할 수 있게 합니다.
    *   예: `width: calc(100% - 50px);`
*   **clamp()**: 최솟값, 기본값, 최댓값을 설정하여 유동적인 크기를 제한합니다.
    *   예: `font-size: clamp(1rem, 2.5vw, 2rem);`
*   **min() / max()**: 여러 값 중 가장 작은 값 또는 큰 값을 선택합니다.

## 8. 브라우저 호환성 및 벤더 프리픽스
웹 브라우저마다 표준을 구현하는 시점과 방식이 다르기 때문에, 동일한 CSS 속성이라도 브라우저별로 다르게 작동할 수 있습니다.

### 벤더 프리픽스 (Vendor Prefix)
표준이 확정되기 전, 브라우저 제조사가 실험적인 기능을 구현하기 위해 속성 앞에 붙이는 접두사입니다.
*   `-webkit-`: Chrome, Safari, Edge (최신)
*   `-moz-`: Firefox
*   `-ms-`: Internet Explorer

### 호환성 확인 방법
특정 속성이 어떤 브라우저 버전부터 지원되는지 확인하기 위해 다음 사이트를 활용하는 것이 권장됩니다.
*   [Can I Use](https://caniuse.com): 가장 널리 쓰이는 브라우저 호환성 체크 사이트로, 속성별 지원 현황을 표 형태로 제공합니다.
*   [MDN Web Docs](https://developer.mozilla.org): 상세한 API 명세 및 브라우저 호환성 표를 제공하는 개발자 문서입니다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(gemma-4-31b)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

위키너와나

CSS3

CSS3

1. 개요

2. 주요 특징 및 핵심 모듈

강화된 선택자 (Advanced Selectors)

CSS2 vs CSS3 주요 변경 사항 비교

3. 시각적 효과 및 디자인 기능

기본 디자인 속성 적용 예시

4. 레이아웃 시스템 (Flexbox & Grid)

Flexbox (Flexible Box Layout)

CSS Grid (Grid Layout)

5. 애니메이션 및 전환 효과

호버(Hover) 애니메이션 예시

6. 반응형 웹 디자인과 미디어 쿼리

브레이크포인트(Breakpoint) 설정 예시

7. CSS 변수 및 최신 함수

CSS 변수 (Custom Properties)

최신 CSS 함수

8. 브라우저 호환성 및 벤더 프리픽스

벤더 프리픽스 (Vendor Prefix)

호환성 확인 방법

📝 마크다운 원본

🤔 AI의 사고 과정

이 AI 생성 콘텐츠가 도움이 되었나요?