NAVER
- 사이트명 : NAVER
- 사용언어 : HTML, CSS, JS
- 분류 : 적응형 PC, 클론코딩
🍀 : 프로젝트에서 사용
1. 시맨틱마크업(semantic markup)
semantic은 '의미론적인, 의미의' 라는 뜻이 담겨져 있다. 따라서 시맨틱 태그는 태그를 사용할때 내용에 의미를 부여하는 것이라 유추해볼 수 있다.
태그의 내용은 정보로서 높은 가치를 포함해야하기 때문에 시맨틱 태그를 사용해야한다. 이를 통해 사람들은 코드를 읽는 것이 훨씬 쉬워지고, 검색엔진 즉, 기계 입장에서는 콘텐츠를 더 쉽게 이해할 수 있다. 따라서 SEO (검색엔진최적화) 성능을 더욱 향상할 수 있다.
🍀
<body>
<header id="header"></header>
<main id="container"></main>
<footer id="footer"></footer>
</body>크게는 header, main, footer 태그를 사용해 분류했다.
<body>
<header id="header">
<div class="search-area">
<h1 class="logo">
<form method="get"></form>
</div>
<nav class="nav-area"></nav>
<nav class="util-area"></nav>
</header>
</body>header 태그에서는 로고나 네비게이션 등 페이지 상단에 있는 정보를 분류했다.
-> h1(로고), nav(네비게이션), form(탐색)
<body>
<main id="container">
<aside class="ad-banner"></aside>
<section class="sc-news"></section>
<section class="sc-shopping"></section>
<section class="sc-food"></section>
</main>
</body>페이지의 주요 콘텐츠를 통틀어 main 태그를 사용하였고, main 태그 안에서는 section(주요 콘텐츠), aside(광고, 배너 등)를 담았다.
<body>
<footer id="footer">
<nav class="corp-area"></nav>
</footer>
</body>footer 태그는 사이트 맵, 웹사이트 정보 등 페이지 하단에 있는 정보를 분류했다.
2. .blind
콘텐츠를 숨기고 싶지만, 스크린 리더기에는 읽혀야 하는 경우 사용한다.
.blind { /* 레이아웃에 영향을 끼치지 않음 */ position: absolute; /* 스크린 리더가 인식할 수 있음 */ width: 1px; height: 1px; /* 눈에 보이지 않도록 함 */ overflow: hidden; margin: -1px; clip: rect(0,0,0,0); }
width: 1px;height:1px; 사이즈를 각 1px로 지정하여 스크린 리더가 인식할 수 있다.
position: absolute; normal flow에서 벗어나 레이아웃에 영향을 주지 않는다.
overflow: hidden; 가로, 세로 사이즈 값을 넘어가는 영역을 가려 보이지 않게 한다.
clip: rect(0, 0, 0, 0); 해당 영역만 잘라 보여주는 clip 속성의 값을 모두 0으로 두어 화면 상에서 blind 영역을 보이지 않게 한다.
margin: -1px; 마진을 음수 값으로 두어 클릭 영역에서 제외 시킨다.
display:none과 visibility:hidden , font-size:0, line-height:0, width:0, height:0 모두 콘텐츠를 숨길 수 있지만, 스크린 리더로도 읽을 수 없기 때문에 접근성에 문제가 있다.
🍀
<div class="shopping-wrap">
<span class="blind">몰 바로가기</span>
<div class="mall-brand">
<a href="#" class="mall bold">쿠팡</a>
<span class="dot"></span>
<a href="#" class="mall">G마켓</a>
<span class="dot"></span>
<a href="#" class="mall">옥션</a>
<span class="dot"></span>
<a href="#" class="mall">SSG닷컴</a>
</div>
</div>예를 들어, 위에 있는 이미지처럼 쇼핑몰을 묶어서 분류하고 싶은데 제목은 눈에 보이지 않아야 할때 사용했다. 스크린리더기를 사용하시는 분들에게 혼동이 올 수 있을거라 생각하는 부분(주로 제목, 버튼 등)에 blind를 사용했다.
3. 스프라이트 기법(Sprite Technique)
스프라이트(Sprite)이란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미한다고 한다. 웹의 경우에서는 "여러 개의 이미지를 하나의 이미지로 만들어 놓는 것"을 의미한다.
스프라이트 기법을 사용함으로써 하나의 이미지로 여러 개의 이미지를 보이게 할 수 있고, 브라우저 캐싱에도 도움이 된다. 또한, 웹 페이지의 로딩 시간이 단축되며 사용자 경험을 향상시킬 수 있다.
🍀
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="link">
<i class="icon mail"></i>
<span class="name">메일</span>
</a>
</li>
</ul>/* layout.css */
#header .nav-area .icon::after {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
transform: translate(-50%, -50%);
content: "";
}
#header .nav-area .icon.mail::after {
background-position: -244px -41px;
}
/* common.css */
#header .nav-area .icon::after {
background-image: url(../images/sp-bg1.png);
background-size: 443px auto;
background-repeat: no-repeat;
}스프라이트 기법으로 만들어진 이미지 속에 있는 아이콘들을 사용했다.
아이콘이 다양하기 때문에 같은 코드가 반복되지 않도록, common.css와 동일한 클래스를 사용하여 작성했다.
같은 클래스를 사용하여 아이콘의 크기를 width, height으로 결정하고, 해당 아이콘의 위치를 background-position로 조정했다.
스프라이트 이미지가 들어가는 태그들은 common.css에 모두 적어 이미지의 경로(background-image), 이미지의 사이즈(background-size), 이미지의 반복성(background-repeat)를 설정했다.
마치며
NAVER를 클론 코딩하면서 웹표준과 웹접근성에 집중하면서 공부하였고, 앞으로 코딩을 하면서 탄탄한 기반이 되어줄 수 있는 좋은 기회였다. 😆
