📌 week(2) - 시맨틱 태그를 사용하면 좋은 점, position의 속성들과 각각의 특징

🙋🏻‍♀️ 시맨틱 태그를 사용하면 좋은 점을 설명해 주시오.

🙋🏻‍♀️ position의 속성들과 각각의 특징을 설명해 주시오.

 

---

시맥틱 태그 사용의 이점

1. 향상된 접근성 - 향상된 접근성은 장애가 있는 사람들이 웹 콘텐츠와 애플리케이션을 더욱 유용하게 만드는 것을 의미
   • 스크린 리더 호환성
     • 시각 장애가 있는 사용자를 위해 화면 판독기를 통해 내용을 소리내어 읽을 수 있도록 합니다.
   • 키보드 탐색
     • 사용자가 키보드만을 사용하여 사이트를 탐색할 수 있도록 하며, 이는 마우스를 사용할 수 없는 사용자에게 매우 중요합니다.
   • 명확하고 설명적인 콘텐츠
     • 사용자가 콘텐츠와 탐색 구조를 이해할 수 있도록 명확한 제목, 레이블 및 설명을 제공합니다.
   • 이미지용 대체 텍스트
     • 이미지를 볼 수 없는 사용자에게 동일한 정보를 전달하기 위해 이미지에 대한 텍스트 설명을 포함합니다.
   • 대비 및 색상 사용
     • 시각 장애가 있는 사용자의 가독성을 보장하기 위해 고대비와 적절한 색상 구성표를 사용합니다.
   • 확장 가능한 텍스트
     • 레이아웃을 깨지 않고 텍스트 크기를 조정할 수 있으므로 시각 장애가 있는 사용자에게 도움이 됩니다.
2. 더 나은 SEO
   • 검색 엔진: 시맨틱 태그는 검색 엔진이 콘텐츠의 구조와 의미를 이해하는 데 도움이 되며, 이를 통해 페이지의 검색 엔진 순위를 높일 수 있습니다.
   • 리치 스니펫: 리치 스니펫을 사용하고 더 나은 색인을 생성할 수 있습니다.
3. 향상된 코드 가독성
   • 명확성: 의미 태그가 다양한 섹션의 목적을 명확하게 설명하므로 개발자가 코드를 읽고 이해하기가 더 쉽습니다.
   • 유지 관리: 구조와 내용이 더 명확해지기 때문에 코드를 유지 관리하고 업데이트하기가 더 쉽습니다.
4. 표준화
   • 일관된 구조: 웹 개발에 대한 표준화된 접근 방식을 장려하여 개발자 간의 공동 작업을 더욱 원활하게 만듭니다.
   • 모범 사례: 웹 개발에 모범 사례를 사용하도록 권장합니다.
5. 브라우저 호환성
   • 최신 브라우저: 최신 브라우저는 의미 체계 태그를 올바르게 렌더링하도록 최적화되어 다양한 플랫폼에서 일관된 환경을 보장합니다

---

CSS의 위치 속성

CSS에서 position 속성은 요소에 사용되는 위치 지정 방법 유형을 지정합니다. 여기에는 `static`, `relative`, `absolute`, `fixed`, and `sticky`의 5가지 값이 있습니다. 각각은 뚜렷한 특징을 가지고 있습니다:

위치 정하기

위치를 정하는 기준에 대해서 top, right, bottom, left 속성으로 위치를 정할 수 있습니다.

값이 모두 똑같은 경우 inset 속성을 씁니다.

static 포지션

• 기본 위치: 기본값입니다. 요소는 일반적인 문서 흐름에 따라 배치됩니다.
• 위치 오프셋 없음: top, right, bottom 및 left 속성은 효과가 없습니다.

relative 포지션

요소의 원래 위치를 기준으로 배치합니다. 이때 요소의 원래 자리는 그대로 차지하고 있습니다.

• 자체 기준: 요소가 일반 위치를 기준으로 배치됩니다. top, right, bottom 또는 left를 설정하면 원래 위치에서 이동합니다.
• 공간 유지: 문서 흐름에서 요소의 원래 공간이 유지됩니다.

.green {
  position: relative;
  top: 15px;
  left: 10px;
}

absolute 포지션

• 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배치됩니다.
• 이때 포지셔닝이 되었다는 건 static이 아니라는 (position 속성을 지정했다는) 의미입니다. 아래 예시에서는 .red가 relative 포지션이어서 .blue는 .red를 기준으로 배치됩니다.
• 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않습니다.

.red {
  position: relative;
  top: 0;
  left: 10px;
}

.blue {
  position: absolute;
  right: 10px;
  bottom: 15px;
}

fixed 포지션

브라우저 화면을 기준으로 고정된 배치입니다. 글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않습니다. 그래서 내비게이션을 만들거나 할 때 겹치지 않도록 마진을 넣어주기도 했었죠.

 

sticky 포지션

static처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed처럼 고정되어 배치됩니다. 기본적으로는 static처럼 배치되기 때문에 요소의 원래 자리를 차지합니다.

 

z-index값

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