CSS : 웹페이지를 아름답게 꾸미는 법

CSS(Cascading Style Sheets)는 HTML로 만들어진 문서의 스타일(색상, 레이아웃, 폰트 등)을 정의하는 언어입니다.

HTML이 "무엇(What)"인지 정의한다면, CSS는 "어떻게(How)" 보일지를 결정합니다.

1. CSS의 기본 문법

CSS는 선택자(Selector)와 선언(Declaration)으로 구성됩니다.

/* 선택자 */
h1 {
    color: red;        /* 속성: 값; */
    font-size: 20px;   /* 속성: 값; */
}

선택자(Selector): 스타일을 적용할 HTML 요소를 선택합니다. (위 예시에서는 h1)
속성(Property): 변경하고 싶은 스타일의 종류입니다. (예: color, font-size)
값(Value): 해당 속성에 적용할 구체적인 값입니다. (예: red, 20px)

2. HTML에 CSS 적용하기

가장 권장되는 방법은 외부 파일(.css)로 분리하는 것입니다.

외부 스타일 시트 (External Style Sheet)

HTML의 <head> 태그 안에 <link> 태그를 사용하여 연결합니다.

<head>
    <link rel="stylesheet" href="style.css">
</head>

Tip: 실무에서는 유지보수를 위해 99% 이 방식을 사용합니다. HTML과 디자인 코드를 분리하는 것이 '스마트'한 개발 방식입니다.

3. 핵심 선택자 (Selectors)

어떤 요소에 디자인을 입힐지 '콕 집어내는' 방법입니다.

① 태그 선택자

특정 태그 전체에 스타일을 적용합니다.

p {
    color: gray;
}

② 클래스 선택자 (`.`) - 가장 많이 사용!

특정 별명(Class)을 가진 요소들을 선택합니다. 점(.)으로 시작합니다. 여러 요소에 재사용 가능합니다.

<button class="btn-primary">버튼 1</button>
<button class="btn-primary">버튼 2</button>

/* CSS */
.btn-primary {
    background-color: blue;
    color: white;
}

③ 아이디 선택자 (`#`)

페이지 내에서 유일한 요소 하나를 지정할 때 씁니다. 샵(#)으로 시작합니다.

<div id="sidebar">...</div>

/* CSS */
#sidebar {
    width: 200px;
}

종류	기호	용도	비중
태그	`div`	기본 스타일 잡을 때	낮음
클래스	`.box`	반복되는 스타일 (버튼, 리스트 등)	매우 높음
아이디	`#nav`	유일한 레이아웃 구조 잡을 때	보통

4. 박스 모델 (Box Model) - 필수 개념

모든 HTML 요소는 직사각형의 '박스' 형태를 가집니다. 이 박스는 4가지 영역으로 구성됩니다.

Content: 텍스트나 이미지가 들어있는 실제 내용물
Padding: 내용물과 테두리 사이의 안쪽 여백
Border: 박스의 테두리
Margin: 테두리 바깥의 외부 여백 (다른 요소와의 간격)

div {
    width: 100px;      /* 내용물 너비 */
    padding: 20px;     /* 안쪽 살 */
    border: 1px solid black; /* 테두리 */
    margin: 30px;      /* 옆 요소와의 거리 */
}

비유: * Content: 액자 속 그림 * Padding: 그림과 액자 프레임 사이의 흰 매트 * Border: 액자 프레임 * Margin: 벽에 걸린 액자와 액자 사이의 간격

5. 자주 쓰는 스타일 속성

텍스트 관련

color: 글자 색상 (예: #ff0000, rgb(0,0,0), blue)
font-size: 글자 크기 (16px, 1.5rem)
font-weight: 글자 굵기 (bold, 400, 700)
text-align: 정렬 (left, center, right)

크기 및 배경

width, height: 너비와 높이
background-color: 배경색
background-image: 배경 이미지

레이아웃 (배치)

과거에는 float를 썼지만, 요즘은 Flexbox를 주로 사용합니다.

.container {
    display: flex;       /* 자식 요소들을 가로로 배치 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center;     /* 세로 중앙 정렬 */
}

마무리

CSS는 단순해 보이지만, margin 겹침 현상이나 position 속성 등 깊이 파고들수록 복잡해집니다. 처음에는 "박스 모델(Padding vs Margin)"과 "클래스 선택자 사용법"만 확실히 익혀도 충분합니다.