HTML/CSS 시작하기 | 웹 개발 첫걸음
이 글의 핵심
HTML/CSS 시작하기에 대한 실전 가이드입니다. 웹 개발 첫걸음 등을 예제와 함께 상세히 설명합니다.
들어가며
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.pngindex.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>© 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 선택자와 속성
- 레이아웃 만들기
관련 글
- HTML/CSS 시리즈 전체 보기
- HTML 기본 태그 | 텍스트, 링크, 이미지, 리스트
- CSS 기초 | 선택자, 속성, 색상, 폰트
- CSS 박스 모델 | Margin, Padding, Border 완벽 정리