[ HTML 웹 문서 ] 기본 구조 & 시맨틱 구조학습하기
[ HTML ]
H(yper) : 연결된 주소로 이동
T(ext) : 웹 문서
M(ark up) : 태그로 만들어진
L(anguage) : 언어
*HT : 웹에서 자유롭게 오갈 수 있는 링크*Mark up : 텍스트뿐만 아니라 이미지, 영상 등을 표시한다.
>> 마크업에 사용하는 꼬리표를 '태그(tag)'라고 한다.
👉 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어
[ HTML 문서의 기본 구조 ]
왼쪽의 HTML 문서를 실행하면 오른쪽의 화면이 실행된다.
>> VSCode 라이브서버(Live Server) 사용
Alt + L + O (소문자 가능) : 웹 페이지에 실행 결과 바로 확인하기
HTML 문서 구조 설명
🤍하얀 네모🤍
<!DOCTYPE html> : 현재 문서가 HTML 언어로 작성한 웹 문서라는 뜻
'이제부터 처리할 문서는 HTML 문서야'라고 알려주는 것
<!doctype html>도 가능
💛노란 네모💛
<html> ~ </html> : 웹 문서의 시작과 끝을 나타내는 태그
웹 브라우저가 <html>을 만나면 </html>까지 소스를 읽어 화면에 표시한다.
>> lang 속성을 사용해 문서에서 사용할 언어 지정
>> 문서 정보를 지정하는 <head> 부분과 문서 내용을 입력하는 <body> 부분을 포함한다.
💚초록 네모💚
<head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분
웹 브라우저 화면에는 보이지 않는다.
>>문서에서 사용할 외부 파일 링크를 입력
<meta> 태그 : 문자세트 등 문서 정보
ex) charset : 해당 문서의 속성 지정
/ <meta name="key값(이름)" content="value값(내용)">
<title> 태그 : 문서 제목
💙파란 네모💙
<body> ~ </body> : 실제로 웹 브라우저 화면에 나타나는 내용
HTML 태그는 대부분 <body> 태그 안에 들어있다.
[ 웹 문서의 기본 구조 ]
실제 웹 브라우저 화면에 나타나는 내용을 입력하는 'body'를
사용할 때에는 웹 브라우저의 구역을 나누어서 내용을 입력한다.
HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용하는 <div> 태그를 사용한다.
위처럼 <div>로 나누어 설정하는 경우 해당 영역이
어디를, 무엇을 나타내는지 아는 것이 어렵다.
>> 태그 설정 시 구조의 이해를 위해 사용하는 태그가 바로 '시맨틱 태그'이다.
"시맨틱 태그" : 이름만 봐도 의미를 알 수 있는 HTML 태그
시맨틱 태그의 장점
>> 화면 낭독기 같은 보조 기기에서 사이트의 구조를 이해할 수 있다.
>> 문서 구조가 정확히 나눠지므로 PC나 모바일 등
다양한 화면에서 웹 문서를 표현하기 쉽다.
>> 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.
[ 시맨틱 태그 ]
<header> 태그
헤더 영역 / body의 윗부분
사이트 전체의 or 특정 영역의 헤더
주로 검색 창이나 사이트 메뉴 삽입한다.>> 아래 사진의 '핑크색' 부분
<nav> 태그
내비게이션 영역웹 문서 위치에 영향을 받지 않는다.문서 안에 여러 개 만들 수 있다. (id로 구분)
<main> 태그
메인 영역 / body의 중앙
웹 문서에서 핵심이 되는 내용
웹 문서마다 다르게 보이는 내용으로 구성
웹 문서에서 한 번만 사용한다.
>> 아래 사진의 '파란색' 부분
<article> 태그
독립된 웹 콘텐츠 항목
(따로 떼어도 콘텐츠가 되는 내용)
<section> 태그를 포함할 수 있다.
<section> 태그
콘텐츠 영역
몇 개의 콘텐츠를 묶는 용도로 사용
CSS 적용을 위해 묶는 용도로 쓰지 말 것
(<div> 태그를 사용할 것)
<aside> 태그
사이드바 영역
본문 내용 외에 왼쪽이나 오른쪽
, 혹은 아래쪽에 사이드 바 표시
필수 요소가 아니므로 필요할 경우에만 사용
<footer> 태그
푸터 영역 / body의 아랫부분
사이트 제작 정보나 저작권 정보, 연락처 등
다른 시맨틱 태그를 사용해 다양한 정보 포함
>> 아래 사진의 '노란색' 부분
<div> 태그
소스를 묶는 용도
영역을 구별하거나 스타일 적용을 위해 사용
HTML문을 작성하고 저장을 해주어야지만
실행 시(Alt L O) 웹 브라우저에 나타난다.
상단의 '파일'에 '자동 저장'을 클릭
>> 수정 시 자동으로 저장된다.
지금까지[HTML]의 기본구조와 웹 문서의 기본구조인 '시맨틱구조'에 대해 알아보았습니다.
다음 포스팅에서는 [HTML] 웹 문서에 다양한 내용을 입력하는 방법에 대해 알아보겠습니다.
❤긴 글 읽어주셔서 감사드립니다❤
'웹개발 > 웹 개발[프런트엔드-VSCode]' 카테고리의 다른 글
| 프런트엔드 [ HTML 웹 문서 ] 표 만들기 (0) | 2022.12.22 |
|---|---|
| 프런트엔드 [ HTML 웹 문서 ] 목록 만들기 (0) | 2022.12.21 |
| 프런트엔드 [ HTML 웹 문서 ] 텍스트 태그 (2) | 2022.12.21 |
| 프런트엔드 [ VSCode ] 개발 환경 구축 (0) | 2022.12.21 |
| 프런트엔드 [ 웹 개발과 프론트엔드(Front-End) ] (0) | 2022.12.21 |