시맨틱 태그란?
- 시맨틱 태그란 웹 문서의 구조와 콘텐츠에 대한 의미를 전달하는 HTML 요소 입니다.
시맨틱 태그의 종류는 section, article, header, footer 등 여러 요소가 있으며 각 요소마다 의미가 있습니다.
시맨틱 태그를 사용하면 좋은 점
- HTML 문서의 구조와 가독성이 향상됩니다.
- 검색 엔진이 콘텐츠를 더 잘 이해하는 데 도움을 주어 검색 엔진 최적화가 향상됩니다.
- 스크린 리더기 같은 보조 도구의 의존하시는 몸이 불편한 사용자 분께서 보다 쉽게 접근할 수 있습니다.
- div 태그를 사용하여 스타일을 적용하는 것보다 더 쉽게 적용할 수 있습니다.
Position의 속성
- css 속성인 position의 속성은 static이 기본값이며, relative, absolute, fixed, sticky 총 5가지의 속성을 갖고 있습니다.
- static : static 속성은 position의 기본값으로 top, right, bottom, left 값을 설정해도 아무 변화가 없습니다.
- relative : relative 속성은 요소의 크기와 레이아웃을 유지하고, top, right, bottom, left 값을 넣었을 때 원래 위치를 기준으로 위치를 변경할 수 있습니다.
- absolute : absolute 속성은 상위 요소 중 static을 제외한 다른 position 속성의 위치를 중심으로 움직입니다. 요소의 크기를 지정하지 않았을 때는 최소 사이즈로 변하고, 레이아웃에서 빠져나와 다른 요소들에게 영향을 줍니다. absolute 또한 위치값을 설정하여 position이 걸린 부모를 기준으로 위치 이동을 합니다.
- fixed : fixed 속성은 뷰포트를 기준으로 위치가 고정됩니다. 또한 레이아웃에서 빠져나와 다른 요소에게 영향을 줍니다. fixed 속성은 다른 속성과는 다르게 부모에게 position이 있어도 뷰포트를 기준으로 위치가 고정되며, 스크롤을 해도 고정된 상태로 따라오는 특징이 있습니다.
- sticky : sticky 속성은 fixed 속성과 똑같이 스크롤을 하면 고정된 상태로 따라오는 특징이 있습니다. 하지만 fixed 속성과는 다르게 레이아웃에서 빠져나오지도 않고 position이 있는 부모를 기준으로 스크롤이 부모 요소에 도착했을 때부터 위치가 고정되어 부모 요소의 끝까지만 고정되어 따라가고 스크롤이 부모 요소가 넘어갔을 시에는 relative 속성 같이 부모 요소 끝에 고정되는 특징이 있습니다.
FRONTEND DEV.