마크업

🧩 시맨틱 태그

시맨틱 태그란? 태그 자체의 의미가 있는 태그!
1. 협업에서의 이점이 있다
2. 직관성이 좋다
3. seo(검색엔진최적화)에서 좋은 점수를 얻는다
4. 접근성이 좋다
5. 유지보수가 용이하다

시맨틱 태그의 종류
<header>, <nav>, <section>, <article>, <aside>, <footer>, <main>, <address>, <hgroup>, <details>, <figure>, <figcaption>, <mark>, <time>, <summary>

🧩 <section> <article> 태그 알아보기

<ariticle>

• 내용이 독립적이고, 어디에든 독립적으로 가져다 쓰일 수 있는 영역을 그룹화한다
• 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획
• 게시판, 블로그 글, 매거진, 뉴스 기사에 쓰인다

<section>

• 논리적으로 관련있는 문서 혹은 요소를 분리 할 때 사용한다

공통적으로

• 하위 요소로 제목(h1-h6)이 나와야한다
• header, footer 요소를 포함하기도 한다

👓 article 안에 section이 들어가는 것이 자연스럽다

🧩 태그의 우선순위 점수

태그 : 1점
클래스 : 10점
아이디 : 100점
가상요소(nth) : 10점

🧩 클래스명 주는 방법

추후의 겹침을 방지하기 위해 모든 태그에 클래스명을 주도록 한다!

의미없이 영역을 구성하고 싶을 때!

• group-flex
• column-left, column-right
• col-left, col-right
• row-top, row-bottom
• group-flex1, group-flex2
• inner1, inner2
• group-row

의미가 있는 영역을 구성하고 싶을 때!

• section 클래스명 ex)sc-event
  -group
  -event-area 영역을 잡아 줄 때 area부터 시작해서 아래단계로
  -event-wrap
  -event-box

리스트 클래스 작성

• ul -> event-list
• li -> event-item

a태그 클래스는 목적에 맞게!

• link-event -> 링크이동
• btn-event -> 링크 이동하지 않고 스크립트 작동

🧩 문장태그

• strong 문장을 강조. 게시글에서는 제목
• em 단어 강조. 게시글에선 카테고리, 분류
• p 문장, 단락, 내용 유의미한 텍스트
• span 의미가 많이 떨어지는 텍스트
  a태그나 다른 태그 안에 있는 span -> 디자인 용도
  

🧩 WAI-ARIA

wai-aria란?
스크린 리더를 사용하는 사용자들에게 동적 컨텐츠, javascript, ajax, vue, react 등과 같이 페이지를 새로고침 하지 않고도 페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에 보다 원활하게 접근하고 페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이용을 도와준다.
참고사이트