HTML과 CSS의 차이는?

HTML은 웹 페이지의 구조를 만들고, CSS는 디자인과 스타일을 담당합니다.

개발 환경은 어떻게 설정하나요?

VS Code와 웹 브라우저만 있으면 바로 시작할 수 있습니다.

HTML/CSS만으로 웹사이트를 만들 수 있나요?

네, 정적 웹사이트는 HTML/CSS만으로 충분합니다. 동적 기능은 JavaScript가 필요합니다.

HTML/CSS 시작하기 | 웹 개발 첫걸음

2026년 3월 29일 · 14분 읽기 · 수정 2026년 4월 7일 초급 튜토리얼

이 글의 핵심

HTML/CSS 시작하기: 웹 개발 첫걸음. 개발 환경 설정·HTML 기본 구조.

시리즈 안내

#01 | 📋 전체 목차 | 다음: #02 HTML 기본 태그

들어가며

HTML과 CSS란?

HTML(HyperText Markup Language)은 문서의 뼈대와 의미를 표시하고, CSS(Cascading Style Sheets)는 보이는 모양을 규칙으로 덧씌웁니다.

HTML = 건물의 골조 (구조)
CSS = 인테리어 (디자인)
JavaScript = 전기/수도 (기능)

특징:

✅ HTML: 제목, 문단, 이미지, 링크 등 콘텐츠 구조
✅ CSS: 색상, 크기, 위치, 애니메이션 등 스타일
✅ 브라우저: Chrome, Firefox, Safari 등에서 실행
✅ 간단함: 프로그래밍 언어가 아니라 마크업 언어(태그로 문서 구조·의미를 표시하는 언어)

실전 경험에서 배운 교훈

이 기술을 실무 프로젝트에 처음 도입했을 때, 공식 문서만으로는 알 수 없었던 많은 함정들이 있었습니다. 특히 프로덕션 환경에서 발생하는 엣지 케이스들은 로컬 개발 환경에서는 재현조차 되지 않았죠.

가장 어려웠던 점은 성능 최적화였습니다. 처음엔 “동작만 하면 되겠지”라고 생각했지만, 실제 사용자 트래픽이 몰리면서 병목 지점들이 하나씩 드러났습니다. 특히 데이터베이스 쿼리 최적화, 캐싱 전략, 에러 핸들링 구조 등은 여러 번의 장애를 겪으면서 개선해 나갔습니다.

이 글에서는 그런 시행착오를 통해 얻은 실전 노하우와, “이렇게 하면 안 된다”는 교훈들을 함께 정리했습니다. 특히 트러블슈팅 섹션은 실제 장애 대응 경험을 바탕으로 작성했으니, 비슷한 문제를 마주했을 때 참고하시면 도움이 될 것입니다.

1. 개발 환경 설정

VS Code 설치

VS Code 공식 사이트 다운로드
추천 확장:
- Live Server: 실시간 미리보기
- HTML CSS Support: 자동완성
- Prettier: 코드 포맷팅

첫 HTML 파일 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 첫 웹페이지</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>첫 번째 웹페이지입니다.</p>
</body>
</html>

문서 구조 설명: <!DOCTYPE html>은 HTML5 문서임을 브라우저에 알립니다. lang="ko"는 검색·접근성(스크린 리더)·폰트 렌더링에 힌트를 줍니다. meta charset과 viewport는 각각 문자 깨짐 방지와 모바일 레이아웃의 기준이 됩니다. 실행 방법:

index.html 파일로 저장
더블클릭하거나 브라우저로 열기
또는 VS Code에서 Live Server 실행

2. HTML 기본 구조

필수 요소

<!DOCTYPE html>          <!-- HTML5 문서 선언 -->
<html lang="ko">         <!-- 언어 설정 -->
<head>
    <!-- 메타데이터 -->
    <meta charset="UTF-8">
    <title>페이지 제목</title>
</head>
<body>
    <!-- 실제 콘텐츠 -->
</body>
</html>

역할 분리: head는 화면에 직접 보이지 않는 설정·메타데이터, body는 사용자가 보는 콘텐츠입니다. 스타일시트 링크(link rel="stylesheet")와 스크립트는 보통 head 끝이나 body 끝에 두어 로딩 순서를 제어합니다.

주요 태그

<!-- 제목 -->
<h1>가장 큰 제목</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>
<!-- 문단 -->
<p>문단 내용입니다.</p>
<!-- 링크 -->
<a href="https://example.com">링크 텍스트</a>
<!-- 이미지 -->
<img src="image.jpg" alt="이미지 설명">
<!-- 목록 -->
<ul>
    <li>항목 1</li>
    <li>항목 2</li>
</ul>
<!-- 구분선 -->
<hr>
<!-- 줄바꿈 -->
<br>

3. CSS 기본

CSS 추가 방법

방법 1: 인라인 스타일

<p style="color: red; font-size: 20px;">빨간 글씨</p>

방법 2: 내부 스타일

// 실행 예제
<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

방법 3: 외부 스타일 (권장)

<!-- index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

/* style.css */
p {
    color: green;
    font-size: 16px;
}

기본 CSS 문법

선택자 {
    속성: 값;
    속성: 값;
}

예제:

/* 태그 선택자 */
h1 {
    color: navy;
    font-size: 32px;
}
/* 클래스 선택자 */
.highlight {
    background-color: yellow;
}
/* ID 선택자 */
#header {
    background-color: #333;
    color: white;
}

4. 첫 웹페이지 만들기

프로젝트 구조

my-website/
├── index.html
├── style.css
└── images/
    └── logo.png

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 포트폴리오</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 헤더 -->
    <header>
        <h1>홍길동</h1>
        <p>웹 개발자</p>
    </header>
    <!-- 메인 콘텐츠 -->
    <main>
        <section id="about">
            <h2>소개</h2>
            <p>안녕하세요! 웹 개발을 공부하고 있는 홍길동입니다.</p>
        </section>
        <section id="skills">
            <h2>기술</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </section>
        <section id="contact">
            <h2>연락처</h2>
            <p>이메일: [email protected]</p>
        </section>
    </main>
    <!-- 푸터 -->
    <footer>
        <p>&copy; 2026 홍길동. All rights reserved.</p>
    </footer>
</body>
</html>

style.css

/* 전체 스타일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Malgun Gothic', sans-serif;
    line-height: 1.6;
    color: #333;
}
/* 헤더 */
header {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem;
}
header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
/* 메인 콘텐츠 */
main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}
section {
    margin-bottom: 2rem;
}
h2 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
ul {
    list-style-position: inside;
}
li {
    margin: 0.5rem 0;
}
/* 푸터 */
footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

5. 실전 예제

예제 1: 명함 웹페이지

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>명함</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: Arial, sans-serif;
        }
        .card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            text-align: center;
            max-width: 400px;
        }
        .card h1 {
            color: #333;
            margin-bottom: 0.5rem;
        }
        .card p {
            color: #666;
            margin: 0.5rem 0;
        }
        .card .email {
            color: #667eea;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>홍길동</h1>
        <p>프론트엔드 개발자</p>
        <p class="email">[email protected]</p>
        <p>서울, 대한민국</p>
    </div>
</body>
</html>

예제 2: 간단한 블로그 글

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>블로그 글</title>
    <style>
        body {
            max-width: 700px;
            margin: 0 auto;
            padding: 2rem;
            font-family: 'Malgun Gothic', sans-serif;
            line-height: 1.8;
        }
        article {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }
        .meta {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-bottom: 1.5rem;
        }
        p {
            margin-bottom: 1rem;
        }
        .highlight {
            background-color: #fff3cd;
            padding: 0.2rem 0.4rem;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <article>
        <h1>HTML과 CSS 시작하기</h1>
        <div class="meta">2026년 3월 29일 | 홍길동</div>
        
        <p>
            <span class="highlight">HTML</span>과 
            <span class="highlight">CSS</span>는 
            웹 개발의 기초입니다.
        </p>
        
        <p>
            HTML로 구조를 만들고, CSS로 스타일을 입히면 
            멋진 웹페이지를 만들 수 있습니다.
        </p>
        
        <p>
            이 두 기술만 잘 익혀도 정적 웹사이트는 
            충분히 만들 수 있습니다!
        </p>
    </article>
</body>
</html>

6. 개발자 도구 사용

Chrome DevTools

열기: F12 또는 Ctrl+Shift+I (Mac: Cmd+Option+I) 주요 기능:

Elements: HTML/CSS 실시간 수정
Console: JavaScript 실행
Network: 네트워크 요청 확인
Sources: 소스 코드 디버깅 활용법:

요소 검사: 원하는 요소에 우클릭 → “검사”
스타일 수정: Elements 탭에서 CSS 실시간 변경
색상 선택: 색상 값 클릭 → 컬러 피커 사용

정리

핵심 요약

HTML: 웹 페이지 구조 (태그)
CSS: 웹 페이지 디자인 (스타일)
개발 환경: VS Code + 브라우저
기본 구조: <!DOCTYPE html> → <html> → <head> + <body>
CSS 추가: 인라인, 내부, 외부 (외부 권장)

다음 단계

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「HTML/CSS 시작하기 | 웹 개발 첫걸음」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「HTML/CSS 시작하기 | 웹 개발 첫걸음」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

A. HTML/CSS 시작하기: 웹 개발 첫걸음. 개발 환경 설정·HTML 기본 구조로 흐름을 잡고 원리·코드·실무 적용을 한글로 정리합니다. HTML·CSS·웹개발 중심으로 설명합니다. Start now. 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.

Q. 선행으로 읽으면 좋은 글은?

A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. C++ 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.

Q. 더 깊이 공부하려면?

A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

이 글에서 다루는 키워드 (관련 검색어)

HTML, CSS, 웹개발, 프론트엔드, 입문 등으로 검색하시면 이 글이 도움이 됩니다.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.