시맨틱한 페이지 만드는 법

가은·2023년 3월 7일

프론트엔드 스쿨 공부 일지

목록 보기

4/14

HTML/CSS (4)

HTML

시맨틱 마크업으로 section 구별하기

📍 추가 지식
초창기 HTML은 텍스트의 정렬과 하이퍼링크로의 문서연결이 주된 목적이였기 때문에 레이아웃을 잡을 필요가 없었다. 하지만 점점 HTML의 기능이 추가되고 HTML이 해야할 일(?)이 늘어나면서 무한정 사용하던 div를 웹 표준에 맞추기위해 시맨틱 마크업과 flex, grid 등이 생겨났다.

시맨틱 마크업과 flex, grid는 다양한 웹 기술의 발전, 검색엔진 최적화, 접근성, 다양한 글로벌 웹사이트 제작, 반응형 등의 이유로 생겨난 레이아웃 기법이다.

⚠️ 시맨틱 마크업은 필수적으로 사용하는 것이 좋지만, 익스플로러나 구 브라우저, 다른 프로그램 등의 호환을 고려해야하는 상황이면 사용하지 못할 수도 있다.
👉 모든 것을 시맨틱으로 만드는 것은 웹 표준이라 보기에 어렵다!

header
▪️ 소개 및 탐색에 도움을 준다.
▪️ 헤더를 중첩 사용하거나 헤더 안에 푸터를 사용할 수 있다.

nav
▪️ 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여준다.
▪️ 메뉴, 목차, 브레드크럼으로 사용된다.
▪️ 여러개의 nav 태그를 가질 수 있으며 페이지의 주요 탐색 링크를 위한 태그이다.

footer
▪️ 페이지의 작성자, 저작권정보, 관련 문서 등의 내용을 담는다.

main
▪️ body의 주요 콘텐츠를 나타낸다.
▪️ 페이지에서 한 번만 사용이 가능하다.
▪️ 여러 페이지에 반복되는 콘텐츠를 포함하면 안된다.

article
▪️ 독립적으로 구분해 배포하거나 재사용할 수 있는 구역을 나타낸다.
▪️ 독립적인 기능을 수행하며 아티클 영역이 제거되도 페이지는 정상적으로 돌아간다.
▪️ 제목 요소를 자식으로 포함해야 한다.

section
▪️ 제목 요소를 자식으로 포함해야 한다.

❓ article과 section의 차이
독립적으로 사용할 땐 article를 사용하지만, 웹 페이지의 문맥이 연결성이 필요하거나, 더 적합한 의미를 가진 요소가 없으면 section을 사용한다.

aside
▪️ 문서의 주요 내용과 간접적으로 연관된 부분을 나타낸다.
▪️ 문서의 주요 흐름을 따라가지 않고, 보조적인 역할만 한다.

hr
▪️ 이야기에서 장면 전환이 되었거나 문단 안에서 주제가 변경되었을 때 사용한다.
▪️ 단락 구분 시 사용하므로 <p>태그 내에서 사용하지 않는다.

⚠️ div와 span은 디자인을 위해서만 사용하자!

div
▪️ 콘텐츠 분할 요소로 블록 컨테이너이다.
▪️ 공간을 나누는 것 이외에 별 기능이 없다.
span
▪️ 인라인 컨테이너로 스타일을 적용하거나 인라인 요소를 묶을 때 사용한다.

CSS

띄워주세요 (float)

float은 한 요소가 보통 흐름으로부터 빠져나와 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소 좌우측에 배치되게 한다.

float을 해제하고 싶다면 clear: both;를 주면 된다.

⚠️ 자식 요소들이 모두 float 속성을 가지게 되면, 컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않는 것에 주의해야한다.
⚠️ clear: both;를 사용하고 margin-top을 주었을 때 적용되지 않는 현상도 일어나는데, 마진 병합 현상이기 때문에 마진 병합 현상 해결 방법을 적용해주면 된다.

해결 방법
1. 부모에게 높이 값 지정하기
2. container에 overflow: hidden;주기
3. clear-fix (부모한테 ::after사용하기)

.container::after{
  content:'';
  display:block;
  clear:left;
}

웹 접근성을 고려한 숨김처리

스크린리더와 같은 보조기구를 사용하는 사용자에게 필요한 정보들이 있기 때문에 숨김 처리 시 접근성을 고려하여 숨김처리를 할 수 있어야한다.

display: none / visibility: hidden
▪️ 모든 사용자에게 콘텐츠를 숨김
▪️ 스크린리더기에 무시
⚠️ display: none 같은 경우에는 접근성 트리에서도 요소가 완전히 사라지기 때문에 모든 사용자에게 숨겨도 될 시에만 사용한다.

width:0px; height:0px;
▪️ 페이지 흐름에서 제거되고 대부분 스크린리더가 읽지 않는다.
▪️ 악의적인 것으로 해석되어 검진 엔진에 불이익을 줄 수 있다.

text-indent: -9999px;
▪️ 콘텐츠를 밀어내는 방법으로, 스크린리더가 읽는다.
▪️ 포커스가 가능한 요소에 스타일이 지정된 경우 포커스는 받지만 페이지에는 표시되지 않는다.
▪️ 시작 장애가 있는 키보드 사용자는 혼동이 될 수 있다.

콘텐츠를 화면 밖으로 보내기

.sr-only {
	position:absolute;
	left:-9999px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

CSS 클립 방법

.a11y-hidden {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}