1. 시맨틱 태그 사용의 장점
시맨틱 태그란?
시맨틱 태그는 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그다.
시맨틱 태그의 요소로는 <header>, <nav>, <main>, <section>, <footer> 등이 있다.
검색 최적화 (SEO)
검색 엔진이 html에 있는 태그를 파악해서 사이트를 분석하게 된다. 의미 있는 태그를 사용하면 검색 엔진이 사이트를 정확하게 분석해 검색 결과상에서 웹 사이트 노출 순위를 높일 수 있다.
웹 접근성
시각장애인들이 스크린리더를 사용해서 웹페이지를 보게 된다. 이때 시맨틱 태그를 사용하게 되면 스크린 리더의 활용에 좋다.
코드 가독성과 유지보수
개발자가 코드를 읽을 때 어느 부분이 헤더 영역이고 메인 영역인지 파악이 쉽게 파악할 수 있다. 따라서 개발자 생산성 높일 수 있고 유지보수도 쉬워진다.
2. position의 속성과 특징
position이란?
position은 레이아웃을 배치하거나 객체를 위치시킬 때 사용하는 css 속성이다.
static
position의 기본 속성값으로 설정 전과 후의 값이 같다.
relative
원래 있어야 할 공간(static)을 기준으로 움직인다.
위치를 이동시켜 주는 top, left, bottom, right 값을 지정해 줘야 움직인다.
absolute
부모 요소 중 static이 아닌 첫 번째 요소를 기준으로 자리잡는다.
주로 부모에 relative, 자식에 absolute를 설정하는 방법을 사용한다.
fixed
브라우저를 기준으로 하며 스크롤을 하더라도 화면의 같은 곳에 고정되어 있다.
sticky
평소에는 static으로 존재하다가 요소가 특정 지점에 도달하면 fixed로 변해 고정된다.
top, left, bottom, right 값을 설정해 특정 지점을 지정한다.
