[2주차] 시맨틱 태그 /

코드잇 스프린트 6기 - 2주차 위클리 과제

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

시맨틱 태그(semantic tag) : 의미가 있는 태그

시맨틱 태그가 생기기 전에는 모두 div 태그로 사용하였다. 모두 div 태그로 사용하다 보니, 가독성이 떨어지는 문제가 있었다.

 

종류

header / nav / main / article / section / aside / footer / div

• header : 검색 창이나 사이트 메뉴를 삽입
• nav : 다른 문서로 연결하는 링크 역할을 수행 / 어떤 곳이든 배치할 수 있다.
• main : 웹 문서에서 핵심이 되는 내용을 넣는다. / 한 번만 사용할 수 있다.
• article : 보여주고 싶은 내용을 넣는다. / 여러 번 사용할 수 있으며, section 태그를 넣을 수도 있다.
• section : 몇 개의 콘텐츠를 묶는 용도로 사용한다.
• aside : 필요한 경우에만 사용
• footer : 사이트 제작 정보나 저작권 정보, 연락처를 주로 넣는다.

article 태그는 독립된 콘텐츠로 사용한다.

 

필요한 이유

1. 가독성 : HTML 코드만 보고도 구조를 파악할 수 있다.
2. 사용 확장성 : 화면 낭독기가 웹 페이지의 구조를 파악해 순서에 맞게 정확한 내용을 전달할 수 있게 돕는다.
3. 검색엔진 최적화(SEO, Search Engine Optimization) : 검색시, 필요한 내용을 정확하게 찾을 수 있게 만든다.

 

---

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

position 속성에 대한 내용은 본래 1주차 과제였다가 2주차로 옮겨졌다.

https://young-taek.tistory.com/163