CSS로 색과 모양 입히기

HTML이 페이지의 뼈대라면, CSS는 그 뼈대에 입히는 옷입니다. 같은 HTML이라도 CSS에 따라 전혀 다른 모습이 됩니다. 이번 챕터에서는 CSS를 직접 술술 쓰는 것이 목표가 아니라, AI가 만든 CSS를 '읽고 어디를 고칠지' 짚어내는 눈을 기릅니다.

CSS를 붙이는 세 가지 방법

같은 스타일도 적는 위치가 세 가지입니다. 보통은 세 번째(외부 파일)가 가장 깔끔합니다.

• 인라인 — 태그에 직접: <p style="color:red">. 빠르지만 지저분해지기 쉽습니다.
• 내부 — 문서 안 <style> 태그에 모아 적기.
• 외부 — 별도 style.css 파일을 만들고 <link>로 연결. 여러 페이지가 한 파일을 공유할 수 있어 가장 권장됩니다.

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

규칙의 구조: 선택자 + 속성 + 값

CSS 한 덩어리를 규칙(rule)이라 부릅니다. '누구를(선택자) 어떻게(속성:값)' 꾸밀지 적습니다.

p {
  color: #333;        /* 글자색 */
  font-size: 16px;    /* 글자 크기 */
}

여기서 p가 선택자, 중괄호 안의 color가 속성, #333이 값입니다. 각 줄은 세미콜론(;)으로 끝납니다.

대상을 고르는 세 가지 선택자

클래스는 여러 요소에 같은 스타일을 줄 때, 아이디는 페이지에 하나뿐인 특정 요소에 씁니다.

자주 보는 속성들

• color / background — 글자색 / 배경색
• font-size / font-weight — 글자 크기 / 굵기
• padding / margin — 안쪽 여백 / 바깥쪽 여백
• border / border-radius — 테두리 / 모서리 둥글기
• text-align — 글자 정렬(left·center·right)

박스 모델 한 장

모든 요소는 사각형 상자입니다. 안쪽부터 내용 → padding(안쪽 여백) → border(테두리) → margin(바깥쪽 여백) 순으로 감싸여 있습니다. 여백이 이상할 때는 padding과 margin 중 무엇인지부터 확인하세요.