네이버 PC 클론코딩

📌 네이버 PC

• 사이트명 : 네이버 메인
• 작업기간 : 2일
• 사용언어 : HTML5,CSS3,Jquery
• 분류 : pc적응형 사이트
• URL : https://yunazzi.github.io/naver/

---

Point ✅

✔️ 시멘틱태그
✔️ IR기법 / IS기법
✔️ WAI-ARIA

---

🔖 시멘틱태그

🖍 시멘틱 태그란?
Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사, 시멘틱태그란 의미가 있는 태그
div나 span과 같이 의미가 없는 태그는 태그이름만 보고는 어떤내용인지 유추할 수 없는 반면, form,table,article등 의미가 있는 태그는 내용을 명확하게 정의함

💊 장점
① SEO최적화에 유리(검색 엔진 최적화)
검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리하다.

② 유지보수에 용이하다
main,section등 의미있는 태그명을 사용하므로서 해당영역을 한눈에 파악이 가능해짐

③ 웹접근성에 효율적이다
스크린리더(시각장애인을 위한 웹서핑 프로그램)환경에서 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있음(웹접근성과 사용성 향상)

---

🔖 IR기법 / IS기법

① IR기법(Image Replacement)

🖍 IR(Image Replacement)이란?
이미지를 볼 수 없는 사용자에게 적절한 텍스트를 제공하는 것
웹 접근성 준수를 위한 스크린 리더 사용자뿐 아니라 검색엔진의 효과적인 내용수집을 위해서도 필요하다.

ⓐ display:none;
엘리먼트의 내용은 물론 해당 공간도 차지하지않게 된다.
영역이 존재하지않기 떄문에 클릭과 같은 이벤트가 동작하지X
∴ 이속성을 사용하면 검색엔진과 보조기가 인식X, 웹접근성에 위배되기 때문에 사용을 지양

ⓑ visibility:hidden;
이속성을 사용하면 컨텐츠는 보이지않으나, 공간은 차지한다.
display:none과 마찬가지로 클릭같은 이벤트작동X, 스크린리더가 읽을 수 없기때문에 웹접근성↓

ⓒ 요소크기 0

width: 0; 
height: 0;
font-size: 0;
line-height: 0;

width,height,font-size,line-height를 0으로 설정하는 것 또한 시각적으로 보이지않는 방법이지만, 일부 스크린리더가 인식할 수 없음

ⓓ opacity:0
opacity:0 - 투명하게 만들어 눈에 보이지않게하는 방법
이벤트가 동작하고 스크린리더에는 읽히지만, 여전히 공간이 남기때문에 좋은방법이 아님

ⓔ text-indent
text-indent - 들여쓰기, 내어쓰기를 해주는 속성
값이 양수인 경우 들여쓰기가 되고, 음수이면 내어쓰기가 된다.

text-indent:-9999px

이 방법은 내어쓰기를 아주 멀리까지해서 화면에 보이지않게하는 기법
자리를 차지하지만, 스크린리더에 읽힌다.
전체 레이어의 크기가 지나치게 크게 잡힐수도있고, 검색엔진최적화에 좋지않음

ⓕ clip, clip-path

가장 최적의 방법

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

position: absolute; - 요소의 위치를 부모요소를 기준으로 정확하게 지정
width: 1px; height: 1px; - 요소의 너비와 높이를 1px로 설정, 시각적으로 표시되지않게 만듬
margin: -1px; - 요소의 마진을 -1px로 설정하여 요소를 레이아웃에서 완전히 제거함
overflow: hidden; - 요소의 내용이 넘치는 경우 내용을 숨김
clip: rect(0,0,0,0); - 요소를 사각형으로 자르는데 사용됨, 모든측면의 크기를 0으로 설정하여 요소를 숨김

∴ 설정된 요소는 사용자에게 보이지 않지만, 접근성을 향상시키고 특정컨텐츠를 보조기술을 통해 접근가능하게 만들어줌

② IS기법(Image Sprite)

🖍 이미지 스프라이트(Image Sprite)기법이란?
여러 개의 이미지 파일들을 하나의 파일로 병합해서 배경으로 처리하는 기법
css의 background-image와 background-position속성을 이용해 원하는 이미지가 있는부분을 잘라서 사용한다. background-position은 배경 이미지의 위치를 지정하고 배치하는 속성

☑️ 실제 네이버 이미지 스트라이트 이미지 ↓

.gnb .nav-item a span[class*="ic-"]::after{ 
	background: url(../images/sp3.png); 
	background-repeat: no-repeat; 
	background-size: 444px 434px; 
	width: 44px; height: 44px; 
}
.gnb .nav-item a span.ic-mail::after{ background-position: -250px -90px; }
.gnb .nav-item a span.ic-cafe::after{background-position: -250px 0px;}
.gnb .nav-item a span.ic-blog::after{background-position: -201px -98px;}
.gnb .nav-item a span.ic-shopping::after{background-position: -90px -209px;}

💊 장점
① 문서전송 속도를 높이기 때문에 웹페이지의 로딩시간이 단축됨
② 많은 이미지파일을 관리하는 대신 하나의 스프라이트 이미지(sprite image)파일만 관리하면 되서 간편함

💣 단점
① 이미지 컷팅시 작업량이 증가함
② 수정이 필요한 경우, 유지보수가 까다로움

---

🔖 WAI-ARIA

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

role 속성으로 태그의 역할을 지정해주고, aria-label로 이름표를 붙여주면 스크린 리더 사용자가 조금 더 쉽게 브라우저를 읽을 수 있을 것이다.

① role
role은 태그의 역할을 알려주는 속성(attribute)
role에 들어가는 값은 우리 마음대로 정하는 게 아닌 정해진 값을 사용해야 한다.

- tab
- tablist
- banner
- button
- gruop
...

② aria-label
태그가 가지고 있는 의미를 적어주는 이름표 같은 역할

ⓐ 값이 정해져 있는 게 아닌, 브라우저가 스크린 리더 사용자에게 전달해야 할 내용을 상황에 따라 적어야 한다.

<div>
  <a href="#"><i class="ico ico-chat"></i></a>
</div>

스크린 리더 사용자는 아이콘 생김새도 알 수 없고 이 버튼이 어딘가로 향하는 링크라는 것밖에 알지 못한다.
(스크린 리더는 내부-링크라는 것만 알려준다.)

<div>
  <a href="#" aria-label="채팅창으로 이동"><i class="ico ico-chat"></i></a>
</div>

aria-label="채팅창으로 이동"을 입력해주면, 스크린 리더는 '채팅창으로 이동 내부-링크'라고 읽는다.

<div>
  <a href="#" aria-label="펼치기" role="button"><i class="ico ico-arrow"></i></a>
</div>

여기에 role까지 추가한다면, role="button"을 입력하면 버튼이라는 것도 알려주고, 펼치기 기능을 한다는 것도 알려준다. 스크린 리더는 '버튼 펼치기 내부-링크'라고 읽는다.

ⓑ aria-label과 같이 써도 되는 태그가 있고 아닌 태그가 있다.

다음과 같이 시멘틱 태그이거나, role 속성 값이 상호작용(interactive)을 하는 값일 때 aria-label을 붙일 수 있다

- a (href 속성이 있을 때)
- button
- header
- footer
- nav
- main
- form
- iframe
- img
- role="navigation"
- role="button"
...

시멘틱 태그가 아닌 의미 없는 태그에는 role이 붙어있지 않은 이상 aria-label을 마음대로 붙이면 안 된다

div
span
p
li
...

나머지 더 자세한 내용은 아래 주소 참조!
https://velog.io/@a_in/WAI-ARIA-role-aria-label#aria-label%EA%B3%BC-role%EC%9D%84-%EC%93%B0%EA%B8%B0-%EC%9C%84%ED%95%9C-%EA%B7%9C%EC%B9%99

참고사이트
https://velog.io/@gotaek/IR%EA%B8%B0%EB%B2%95%EA%B3%BC-IS%EA%B8%B0%EB%B2%95
https://velog.io/@wwoj00/NAVER#4-iris-%EA%B8%B0%EB%B2%95
https://velog.io/@a_in/WAI-ARIA-role-aria-label
https://velog.io/@a_in/WAI-ARIA-role-aria-label#aria-label%EA%B3%BC-role%EC%9D%84-%EC%93%B0%EA%B8%B0-%EC%9C%84%ED%95%9C-%EA%B7%9C%EC%B9%99