03-1 HTML과 첫 만남
03-2 HTML의 구조 파악하기
03-3 HTML 파일 만들기
03-4 웹 문서의 구조를 만드는 시맨틱 태그
03 HTML 기본 문서 만들기
03-1 HTML과 첫 만남
HTML이란?
하이퍼텍스트
- 문서를 서로 연결해주는 링크
마크업
- 웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것 의미
태그
- 웹 브라우저가 제목, 텍스트, 표를 구별할 수 있도록 하는 꼬리표
HTML의 기본 기능
- 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것
03-2 HTML의 구조 파악하기
HTML 문서의 기본 구조 살펴보기
웹 문서의 유형을 지정하는 태그
<!DOCTYPE html> : 문서 유형을 지정
웹 문서의 시작을 알리는 \ 태그
- hTML 파일의 시작을 표시
- lang 속성으로 문서에서 사용할 언어를 지정할 수 있음
웹 브라우저에 문서 정보를 알려 주는 \
- 웹 브라우저가 알아야 할 정보를 입력하는 곳
\ 태그
- '데이터에 관한 데이터'
- 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정하는 것
<meta charset="UTF-8">
\ 태그
- 웹 문서의 제목 입력
웹 브라우저에 내용을 표시하는 \
- 실제 웹 브라우저에 표시할 내용을 입력
03-3 HTML 파일 만들기
[실습] VS Code를 활용하여 HTML 파일 생성 및 완성하기
[실습] 라이브 서버 설치하고 수정 결과 바로 확인하기
태그, 이건 꼭 알아두세요!
- 태그는 소문자로 씀
- 여는 태그와 닫는 태그를 정확히 입력함
- 적당하게 들여쓰기를 함
- 일부 태그는 속성과 함께 사용함
03-4 웹 문서의 구조를 만드는 시맨틱 태그
시맨틱 태그가 왜 필요할까요?
시맨틱 태그
- HTML의 태그는 이름만 봐도 의미를 알 수 있어 시맨틱 태그라고 함
<p>: 텍스트 단락<a>: 앵커
- 웹 브라우저가 HTML 코드만 보고 쉽게 이해할 수 있기 떄문에
- 문서 구조가 정확히 나눠지므로 다양한 화면에서 웹 문서를 표현하기 쉽기 때문에
- 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있기 때문에
웹 문서의 구조를 만드는 주요 시맨틱 태그
\
태그- 헤더 영역을 나타내는 태그
- 주로 맨 위쪽이나 왼쪽에 있음
- 검색 창이나 사이트 메뉴를 삽입
\
태그- 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듦
- 웹 문서의 위치에 영향을 받지 않음
\
태그- 웹 문서에서 핵심이 되는 내용
- 페이지마다 똑같이 들어간 정보는 넣을 수 없고, 웹 문서마다 다르게 보여주는 내용으로 구성
- 웹 문서에서 한 번만 사용 가능
\
태그- 웹에서 실제로 보여주고 싶은 내용
- 독립된 웹 콘텐츠 항목을 말함
- 문서 안에서 여러 개 사용 가능
\
태그- 웹 문서에서 콘텐츠 영역
- 몇 개의 콘텐츠를 묶을 떄 사용
- \ 태그 안에 넣을 수 있음
\
태그- 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듦
- 필요한 경우에만 사용
\
태그- 웹 문서에서 맨 아래쪽에 있는 영역
- 사이트 제작 정보나 저작권 정보, 연락처 등을 넣음
- 다른 시맨틱 태그 모두 사용
\
태그
- 문서 구조를 만들 때 사용하는 경우 多
- 문서 구조를 만들거나 스타일을 적용할 때 사용
HTML에서 주석 달기
주석
- 코드에 붙이는 설명글
- (VS Code)
Ctrl+?
기본형
<!-- 주석 내용 -->
연습문제
- 1
- 2
- 1
- 1
- \
- \
- title/title/section/section/footer/footer
