CSS 실무 테크닉

input, select 박스 커스텀

이유 : 디자인적인 개성, 브라우저마다의 차이...

- 시안 잘 요청하기...^-^

- input 요소를 숨겨서, label요소와 연결해서 만듬. 이미지로,,,

input과 label 연결하기 -> id + for

- 포커싱에는 border보다 레이아웃에 영향을 미치지 않는 outline을 쓰자

모바일에서는 셀렉트 박스 커스텀 X.

OS마다 차이가 크기 때문,,,

그래서 button, ul, li를 활용해서 제작

---

IR 테크닉(Image replacement)

디자인적으로는 보이기 싫다. for 스크린리더!

text-indent는 블록레벨에만 적용 가능,,

.ir_wa {
  display:block;
  overflow:hidden;
  position:relative;
  width:100%
  height:100%
  z-index:-1;
}

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

우리 회사 어떤 일 하는 줄 아시나요? 써보셨나요??

blind는 좀 불안하다.. 곧 clip이 deplicate 되서,, clip-path로 바꾸는 것이 어떠한가..?
외국 사이트(구글,에어비앤비,페이스북)은 주로 aria-label을 사용하는군.

---

Image Sprite

이미지들을 하나의 이미지에 다 포함해버리기.
이미지가 많아지면 성능이 저하되니까!

toptal : 이미지 합쳐주고, 좌표까지?? 좋네,,,

단점 : 관리가 어렵다.... 자체 용량이 커질 수 있음.

이미지를 코드로 -> 웹팩이 코드로 바꿔준다!!

용량이 작아진다 굳,,

레티나 디스플레이 대응법

애플 레티나. 화소가 보통의 2배 이상
원래 물리픽셀에 맞게 렌더링 된 이미지가 css에서 지정하는 논리픽셀만큼 커져버려서 이미지가 흐리게 보이게 된다.

해결법 : 2배 사이즈의 이미지를 준비한다 ^0^