7일 차: HTML 기본 과정 마무리하기
목표: HTML에 대한 기본적인 이해를 마무리하고 추가적인 학습 방향 설정하기
1. HTML 복습
지난 6일 동안 HTML에 대해 많은 것을 배웠어요! HTML은 HyperText Markup Language의 약자로, 웹페이지의 구조를 만드는 데 사용돼요. HTML을 통해 웹페이지에 제목, 문단, 목록, 이미지, 링크 등을 추가할 수 있어요. 폼을 만들고 다양한 입력 요소를 사용하는 방법도 배웠죠. 이젠 HTML의 기본 구조를 완전히 이해했으니, 복습해 볼까요? HTML 문서는 항상 <! DOCTYPE html> 선언으로 시작해요. 그다음에는 <html> 태그가 있고, <head>와 <body>로 나뉘어요. <head>에는 문서의 메타데이터, 스타일, 스크립트 등이 들어가고, <body>에는 실제 화면에 보이는 콘텐츠가 들어가요.
HTML 구조 예제:
html
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 번째 웹페이지 </title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이 웹페이지는 HTML로 만들어졌어요. </p>
</body>
</html>
이 구조를 이해하는 것이 중요해요. 웹페이지를 만들 때 이 기본 틀을 항상 기억해 두세요!
2. 추가 학습을 위한 방향 설정하기
HTML을 배우는 것이 웹 개발의 첫 걸음이에요. 하지만 HTML만으로는 멋지고 기능적인 웹사이트를 만들기 부족해요. 이제 CSS와 JavaScript를 배워야 할 때예요. 이 두 가지는 웹사이트를 더욱 멋지고, 상호작용 가능하게 만들어줘요. CSS는 웹사이트의 외관을 꾸미는 데 사용돼요. 예쁘게 보이게 하고, 레이아웃을 잡아주는 역할을 해요. 반면, JavaScript는 웹사이트에 동적인 기능을 추가해요. 예를 들어, 사용자가 버튼을 클릭하면 새로운 콘텐츠가 나타나거나, 입력된 데이터를 검증하는 기능을 추가할 수 있어요.
3. CSS 배우기
CSS는 Cascading Style Sheets의 약자예요. HTML이 웹사이트의 뼈대를 만든다면, CSS는 그 뼈대에 살을 붙이고 색을 입히는 역할을 해요. CSS를 사용하면 웹페이지의 배경색, 글자 색, 글꼴, 여백 등을 조정할 수 있어요. 그리고 웹사이트를 더욱 보기 좋게 만들 수 있어요. CSS는 보통 <style> 태그 안에 작성하거나, 별도의. css 파일로 분리해서 사용해요. 예를 들어, 다음과 같이 CSS를 사용할 수 있어요:
CSS 예제:
html
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0 f0 f0;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>환영합니다!</h1>
<p>이 웹페이지는 HTML과 CSS로 만들어졌어요. </p>
</body>
</html>
이 예제에서 우리는 웹페이지의 배경색을 밝은 회색으로 설정하고, 글자 색상을 조정했어요. 또한 제목을 중앙에 정렬하고, 문단의 줄 간격을 조정했어요. 이런 식으로 CSS를 사용하면 웹페이지를 더욱 아름답고 사용하기 쉽게 만들 수 있어요.
4. JavaScript 배우기
JavaScript는 웹사이트에 생동감을 불어넣어줘요. 사용자와 상호작용할 수 있는 기능을 추가할 수 있죠. 예를 들어, 사용자가 버튼을 클릭하면 팝업 메시지가 나타나거나, 입력 폼의 데이터를 검증할 수 있어요. JavaScript는 브라우저에서 실행되는 프로그래밍 언어로, HTML과 CSS와 함께 웹 개발의 중요한 부분이에요. JavaScript는 <script> 태그 안에 작성하거나, 별도의. js 파일로 분리해서 사용할 수 있어요. 예를 들어, 다음과 같이 JavaScript를 사용할 수 있어요:
JavaScript 예제:
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 예제 </title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
<script>
function greet() {
alert('안녕하세요!');
}
</script>
</head>
<body>
<h1>JavaScript 예제 </h1>
<button onclick="greet()">인사하기</button>
</body>
</html>
이 예제에서 우리는 버튼을 클릭하면 "안녕하세요!"라는 팝업 메시지가 나타나도록 했어요. 이렇게 JavaScript를 사용하면 웹사이트가 더 재미있고 상호작용할 수 있게 돼요.
5. 추가 자료와 예제 찾기
인터넷에는 HTML, CSS, JavaScript에 관한 많은 자료와 예제들이 있어요. 온라인 강의, 튜토리얼, 블로그 등을 찾아보면서 추가적인 학습을 진행할 수 있어요. 예를 들어, W3 Schools, MDN Web Docs, Codecademy 같은 사이트들은 훌륭한 학습 자료를 제공해요. 또한 실제 웹사이트를 살펴보고 그들의 코드를 분석하면서 배울 수도 있어요. 웹사이트의 소스 코드를 보는 방법을 배우면, 다른 사람들이 어떻게 HTML, CSS, JavaScript를 사용했는지 이해할 수 있어요.
추천 자료:
W3Schools
MDN Web Docs
Codecademy
이렇게 해서 HTML 기본 과정을 마무리하게 되었어요! 앞으로는 CSS와 JavaScript를 배우면서 웹사이트를 더욱 멋지고 기능적으로 만들 수 있어요. 지금까지 배운 내용을 바탕으로 자신만의 프로젝트를 만들어 보세요. 예를 들어, 간단한 개인 웹페이지나 블로그를 만들어 보는 것도 좋은 연습이 될 거예요.