반응형
DAY 3
🔖 오늘 읽은 범위 :
🔥01/07(수) 진도표 알림
👉🏻공부 내용: 03 HTML 기본 문서 만들기
👉🏻쪽수: 53~79쪽
HTML
- Hyper Text Markup Language.
- tag ⇒ 꼬리표.
- 웹 브라우저에 보여줄 내용에 마크업 하고 문서끼리 링크하는 것.
HTML 구조
- HTML 문서 구조
<!DOCTYPE html> <!-- 현재 문서가 HTML 로 작성한 웹 문서라는 뜻 --> <html lang="ko"> <!-- 웹 문서의 시작과 끝 --> <head> <!-- 웹 문서 해석 정보 --> <meta charset="UTF-8"> <title>웹 개발 입문</title> </head> <body> <!-- 실제 웹브라우저에 나타나는 내용 --> <h1>웹 개발 기초</h1> <p>HTML</p> <p>CSS</p> <p>자바스크립트</p> </body> </html>- html 태그에서
lang="ko"로 할 경우, “한국어로 된 문서”로 검색 결과 범위를 제한함.- 화면 낭독기에서 맞춤 언어로 진행 할 때도 영향을 줌.
- <head> 태그
- 웹 브라우저가 알아야 할 문서 정보들 모음.
- 사용할 스타일 시트 파일도 여기서 연결함.
- <meta> 태그의 역할
- 화면에 어떤 글자를 표시할 때 어떤 인코딩을 사용할지 지정.
- 웹 사이트 키워드 지정. 간단한 설명 및 제작자 정보 지정.
- 검색 엔진에서 사이트 검색 시 참고. 검색 엔진에 따라 참고 정보가 다름.
<meta name="keywords" content="html의 구조"> // 웹 문서의 키워드 <meta name="description" content="html의 구조를 알아봅시다."> // 웹 문서 설명 <meta name="author" content="Fog"> // 웹 문서의 소유자나 제작자
- 문서 제목 지정 <title>: 웹 브라우저 제목 표시줄에 표시 됨. 즐겨찾기 할 때 추가 되는 제목.
- <body> 태그
- 실제 웹 브라우저에 표시되는 내용.
HTML 파일 만들기
- VS Code 에서 html 확장자로 파일 생성.
- 편집기에서 ! 를 입력한 후 엔터 치면 기본 태그가 자동 입력 됨.
라이브 서버 설치 및 수정 결과 바로 확인하기
- VS Code 확장 기능 ‘라이브 서버’
- 확장 > 검색 > ‘Live Server’ 검색 후 설치.
- 이름: Live Server
ID: ritwickdey.LiveServer
설명: Launch a development local Server with live reload feature for static & dynamic pages
버전: 5.7.9
게시자: Ritwick Dey
VS Marketplace 링크: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer - 저장할 때마다 바로 반영함.
- 페이지 주소는 ⇒ "http://localhost:5500/03/my.html”
태그 작성 시 기억할 점
- 태그는 소문자로 씁니다.
- 여는 태그와 닫는 태그를 명확히 입력합니다.
- 적당하게 들여쓰기를 합니다.
- 일부 태그는 속성과 함께 사용합니다.
<img src="images/salad.jpg" alt="Lemon" width="100">- 태그 속성 순서는 상관없음.
- 태그와 속성을 함께 알아야 함.
웹 문서 구조 시맨틱 태그
- 시맨틱 = 의미론적인, 의미가 통하는
- 필요한 이유
- 코드만 보고도 용도 파악이 쉽기 때문에 사이트 구조 이해를 제대로 하게 됨.
- 문서 구조가 정확해져 문서 표현하기 쉽기 때문.
- 검색엔진이 검색 할 때 필요한 내용을 찾기 쉽다.
- 주요 시맨틱 태그
- <header> : 헤더 영역. 맨 위쪽 이나 왼쪽, 검색 창이나 사이트 메뉴 삽입.
- <nav> : 내비게이션 영역. 웹 문서 위치에 영향을 받지 않음. 헤더, 푸터, 사이드 바 안에 포함 가능하고 독립 사용 가능.
- <main> : 메인 콘텐츠 영역. 웹 문서 핵심 내용 넣기.웹 문서마다 다르게 보여주는 내용으로 구성. 웹 문서에서 한번만 사용 가능.
- <article> : 독립적인 콘텐츠 영역. 웹에서 실제로 보여주고 싶은 내용을 넣음. 웹 콘텐츠 항목. 여러 개 사용 가능하고, 내부에 <section> 태그 넣을 수 있음. 블로그의 포스트 처럼 독립된 콘텐츠로 사용.
- <section> : 콘텐츠 영역. <article> 태그와 비슷함. 몇 개의 콘텐츠를 묶을 때 사용.
- <aside> : 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바 영역. 필요한 경우에만 사용함.
- <footer> : 웹 문서 맨 아래쪽에 있는 푸터 영역. 사이트 제작 정보, 저작권 정보 또는 연락 등등. <header>, <section>, <article> 등을 사용 가능함.
- <div> : 다른 시멘틱 태그가 나오기 전에 헤더, 내비게이션, 푸터 등을 구별할 때 사용했음. 문서 구조를 정의 할 때, <div> 대신에 시맨틱 태그 사용하는 것이 좋음.
- id 나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용함. 영역을 구별하거나 스타일로 문서 꾸미는 걸로 사용.
HTML 주석 달기
<!-- 주석 내용 -->풀이
- 풀이
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Page</title> </head> <body> <header> <h1>My Blog</h1> </header> <main> <article> <h2>Blog Post Title</h2> <p>This is a blog post.</p> </article> </main> <aside> <h3>About Me</h3> <p>This is some test about me.</p> </aside> <footer> <p>Copyright 2023</p> </footer> </body> </html>
- 시맨틱 태그 속성을 좀 더 공부할 것.
- 라이브 서버는 편리해서 앞으로 많이 사용할 듯 함.
🤟소감 3줄 요약
- 알아야 할 태그들이 너무 많아…
- MDN 문서 참고해서 봐야지.
- 책에서 알려준 중요한 태그 키워드는 알고 가자.
'Do it 스터디!' 카테고리의 다른 글
| [ Do it! HTML + CSS 웹 표준의 정석 스터디!] 05 입력 양식 작성하기(1) (0) | 2026.01.13 |
|---|---|
| [ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기(2) (0) | 2026.01.10 |
| [ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기 (0) | 2026.01.10 |
| [ Do it! HTML + CSS 웹 표준의 정석 스터디!] 02장 웹 개발 시작하기 (0) | 2026.01.10 |
| [ Do it! HTML + CSS 웹 표준의 정석 스터디!] 01장 웹은 어떻게 움직일까? (0) | 2026.01.10 |