🐼 HTML (Hypertext Markup Language)
웹 문서를 만드는 기본 언어 (웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시)
!doctype html
<!doctype html>- 웹 문서의 유형을 지정하는 태그
html
<html> ~ </html>- HTML 파일의 시작과 끝을 의미하는 태그
<html lang="ko"> </html>문서에서 사용할 언어를 지정하는 태그 (ko=한국어)
head
<head> ~ </head>- 웹 브라우저에 웹 문서의 정보를 알려주는 태그 (화면에는 보이지 않음)
meta, title, style 등의 시맨틱 태그로 구성
meta
<meta> ~ 닫힘태그x웹 문서와 관련된 정보를 지정 (문자 세트 인코딩 지정, 문서 제작자 등)
<meta charset="utf-8">웹 문서를 인코딩할 문자세트 지정 (utf-8 은 한국어로 인코딩할 것을 의미)
<meta name="keywords" content="study blog">웹 문서의 키워드 지정
<meta name="description" content="비전공자의 개발공부">웹 문서의 설명
<meta name="author" content="cakecoder">웹 문서의 소유자나 제작자
<title> ~ </title>웹 문서의 제목 (웹 브라우저의 제목 표시줄에 표시됨)
body
<body> ~ </body>- 웹 브라우저에 표시할 내용 (화면에 보이는 부분)
header, section, nav, article, footer 등의 시맨틱 태그로 구성
header
<header> ~ </header>주로 위쪽이나 왼쪽에 위치하며 머리말, 제목을 표현하기 위해 쓰임
nav
<nav> ~ </nav>수평 내비게이션으로 메뉴 항목을 가로로 구현함
웹 문서 안에서 다른 위치로 연결하거나 연결하려는 링크를 만듬 (위치 상관 x)
section
<section> ~ </section>웹 문서에서 본문 콘텐츠 영역을 나타냄 (대분류)
section 안에 section 자식으로 들어올 수 있음
의미를 묶는 느낌으로 사용하며 스타일 적용을 위해 콘텐츠를 묶으려고 한다면 div 사용하는게 나음
article
<article> ~ /article웹에서 실질적으로 보여주고 싶은 내용을 넣음. 독립적인 느낌 (소분류)
쇼핑몰의 카테고리 분류를 section 으로 한다면 각 카테고리별 상품들을 article 에 넣음
(대분류 section 소분류 article)
main
<main> ~ </main>웹 문서에서 핵심이 되는 내용을 담음
main 태그는 웹 문서에서 한번만 사용할 수 있음
aside
<aside> ~ </aside>사이드 바 영역을 구현
ex) 블로그 게시글 옆 광고링크
footer
<footer> ~ </footer>웹 화면 구조 중 제일 아래에 위치하며 사이트 제작 정보나 저작권, 연락처 등을 넣음
adress
<adress> ~ </adress>주소나 연락처 정보를 넣음
div
<div> ~ </div>