LEVEL 5 QUEST

CSS 기초 - 웹의 옷 입히기

CSS 기초 - 웹의 옷 입히기 — DevFoil 바이브코딩 Stage 2, Lv.5

CSS란 무엇인가?

웹페이지의 옷 = CSS

CSS(Cascading Style Sheets)는 HTML로 만든 뼈대에 스타일(디자인)을 입히는 언어입니다.
HTML이 건물의 골조라면, CSS는 페인트, 벽지, 인테리어에 해당합니다.

색상, 크기, 간격, 배치, 애니메이션 등 눈에 보이는 모든 것을 CSS가 담당합니다.

핵심 바이브코딩에서 CSS 속성 이름만 알아도 AI에게 훨씬 정확한 수정 요청을 할 수 있습니다.

CSS를 HTML에 적용하는 3가지 방법

1. 인라인 스타일 (style 속성)

태그에 직접 스타일을 작성합니다. 빠르지만 유지보수가 어렵습니다.

<p style="color: #e74c3c; font-size: 18px;">빨간색 큰 글씨</p>
<div style="background: #2d2d2d; padding: 20px; border-radius: 8px;">
    어두운 카드
</div>

2. 내부 스타일시트 (<style> 태그)

<head> 안에 <style> 태그로 작성합니다. 한 페이지에서 여러 요소에 스타일을 적용할 때 편리합니다.

<head>
    <style>
        body {
            background-color: #1a1a2e;
            color: #eeeeee;
            font-family: 'Pretendard', sans-serif;
        }
        h1 {
            color: #f0c040;
        }
    </style>
</head>

3. 외부 스타일시트 (별도 .css 파일)

가장 권장되는 방법입니다. 스타일을 별도 파일로 분리하면 여러 페이지에서 재사용할 수 있습니다.
실무 표준 실제 프로젝트에서는 거의 항상 이 방법을 사용합니다.

<!-- HTML 파일에서 연결 -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

/* style.css 파일 */
body {
    background-color: #1a1a2e;
    color: #eeeeee;
}
.card {
    background: #16213e;
    border-radius: 12px;
    padding: 24px;
}

🔒

여기까지는 미리보기입니다

CSS 기초 - 웹의 옷 입히기
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)