코드스테이츠 프론트엔드 부트캠프 2일차 후기

오늘은 본격적으로 부트캠프 수업이 있던 날이었다.

html을 배우는 시간이었는데, 짧고 굵게 그동안 배웠던 것들을 점검해 볼 수 있었다.

 

html이란?

html은 HyperText Markup Language의 줄임말로, 웹페이지의 구조를 이루는 마크업 언어이다.

html을 건물에 비유하면 뼈대를 세우는 과정이라고 할 수 있다.

 

<div>와 <span>

<div>는 대표적인 block element로 웹페이지의 한 줄을 전부 차지하는 태그인 반면,

<span>은 inline element로 컨텐츠만큼의 공간만을 차지한다.

 

시맨틱 태그의 중요성

시맨틱 태그(Semantic tag)란 의미를 부여한 태그다.

<div>나 <span>처럼 단순히 구역을 구분하는 의미만 가진 태그는 자유도가 높아서

큰 제약 없이 어디에나 활용할 수 있다는 장점이 있지만,

반면에 해당 태그가 문서 내에서 어떤 역할을 하는지를 알기 어렵다.

 

반면에 시맨틱 태그는 그것이 담고 있는 내용을 정의해 주기 때문에

코드를 봤을 때 전체 구조 내에서 그 태그가 하는 역할을 한눈에 파악할 수 있다.

 

또, 검색 엔진에서 시맨틱 태그를 기반으로 검색 결과를 보여주기 때문에

시맨틱 태그를 문서의 키워드를 담은 부분에 적절히 사용하면 검색 엔진에 노출될 가능성이 높아진다.

 

뿐만 아니라 시맨틱 태그를 사용하면 웹 접근성의 측면에서도 좋다.

장애인이 웹 보조 기구들을 이용해 어디가 제목이고 어디가 내용인지 알 수 있기 때문이다.

 

시맨틱 태그의 종류

• <article> : 문서의 컨텐츠에서 하나의 독립된 내용을 담는 태그.
• <aside> : 필수 요소가 아닌 나머지 부분을 담는 태그로, 광고 등을 넣을 때 사용한다.
• <footer> : 웹페이지의 가장 아랫부분에 들어가는 태그로, 라이선스, 주소, 연락처 등을 넣을 때 사용한다.
• <header> : 한 구역의 가장 윗부분에 위치하며 제목이나 상단바, 검색창 등을 넣을 수 있다.
• <nav> : 내비게이션(navigation)의 약자로, 사이트를 안내하는 요소에 사용된다. 안에 <ul>을 넣어 목록 형태로 사용한다.
• <main> : 문서의 주된 부분을 나타낸다.