[2026] HTML/CSS 시작하기 | 웹 개발 첫걸음
![[2026] HTML/CSS 시작하기 | 웹 개발 첫걸음](/og/s/html-css-series-01-intro.webp)
이 글의 핵심
HTML/CSS 시작하기: 웹 개발 첫걸음. 개발 환경 설정·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 파일 만들기
아래 코드는 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 기본 구조
필수 요소
아래 코드는 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 끝에 두어 로딩 순서를 제어합니다.
주요 태그
다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<!-- 제목 -->
<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: 내부 스타일 아래 코드는 html를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
// 실행 예제
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>방법 3: 외부 스타일 (권장) 다음은 간단한 html 코드 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
<!-- index.html -->
<head>
<link rel="stylesheet" href="style.css">
</head>아래 코드는 css를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
/* style.css */
p {
color: green;
font-size: 16px;
}기본 CSS 문법
다음은 간단한 css 코드 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
선택자 {
속성: 값;
속성: 값;
}예제: 다음은 css를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
/* 태그 선택자 */
h1 {
color: navy;
font-size: 32px;
}
/* 클래스 선택자 */
.highlight {
background-color: yellow;
}
/* ID 선택자 */
#header {
background-color: #333;
color: white;
}4. 첫 웹페이지 만들기
프로젝트 구조
아래 코드는 code를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.
my-website/
├── index.html
├── style.css
└── images/
└── logo.pngindex.html
다음은 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>이메일: hong@example.com</p>
</section>
</main>
<!-- 푸터 -->
<footer>
<p>© 2026 홍길동. All rights reserved.</p>
</footer>
</body>
</html>style.css
다음은 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: 명함 웹페이지
다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<!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">hong@example.com</p>
<p>서울, 대한민국</p>
</div>
</body>
</html>예제 2: 간단한 블로그 글
다음은 html를 활용한 상세한 구현 코드입니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.
<!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 선택자와 속성
- 레이아웃 만들기