Twitter Markup Challenge

💻1. 구조적인 웹 문서 설계

• 구조적인 문서 설계란?
  글의 구조를 쉽게 파악하는 것
  브라우저는 인간의 언어를 이해할 수 없기 때문에 브라우저로 하여금 구조를 명확하게 파악할 수 있도록 장치를 깔아두어야 함 -> Sectioning Element 사용하기

---

💻2. 올바른 Sectioning Element 사용 방법

• Sectioning Element: section, article, nav, aside
• 사용 시 공통적인 규칙:
  Sectioning element 내에는 반드시 heading 태그를 작성해야 함.

---

💻3. Twitter Markup Challenge

1. 구획 나누기: 논리적으로 긴밀하게 관련된 집합체
   문서를 작성하는 사람의 관점에 따라 다르게 나눌 수 있음
   역할과 정보에 따라 나누기
2. 적절한 Sectioning elements 정하기

---

💻4. Header & Nav

1. Header
   -로고가 있으면 헤더로 잡아도 좋음.
   -header는 문서의 시작, 도입부 or 섹션의 도입부
   -로고는 정보로써 의미 많음. 이미지로 작성.
   -sectioning element 아님!
2. Nav
   -nav는 문서 간으로 이동할 수 있는 메뉴가 있을 때 사용하면 좋음.
   -nav 안에 header를 명시해주어야 함!

---

💻5. Main

• 본문에서 가장 핵심이 되는 부분 묶어주는 역할
• 하나의 HTML에서 단 하나의 Main만 사용 가능
• section, article, aside, nave 안에 main 올 수 없음

---

💻6. Section & Article

1. Section
   -heading 작성해야 함
   -가장 만만함
   -논리적으로 완결성이 있는 영역에 사용 (ex. 폼만 담당하고 있는 트윗 작성란)
   input file accept에서 모든 이미지 허용할 때: accept="image/*"
2. Article
   -heading 작성해야 함
   -뉴스 기사, 블로그, 피드와 같이 정보 컨텐츠가 컨텐츠로서 완결성이 있는 경우 뉘앙스를 살리기 위해 사용

💻7. Aside & Footer

1. Aside
   -본문 내용과 동떨어진, 분리된 내용을 마크업할 때 사용
   -사이드바, 배너 광고 등을 마크업할 때 사용함
   -heading 작성해야 함
2. Footer
   -sectioning element 아님
   -작은 링크들을 묶을 때 or 하단부 묶을 때 사용

---

💖짧은 후기

• 마크업 약간 헷갈리고 어지럽고 그렇지만 재밌당
• 양이 얼마 안된다고 생각했는데 생각보다 HTML 파트 양이 많다. 내 손목아 힘내...😥
• 구획을 잘 나누고 적절한 sectioning element를 사용하는 것이 중요하다는 것을 배웠다.
• div 떡칠보다는 nav나 section, article과 같은 element를 잘 사용해봐야지.
• 마크업은 디테일한 작업이다. aria-label 작성과 강조해야 하는 정보를 잘 파악하고, 잊지말자