스프라이트 이미지

스프라이트 이미지란 아이콘 처럼 작은 이미지 들을 하나의 이미지로 만들어서 가져오는 기법
작은 이미지들을 계속 요청하고 받아오는 방식으로 구현하게 되면 오버헤드가 커지고 부하가 커지게 됨
스프라이트 이미지를 배경화면으로 깔고 원하는 부분의 크기만큼 지정 후 해당 X,Y축을 구하고 해당 이미지를 추출하여 사용 (background-position)

width 와 height는 포토샵을 통해 알아낼 수 있음
background-position은 좌상단에서부터 측정 가능

<span class = "num no1"><span class="blind">1</span></span>
<span class = "num no2"><span class="blind">1</span></span>

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

.num{
	display : inline-block; /*인라인은 크기 안먹음*/
    	overflow : hidden;
    	background-image : url(https://view.ui.naver.com/number/sp_number.png);
    	background-repeat: no-repeat;
}

.no1{ width : 20px; height : 30px ; background-position : 0 -34px;}
.no2{ width : 20px; height : 30px ; background-position : 0 -68px;}

고해상도 디바이스 대응

뷰포트를 사용해서 작은 픽셀들을 크게 확대시켜줌
모바일 용은 2배 큰 사이즈의 이미지를 사용하여 background-size를 사용하여 1/2사이즈로 지정해 줌

.num{
	display : inline-block; /*인라인은 크기 안먹음*/
    	overflow : hidden;
    	background-image : url(https://view.ui.naver.com/number/sp_number_m.png);
    	background-repeat: no-repeat;
        background-size : 150px 150px;
}

.no1{ width : 14px; height : 24px ; background-position : 0 -24px;}
.no7{ width : 14px; height : 24px ; background-position : -16px -48px;}

주의할 점

1. 만약 작은 사이즈의 이미지를 그대로 사용할 경우 고해상도 디바이스에서 이미지가 뿌옇게 보이는 이슈가 발생함

2. 스프라이트 이미지는 꼭 짝수 사이즈의 이미지를 사용해야 함 일부 환경에서 0.5px을 지원하지 않기 때문

스킵 네비게이션

접근성 관련 기술 화면 낭독기로 탭을 사용해서 읽는데 중간에 있는 탭을 읽고 싶은데 위에 있는걸 다시 읽어야 하는 상황이 발생함. 건너 뛰고 싶은걸 건너 뛸 수 있도록 네비 메뉴는 건너 뛰게 해줌

간단하게 말하면 안보이게 맨 처음에(body태그 바로 아래) 화면 밖에 숨겨두고 링크를 통해 체크포인트로 이동시켜주는 것