퀴즈 풀기 →
다음 주차 →

HTML vs. CSS

구분 역할 예시
HTML 웹 페이지의 구조(뼈대)와 내용을 정의 <h3>, <p>, <span>
CSS HTML 요소의 시각적 스타일을 지정 color, font-size, background

예제: CSS 적용 전 vs. 후

스타일 없음 (HTML만) 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>스타일 없는 웹 페이지</title>
</head>
<body>
  <h3>CSS 스타일 맛보기</h3>
  <hr>
  <p>나는
    <span>웹 프로그래밍</span>을
    좋아합니다.
  </p>
</body>
</html>
CSS 스타일 추가 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>스타일 있는 웹 페이지</title>
  <style>
    body { background-color: mistyrose; }
    h3   { color: purple; }
    hr   { border: 5px solid yellowgreen; }
    span {
      color: blue;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h3>CSS 스타일 맛보기</h3>
  <hr>
  <p>나는
    <span>웹 프로그래밍</span>을
    좋아합니다.
  </p>
</body>
</html>
CSS는 <style> 태그 안에 작성하며, 선택자 { 속성: 값; } 형태로 구성됩니다. HTML은 구조를, CSS는 디자인을 담당합니다.

VSCode 기본 문법

HTML 기본 구조

모든 HTML 파일은 아래 기본 구조로 시작합니다.

HTML 기본 뼈대 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>페이지 제목</title>
</head>
<body>
  <!-- 여기에 내용 작성 -->
</body>
</html>
  • <!DOCTYPE html> — HTML5 문서임을 브라우저에 선언
  • <html lang="ko"> — 문서 언어를 한국어로 지정
  • <meta charset="utf-8"> — 한글 등 다국어 문자 인코딩 설정
  • <head> — 브라우저 탭에 보이는 메타 정보 (화면에 출력 안 됨)
  • <body> — 실제 화면에 표시되는 내용 영역

Emmet: lorem ipsum 자동 완성

VSCode에서 Emmet 단축어를 입력하면 더미 텍스트를 빠르게 삽입할 수 있습니다.

입력 단축어 결과
lorem lorem ipsum 문장 1개 생성
lorem10 단어 10개짜리 lorem 문장 생성
lorem*10 lorem 문단 10개 생성

실습: 자기소개 페이지 (profile.html)

ul / ol 목록 태그

순서 없는 목록 (ul) 
<ul>
  <li>항목 1</li>
  <li>항목 2</li>
</ul>
순서 있는 목록 (ol) 
<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
</ol>

자기소개 페이지 구조

profile.html — body 구조 
<body>
  <div class="card">

    <!-- 헤더: 프로필 이미지, 이름, 소속 -->
    <div class="header">
      <div class="profile">👤</div>
      <h1>이름</h1>
      <h3>소속 / 학번</h3>
    </div>

    <!-- 섹션: 취미 -->
    <div class="section">
      <div class="section-title">🎮 취미</div>
      <ul>
        <li>취미 1</li>
        <li>취미 2</li>
      </ul>
    </div>

    <!-- 섹션: 관심 분야 -->
    <div class="section">
      <div class="section-title">💻 관심 분야</div>
      <ul>
        <li>관심 분야 1</li>
        <li>관심 분야 2</li>
      </ul>
    </div>

    <div class="highlight">목표 문구를 여기에 작성합니다🎉</div>
    <div class="footer">자기소개 실습</div>

  </div>
</body>
구조 포인트: 카드(.card) 안에 헤더 → 섹션 → 강조 → 푸터 순으로 배치합니다. 각 구역을 <div class="...">로 감싸면 CSS로 스타일을 독립적으로 지정할 수 있습니다.

퀴즈로 복습하기

1주차 퀴즈 풀기 →