[Portfolio] NAVER

jwww·2023년 2월 22일

portfolio

포트폴리오

목록 보기

1/6

네이버는 시멘틱 마크업을 통한 레이아웃 구성, 접근성을 중점으로 작업했습니다.

🔎프로젝트 정보

프로젝트명: 네이버
제작기간: 2일
사용언어: HTML, CSS
분류: 적응형 PC

🚩포인트

시멘틱 태그 활용
클래스 네이밍 규칙을 정해 작성
IR/IS 기법 활용
웹접근성

1. 네이밍 규칙을 정해 작성

마크업 구조 클래스

(1) .section / sc-OOO : 논리적 관련이있는 영역을 묶는 클래스
(2) .group-OOO : 블록 단위 묶음, 단순 영역묶음을 위한 클래스
(3) .OOO-area : 소 단위 묶음, group 보다 하위 클래스
(4) .wrap : 그 외 소단위 묶음용 클래스 group/area 보다 상위에 나올 수 있습니다.
(5) .OOO-box : 제일 작은 단위 묶음용 클래스

리스트용 클래스

(1) ul: OOO-list
(2) li: OOO-item

위와 같은 규칙을 가지고 클래스명을 작성하여 획일성과 가독성을 높이고
레이아웃이 복잡할수록 클래스명을 지정하는데 어려움이 생겨 시간을 할애하는 것을 방지할 수 있었습니다.

2. IR / IS 기법 활용

IR기법이란

의미있는 이미지를 배경으로 처리하고 그에 상응하는 내용을 텍스트로 기입하는 기법

검색창에서 키보드, 검색 버튼을 배경이미지로 처리하고 텍스트 숨김처리용 공통클래스 blind를 만들어 텍스트를 숨겨줍니다.

<button type="button" class="btn-keybord" title="한글입력기 열기"><span class="blind">키보드입력</span></button>
<button type="button" class="btn-set"><span class="blind">검색설정</span></button>
<button type="submit" class="btn-submit"><span class="blind">검색</span></button>

.blind {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
}

position: absolute; 레이아웃에 영향을 주지 않도록 함.

width: 1px; height: 1px; 스크린 리더가 읽을 수 있도록 영역 확보.

overflow: hidden; 넘치는 영역을 감춰줌.

clip: rect(0 0 0 0); 요소의 특정 부분만 나오도록 한다. 어떤 요소의 보여주고 싶은 영역을 지정한다.

margin: -1px; 눈에 보이는 부분을 없애줌.

IS기법이란

조각난 이미지 파일들을 하나의 파일로 병햡 후 배경으로 처리해서 웹 문서 전송 속도를 높이는 기법.
텍스트를 포함해 접근성을 확보해야하기 때문에 IR기법을 함께 사용합니다.

common.css 파일에서 background-image로 스프라이트 이미지를 불러오고 다른 css 파일 (layout.css나 main.css)에서background-position으로 각각 위치를 지정했습니다.

/* common.css */
.header .search-area .btn-keybord::after,
.header .search-area .btn-set::after,
.header .search-area .btn-submit::after {
    background-image: url(../images/sp_bg.png.png);
    background-size: 442px;
    background-repeat: no-repeat;
}

/* layout.css */
.header .search-area .btn-set::after {
   	.
    .
    background-position: -158px -151px;
}

3. 웹접근성

3-1. 스킵 네비게이션

키보드를 이용해 웹페이지를 탐색하는 사용자를 위해 원하는 정보를 빠르게 탐색할 수 있도록 스킵네비게이션을 제공합니다.

<!-- SKIP NAV -->
<div id="skip-nav">
      <a href="#newsstand"><span>뉴스스탠드 바로가기</span></a> 
      <a href="#theme"><span>테마글 바로가기</span></a> 
      <a href="#sidenews"><span>사이드뉴스 바로가기</span></a> 
      <a href="#shopping"><span>트렌드쇼핑 바로가기</span></a> 
      <a href="#login"><span>로그인 바로가기</span></a>
</div>

/* SKIP NAV */
#skip-nav {
    position: relative;
    z-index: 1000;
}
#skip-nav a {
    position: absolute;
    top: -30px; left: 0;
    width: 200px;
    background: #333;
    text-align: center;
    padding: 2px 6px;
    font-size: 13px;
    line-height: 26px;
    color: #fff;
    white-space: nowrap;
}
#skip-nav a:focus { top: 0; }