📖Today I Learned

✅ 커스텀 input, select 박스

• 스타일링이 까다로운 input요소를 화면에서 숨기고 label 요소 연결하여 커스텀
• select 박스 대신 button, ul, li 를 이용하여 커스텀

✔ input 커스텀

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

✅ IR(Image Replacement)테크닉

• 디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보 전달 텍스트를 숨겨두는 방법

✔ 카카오가 사용하는 방법

1. (PC) 이미지내 의미있는 텍스트의 대체텍스트 제공

.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
    /* 들여쓰기로 안보이는 곳으로 위치시키기 */
}

2. (Mobile) 이미지내 의미있는 텍스트의 대체텍스트 제공

.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
  /* transparent 키워드는 IE9부터 사용 가능
 https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent */
}

3. 스크린리더가 읽을 필요는 없지만 마크업 구조상 필요한 경우

.screen_out {
      overflow: hidden;
      position: absolute;
      width: 0;
      height: 0;
      line-height: 0;
      text-indent: -9999px;
}

4. 이미지 off 시 중요한 이미지 대체텍스트

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

✔ 네이버가 사용하는 방법

.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    /* clip속성으로 요소 잘라내기 */
    width:1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

✔ 쿠팡이 사용하는 방법

.product-search a.search {
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 50px;
    height: 39px;
    background-position: -112px -71px;
    text-indent: -9em;
}

✅ CSS Sprite 기법

• 여러가지의 이미지를 하나의 이미지 파일 안에 배치하여 이미지로드 부담을 줄이는 방법
• image sprite generator
  https://www.toptal.com/developers/css/sprite-generator/

✔ 레티나 디스플레이 대응법

• 레티나 : 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도를 가진 애플 LCD 제품의 브랜드 이름
• 원인 : 논리픽셀(css에서 표현하는 화소의 기본 단위)와 물리픽셀(디바이스가 실제로 처리할 수 있는 화소의 기본 단위)의 차이가 발생한다.
• 해결방법 : 사이즈가 2배인 이미지를 준비한다.

---

<참고>

✔ width: fit-content;
content크기에 맞는 width값 지정

✔ background-position: right 14px center;
right 14px위치에서 center로 지정

✔ 말줄임할 때

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;