첫 웹 페이지 만들기
HTML 구조와 CSS 스타일, JavaScript 클릭 이벤트를 연결해 자기소개가 담긴 첫 웹 페이지를 완성합니다.
앞선 장에서 웹의 기본 원리와 핵심 언어, 그리고 개발 환경 설정까지 마쳤습니다.
이제 이 모든 지식과 도구를 활용하여 여러분의 첫 번째 웹 페이지를 직접 만들어 볼 시간입니다.
우리가 방금 설정한 개발 환경에서 HTML, CSS, 그리고 자바스크립트 코드를 직접 작성하고, 그 결과물을 웹 브라우저에서 바로 확인하게 됩니다.
이 실습에서는 HTML, CSS, JavaScript 파일을 연결해 브라우저에 표시되는 첫 페이지를 만듭니다.
이번 장에서는 여러분의 이름과 간단한 소개가 담긴 개인 웹 페이지를 만들어 볼 것입니다.
이를 통해 HTML로 구조를 만들고, CSS로 스타일을 적용하며, 자바스크립트로 간단한 상호작용을 추가하는 과정을 실제 예시로 경험하게 됩니다.
HTML: 웹 페이지의 뼈대 세우기
가장 먼저 HTML을 사용하여 웹 페이지의 기본 구조를 만듭니다.
나의 소개라는 제목과 함께 여러분의 이름, 간단한 자기소개 문구, 그리고 몇 가지 정보를 담을 공간을 마련할 것입니다.
- 3장에서 만들었던
web-dev-practice폴더를 VS Code에서 엽니다. - 폴더 안에 새로운 파일
my_profile.html을 생성합니다. (기존index.html은 그대로 두고, 이번 실습을 위한 새 파일을 만듭니다.)
my_profile.html파일에 다음 코드를 입력합니다. (VS Code에서html:5를 입력 후Tab키를 누르면 기본 구조가 자동 완성됩니다.)
<!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>
<header>
<h1>안녕하세요, [여러분의 이름]입니다!</h1>
<p>웹 개발을 시작하는 초보 개발자입니다.</p>
</header>
<section>
<h2>저를 소개합니다</h2>
<p>
저는 새로운 기술을 배우는 것을 즐기며, 특히 웹 개발에 깊은 흥미를 느끼고 있습니다.
이 책과 함께 여러분과 함께 성장하고 싶습니다.
</p>
<ul>
<li><strong>취미:</strong> 독서, 산책</li>
<li><strong>좋아하는 것:</strong> 맛있는 커피, 새로운 지식</li>
<li><strong>목표:</strong> 나만의 멋진 웹 서비스 만들기</li>
</ul>
</section>
<footer>
<p>© 2025 [여러분의 이름]. All rights reserved.</p>
<button id="contactButton">문의하기</button>
</footer>
</body>
</html><!DOCTYPE html>: 이 문서가 HTML5 표준을 따른다는 것을 웹 브라우저에 알려줍니다.<html lang="ko">: 문서의 시작을 알리며, 문서의 기본 언어가 한국어임을 명시합니다. 이는 검색 엔진이나 스크린 리더 등에 유용합니다.<head>: 웹 페이지 자체에 대한 정보(메타데이터)를 담는 부분입니다. 사용자에게 직접 보이지는 않지만, 웹 페이지의 설정과 관련된 중요한 내용이 들어갑니다.<meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정합니다. 한글이 깨지지 않도록 하는 매우 중요한 설정입니다.<meta name="viewport" ...>: 웹 페이지가 다양한 기기(모바일, 태블릿 등)에서 올바르게 표시되도록 뷰포트 설정을 정의합니다. 반응형 웹을 위한 필수 설정입니다.<title>: 웹 브라우저 탭에 표시될 웹 페이지의 제목을 설정합니다.- ``: 나중에
style.css파일을 연결할 위치를 주석으로 표시했습니다. 주석은 코드에 대한 설명을 달 때 사용되며, 웹 브라우저에는 표시되지 않습니다.
<body>: 웹 브라우저 화면에 실제로 표시될 모든 콘텐츠가 들어가는 부분입니다.<header>: 페이지의 머리글 영역을 나타냅니다. 주로 제목이나 로고, 내비게이션 바 등이 들어갑니다.<h1>,<p>: 제목과 단락을 나타내는 태그입니다.<section>: 문서의 독립적인 섹션을 나타냅니다.<h2>: 두 번째 수준의 제목을 나타냅니다.<ul>,<li>: 순서 없는 목록(Unordered List)과 목록의 각 항목(List Item)을 나타냅니다.<strong>: 텍스트를 강조하는 태그입니다.<footer>: 페이지의 바닥글 영역을 나타냅니다. 주로 저작권 정보나 연락처 등이 들어갑니다.<button>: 클릭할 수 있는 버튼을 만듭니다.id="contactButton"은 나중에 자바스크립트에서 이 버튼을 쉽게 찾기 위한 고유한 이름입니다.- ``: 나중에
script.js파일을 연결할 위치를 주석으로 표시했습니다.
my_profile.html파일을 저장합니다.- 3장에서 설치했던 Live Server 확장 프로그램을 사용하여 이 파일을 엽니다. (VS Code 하단의 Go Live 버튼 클릭 또는 파일 위에서 마우스 우클릭 후 Open with Live Server)
- 웹 브라우저에 여러분이 작성한 HTML 내용이 표시될 것입니다. 아직 스타일이 적용되지 않아 다소 밋밋하게 보일 수 있습니다. 마치 건물의 뼈대만 완성된 상태입니다.
CSS: 웹 페이지에 스타일 입히기
이제 HTML로 만든 뼈대에 CSS를 사용하여 옷을 입히고 아름답게 꾸며줄 차례입니다.
색상, 글꼴, 여백 등을 조절하여 웹 페이지를 시각적으로 매력 있게 만들어 봅시다.
web-dev-practice폴더 안에 새로운 파일profile_style.css를 생성합니다. (3장에서 만든style.css는 그대로 두고 새 파일을 만듭니다.)
my_profile.html파일로 돌아와<head>태그 안의 `` 주석 아래에 다음 코드를 추가합니다.
<link rel="stylesheet" href="profile_style.css">- 이 코드는
my_profile.html파일이profile_style.css파일의 스타일 규칙을 적용받도록 연결해 줍니다.
profile_style.css파일에 다음 CSS 코드를 작성합니다.
/* 전체 페이지에 적용될 기본 스타일 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5; /* 연한 회색 배경 */
color: #333;
line-height: 1.6;
margin: 0;
padding: 0;
display: flex; /* Flexbox를 사용하여 콘텐츠를 중앙에 배치 */
flex-direction: column;
align-items: center;
min-height: 100vh; /* 최소 화면 높이 */
}
/* 헤더 스타일 */
header {
background-color: #007bff; /* 파란색 배경 */
color: white;
padding: 40px 20px;
width: 100%;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
header h1 {
margin-bottom: 10px;
font-size: 2.8em;
}
header p {
font-size: 1.2em;
opacity: 0.9;
}
/* 섹션 스타일 */
section {
background-color: white;
margin: 30px 20px;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
max-width: 800px;
width: 90%;
text-align: left;
}
section h2 {
color: #0056b3;
margin-bottom: 20px;
font-size: 2em;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
section ul {
list-style: none; /* 목록 마커 제거 */
padding: 0;
margin-top: 20px;
}
section ul li {
background-color: #e9f7fe; /* 연한 하늘색 배경 */
margin-bottom: 10px;
padding: 12px 15px;
border-left: 5px solid #007bff;
border-radius: 5px;
font-size: 1.1em;
}
section ul li strong {
color: #004d66;
}
/* 푸터 스타일 */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
width: 100%;
margin-top: auto; /* 하단에 고정 */
}
footer p {
margin-bottom: 15px;
font-size: 0.9em;
opacity: 0.8;
}
/* 버튼 스타일 */
#contactButton { /* ID 선택자 사용 */
background-color: #28a745; /* 녹색 버튼 */
color: white;
padding: 12px 25px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s ease, transform 0.2s ease; /* 호버 애니메이션 */
}
#contactButton:hover {
background-color: #218838; /* 진한 녹색 */
transform: translateY(-2px); /* 살짝 위로 */
}my_profile.html파일을 저장합니다. (Live Server를 사용 중이라면 자동으로 새로고침됩니다.)- 웹 브라우저에서 여러분의 프로필 페이지가 확연히 달라진 것을 확인할 수 있을 것입니다. 배경색이 바뀌고, 글꼴이 정돈되며, 각 영역이 깔끔하게 구분되어 보일 것입니다. 브라우저에서 배경색, 글꼴, 영역 구분이 적용되었는지 확인합니다.
JavaScript: 웹 페이지에 상호작용 추가하기
마지막으로 자바스크립트를 사용하여 웹 페이지에 동적인 기능을 추가해 봅시다.
문의하기 버튼을 클릭하면 경고창이 나타나도록 만들어 보겠습니다.
web-dev-practice폴더 안에 새로운 파일profile_script.js를 생성합니다. (3장에서 만든script.js는 그대로 두고 새 파일을 만듭니다.)
my_profile.html파일로 돌아와</body>태그 바로 위(푸터 아래)의 `` 주석 아래에 다음 코드를 추가합니다.
<script src="profile_script.js"></script>- 자바스크립트 파일은 일반적으로
</body>태그 바로 위에 배치합니다. 이는 HTML과 CSS가 모두 로드된 후에 자바스크립트가 실행되어야 웹 페이지 요소들을 제대로 조작할 수 있기 때문입니다.
프로필 페이지 실습에서는 세 파일이 각자 역할을 나누고 브라우저가 이를 합쳐 화면과 동작을 만듭니다.
- 1my_profile.html
header, section, footer, button으로 화면에 보일 콘텐츠와 구조를 먼저 만듭니다.
- 2profile_style.css
head 안에서 연결해 페이지가 그려질 때 색상, 여백, 글꼴, 버튼 모양을 적용합니다.
- 3profile_script.js
body 끝에서 연결해 버튼 요소가 준비된 뒤 클릭 이벤트를 붙입니다.
profile_script.js파일에 다음 자바스크립트 코드를 작성합니다.
// '문의하기' 버튼 요소를 ID로 선택합니다.
const contactButton = document.getElementById('contactButton');
// 버튼에 클릭 이벤트 리스너를 추가합니다.
contactButton.addEventListener('click', function() {
// 버튼이 클릭될 때 경고창(alert)을 띄웁니다.
alert('아직 문의 기능은 개발 중입니다. 잠시만 기다려주세요! 😊');
});
// 페이지가 로드되면 실행되는 메시지 (선택 사항)
window.onload = function() {
console.log('프로필 페이지가 성공적으로 로드되었습니다!');
// 개발자 도구의 콘솔 탭에서 이 메시지를 확인할 수 있습니다.
};my_profile.html파일을 저장합니다.- 웹 브라우저에서 여러분의 프로필 페이지를 확인합니다.
- 하단의 문의하기 버튼을 클릭해 보세요. 아직 문의 기능은 개발 중입니다...라는 경고창이 나타날 것입니다.
이 예시는 자바스크립트가 사용자 입력에 반응해 화면을 바꾸는 기본 흐름을 보여줍니다.
첫 웹 페이지는 HTML로 구조를 만들고, CSS로 스타일을 입히고, JavaScript로 작은 상호작용을 붙인 뒤 브라우저에서 확인하며 완성합니다.
- 1HTML 먼저
문서 제목, 설명, 버튼처럼 화면에 필요한 요소를 의미에 맞게 배치합니다.
- 2CSS 적용
선택자로 요소를 찾아 글꼴, 색, 여백, 정렬을 조정합니다.
- 3JS 연결
버튼 클릭이나 입력 변화처럼 작은 이벤트부터 붙입니다.
- 4브라우저 확인
화면, 콘솔, 경로 오류를 함께 확인하며 수정합니다.
- 5완성 체크
CSS와 JavaScript 파일 경로가 HTML에서 올바르게 연결됐는지 확인합니다. 저장 후 새로고침해도 바뀌지 않으면 캐시와 파일 위치를 점검합니다. 오류가 보이면 브라우저 콘솔 메시지의 파일명과 줄 번호를 먼저 봅니다.
정리 및 다음 단계 안내
이번 실습에서는 첫 웹 페이지를 만들며 다음 흐름을 확인했습니다.
- HTML: 웹 페이지의 뼈대와 내용을 구조화하는 방법
- CSS: 구조화된 내용에 시각적인 스타일을 적용하는 방법
- 자바스크립트: 사용자와 상호작용하는 동적인 기능을 추가하는 방법
- 개발 환경: VS Code와 Live Server를 활용하여 코드를 작성하고 실시간으로 확인하는 방법
지금 만든 페이지는 기초적인 수준이지만, HTML 구조, CSS 스타일, JavaScript 동작을 한 파일 흐름 안에서 확인했다는 점이 중요합니다.
다음 장부터는 이 세 요소를 더 세분화해 다룹니다.
첫 웹 페이지 예제는 아래처럼 세 파일의 책임과 연결 관계를 함께 보면 이해하기 쉽습니다.
첫 페이지는 구조를 만들고, 스타일을 연결하고, 작은 상호작용을 붙인 뒤 브라우저에서 확인하는 순서로 완성합니다.
- 1HTML
제목, 문단, 버튼처럼 화면의 의미 단위를 먼저 작성합니다.
- 2CSS
외부 스타일 시트를 연결해 색, 간격, 레이아웃을 조정합니다.
- 3JS
버튼 클릭 같은 이벤트에 필요한 동작만 연결합니다.
- 4검토
브라우저에서 표시, 콘솔 오류, 파일 경로를 함께 확인합니다.
- 5문서 골격
doctype, html, head, body를 갖춘 뒤 본문 콘텐츠를 채웁니다.