NAVER 클론코딩

JW LOG·2023년 3월 28일
0

portfolio

목록 보기
1/6
post-thumbnail

🔍 Project Overview

사이트명 : 네이버
작업기간 : 2일 소요
라이브러리 : -
유형 : PC적응형,클론코딩
특징 : 웹 접근성을 고려한 시맨틱 마크업 웹 사이트

✅ Check Point

  1. 시맨틱마크업
  2. WAI-ARIA란?
  3. IR 기법, IS 기법

📚 Learning Point

  • grid를 이용한 라인 긋기

1. 시맨틱 마크업

시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.

시멘틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다.

  • 헤더/푸터에 headerfooter 사용
  • 메인 컨텐츠에 mainsection사용
  • 내비게이션에 nav사용
    ...

이런 식의 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다.

예를 들어, 동일한 효과를 부여하는 strongb 태그가 있다.
둘은 동일하게 글자색을 진하게 하지만 b 태그의 경우는 그 자체가 "bold"의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다.
하지만 strong의 경우에는 "그 안의 내용이 다른 내용보다 더 강조되어야 한다"라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다

🔹 시맨틱 태그의 특징

  1. 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리하다.

    검색엔진 최적화(SEO)
    검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이다. 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다.

  2. 웹 접근성 측면에서, 시각장애가 있는 사용자의 편의성을 증진시킨다.

    웹 접근성(Web Accessibility)
    장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있게 하는 방식을 가리킨다.

사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.

  1. 코드 가독성을 높일 수 있다.

2. WAI-ARIA란?

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)는 W3C에서 만든 기술로, WAI-ARIA 혹은 ARIA로 불린다.

WAI-ARIA는 스크린리더가 브라우저를 읽을 때 각 요소가 어떤 역할을 하는지 무슨 의미로 존재하는지 알 수 있도록 하기 위해 만들어진 기술이다. 또, 자바스크립트나 다른 동적 언어로 인해 페이지의 요소가 바뀌더라도 새로고침을 하지 않아도 스크린 리더가 바뀐 요소를 읽어준다.

🔹 WAI-ARIA 종류

1. 역할(Role)

role은 요소의 역할에 대한 정보를 제공해준다.
role에 들어가는 값은 정해진 값을 사용해야 한다.

  • role="tab" : 탭 역할임을 사용자에게 전달.
  • role="tablist" : 탭메뉴의 리스트임을 사용자에게 전달.
  • role="tabpanel" : 탭패널임을 사용자에게 잔달.
    ...

더 많은 값은 MDN에서 참고 할 수 있다. 👉 MDN

2. 속성(Property)

요소가 속성에 대한 정보를 제공한다.
aria- 라는 접두어를 갖는다.

  • aria-required : 폼 요소 중 필수 요소인 것을 알려줌.
  • aria-label : 이미지에 대한 정보를 전달
  • aria-live : 업데이트된 정보의 상황을 전달.

3. 상태(State)

탭, 아코디언, 폼 요소, 토글 버튼 등 요소의 변화된 상태에 대한 정보를 제공한다.
마찬가지로 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>

🔹 WAI-ARIA 사용시 주의사항

  • ARIA를 의미에 맞게 작성한다.
    스크린리더를 사용하여 페이지에 접근하는 경우 ARIA의 정보에 의지하게 되는데 바르지 못한 정보를 제공하게 되는 경우 스크린리더 사용자의 페이지 접근에 치명적인 영향을 주게된다.

3. IR 기법, IS 기법

🔹 IR 기법

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으로 하여 컨텐츠가 숨겨지도록 한다.

clipclip-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>

🔹 IS 기법

HTML의 img태그가 background-image보다 로딩 속도가 빠르긴 하지만 img태그를 가지고 하나씩 이미지들을 불러오는데에는 시간이 오래 걸린다.
이때 유용하게 사용될 수 있는 방법이 IS(Image Sprite)기법이다.

IS기법은 사용하고자 하는 이미지들을 모아 하나의 이미지로 만들어 그 이미지 파일만 서버에 요청하고, CSS의 background-imagebackground-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기법을 함께 사용하면 서버로의 요청 횟수를 최소화하여 웹 페이지의 로딩 속도를 줄일 수 있고, 이미지들을 관리하기 쉬워진다.


📚 grid를 이용한 라인 긋기

해당영역을 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()로 계산하면 각각의 위치를 지정할 수 있다.
가로의 경우도 이와 같다.


References

WISDOM : 웹접근성과 시맨틱 마크업
뱀귤 블로그 : 웹 접근성과 WAI-ARIA
About Web : WAI-ARIA 접근성
a_in.log : WAI-ARIA: role과 aria-label 사용법
choolog : IR기법

0개의 댓글