CSS 기초: 두 판 사이의 차이

기술노트
(컴퓨터 과학 용어 정리 - CSS 기초 추가)
 
편집 요약 없음
 
1번째 줄: 1번째 줄:
= CSS 기초 =
= CSS 기초 =


CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어입니다. HTML이 콘텐츠의 구조를 정의한다면, CSS는 그 구조의 시각적 표현을 담당합니다.
'''CSS'''(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어입니다. HTML이 웹페이지의 구조를 정의한다면, CSS는 시각적 표현을 담당하여 스타일과 레이아웃을 관리합니다.


== CSS 문법 및 선택자 ==
== CSS 기본 문법 ==
 
=== 기본 문법 ===


CSS는 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다:
CSS는 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다:


```css
<syntaxhighlight lang="css">
선택자 {
선택자 {
   속성: 값;
   속성: 값;
   속성: 값;
   속성: 값;
}
}
```
</syntaxhighlight>


예시:
'''예시''':
```css
<syntaxhighlight lang="css">
h1 {
h1 {
   color: blue;
   color: blue;
   font-size: 24px;
   font-size: 24px;
}
}
```
</syntaxhighlight>
 
=== CSS 적용 방법 ===
 
CSS를 HTML에 적용하는 세 가지 방법이 있습니다:


1. '''인라인 스타일''': HTML 요소의 style 속성을 사용
== CSS 적용 방법 ==
```html
<p style="color: red; font-size: 16px;">텍스트</p>
```


2. '''내부 스타일 시트''': HTML 문서의 <head> 섹션 내 <style> 태그 사용
CSS를 HTML 문서에 적용하는 방법에는 세 가지가 있습니다:
```html
<head>
  <style>
    p { color: red; font-size: 16px; }
  </style>
</head>
```


3. '''외부 스타일 시트''': 별도의 CSS 파일을 생성하고 <link> 태그로 연결 (권장)
# '''인라인 스타일''': 요소에 직접 적용
```html
# '''내부 스타일 시트''': HTML 문서 내에 작성
<head>
# '''외부 스타일 시트''': 별도의 CSS 파일로 분리 (권장)
  <link rel="stylesheet" href="styles.css">
</head>
```


=== 선택자 유형 ===
== CSS 선택자 유형 ==


{| class="wikitable"
{| class="wikitable"
! 선택자 유형 !! 예시 !! 설명
! 선택자 유형 !! 예시 !! 설명
|-
|-
| 요소 선택자 || p { } || 특정 HTML 태그를 선택
| 요소 선택자 || <code>p {}</code> || 모든 p 태그를 선택
|-
|-
| 클래스 선택자 || .example { } || class 속성이 "example"인 모든 요소를 선택
| 클래스 선택자 || <code>.example {}</code> || 클래스가 example인 요소 선택
|-
|-
| ID 선택자 || #unique { } || id 속성이 "unique"인 요소를 선택
| ID 선택자 || <code>#unique {}</code> || ID가 unique인 요소 선택
|-
|-
| 속성 선택자 || [type="text"] { } || 특정 속성 값을 가진 요소를 선택
| 속성 선택자 || <code>[type="text"] {}</code> || 속성 값이 text인 요소 선택
|-
|-
| 자손 선택자 || div p { } || div 내의 모든 p 요소를 선택
| 자손 선택자 || <code>div p {}</code> || div 안의 모든 p 요소 선택
|-
|-
| 자식 선택자 || div > p { } || div의 직계 자식인 p 요소만 선택
| 자식 선택자 || <code>div > p {}</code> || div의 직계 자식 p 요소만 선택
|-
|-
| 인접 형제 선택자 || h1 + p { } || h1 바로 다음에 오는 p 요소를 선택
| 인접 형제 선택자 || <code>h1 + p {}</code> || h1 바로 다음의 p 요소 선택
|-
|-
| 가상 클래스 || a:hover { } || 특정 상태의 요소를 선택 (마우스가 링크 위에 있을 때)
| 가상 클래스 || <code>a:hover {}</code> || 마우스를 올렸을 때 선택
|-
|-
| 가상 요소 || p::first-line { } || 요소의 특정 부분을 선택 (단락의 첫 번째 줄)
| 가상 요소 || <code>p::first-line {}</code> || 단락의 첫 번째 줄 선택
|}
|}


=== 선택자 우선순위 ===
== CSS 박스 모델 ==
 
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
모든 HTML 요소는 박스 모델로 구성됩니다:
* {
* '''콘텐츠''' (Content): 내용
  box-sizing: border-box;
* '''패딩''' (Padding): 콘텐츠와 테두리 사이
}
* '''테두리''' (Border): 박스의 경계선
```
* '''마진''' (Margin): 테두리 바깥의 여백


== 디스플레이와 포지셔닝 ==
== 디스플레이와 포지셔닝 ==


=== display 속성 ===
=== display 속성 ===
display 속성은 요소가 레이아웃에서 어떻게 처리되는지 정의합니다:


{| class="wikitable"
{| class="wikitable"
! 값 !! 설명
! 값 !! 설명
|-
|-
| block || 항상 새 줄에서 시작하며, 가능한 모든 너비를 차지 (div, p, h1)
| block || 새 줄에서 시작
|-
|-
| inline || 줄 바꿈 없이 필요한 만큼의 너비만 차지 (span, a)
| inline || 한 줄에서 계속 이어짐
|-
|-
| inline-block || inline처럼 한 줄에 표시되지만 block처럼 width/height 속성 적용 가능
| inline-block || inline처럼 행동하지만 크기 지정 가능
|-
|-
| none || 요소를 화면에서 완전히 제거
| none || 화면에서 숨김
|-
|-
| flex || 유연한 레이아웃 구성 가능
| flex || 유연한 레이아웃
|-
|-
| grid || 격자 기반 레이아웃 구성 가능
| grid || 격자 기반 레이아웃
|}
|}


=== position 속성 ===
=== position 속성 ===
position 속성은 요소의 배치 방법을 결정합니다:


{| class="wikitable"
{| class="wikitable"
! 값 !! 설명
! 값 !! 설명
|-
|-
| static || 기본값, 일반적인 문서 흐름에 따라 배치
| static || 기본값
|-
|-
| relative || 일반 위치를 기준으로 상대적 오프셋 적용
| relative || 현재 위치 기준 상대적 이동
|-
|-
| absolute || 가장 가까운 position이 static이 아닌 조상 요소를 기준으로 배치
| absolute || 가장 가까운 비-static 부모 기준 위치 지정
|-
|-
| fixed || 브라우저 창을 기준으로 고정 배치 (스크롤해도 위치 유지)
| fixed || 브라우저 창에 고정
|-
|-
| sticky || 스크롤 위치에 따라 relative와 fixed 사이를 전환
| sticky || 스크롤 위치에 따라 고정 및 이동
|}
|}


== 반응형 디자인과 미디어 쿼리 ==
== 반응형 디자인과 미디어 쿼리 ==


반응형 웹 디자인은 다양한 화면 크기와 장치에 웹사이트가 적절하게 대응하도록 하는 접근 방식입니다.
반응형 디자인은 다양한 화면 크기에 대응하는 방법입니다.


=== 미디어 쿼리 ===
<syntaxhighlight lang="css">
 
미디어 쿼리는 장치의 특성(주로 화면 크기)에 따라 다른 스타일을 적용할 수 있게 합니다:
 
```css
/* 모바일 우선 접근법 */
/* 기본 스타일: 모바일용 */
 
/* 태블릿 스타일 */
@media (min-width: 768px) {
@media (min-width: 768px) {
   .container {
   .container { width: 750px; }
    width: 750px;
  }
}
 
/* 데스크톱 스타일 */
@media (min-width: 1024px) {
  .container {
    width: 970px;
  }
}
}
```
</syntaxhighlight>
 
=== 뷰포트 설정 ===
 
반응형 디자인을 위해 HTML 문서에 뷰포트 메타 태그를 추가해야 합니다:
 
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```


== Flexbox와 Grid ==
== Flexbox와 Grid ==
192번째 줄: 112번째 줄:
=== Flexbox ===
=== Flexbox ===


Flexbox는 일차원(행 또는 열) 레이아웃을 위한 모던 CSS 기술입니다.
한 방향(행 또는 열) 레이아웃을 쉽게 관리할 수 있습니다.


```css
<syntaxhighlight lang="css">
.container {
.container {
   display: flex;
   display: flex;
  flex-direction: row; /* row, column, row-reverse, column-reverse */
   justify-content: space-between;
   justify-content: space-between; /* 주축 정렬: flex-start, flex-end, center, space-around, space-between */
   align-items: center;
   align-items: center; /* 교차축 정렬: flex-start, flex-end, center, stretch, baseline */
  flex-wrap: wrap; /* 여러 줄에 걸쳐 표시할지 여부: nowrap, wrap, wrap-reverse */
}
}
 
</syntaxhighlight>
.item {
  flex: 1; /* flex-grow, flex-shrink, flex-basis의 축약형 */
  order: 2; /* 요소의 순서 지정 */
}
```


=== CSS Grid ===
=== CSS Grid ===


Grid는 이차원(행과 열) 레이아웃을 위한 강력한 CSS 시스템입니다.
이차원(행과 열) 레이아웃을 관리할 수 있습니다.


```css
<syntaxhighlight lang="css">
.container {
.container {
   display: grid;
   display: grid;
   grid-template-columns: 1fr 2fr 1fr; /* 열 크기 지정 */
   grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px auto; /* 행 크기 지정 */
   gap: 20px;
   gap: 20px; /* 격자 사이 간격 */
}
 
.item {
  grid-column: 1 / 3; /* 열 시작/종료 위치 */
  grid-row: 1 / 2; /* 행 시작/종료 위치 */
}
}
```
</syntaxhighlight>


== CSS 변수 ==
== CSS 변수 ==


CSS 변수(사용자 정의 속성)는 재사용 가능한 값을 저장합니다:
CSS 변수는 값을 쉽게 재사용할 수 있게 합니다.


```css
<syntaxhighlight lang="css">
:root {
:root {
   --primary-color: #3498db;
   --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-base: 16px;
}
}


h1 {
h1 { color: var(--primary-color); }
  color: var(--primary-color);
</syntaxhighlight>
  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 스프라이트, 최소화 활용


=== 유지보수성 ===
* [https://developer.mozilla.org/ko/docs/Web/CSS MDN CSS 문서]
* CSS 변수를 활용한 테마 관리
* [https://www.w3schools.com/css/ W3Schools CSS]
* 미디어 쿼리의 체계적 관리
* [https://css-tricks.com CSS-Tricks]
* 스타일 재사용성 고려


== 학습 자료 ==
== 다음 단계 ==
* [https://developer.mozilla.org/ko/docs/Web/CSS MDN Web Docs - CSS]
* [https://www.w3schools.com/css/ W3Schools CSS Tutorial]
* [https://css-tricks.com/ CSS-Tricks]
* [https://flexboxfroggy.com/ Flexbox Froggy] - Flexbox 게임
* [https://cssgridgarden.com/ Grid Garden] - CSS Grid 게임


== 다음 학습 단계 ==
* [[HTML 기초|HTML 기초]]
* [[HTML 기초|HTML 기초]]: HTML 구조에 대한 이해 심화
* [[JavaScript 기초|JavaScript 기초]]
* [[JavaScript 기초|JavaScript 기초]]: 웹 페이지에 동적 기능 추가
* [[CSS 프레임워크|CSS 프레임워크]]
* [[CSS 전처리기|CSS 전처리기]]: Sass, Less, PostCSS 학습
* [[CSS 프레임워크|CSS 프레임워크]]: Bootstrap, Tailwind CSS 사용법


[[분류:웹 개발]]
[[분류:웹 개발]]
[[분류:프론트엔드]]
[[분류:프론트엔드]]
[[분류:CSS]]
[[분류:CSS]]

2025년 4월 26일 (토) 12:54 기준 최신판

CSS 기초

CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어입니다. HTML이 웹페이지의 구조를 정의한다면, CSS는 시각적 표현을 담당하여 스타일과 레이아웃을 관리합니다.

CSS 기본 문법

CSS는 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다: 

선택자 {
  속성: 값;
  속성: 값;
}

예시: 

h1 {
  color: blue;
  font-size: 24px;
}

CSS 적용 방법

CSS를 HTML 문서에 적용하는 방법에는 세 가지가 있습니다:

  1. 인라인 스타일: 요소에 직접 적용
  2. 내부 스타일 시트: HTML 문서 내에 작성
  3. 외부 스타일 시트: 별도의 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); }

모범 사례

  • 논리적 코드 구조
  • 선택자의 간결성 유지
  • 변수와 미디어 쿼리의 적극 활용

추천 학습 자료

다음 단계

원본 주소 "https://technote.wiki/index.php?title=CSS_기초&oldid=618"