[2주차] 시맨틱 태그와 position

시맨틱 태그 (Semantics)

시맨틱 태그는 그 태그에 포함된 콘텐츠에 특정한 의미를 정하는 태그입니다.

장점

시맨틱 태그를 잘 활용하면 접근성, seo, 가독성을 향상시킬 수 있습니다.

1. 접근성 : 스크린 리더와 같은 보조 기술에 대해 더욱 정확하고 유용한 정보를 제공할 수 있습니다.
2. seo향상 : 시맨틱 태그를 잘 활용하면 검색엔진상의 웹사이트 순위에서 이점이 되는데요 그럼 관련키워드를 검색할때 검색창 상위에 노출될 가능성이 있습니다.
3. 가독성 : 태그만 보고 구조를 쉽게 파악할 수 있기때문에 유지보수와 가독성이 좋습니다.

Position 속성

종류

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

static (기본값)

문서의 일반 흐름에 따라 배치됩니다.
top 속성 값이 적용 되지 않습니다.

relative

문서의 일반적인 흐름에 따라 배치됩니다.
단 static 과 다른점은 자기 자신을 기준으로 top, right 등의 값을 적용합니다.

absolute

문서의 일반적인 흐름에서 벗어납니다.
가장 가까운 위치의 조상을 기준으로 top, right 등의 값을 적용합니다.

fixed

문서의 일반적인 흐름에서 벗어납니다.
뷰포트를 기준으로 top, right 등의 값을 적용합니다.

sticky

스크롤이 지정된 위치에 도달할 때 까지 sticky 요소는 문서의 일반적인 흐름에 따라 배치됩니다.
스크롤의 좌표가 지정된 위치에 도달하면 sticky 요소가 지정된 위치에 고정됩니다.
이제 지정된 위치 이하로 스크롤해도 해당 위치에 고정되어 유지됩니다.

⛔️ 주의사항

1. sticky 요소의 위치를 1개 이상 지정해야 한다
2. 부모 요소에 overflow 속성이 적용되어 있으면 동작하지 않는다
3. 부모 요소의 높이가 설정되어 있지 않은 경우에 동작하지 않는다.