시멘틱 태그, position의 속성들

태그와 기능적으로 비슷합니다.
하지만 웹페이지의 구조를 좀 더 이해하기 쉽게 해주는 면에서 차별을 둡니다.

좋은점을 4가지 정도로 요약하면

1. 접근성
2. 검색 엔진 최적화 (SEO)
3. 코드의 가독성
4. 유지 관리

입니다.

1. 접근성

• 시멘틱 태그의

  과 같은 태그는
  웹페이지의 다양한 부분을 명확하게 구별할 수 있습니다.
  예를들어서 시각장애인들을 위한 프로그램인 <스크린리더>와 같은 기술을 구현하기 위해서도
  시멘틱 태그는 웹페이지의 구조를 명확하게 설명할 수 있는 좋은 방법 입니다.

2. 검색 엔진 최적화 (SEO)

• 우리가 자주 사용하는 모든 검색 엔진은 ex) 속칭 '구글 봇' '네이버 봇'과 같은
  검색 엔진 최적화 기술이 도입되어 있습니다. 각 봇들은 시맨틱 태그를 이용하여 웹 페이지의 내용과 구조를 더 잘 이해 할 수 있게 됩니다. 따라서 봇이 잘 이해하고 좋은 페이지라고 판단하면
  검색 엔진 순위 향상에 도움이 될 수 있습니다.

3. 코드의 가독성

• 어려운 프로젝트를 할 수록 시맨틱 태그를 사용하면 웹 페이지의 코드가 더 읽기 쉽기 때문에
  가독성 부분에서도 도움이 될 수 있습니다.

4. 유지 관리

• 가독성이 좋기 때문에 개발자 들이 코드를 더 쉽고 빠르게 이해할 수 있기 때문에 개발자들이 갑자기 바뀌 더라도 빠르게 대응 할 수 있고 유지 관리 적인 측면에도 유리 합니다.

결론 : 시맨틱 태그는 웹 페이지의 의미와 구조를 명확하게 해주어 전반적인 개발 향상에 도움이 될 수 있습니다.

[2]. position의 속성들과 각각의 특징을 설명

속성들을 먼저 나열해 보겠습니다.

static
relative
absolute
fixed
sticky

등이 있습니다. 값이 모두 똑같은 경우 inset 속성을 쓸 수 있습니다
가령 top right bottom left 모두 0이라면 inset: 0; 으로 쓸 수 있습니다.

1. static

• 가장 기본이 되는 값이며, 요소는 자연스러운 문서 흐름에 따라 배치 됩니다.
  top tight bottom left 속성이 영향을 미치지 않습니다.

2. relative

• 요소는 기본 위치를 기준으로 배치가 됩니다.
  문서의 흐름은 유지하면서, top right bottom left 속성을 사용해 상대적으로 위치를 조정 가능 합니다. ** 다른 요소들의 배치에 영향을 주지 않습니다.

3. absolute

• **가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배치가 됩니다.
  relative와 마찬가지로 top right bottom left 속성을 사용해 상대적으로 위치를 조정 가능 합니다. 이때 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않습니다.

4. fixed

• 요소는 뷰포트에 대해 상대적으로 배치 됩니다.
  내려가는 스크롤과 관계없이 같은 위치에 고정됩니다.
  top right bottom left 속성을 사용해 위치를 조정 합니다.
  요소가 문서 흐름에서 제거되어 다른 요소들의 배치에 영향을 주지 않습니다.

ex) 주로 내비게이션을 만들거나 할 때 겹치지 않도록 마진을 넣어주기도 합니다.

5. sticky

• 'relative' 와 'fixed'의 특성을 결합한 것입니다.
  스크롤에 따라 'relative'에서 'fixed' 위치로 전환 될 수 있습니다.
  요소는 문서 흐름내에 있지만, 특정 스크롤 위치에서 뷰포트 내에 "고정" 될 수 있습니다.
  top right bottom left 속성을 사용해 "sticky'가 되는 임계점을 설정 합니다.

6. z-index

• 앞뒤 순서를 정할 때 쓰는 값입니다. 순서기 때문에 단위 없이 씁니다.
  값이 높을 수록 화면에서 앞쪽에 배치되며, 값이 같으면 코드에서 아래 줄에 있는 요소가
  앞쪽에 보이게 됩니다.