NAVER

portfolio 시맨틱태그 웹접근성

NAVER 적응형 웹접근성 시맨틱태그 html css

📌 PROJECT KEY POINTS

1. 시맨틱 태그 활용
2. 웹접근성 준수
3. 이미지 스프라이트 (image sprite)를 이용한 아이콘 사용

---

1. 시맨틱 태그

✔️ 시맨틱 태그란??
시멘틱 태그는 "의미가 있는 태그"라는 뜻이다. 즉, HTML tag들 중에서도 나름의 의미가 있는 태그들을 말한다.

<header> <nav> <section> <main> <footer> 사용하여 마크업

 

---

2. 웹 접근성 준수

✔️ 웹 접근성이란??
「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것이다.

• 올바른 시맨틱 태그 사용
• blind 를 활용한 웹 접근성 준수하고자 했음 (시각적으로 보이지 않으나 스크린 리더기에서 읽힘)

[html]

<form method="get">
  <fieldset>
    <legend class="blind">검색</legend>
    <input type="text" class="input-search">
    <button type="submit" class="btn-search">
      <span class="ico-search"></span>
      <span class="blind">검색</span>
    </button>
  </fieldset>
</form>

[css]

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

---

3. 이미지 스프라이트 (image sprite)를 이용한 아이콘 사용

✔️ 이미지 스프라이트(image sprite) ??
여러개의 이미지를 하나의 이미지로 합쳐져 관리하는 이미지를 의미한다.

❓ 왜 이미지 스프라이트를 사용할까?

• 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 된다. 그러나 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 되는데, 이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있다.
• 즉, 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있다.
• 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편하다.

👇 이렇게 사용합니다.👇

• 스프라이트 이미지

• css (common.css)

.header .search_area form .btn-search .ico-search::before,
.header .search_area .search-key .btn-keyboard::before,
.header .search_area .search-key .btn-arrow::before,
.header .shortcut_area .shortcut-list .shortcut-item .icon-service::before,
.header .menu_area .btn-menu::after,
.footer .notice_sec .link-serviceAll::after,
.sc-news .group-issue .ico-triangle,
.group-page .btn-view-list::before,
.sc-login .logo-naver,
.sc-weather .group-title .compare::before,
.sc-finance .group-title .btn-info::before,
.sc-widget .link-papago::before,
.sc-banner-bt .ico-bn,
.setting_module .btn-top::before,
{
  background-image: url(../img/sp_main.png);
  background-size: 422px 405px;
  background-repeat: no-repeat;
}

🖋 review
* 스프라이트 이미지는 2배 혹은 3배 화질의 이미지를 압축하여 생성하는 경우가 많기 때문에 (해상도가 깨지지 않기 위해) 적용 시 이미지 파일 크기를 잘 보고 적용해야 한다.
* naver 클론 코딩의 경우 background-size 태그 적용 시 (본 이미지 파일 크기 / 2) 로 적용