HTML을 처음 배우실 때 가장 중요한 것은 HTML 문서의 기본 구조를 이해하는 것입니다. 이 구조는 모든 웹 페이지에서 동일하게 사용되며, 이를 이해하면 웹 개발의 기초를 탄탄히 다질 수 있습니다.
이번에는 간단한 블로그 포스트를 만드는 프로젝트를 통해 HTML의 기본 구조를 자세히 알아보겠습니다. 이 프로젝트에서는 'Code Magazine'이라는 웹사이트에 '웹의 기본 언어'라는 제목의 블로그 포스트를 작성할 것입니다. 이 포스트에는 링크, 이미지, 굵은 글씨, 이탤릭체, 리스트 등이 포함되어 있으며, 이를 통해 다양한 HTML 요소들을 배울 수 있습니다.
1. 프로젝트 폴더 만들기
먼저, 작업할 프로젝트 폴더를 생성합니다.
- 새 폴더 생성: 작업할 위치(예: 데스크톱)에 새로운 폴더를 생성하고 이름을
code-magazine으로 지정합니다. - 스타터 코드 복사: 이전 섹션에서 제공된 스타터 코드나 이미지 파일이 있다면, 해당 파일들을
code-magazine폴더에 복사합니다.
2. Visual Studio Code에서 폴더 열기
- VS Code 실행: Visual Studio Code를 실행합니다.
- 폴더 열기:
- 상단 메뉴에서 '파일' > '폴더 열기'를 선택하거나,
- 좌측 사이드바에서 '열기' 아이콘을 클릭합니다.
- 프로젝트 폴더 선택: 방금 생성한
code-magazine폴더를 선택합니다.
3. 새로운 HTML 파일 생성하기
- 새 파일 생성:
- 좌측 탐색기에서 '새 파일' 아이콘을 클릭합니다.
- 파일 이름 지정: 파일 이름을
index.html로 설정합니다.index.html은 웹사이트의 메인 페이지를 의미합니다.
4. HTML 기본 구조 작성하기
HTML 문서를 작성할 때는 기본 구조를 따라야 합니다. 자동 완성 기능을 사용하지 않고 직접 작성해보겠습니다.
4.1 DOCTYPE 선언
<!DOCTYPE html>- 이 선언은 브라우저에게 현재 문서가 HTML5 표준을 따르고 있음을 알려줍니다.
4.2 HTML 요소 생성
<html>
</html><html>요소는 모든 HTML 문서의 최상위 요소이며, 전체 문서를 감싸는 역할을 합니다.
4.3 head와 body 요소 추가
<html>
<head>
</head>
<body>
</body>
</html><head>요소:- 문서에 대한 메타데이터를 포함합니다.
- 브라우저에 표시되지 않는 정보들을 담습니다.
<body>요소:- 실제로 화면에 표시되는 콘텐츠를 포함합니다.
4.4 title 요소 추가
<head>
<title>웹의 기본 언어</title>
</head><title>요소는 브라우저 탭에 표시되는 페이지 제목을 지정합니다.
4.5 콘텐츠 추가
<body>
<h1>웹의 기본 언어</h1>
</body><h1>요소는 가장 큰 제목을 나타냅니다.
5. 코드 정리 및 들여쓰기
작성한 코드를 보기 좋게 정렬하면 가독성이 높아집니다. 들여쓰기를 사용하여 요소의 포함 관계를 명확히 표시하세요.
예시:
<!DOCTYPE html>
<html>
<head>
<title>웹의 기본 언어</title>
</head>
<body>
<h1>웹의 기본 언어</h1>
</body>
</html><html>안에<head>와<body>가 있고, 각각의 요소 안에 또 다른 요소들이 있습니다.- 들여쓰기는 보통 두 칸 또는 네 칸을 사용하며, 일관성을 유지하는 것이 중요합니다.
6. 브라우저에서 파일 열기
- 파일 열기: 파일 탐색기에서
index.html파일을 더블 클릭합니다. - 결과 확인: 기본 브라우저에서 파일이 열리고, "웹의 기본 언어"라는 제목이 화면에 표시됩니다.
7. HTML 기본 구조 복습
<!DOCTYPE html>: 문서가 HTML5를 따른다는 것을 선언합니다.<html>: 모든 콘텐츠를 감싸는 최상위 요소입니다.<head>: 메타데이터, 제목, 스타일, 스크립트 등을 포함합니다.<title>: 페이지의 제목을 지정하며, 브라우저 탭에 표시됩니다.<body>: 실제로 화면에 표시되는 모든 콘텐츠를 포함합니다.- 요소들의 포함 관계를 정확히 이해하고, 닫는 태그를 잊지 않도록 주의하세요.
8. 전체 실습 코드
<!DOCTYPE html>
<html>
<head>
<title>웹의 기본 언어</title>
</head>
<body>
<h1>웹의 기본 언어</h1>
</body>
</html>이렇게 하면 HTML 문서의 기본 구조를 완성하였습니다. 이 구조를 이해하고 직접 작성해보는 것은 매우 중요합니다.
다음 단계
- 다음 강의에서는 텍스트를 꾸미고 구조화하기 위한 다양한 HTML 요소들을 배울 것입니다.
- 링크, 이미지, 굵은 글씨, 이탤릭체, 리스트 등을 사용하여 콘텐츠를 더욱 풍부하게 만들어보세요.
곧 다음 강의에서 다시 만나 뵙겠습니다!
IT를 좋아합니다.