사이트명 : 네이버
작업기간 : 2일 소요
라이브러리 : -
유형 : PC적응형,클론코딩
특징 : 웹 접근성을 고려한 시맨틱 마크업 웹 사이트
grid
를 이용한 라인 긋기시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.
시멘틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다.
header
와 footer
사용main
과 section
사용nav
사용이런 식의 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다.
예를 들어, 동일한 효과를 부여하는 strong
과 b
태그가 있다.
둘은 동일하게 글자색을 진하게 하지만 b
태그의 경우는 그 자체가 "bold"의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다.
하지만 strong
의 경우에는 "그 안의 내용이 다른 내용보다 더 강조되어야 한다"라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다
검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리하다.
검색엔진 최적화(SEO)
검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다. 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다.
웹 접근성 측면에서, 시각장애가 있는 사용자의 편의성을 증진시킨다.
웹 접근성(Web Accessibility)
장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있게 하는 방식을 가리킨다.
사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.
WAI-ARIA
(Web Accessibility Initiative – Accessible Rich Internet Applications)는 W3C에서 만든 기술로,WAI-ARIA
혹은ARIA
로 불린다.
WAI-ARIA
는 스크린리더가 브라우저를 읽을 때 각 요소가 어떤 역할을 하는지 무슨 의미로 존재하는지 알 수 있도록 하기 위해 만들어진 기술이다. 또, 자바스크립트나 다른 동적 언어로 인해 페이지의 요소가 바뀌더라도 새로고침을 하지 않아도 스크린 리더가 바뀐 요소를 읽어준다.
role
은 요소의 역할에 대한 정보를 제공해준다.
role
에 들어가는 값은 정해진 값을 사용해야 한다.
role="tab"
: 탭 역할임을 사용자에게 전달.role="tablist"
: 탭메뉴의 리스트임을 사용자에게 전달.role="tabpanel"
: 탭패널임을 사용자에게 잔달.더 많은 값은 MDN에서 참고 할 수 있다. 👉 MDN
요소가 속성에 대한 정보를 제공한다.
aria-
라는 접두어를 갖는다.
aria-required
: 폼 요소 중 필수 요소인 것을 알려줌.aria-label
: 이미지에 대한 정보를 전달aria-live
: 업데이트된 정보의 상황을 전달.탭, 아코디언, 폼 요소, 토글 버튼 등 요소의 변화된 상태에 대한 정보를 제공한다.
마찬가지로 aria-
라는 접두어를 가진다.
aria-selected
: 메뉴의 선택된 여부를 알려줌.aria-expanded
: 콘텐츠의 확장이나 축소된 상태를 알려줌.<div class="sort-area" role="tablist">
<a href="" role="tab" aria-selected="true" class="btn-sort">구독한언론사</a>
<a href="" role="tab" aria-selected="false" class="btn-sort active">전체언론사</a>
</div>
IR(Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것으로 이는 웹 접근성 준수를 위한 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필요하다.
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
position:absolute
로 설정 해서 일반 문서의 흐름에서 벗어나 다른 레이아웃들에 영향을 주지 않도록 해야 한다. position:absolute
를 사용하면 주변의 다른 요소들이 absolute
된 속성을 무시하고 배치된다는 것을 기억하자.
그 다음 width
, height
를 1px로 설정해 아주 작은 영역만 차지하도록 하고, margin:-1px
로 화면 상에 안나오게 한다.
그 후 overflow:hidden
으로 하여 컨텐츠가 숨겨지도록 한다.
clip
과 clip-path
는 요소의 특정 부분만 나오도록 하는 속성으로 이미지를 자를 때 유용하게 사용된다.
<form action="" method="get">
<fieldset>
<legend class="blind">검색</legend>
<div class="wrap">
<input type="text" class="input-text">
<button class="btn-submit"><span class="blind">검색</span></button>
</div>
</fieldset>
</form>
HTML의 img
태그가 background-image
보다 로딩 속도가 빠르긴 하지만 img태그를 가지고 하나씩 이미지들을 불러오는데에는 시간이 오래 걸린다.
이때 유용하게 사용될 수 있는 방법이 IS(Image Sprite)기법이다.
IS기법은 사용하고자 하는 이미지들을 모아 하나의 이미지로 만들어 그 이미지 파일만 서버에 요청하고, CSS의
background-image
와background-position
속성을 이용해 원하는 이미지가 있는 부분을 잘라서 사용한다.
common.css
모든페이지에 공통으로 쓰이는 소스는 common.css
에 넣는다.
.header .logo a{
background-image: url(../imges/sp-bg.png);
background-repeat: no-repeat;
background-size: 442px;
}
layout.css
common.css
소스를 상속받기 때문에 해당css
에서 소스를 줄일 수 있다.
.header .logo a{
width: 222px;
height: 52px;
display: block;
background-position: 0 -158px;
}
IS기법과 IR기법을 함께 사용하면 서버로의 요청 횟수를 최소화하여 웹 페이지의 로딩 속도를 줄일 수 있고, 이미지들을 관리하기 쉬워진다.
해당영역을 display:grid
를 이용해 라인을 만들수 있다.
<div class="group-media">
<ul class="media-list">
<li class="media-item">
<a href="" class="media">
<img src="./assets/imges/news.png" alt>
</a>
</li>
</ul>
<!-- 라인 -->
<i class="vt-line vt1"></i><i class="vt-line vt2"></i><i class="vt-line vt3"></i><i class="vt-line vt4"></i><i class="vt-line vt5"></i>
<i class="hr-line hr1"></i><i class="hr-line hr2"></i><i class="hr-line hr3"></i>
</div>
단순히 꾸며주는 용도로 i
태그를 이용하여 가로,세로를 구분해 클래스를 지정해준다.
.sc-news .group-media {
position: relative;
height: 260px;
border: 1px solid #dae1e6;
}
.vt-line{
position: absolute;
top: 0;
width: 1px;
height: 100%;
background: #dae1e6;
}
.vt-line.vt1{left: calc(124px*1);}
.vt-line.vt2{left: calc(124px*2);}
.vt-line.vt3{left: calc(124px*3);}
.vt-line.vt4{left: calc(124px*4);}
.vt-line.vt5{left: calc(124px*5);}
.hr-line{
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #dae1e6;
}
.hr-line.hr1{top: calc(65px*1);}
.hr-line.hr2{top: calc(65px*2);}
.hr-line.hr3{top: calc(65px*3);}
전체 외곽선은 부모영역 border
로 꾸며주고 안에 있는 가로,세로 라인갯수만 계산해서 만들어준다.
세로선의 시작지점은 부모영역 top:0
에서 시작하며 해당영역 높이를 상속받아 height:100%
로 꾸며줄 수 있다.
이에 맞춰 각각의 left
값을 다르게 주면 되는데 로고 한칸의 영역이 가로 124px, 세로65px이다. 세로선의 경우 가로길이에 맞춰 calc()
로 계산하면 각각의 위치를 지정할 수 있다.
가로의 경우도 이와 같다.
WISDOM : 웹접근성과 시맨틱 마크업
뱀귤 블로그 : 웹 접근성과 WAI-ARIA
About Web : WAI-ARIA 접근성
a_in.log : WAI-ARIA: role과 aria-label 사용법
choolog : IR기법