HTML 기초
- 브라우저는 HTML만 해석할 수 있습니다.
- HTML 문서 구조:
<!DOCTYPE html>(문서 유형 정의, DTD)로 시작합니다.
head 태그
- 메타데이터를 포함합니다 (HTML 문서의 정보).
meta태그: 웹페이지 정보를 제공합니다.- 주요 속성:
charset,name,content.
- 주요 속성:
body 태그
- 웹페이지의 실제 내용을 포함합니다.
시맨틱 태그의 중요성
- 검색엔진최적화 (SEO) 향상에 도움이 됩니다.
- SEO: 검색 시 웹사이트의 상위 노출 가능성을 증가시킵니다.
주요 시맨틱 태그
<header>: 페이지나 섹션의 헤더.<nav>: 네비게이션 링크.<main>: 페이지의 주요 내용.<footer>: 페이지나 섹션의 푸터.<blockquote>: 인용문 (주의: 반드시<p>태그를 포함해야 함).<cite>: 출처 (여러 출처일 경우 여러 번 사용 가능).인라인속성으로 사용 시 화면에 표시되지 않습니다.
<ins>,<del>:- 자주 업데이트되는 쇼핑몰, 게임에서 주로 사용됩니다.
<ins>: 새로 추가된 텍스트.<del>: 삭제된 텍스트.
기타 기본 태그
<html>: HTML 문서의 루트 요소.<head>: 메타데이터를 포함하는 문서의 헤드 섹션.<body>: 웹페이지의 실제 내용을 포함하는 본문.<h1>~<h6>: 제목 태그 (주의: 순차적으로 사용해야 함).<p>: 단락.<img>: 이미지 (alt 속성이 중요).<div>: 일반 컨테이너.<span>: 인라인 컨테이너.
강조 태그 비교
<strong>,<b>/<em>,<i>:<strong>,<em>은 시맨틱 태그,<b>,<i>는 비시맨틱 태그입니다.
주요 주의사항
헤더 태그 사용
h1에서h6까지 순차적으로 사용해야 합니다.- 순서를 건너뛰면 (예:
h1,h2,h5) 뒤의 태그가 수집되지 않을 수 있습니다.
실무에서의 h1 태그 활용
- 텍스트 대신
img태그를 사용할 수 있습니다. img태그의alt속성이 수집되어 의미를 가집니다.
추가 팁
- VS Code에서 "lorem" 입력 후 탭 키를 누르면 더미 데이터가 Emmet으로 제공됩니다.
프론트엔드 공부 기록 아카이빙🍁