새해 결심 코딩 도전, 1월 한 달 만에 ‘Hello, World!’에서 벗어나 나만의 웹 페이지 만들기: 실패 없는 HTML/CSS 기초 완성 가이드
Image by Unsplash (Artturi Jalli)
Intro & Empathy
새해가 밝았습니다! 많은 분들이 새로운 목표를 세우고, 멋진 변화를 꿈꾸죠. “올해는 꼭 코딩을 배워서 나만의 웹 페이지를 만들어봐야지!” 다짐하신 분들도 분명 있을 거예요.
하지만 코딩은 처음 시작하기가 왠지 두렵고 막막하게 느껴질 수 있습니다. ‘Hello, World!’는 쉽게 따라 쳤지만, 그 다음부터 뭘 해야 할지, 어디서부터 시작해야 할지 감이 안 잡히는 경우가 많죠. 실패할까 봐 걱정되고, 괜히 시간만 낭비하는 건 아닐까 불안하기도 할 거예요. 괜찮아요, 당신만 그런 것이 아닙니다. 이 가이드에서는 여러분이 좌절하지 않고, 즐겁게 코딩의 첫걸음을 내딛을 수 있도록 HTML과 CSS 기초를 완벽하게 다져줄 거예요.
Preparation Table
| 준비물 | 비용 | 설명 |
|---|---|---|
| 텍스트 에디터 | 무료 | Visual Studio Code, Sublime Text 등 (무료 텍스트 에디터 추천) |
| 웹 브라우저 | 무료 | Chrome, Firefox, Safari 등 (최신 버전 사용 권장) |
| 코딩 학습 자료 | 무료 ~ 유료 | 온라인 튜토리얼, 강의, 문서 (이 가이드도 좋은 자료가 될 수 있어요!) |
| 인내심 | 무한대 | 에러와 어려움을 극복하는 끈기! |
The “Pre-Check”
코딩을 시작하기 전에 몇 가지 점검해야 할 사항들이 있습니다. 마치 여행을 떠나기 전 짐을 꼼꼼히 챙기는 것처럼 말이죠.
- 텍스트 에디터 설치: 코드를 작성할 텍스트 에디터를 다운로드하여 설치하세요. Visual Studio Code를 추천합니다.
- 웹 브라우저 준비: 작성한 코드를 확인하고 웹 페이지를 테스트할 웹 브라우저를 준비하세요.
- 학습 목표 설정: 이번 달 안에 어떤 웹 페이지를 만들고 싶은지 구체적인 목표를 설정하세요. 예를 들어, “나만의 간단한 소개 페이지 만들기”처럼요.
- 기본적인 HTML/CSS 이해: HTML은 웹 페이지의 구조를 만들고, CSS는 웹 페이지의 디자인을 담당한다는 것을 기억하세요.
Step-by-Step Guide (The Core)
Step 1: HTML 파일 만들기
가장 먼저 HTML 파일을 만들어야 합니다. 텍스트 에디터를 열고, 새로운 파일을 만든 후 “index.html”이라는 이름으로 저장하세요. 파일 이름은 자유롭게 정할 수 있지만, “.html” 확장자는 반드시 붙여야 합니다.
HTML 파일은 웹 브라우저가 읽고 해석하여 웹 페이지를 화면에 표시하는 역할을 합니다.
파일을 저장할 때는 앞으로 작업할 웹 페이지 관련 파일들을 모아둘 폴더를 하나 만들어서 그 안에 저장하는 것이 좋습니다.
Tip: 파일 이름은 영어 소문자와 숫자, 그리고 몇 가지 특수 문자(-, _)만 사용하는 것이 좋습니다. 한글이나 공백은 피해주세요.
Step 2: HTML 기본 구조 작성하기
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>
이 코드는 HTML 문서의 기본적인 틀을 정의합니다. <html>, <head>, <body> 태그는 각각 HTML 문서의 전체 구조, 머리말, 본문을 나타냅니다.
Tip: 텍스트 에디터의 자동 완성 기능을 활용하면 HTML 코드를 더 쉽고 빠르게 작성할 수 있습니다.
Step 3: CSS 파일 연결하기
웹 페이지를 꾸미기 위해 CSS 파일을 HTML 파일에 연결해야 합니다. 새로운 파일을 만들고 “style.css”라는 이름으로 저장하세요. 그리고 HTML 파일의 <head> 태그 안에 다음과 같은 코드를 추가하세요.
<link rel="stylesheet" href="style.css">
이 코드는 “style.css” 파일을 현재 HTML 문서의 스타일 시트로 사용하겠다는 의미입니다. 이제 CSS 파일을 사용하여 웹 페이지의 디자인을 변경할 수 있습니다.
Tip: CSS 파일은 HTML 파일과 같은 폴더에 저장하는 것이 일반적입니다.
Step 4: CSS 스타일 적용하기
CSS 파일을 사용하여 웹 페이지에 스타일을 적용해 봅시다. “style.css” 파일을 열고 다음과 같은 코드를 입력하세요.
body {
background-color: #f0f0f0;
font-family: sans-serif;
text-align: center;
}
h1 {
color: #333;
}
p {
font-size: 16px;
}
이 코드는 <body> 태그의 배경색을 연한 회색으로, 글꼴을 sans-serif로, 텍스트를 가운데 정렬하도록 설정합니다. 또한 <h1> 태그의 색상을 짙은 회색으로, <p> 태그의 글꼴 크기를 16픽셀로 설정합니다.
Tip: CSS 속성 값은 다양한 단위를 사용할 수 있습니다. px, em, rem, % 등 다양한 단위를 실험해 보세요.
Step 5: 웹 페이지 내용 추가하기
이제 웹 페이지에 원하는 내용을 추가해 봅시다. HTML 파일의 <body> 태그 안에 텍스트, 이미지, 링크 등 다양한 요소를 추가할 수 있습니다.
<body>
<h1>안녕하세요!</h1>
<p>이곳은 저의 첫 웹 페이지입니다.</p>
<img src="image.jpg" alt="이미지 설명">
<a href="https://www.example.com">방문하기</a>
</body>
이 코드는 <h1> 태그와 <p> 태그를 사용하여 제목과 설명을 추가하고, <img> 태그를 사용하여 이미지를 추가하고, <a> 태그를 사용하여 링크를 추가합니다.
Tip: <img> 태그의 “alt” 속성은 이미지에 대한 설명을 제공하는 데 사용됩니다. 이미지가 표시되지 않을 경우 “alt” 속성에 지정된 텍스트가 대신 표시됩니다.
Step 6: 웹 페이지 레이아웃 만들기
웹 페이지의 레이아웃을 만들기 위해 <div> 태그와 CSS를 활용할 수 있습니다. <div> 태그는 웹 페이지의 특정 영역을 묶는 데 사용되며, CSS를 사용하여 각 영역의 크기, 위치, 간격 등을 조절할 수 있습니다.
<div class="container">
<div class="header">
<h1>웹 페이지 제목</h1>
</div>
<div class="content">
<p>웹 페이지 내용</p>
</div>
<div class="footer">
<p>저작권 정보</p>
</div>
</div>
이 코드는 “container”, “header”, “content”, “footer”라는 클래스를 가진 <div> 태그들을 사용하여 웹 페이지의 레이아웃을 구성합니다. CSS 파일을 사용하여 각 클래스에 대한 스타일을 정의할 수 있습니다.
Tip: CSS의 “display” 속성을 사용하면 <div> 태그의 레이아웃 방식을 변경할 수 있습니다. “block”, “inline”, “inline-block”, “flex”, “grid” 등 다양한 값을 실험해 보세요.
Step 7: 반응형 웹 디자인 적용하기
다양한 장치에서 웹 페이지가 잘 보이도록 반응형 웹 디자인을 적용해야 합니다. CSS의 미디어 쿼리를 사용하여 화면 크기에 따라 다른 스타일을 적용할 수 있습니다.
@media (max-width: 768px) {
.container {
width: 100%;
}
}
이 코드는 화면 너비가 768픽셀 이하인 경우 “.container” 클래스의 너비를 100%로 설정합니다. 이렇게 하면 작은 화면에서도 웹 페이지가 가로로 꽉 차게 표시됩니다.
Tip: 다양한 화면 크기에서 웹 페이지가 어떻게 보이는지 확인하기 위해 브라우저의 개발자 도구를 사용하세요.
Visual Diagram
Common Mistakes & Solutions
초보 코더들이 자주 저지르는 실수와 해결 방법을 알아두면 시행착오를 줄일 수 있습니다.
- 실수 1: 오타 – HTML 태그나 CSS 속성 이름에 오타가 있는 경우, 코드가 제대로 작동하지 않습니다. 텍스트 에디터의 자동 완성 기능을 활용하고, 오타 검사기를 사용하여 오타를 방지하세요.
- 실수 2: CSS 파일 연결 오류 – CSS 파일이 HTML 파일에 제대로 연결되지 않은 경우, CSS 스타일이 적용되지 않습니다. <link> 태그의 “href” 속성이 올바른 CSS 파일 경로를 가리키는지 확인하세요.
- 실수 3: 브라우저 캐시 – 웹 페이지를 수정했는데 브라우저에 변경 사항이 반영되지 않는 경우, 브라우저 캐시를 삭제해 보세요. 또는 Ctrl + Shift + R (Windows) 또는 Cmd + Shift + R (Mac) 키를 눌러 강제 새로고침을 시도해 보세요.
FAQ Section (MANDATORY)
Q1: HTML과 CSS는 무엇인가요?
HTML은 웹 페이지의 구조를 정의하는 언어이고, CSS는 웹 페이지의 디자인을 담당하는 스타일 시트 언어입니다. HTML은 뼈대를 만들고, CSS는 옷을 입히는 것과 같다고 생각하면 됩니다.
Q2: 텍스트 에디터는 어떤 것을 사용해야 하나요?
Visual Studio Code, Sublime Text, Atom 등 다양한 텍스트 에디터가 있습니다. 이들은 모두 무료로 사용할 수 있으며, 코딩을 더 쉽고 효율적으로 할 수 있도록 다양한 기능을 제공합니다. Visual Studio Code를 가장 추천합니다.
Q3: 코딩을 배우는 데 얼마나 걸리나요?
코딩 실력은 개인의 학습 속도와 노력에 따라 다르지만, HTML과 CSS 기초를 배우는 데는 1~2주 정도면 충분합니다. 꾸준히 연습하고 프로젝트를 진행하면서 실력을 향상시킬 수 있습니다.
Q4: 코딩을 배우기 위한 좋은 자료는 무엇인가요?
온라인 튜토리얼, 강의, 문서 등 다양한 코딩 학습 자료가 있습니다. MDN Web Docs는 웹 개발에 대한 가장Comprehensive하고 신뢰할 수 있는 자료를 제공합니다. 또한, Codecademy, Coursera, Udemy와 같은 플랫폼에서 제공하는 온라인 강의도 도움이 됩니다.
Q5: 코딩을 하다가 막히면 어떻게 해야 하나요?
코딩을 하다가 막히는 것은 당연한 일입니다. 구글 검색, Stack Overflow, MDN Web Docs 등 다양한 자료를 참고하고, 코딩 커뮤니티에 질문하여 도움을 받으세요. 혼자 해결하려고 너무 애쓰지 마세요!
Conclusion
축하합니다! 이 가이드를 따라오셨다면, 여러분은 이미 HTML과 CSS의 기초를 다지기 위한 첫걸음을 성공적으로 내딛었습니다. 앞으로 꾸준히 연습하고 프로젝트를 진행하면서 코딩 실력을 더욱 향상시켜 보세요.
코딩은 결코 어려운 것이 아닙니다. 실패를 두려워하지 말고, 즐겁게 코딩하는 경험을 통해 여러분만의 멋진 웹 페이지를 만들어 보세요! 새해에는 여러분의 코딩 능력이 쑥쑥 자라나길 응원합니다!