📀 NAVER
- 사이트명: 네이버
- 작업기간: 3일
- 사용언어: HTML5, CSS
- 유형: PC 적응형
- 💻 https://leehh0203.github.io/naver/
✅ Check Point
✔ 웹 접근성 항상에 포인트 (IR)
✔ 시멘틱 태그를 사용하여 웹 표준 준수
✔ 이미지 스프라이트기법
1.IR기법
🔍IR기법이란?
이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것으로
웹 접근성 준수를 위한 스크린 리더사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필요하다
👉 네이버 적용
<button class="btn-prev">
<span class="blind">이전 페이지</span>
</button>.blind{
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
clip: rect(0,0,0,0);
margin: -1px;
}외형만 숨키고 리더기가 읽어줄 수 있는 텍스트를 만들어서 적용시켰다
width:0, height:0,텍스트가 읽히지 않기 때문에 1을 주었고 clip을 이용해서 좌표를 잡고 클릭도 안되기 위해 -1px를 사용해 밀어버림
2.시멘틱태그
🔍시멘틱태그란?
사이트 구조(레이아웃)을 설계하기 위한 태그, html의 구조를 설계하는데 있어 태그의 의미를 부여 함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그이다
📌사용장점
✅ SEO 최적화에 유리
✅ 웹 접근성에 효율적
✅ 유지보수의 용이성
👉 네이버 적용
<body>
<header></header>
<main></main>
<footer></footer>
</body>기존에는 <div>태그로 구조되어 있는 걸 시멘틱태그를 사용하여 바꿔주었다
또한 본문 내용 외의 광고 부분은 aside태그를 사용하였다
3.스프라이트 이미지
🔍스프라이트 이미지란?
여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다
📌사용장점
✅ 로딩 시간을 단축
✅ 많은 이미지 파일을 관리 필요x
✅ html 마크업이 간결해지고 스크린 리더의 탐색 속도 향상🚫사용단점
✅ 이미지 추가에 따른 유지 보수
▶수정이 잦은 이미지는 개별적인 이미지로 제작
✅ 데이터 관리에 문제가 생긴다면 이미지 로딩 x
💻 스프라이트 이미지 제작사이트
https://www.toptal.com/developers/css/sprite-generator/
👉 네이버 적용
네이버에서 사용하고 있는 스프라이트 이미지
.header .gnb-item i::after{
display: block;
z-index: 1;
content: '';
width: 44px;
height: 44px;
}
.header .gnb-item .ic-mail::after{background-position: -250px -90px;}
.header .gnb-item .ic-cafe::after{background-position: -250px 0px;}
.header .gnb-item .ic-blog::after{background-position: -201px -98px;}
.header .gnb-item .ic-Shopping::after{background-position: -90px -209px;}
.header .gnb-item .ic-News::after{background-position: 0px -209px;}
.header .gnb-item .ic-Securities::after{background-position: -180px -209px;}
.header .gnb-item .ic-Land::after{background-position: -45px -209px;}
.header .gnb-item .ic-Map::after{background-position: -201px 0px;}
.header .gnb-item .ic-webtoon::after{background-position: -225px -209px;}
.header .gnb-item .ic-more::after{background-position: -250px -135px;}반복적인 코드들은 함축하여 사용할 수 있어 코드를 줄일 수 있다
