1장 : 웹 개발 입문
첫 웹 페이지 만들기
앞선 장에서 웹의 기본 원리와 핵심 언어, 그리고 개발 환경 설정까지 마쳤습니다. 이제 이 모든 지식과 도구를 활용하여 여러분의 첫 번째 웹 페이지를 직접 만들어 볼 시간입니다. 우리가 방금 설정한 개발 환경에서 HTML, CSS, 그리고 자바스크립트 코드를 직접 작성하고, 그 결과물을 웹 브라우저에서 바로 확인하는 과정을 통해 '내가 직접 웹 페이지를 만들 수 있구나!'라는 뿌듯함을 느끼실 수 있을 것입니다.
이번 장에서는 여러분의 이름과 간단한 소개가 담긴 개인 웹 페이지를 만들어 볼 것입니다. 이를 통해 HTML로 구조를 만들고, CSS로 스타일을 적용하며, 자바스크립트로 간단한 상호작용을 추가하는 일련의 과정을 실제 예시를 통해 경험하게 될 것입니다.
HTML: 웹 페이지의 뼈대 세우기
가장 먼저 HTML을 사용하여 웹 페이지의 기본 구조를 만듭니다. '나의 소개'라는 제목과 함께 여러분의 이름, 간단한 자기소개 문구, 그리고 몇 가지 정보를 담을 공간을 마련할 것입니다.
새 파일 준비
- 3장에서 만들었던
web-dev-practice폴더를 VS Code에서 엽니다. - 폴더 안에 새로운 파일
my_profile.html을 생성합니다. (기존index.html은 그대로 두고, 이번 실습을 위한 새 파일을 만듭니다.)
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를 사용하여 옷을 입히고 아름답게 꾸며줄 차례입니다. 색상, 글꼴, 여백 등을 조절하여 웹 페이지를 시각적으로 매력 있게 만들어 봅시다.
CSS 파일 생성
web-dev-practice폴더 안에 새로운 파일profile_style.css를 생성합니다. (3장에서 만든style.css는 그대로 두고 새 파일을 만듭니다.)
HTML 파일에 CSS 연결
my_profile.html파일로 돌아와<head>태그 안의 `` 주석 아래에 다음 코드를 추가합니다.
<link rel="stylesheet" href="profile_style.css">- 이 코드는
my_profile.html파일이profile_style.css파일의 스타일 규칙을 적용받도록 연결해 줍니다.
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는 그대로 두고 새 파일을 만듭니다.)
HTML 파일에 자바스크립트 연결
my_profile.html파일로 돌아와</body>태그 바로 위(푸터 아래)의 `` 주석 아래에 다음 코드를 추가합니다.
<script src="profile_script.js"></script>- 자바스크립트 파일은 일반적으로
</body>태그 바로 위에 배치합니다. 이는 HTML과 CSS가 모두 로드된 후에 자바스크립트가 실행되어야 웹 페이지 요소들을 제대로 조작할 수 있기 때문입니다.
자바스크립트 코드 작성
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: 구조화된 내용에 시각적인 스타일을 적용하는 방법
- 자바스크립트: 사용자와 상호작용하는 동적인 기능을 추가하는 방법
- 개발 환경: VS Code와 Live Server를 활용하여 코드를 작성하고 실시간으로 확인하는 방법
이 작은 시작이 여러분의 웹 개발 여정에 큰 첫걸음이 될 것입니다. 지금 만든 페이지는 아주 기초적인 수준이지만, 앞으로 배우게 될 더 많은 지식과 기술을 통해 여러분은 훨씬 더 복잡하고 기능적인 웹 페이지를 만들 수 있게 될 것입니다.