3장 - HTML 기본 문서 만들기
3.1 HTML과 첫 만남
HTML(HyperText Markup Language): 인터넷 정보를 웹 브라우저에 보여 줄 때 사용하는 언어
(*)HTML5는 HTML의 가장 최신 버전이다. 일반적으로 HTML이라고 하면 HTML5를 의미한다고 보면 된다.
3.2 HTML의 구조 파악하기
💡 <실습3.1> VS Code의 글꼴, 글자 크기, 탭 크기 변경하기
✅ Step 1: 웹 브라우저로 HTML 파일 실행하기
‘03\index.html’ 파일을 열기
✅ Step 2: VS Code에서 예제 파일 불러오기
-
HTML 문서의 구조를 살펴보면:
<!DOCTYPE html>현재 문서가 HTML로 작성된 웹 문서임을 나타낸다<html>~</html>- HTML 문서의 전체 범위를 정의하는 태그
- 태그에서는 lang 속성을 추가할 수 있다. 예: ``
<head>~</head>웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분<meta>태그: 웹 브라우저에 보이지 않지만 웹 문서에 관련된 중요한 정보들을 저장하는 곳이다. 이 태그의 주요 역할 중 하나는 문자 인코딩 방식을 지정하는 것이다. 예:<meta charset=”UTF-8”> <meta name="keywords" content="html의 구조"> <meta name="description" content="html의 구조를 알아봅시다"> <meta name="author" content="Kyunghee Ko"><title>태그: 태그에서 지정하는 내용은 웹 브라우서의 제목 표시줄에 표시된다. 예:<title>HTML 기본문서</title>(03\index.html 참고)
<body>~</body>실제 웹 브라우저에서 표시되는 내용(텍스트, 이미지, 링크 등)을 포함
실행 결과:예: ```html <!-- 앞의 내용 생략 --> <body> <h1>웹 문서 만들기</h1> <hr> <p>HTML</p> <p>CSS</p> <p>자바스크립트</p> </body> <!-- 뒤의 내용 생략 --> ```
3.3 HTML 파일 만들기
💡 <실습3.2> VS Code를 활용하여 HTML 파일 완성하기
준비: 선택한 폴더에 새 파일 만들기 → 새 파일 이름 입력하기: ‘my.html’ → 새파일 확인하기
✅ Step 1: 기본 코드 입력하기: 첫 번째 줄에 느낌표 ‘!’를 입력한후 Enter || Tab 누르면 코드가 생성된다.
✅ Step 2: 문서 언어와 제목 바꾸기
<!-- <html lang="en"> 수정 -->
<html lang="ko">✅ Step 3: 문서 내용 입력하기
<body>
<h1>웹 문서 만들기</h1>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>✅ Step 4: 웹 문서 확인하기
💡 <실습3.3> 라이브 서버 설치하고 수정 결과 바로 확인하기
✅ Step 1: VS Code에서 [Live Server] 설치한다.
✅ Step 2: 편집 창에서 라이브 서버 실행하기
✅ Step 3: 수정 결과 즉시 확인하기
10번째 줄에 <hr>(가로줄) 추가한다. 라이브 설치하면 따로 웹 브라우저에서 새로고침하지 않더라도 VS Code에서 코드를 저장하는 순간 수정한 내용을 바로 반영해서 보여 줍니다.
- 태그 주의점:
- 태그는 소문자로 쓴다
- 여는 태그와 닫는 태그를 정확히 입력해야 한다
- 적당하게 들여쓰기를 한다
- 일부 태그는 속성과 함께 사용한다. 예: <태그 속성=”속성값” 속성=”속성갑” …>
<img src='images/salad.jpg" alt="레드향" width="150">
3.4 웹 문서의 구조를 만드는 시맨틱 태그
<header>→ 헤더 영역(로고, 제목 등)<nav>→ 내비게이션(메뉴, 링크)<main>→ 주요 콘텐츠 영역<article>→ 독립적인 글(기사, 블로그 글)<section>→ 콘텐츠 구획(주제별 그룹)<aside>→ 사이드바(광고, 보조 정보)<footer>→ 푸터(저작권, 연락처)<div>→ 여러 요소를 묶는 컨테이너
- HTML에서 주석 달기:
<!-- 기본형 주석 -->
<!-- Command + ? 누르면 주석 자동적으로 생성 된다 -->