[HTML] HTML

웹 개발 이해하기

관심사를 분리하기 위해서 구조, 스타일, 상호작용 세 가지를 나눠서 코드 작성

• HTML : 웹 페이지의 구조를 담당하는 마크업 언어
• CSS : 디자인 요소를 시각화하는 스타일 시트 언어
• Javascript : 웹 페이지를 프로그램으로 만들어 유저와 상호작용할 수 있게 해주는 프로그래밍 언어

기본 구조와 문법

HTML은 태그들의 집합으로 태그는 기본적으로 <tag></tag> 형식이지만 안에 내용이 없다면 <tag/>와 같이 표현이 가능하다. ex) <img/>

div와 span

• div는 block 요소이며 뷰포트의 한 줄을 차지한다.
• span은 inline 요소이며 컨텐츠의 크기만큼 공간을 차지한다.
  👉 width, height 속성이 적용되지 않음

id와 class

• id는 고유하게 이름을 붙일 때 사용한다.
• class는 반복되는 영역을 유형별로 분류할 때 사용한다.

시맨틱 요소

시멘틱 요소란 그 자체에 의미를 가지고 있는 요소를 말한다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다. 참고

시맨틱 요소를 사용해야 하는 이유

• 검색 엔진이 시맨틱 요소를 중요한 키워드로 고려한다.
  👉 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있음
• 다른 개발자와 협업할 때 <div> 보다 의미 있는 코드 블록을 찾는 것이 더 편리하며 태그 안에 채워질 데이터 유형을 예측하기도 쉽다.

시맨틱 요소의 종류

• <article> : 독립적이고 자체 포함된 콘텐츠를 지정한다.
• <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소이다. ex) 사이드바, 광고창
• <footer> : 페이지나 해당 파트의 가장 아랫부분에 위치하며 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용한다.
• <header> : 페이지나 해당 섹션의 가장 윗부분에 위치하며 사이트의 제목이 보통 들어간다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다.
• <nav> : 내비게이션의 약자로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에 <ul>을 넣어 목록 형태로 사용한다.
• <main>: 문서의 주된 콘텐츠를 표시한다.

레퍼런스

MDN:Sementics
w3School:HTML Semantic Elements