시멘틱 코드의 종류와 계층 구조
시멘틱 태그는 '의미가 있는 태그'라는 뜻이다. 마구잡이로 div만 썼다가는 나중에 보기도 힘들고 더불어 유지보수도 힘들어진다.
레이아웃 잡을 때 가장 겉의 둘러싸고 있는 요소는 일반적으로 .container 를 쓴다
주제별 컨텐츠는 section, 그리고 section안에 컨텐츠 div가 들어가는 article이 들어간다.
계층 구조를 숫자로 표현하면
1 .container
2 section, header, footer
3 article
4 div
등으로 나타낼 수 있겠다.
강의에서 나타난 자료만으론 (미래의 내가) 이해가기 힘들 것 같아 추가 자료를 찾아봤다.
시멘틱 태그의 장점
1. SEO 최적화에 유리. (SEO: Search Engine Optimization)
검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해준다.
2. 웹 접근성에 효율적
일반적인 브라우저에서는 차이가 없지만 스크린리더(시각장애인을 위한 웹 서핑 프로그램)과 같은 환경에서는 웹 접근성과 사용성을 향상시켜준다.
3. 유지보수의 용이성
많으 div사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능하며 해당 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이하다.
사실 시멘틱 태그 종류는 위에서 나타난 것들보다 훨씬 많다.
header: 머리글, 제목, 헤더
nav: 네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현
aside: 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그
section: 말그대로 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용. 같은 테마를 가진 여러개의 콘텐츠의 그룹화
article: 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용.
footer: 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그
address: 콘텐츠 작성자나 사이트 소유자의 정보등을 부가적으로 담는 기능
hgroup: 제목과 관련된 부제목을 묶는 태그
main: 이름처럼 문서body의 중심 주제, 주요 내용 또는 응용 프로그램의 중심 기능과 직접 관련되어나 확장되는 콘텐츠를 나타낸다.
details: 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다.
figure: 이미지, 다이어그램, 사진 등 독립적인 컨튼츠 정의시 사용
figcaption,figure: 요소의 설명 캔션(caption) 정의
mark: 현재 맥락에 관련이 깊거나 중요한 부분 강조
time: 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현
summary: details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.
하이고 많다......
📝메모
float속성이 있으면 부유하게 되어 부모 요소의height에 영향을 끼치지 않는다. 그런데 형제 요소들에겐 영향을 받는다.부유하게 된다고 해서 형제가 있든 뭐가 있든 기본 위치에 고정되어 있을 줄 알았는데,
float속성이 없는 다른 형제들(회색, 빨간색 박스) 아래에 순서에 맞춰 위치되어있는 노랑박스. 하지만float속성이 있어 부모의 크기는 다른 두 형제들에게만 맞춰져 있다.
너도 고생이 많구나....^-^
