02. CSS: 꾸미기와 배치

"HTML이 뼈대라면, CSS는 옷과 화장입니다. 하지만 엉덩이에 모자를 쓸 수는 없죠. CSS는 '위치 잡기'가 절반입니다."

CSS는 Cascading Style Sheets의 약자입니다.

웹사이트를 집을 짓는 과정에 비유한다면, HTML이 건물의 벽과 기둥 같은 구조를 만드는 역할이라면, CSS는 그 벽에 페인트를 칠하고 가구를 배치하는 인테리어(디자인) 역할을 담당합니다.

주요 특징

디자인 분리: HTML로부터 글꼴, 색상, 레이아웃 등 시각적 요소를 분리하여 관리할 수 있게 해줍니다.
재사용성: 하나의 CSS 파일만 수정하면 연결된 여러 웹 페이지의 디자인을 한꺼번에 바꿀 수 있어 효율적입니다.
반응형 웹: 화면 크기에 따라 디자인을 다르게 보여주는 기술(미디어 쿼리 등)을 통해 모바일과 PC 모두에 최적화된 화면을 만듭니다.

왜 "Cascading(계단식)"인가요?

'Cascading'은 위에서 아래로 흐르는 폭포라는 뜻을 가지고 있습니다. CSS에서 이 단어가 붙은 이유는 여러 규칙이 충돌할 때 우선순위에 따라 어떤 스타일을 적용할지 결정하는 방식 때문입니다.

나중에 선언된 스타일이 우선합니다.
더 구체적으로 지정된 스타일이 우선합니다.
부모 요소의 스타일이 자식 요소에게 '상속'되어 내려갑니다.

1. 문법: 누가(Who) + 어떻게(How)

CSS 문법은 매우 단순합니다. "누구를 찍어서, 어떻게 바꿀래?" 가 전부입니다.

/* 선택자 (Who) */
h1 {
    /* 속성 (How) */
    color: red;
    font-size: 20px;
}

1-1. Selector: 핀셋으로 집어내기

HTML 문서에 있는 수많은 요소 중 내가 원하는 것만 콕 집어내는 기술입니다.

태그 선택자 (h1): "모든 제목(h1) 다 나와." (너무 광범위함)
클래스 선택자 (.btn): ".btn이라는 명찰(Class) 단 녀석들만 나와." (가장 많이 씀)
아이디 선택자 (#login): "#login이라는 주민번호(ID) 가진 녀석 나와." (딱 하나만 존재)

1-2. Inheritance: 부모의 유전 (DNA)

"스타일은 흐르는 물처럼 아래로 내려갑니다 (Cascading)." 부모 태그(<body>)에 color: black을 주면, 그 안에 있는 자식 태그(<div>, <p>)들도 자동으로 검은색이 됩니다.

장점: 일일이 설정할 필요가 없어 편합니다.
주의: 자식이 "난 싫어! 빨간색 할래!" 하고 직접 선언(color: red)하면, 자식의 고집(우선순위)이 이깁니다.
AI 팁: AI에게 "전체 폰트는 굴림체로 해줘"라고 하면, AI는 똑똑하게 가장 상위 부모(body)에 폰트를 적용할 것입니다.

2. The Box Model: 모든 것은 네모다

이것만 알면 CSS의 80%를 이해한 것입니다. 웹 브라우저에서 모든 요소(글자, 그림, 버튼)는 사실 투명한 직사각형 상자 안에 들어있습니다.

요소	비유 (택배 박스)	설명
Content	선물 본품 🎁	실제 글자나 이미지가 들어있는 영역
Padding	뽁뽁이 🫧	내용물과 박스 테두리 사이의 안쪽 여백 (뚱뚱해짐)
Border	박스 종이 📦	눈에 보이는 테두리 선
Margin	거리두기 ↔️	박스와 옆 박스 사이의 바깥 여백 (밀어냄)

Visible Thinking: "버튼이 너무 작아 보이면 Padding(뽁뽁이)을 넣어서 빵빵하게 만들고, 버튼 사이가 너무 붙었으면 Margin(거리두기)을 줘서 띄워야 합니다."

3. Layout: 가로 배치와 세로 배치

HTML은 기본적으로 '위에서 아래로' 쌓입니다. 하지만 우리는 메뉴바나 카드 리스트처럼 '옆으로(가로)' 배치하고 싶을 때가 많습니다. 이때 등장하는 구세주가 있습니다.

Flexbox (유연한 상자)

역할: "얘네들 한 줄로 쫙 세워줘." (1차원 배치)
AI Prompt: "이 div 안에 있는 메뉴들을 가로(Row)로 배치하고, 양옆으로 균등하게(Space-between) 벌려줘."

Grid (격자)

역할: "바둑판처럼 3x3으로 배치해줘." (2차원 배치)
AI Prompt: "사진 갤러리를 만들 건데, 모바일에서는 1줄, PC에서는 3열(Column) 그리드로 보여줘."

3-1. Responsive Design: 화면에 맞춰 변신 (Transformer)

"웹사이트는 종이책이 아니라 고무판입니다." PC 모니터는 넓지만, 스마트폰 화면은 좁습니다. 그래서 CSS에는 "조건문(Media Query)"이 있습니다.

AI Prompt: "모바일에서는 메뉴를 세로로 보여주고, PC 화면에서는 가로로 넓게 보여줘."

💡 Pro Tip: 요즘 트렌드, "Tailwind CSS"가 뭔가요?

CSS를 공부하다 보면 Tailwind(테일윈드)라는 말을 자주 듣게 될 것입니다. 초보자가 당장 배울 필요는 없지만, "AI가 가장 좋아하는 도구"라는 점은 기억해두면 좋습니다.

1. CSS계의 레고 블록 🧱

우리가 방금 배운 방식(Standard CSS)은 처음부터 옷을 직접 재단해서 만드는 '맞춤 정장' 방식입니다. 반면, Tailwind는 이미 만들어진 레고 블록(부품)을 조립하는 방식입니다.

기존 CSS: 파일을 따로 만들고 margin: 10px; color: blue; 라고 하나씩 작성.
Tailwind: HTML 태그 안에 class="m-2 text-blue"라고 짧게 적으면 끝.

2. 왜 AI 시대에 떴을까? 🤖

AI에게 코드를 시킬 때, CSS 파일을 따로 만들라고 하면 실수할 때가 많습니다. 하지만 Tailwind를 쓰면 HTML 파일 한 곳에 모양과 내용을 다 적을 수 있어서, AI가 훨씬 빠르고 정확하게 코드를 짜줍니다.

결론: 지금은 기본 원리(Margin, Flex 등)에 집중하세요. 원리를 알면 나중에 AI와 함께 Tailwind를 쓰는 건 식은 죽 먹기입니다!

4. AI Native Styling Workflow

우리는 색상 코드(#FF5733)를 외우지 않습니다. 픽셀(px) 단위와 싸우지도 않습니다. AI에게 "어떤 느낌(Concept)"으로 디자인해달라고 주문하는 법을 익혀야 합니다.

Step 1: 구조 잡기 (Layout)

User: "네비게이션 바를 만들 거야. 로고와 메뉴를 양 끝으로 배치해줘. Flexbox를 써서 간격을 조절해줘."

Step 2: 꾸미기 (Style)

User: "애플 홈페이지 스타일로 미니멀하게 가자. 버튼은 그림자를 살짝 넣고, 둥글게 처리해줘. 마우스 올렸을 때 색이 변하는 효과도 넣어주고."

🧠 Visible Thinking Activity: 박스 모델 훔쳐보기

개발자 도구는 거짓말을 하지 않습니다. 모든 사이트의 여백 비밀을 볼 수 있습니다.

이 페이지에서 F12를 누릅니다.
아무 버튼이나 제목을 검사(Inspect) 아이콘으로 클릭합니다. (개발자도구 좌측 상단의 화살표 아이콘)
개발자 도구 창의 가장 아래쪽(또는 Styles 탭 옆)을 보세요.
주황색(Margin) - 노란색(Border) - 초록색(Padding) - 파란색(Content)으로 칠해진 네모난 그림이 보이나요?

Action: "아, 이 버튼은 글자가 작아 보여도 Padding이 20px이나 들어가서 클릭하기 쉬운 거였구나!" 하고 분석해보세요.

🕹️ 실습: 3분 만에 내 사이트 꾸미기 (Makeover)

앞 장에서 만든 뼈대(index.html)에 전용 옷장(style.css)을 만들어 연결해 봅시다.

Step 1. 외부 CSS 파일 만들기

작업 중인 폴더에 style.css라는 이름의 새 파일을 만듭니다.
그 파일에 아래 코드를 복사해서 넣고 저장(Ctrl + S)하세요. (HTML 태그 없이 바로 작성합니다.)

/* style.css */
h1 { 
    color: #0071e3; /* 애플 블루 */
    text-align: center; 
}

button { 
    padding: 12px 24px; 
    background-color: #1d1d1f; 
    color: white; 
    border-radius: 999px; 
    border: none; 
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #424245;
}

Step 2. HTML과 CSS 연결하기 (Link)

이제 HTML에게 "네 옷은 style.css에 있어"라고 알려줘야 합니다. index.html 파일의 <head> 태그 안에 아래 한 줄을 추가하세요.

<head>
    <meta charset="UTF-8">
    <title>내 AI 사이트</title>
    <link rel="stylesheet" href="style.css">
</head>

Step 3. 확인 및 수정

브라우저를 새로고침하면 디자인이 적용된 것을 볼 수 있습니다.

팁: 만약 디자인이 안 바뀐다면, 파일 이름이 정확히 style.css인지, 그리고 HTML 파일과 같은 폴더에 있는지 확인해보세요!

💡 왜 파일을 분리(External CSS)하나요?

가독성: HTML 파일이 깔끔해져서 구조를 파악하기 쉽습니다.
재사용: style.css 하나만 잘 만들어두면, about.html, contact.html 등 수십 개의 페이지에 똑같은 디자인을 단 한 줄(link)로 적용할 수 있습니다.
협업: 디자이너는 CSS 파일만 수정하고, 개발자는 HTML 구조만 만지는 식으로 업무를 나눌 수 있습니다.

Step 4. (심화) AI에게 '전문가 스타일' 맡기기

우리가 일일이 디자인하는 건 힘듭니다. AI에게 시키는 것이 우리가 갈 길입니다.

<head> 안에 넣었던 <link rel="stylesheet" href="style.css">를 지우세요.
대신 [💡 Pro Tip]에서 배운 Tailwind CDN 코드를 넣으세요.
- <script src="https://cdn.tailwindcss.com"></script>
AI에게 프롬프트를 날려보세요.

Prompt

지금 내 index.html 코드가 이건데, Tailwind CSS를 사용해서 애플 홈페이지처럼 심플하고 모던하게 꾸며줘. 버튼에는 마우스 올리면 부드럽게 색이 변하는 효과도 넣어줘.

AI가 준 코드로 <body> 전체를 교체해보세요.