📚 Overview
사이트명: 네이버
작업 기간: 3일 소요
라이브러리: -
유형: PC 적응형, 클론 코딩
특징: 웹 접근성을 고려한 시맨틱 마크업 웹 사이트
✔️ What's the point?
시맨틱 마크업class 네이밍 규칙WAI-ARIA란?IR 기법,IS 기법
ㅤ
1. 시맨틱 마크업
시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말합니다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말합니다.
◻️ 사용 방법
-
헤더/푸터에
<header>와<footer>사용 -
메인 컨텐츠에
<main>과<section>사용 -
독립적인 컨텐츠에
<article>사용 -
최상위 제목으로
<h1>사용 -
순서가 없는 목록으로
<ul>과<li>사용 -
내비게이션
<nav>사용7\
-
이외 태그 사용
<button>: 클릭 가능한 버튼 영역에 사용
<address>: footer 사이트 정보 영역에 사용
<strong>: 문장강조, 게시글 제목 등에 사용
<span>: 의미 없는 텍스트(해시태그 영역 등 ), 블라인드 기법에 사용
<em>: 단어강조, 게시글에서 카테고리 분류에 사용
<i>: icon 요소를 만드는 데 사용하여 코드의 가독성 높임
이런 식으로 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않다.
◻️ 시맨틱 태그 사용의 장점
- 검색엔진최적화(SEO): 검색엔진이 시멘틱 태그를 중요한 키워드로 간주해 우선순위를 판단한다. 따라서 올바른 태그르 사용하는 것이 중요!
- 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 시멘틱 마크업을 푯말로 사용할 수있다.
- 해당 코드가 어떤 역할을 하는지 어떤 기능을 하는지 직관적인 이해를 가능하게 한다. 즉, 코드의 가독성을 높인다.
2. class 네이밍 규칙
✔️ 계층 구조의 클래스명 작성
[header/footer/section] - [group] - [area] - [wrap] - [box]
최상이 계층부터 내림차순으로 사용하여 클래스들의 관계를 쉽게 이해할수 있도록 하였다.
✔️ 각 태그에 사용된 클래스명
-
a태그
-ㅤ링크인 경우: ooo_link
-ㅤ버튼인 경우: ooo_btn -
ul/li태그
-ㅤul: ooo_list
-ㅤli: ooo_item
✔️ 각 태그에 사용된 클래스명
• 의미 없이 영역을 구성 → column-left, column-right/ row_top, row_bottom
• 의미 있는 영역 구성
ㅤㅤ- section_best(섹션) → [sc_best]
ㅤㅤ- area(섹션보다 작은 영역을 잡아줄 때) → [cate_area]/[blog_area]
ㅤㅤ- wrap(더 작은 영역) → [thumb_wrap]/[info_wrap]
ㅤㅤ- box(더 작은 영역) → [title_box]/[source_box]
3. WAI-ARIA란?
마우스와 같은 포인팅 장비를 사용하기 힘든, 스크린 리더를 사용하는 사용자들에게 동적 컨텐츠, javascript, ajax, vue, react 등과 같이 페이지를 새로고침 하지 않고도 페이지의 내용과 데이터가 바뀌는 영역에 역할, 속성, 상태 정보를 추가하여 동적인 컨텐츠에 보다 원활하게 접근하고 페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이용을 도와준다.
◻️ role
HTML 요소의 역할을 정의할 때 좀더 세세하고 다양한 설정을 위해 native 요소만으론 부족한 경우가 있다. 이때 role 을 사용해서 해당 요소들의 역할을 명시할수 있다.
◻️ aria-selected
Tab UI에서 선택된 tab이 스크린리더 사용자에게 선택된 tab 임을 알려주는 역할을 한다. aria-selected true, false를 사용하여 선택된 tab 요소를 알려줄 수 있다.
<div class="sort_area" role="tablist">
<a href="#" class="btn_sort" role="tab" aria-selected="true">구독한 언론사</a>
<a href="#" class="btn_sort" role="tab" aria-selected="false">전체 언론사</a>
</div>탭을 구현할 때, aria 속성을 이용하여 웹 접근성에 맞게 작성해 보았다.
role="tablist"탭버튼을 감싸고 있는 컨테이너 영역에 삽입해 정확한 역할을 설명role="tab"리스트가 아닌 탭 역할을 하는 Element 라고 역할을 변경aria-selected="true"선택된 탭이 무엇인지 알 수 있도록 true/false 값을 삽입
💡 사용시 주의사항
1. 올바르지 못한 ARIA를 사용할 바엔 ARIA를 사용하지 않는 편이 좋다.
2. ARIA를 사용하기 전에 태그의 역할과 의미에 맞게 작성한다.
3. 태그의 기본 의미를 중복해서 선언할 필요는 없다.
4. IR 기법, IS 기법
◻️ IR 기법
IR(Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것으로 이는 웹 접근성 준수를 위한 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필요하다.
네이버의 IR기법
<!--html-->
<span class="blind">한글 입력기</span>/*css*/
.blind {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
margin: -1px;
}IR 기법은 접근성을 떨어뜨리지 않으면서도 검색엔진으로부터 높은 가중치를 받을 수 있다는 장점이 있다.
◻️ IS 기법
조각난 이미지 파일들을 하나의 파일로 병합 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법.
CSS의 background-image와 background-position 속성을 이용해 원하는 이미지가 있는 부분을 잘라서 사용한다. background-position은 배경 이미지의 위치를 지정하고 배치하는 속성이다.
/*common.css(공통파일)에 이미지 파일 불러오기*/
.sc_shopping .group_header .title .shop_link::before,
.sc_shopping .group_header .title .shop_link::after,
.sc_shopping .products_area .page_wrap .btn::before,
.sc_shopping .deal_title .link_logo::before,
.sc_shopping .deal_thumb .oneplus_ico::before,
.sc_shopping .deal_thumb .thumb_box:nth-child(2)::before {
background-image: url(../images/sp_shop.png);
-webkit-background-size: 129px 101px;
background-size: 129px 101px;
background-repeat: no-repeat;
}/*사용할 부분에 background-position을 이용해 사용*/
.sc_shopping .deal_title .link_logo::before {
content: '';
display: inline-block;
width: 40px;
height: 21px;
background-position: 0 -54px;
vertical-align: top;
margin-right: 7px;
}IS 기법 장점
- 문서 전송 속도를 높이기 때문에 웹페이지의 로딩시간이 단축됨
- 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 관리하기 간편함
IS 기법 단점
- 이미지 컷팅시 작업량이 증가함
- 수정이 필요한 경우 유지보수가 까다로움
