❓시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.

시맨틱 마크업은 <div>와 기능은 똑같지만 HTML 태그를 사용하여 문서의 구조와 의미를 명확하게 전달하는 것이다. 예를 들어, <header>, <nav>, <article>, <section>, <footer> 등의 의미 있는 태그를 사용하여 콘텐츠의 의도를 더 명확하게 전달할 수 있다.

시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEO)나 접근성(Accessibility)을 높이는데 도움이 된다.

태그 이름	용도
<header>	영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부
<main>	사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능
<footer>	영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음
<article>	- 하나의 완성된, 독립적인 내용을 나타내는 영역 - 문서, 페이지, 애플리케이션 또는 사이트에서 독립적인 콘텐츠
<section>	- 어떤 것의 일부분을 나타내는 영역 - 문서에서 독립적이거나 테마가 있는 콘텐츠 그룹을 정의
<figure>	자체로 독립적인 콘텐츠를 나타내며, 일반적으로 이미지, 도표, 사진, 코드 등을 포함
<figcaption>	<figure> 요소의 콘텐츠에 대한 설명

❓position의 속성들과 각각의 특징을 설명해 주세요.

🫠static

• position 속성의 기본값
• 요소는 일반적인 문서 흐름에 따라 배치되며, top, right, bottom, left, z-index 속성이 적용되지 않는다.

🫠relative

• 요소를 자기 자신을 기준으로 상대적인 위치로 이동시킨다. top, right, bottom, left 속성을 사용하여 위치를 조정할 수 있다. 다른 요소들은 해당 요소의 위치를 차지하며, 상대적인 위치에 따라 배치된다.

🫠absolute

• 요소를 문서 흐름에서 제거하고, 가장 가까운 조상 요소 중 position: static이 아닌 요소를 기준으로 상대적인 위치로 이동시킨다.
  만약 그런 조상 요소가 없으면, 문서의 초기 컨테이너(일반적으로 body)를 기준으로 상대적인 위치로 이동한다. top, right, bottom, left 속성을 사용하여 위치를 조정할 수 있다.

🫠fixed

• 요소를 뷰포트를 기준으로 고정된 위치에 배치한다. 스크롤해도 요소의 위치가 변경되지 않는다. top, right, bottom, left 속성을 사용하여 위치를 조정할 수 있다.

⚠️fixed는 자리를 차지하지 않는다. 스크롤시 본문과 내용이 겹치면 본문에 margin을 넣는게 좋다.

🫠sticky

• 요소를 문서 흐름에 따라 배치하다가 스크롤되면 특정 위치에 고정시킨다. 스크롤되기 전까지는 relative와 동일한 동작을 하며, 스크롤될 때 특정 위치에 도달하면 그 위치에 고정된다. top, right, bottom, left 속성을 사용하여 스크롤에 반응하는 위치를 조정할 수 있다.

👍🏻position 속성 값으로 absolute, fixed가 지정된 요소는 display 속성이 block으로 바뀜.