22-09-22-TIL

CSS 실무 테크닉

커스텀 input, select 박스

디자인적으로 꾸며주기 위해 사용
스타일이 어려운 input 요소를 감춤

라벨 요소에 가상요소를 추가하여 background-image로 커스텀 해줌
가상요소는 인라인 속성이 기본!!

:: 가상요소
: 가상클래스

<input type="checkbox" id="inpHold" class="inp-hold txt-hide">
<label for="inpHold" class="labl-hold">로그인 상태 유지</label>

웹 접근성을 생각해주기 위해서 (탭으로 포커싱) -> 포커싱 넣어주기
:focus
포커싱 라인을 border로 사용해주면 내용이 밀림
-> outline로 사용

리스트
display:none; 로 가려주고
리스트 밑에 버튼이 있는 경우 -> 밀려남을 방지하기 위해 position: absolute;

IR (Image Replacement) 테크닉

디자인적으로는 보이지 않지만 스크린 리더나 브라우저를 위해 정보를 전달하기 위해 숨겨둠

카카오

.ir_pm{
	text-indent:-9999px;
    ...
}
PC용으로 이미지내에서 의미있는 텍스트의 대체 텍스트 제공
들여쓰기를 통해 왼쪽으로 보내버리며
인라인임을 알려주기 위해 display: block; 설정

.ir_pm{
	color:transparent;
}
모바일용

스크린 리더기가 읽을 필요는 없지만 마크업 구조상으로 필요한 경우
.screen_out {
	width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}

중요한 이미지 대체 텍스트로 이미지가 로딩 불가능해도 대체 텍스트 보여주는 경우
따로 한번 더 감싸줘야 함
.ir_wa {
	z-index: -1;
}

네이버가 사용하는 방법

.blind {
	clip: rect( 0 0 0 0);
}

CSS Sprite 기법

여러가지 이미지를 하나의 이미지 파일에 배치하여 이미지 로딩이 더 빠르도록 도와줌

이미지를 하나만 요청하게 된다면 로딩이 빨라질 수 있다.
이미지의 좌표로 찾아서 백그라운드 이미지로 보여줌

단점)
여러 이미지를 불러오는데 이미지가 많아질수록 자체 용량이 커진다.
한 판에 모든걸 집중시키기 보다는 쪼개어서 판을 만들기
관리가 어렵다.

레티나 디스플레이 대응법

고해상도 화면으로 넘어오면서 논리픽셀과 물리픽셀에서 차이가 발생

일반 노트북 -> 1px, 1px 안 화소 1개
레티나 노트북 -> 1px, 1px 화소 2개 이상 존재

화소가 2배 더 많으니까 이미지에서 10픽셀 10픽셀 명령을 내리게 되면서 억지로 커지게 되니까 레티나 디스플레이에서는 흐려진다...

해결 방법)
2배 사이즈의 이미지를 준비