[TIL] CSS 실무 테크닉

CSS 실무 테크닉

input checkbox 커스텀

• Input 요소를 IR 기법으로 숨기고 인접한 형제요소 label에 가상요소를 주어서 커스텀한다.

      .txt-hide {
        position: absolute;
        clip: rect(0 0 0 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
      }
      .labl-hold::before {
        display: inline-block;
        content: "";
        width: 22px;
        height: 22px;
        vertical-align: -5px;
        background-image: url("images/icon_check_empty.png");
      }

      .inp-hold:checked + .labl-hold::before {
        background-image: url("images/icon_check.png");
      }

      .inp-hold:focus + .labl-hold::before {
        outline: 2px solid #000;
      }

select 박스 커스텀

select 박스의 경우 역시 스타일이 까다롭기 때문에 차라리 해당 요소를 사용하지 않는 방향으로 제작이 진행

<h2>셀렉트 박스 만들기</h2>
<button class="btn-select">당신의 에스파 최애 맴버는??</button>
<ul class="list-member">
    <li><button type="button">카리나</button></li>
    <li><button type="button">지젤</button></li>
    <li><button type="button">닝닝</button></li>
    <li><button type="button">윈터</button></li>
</ul>

<script>
    const btn = document.querySelector('.btn-select');
    const list = document.querySelector('.list-member');
    btn.addEventListener('click', () => {
        list.classList.toggle('on');
    });
    list.addEventListener('click', (event) => {
        if (event.target.nodeName === "BUTTON") {
            btn.textContent = event.target.textContent;
            list.classList.remove('on');
        }
    });
</script>

• 이 외에 CSS 코드로 배치 및 스타일링

IR(Image Replacement) 테크닉

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

카카오가 사용하는 방법들

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부터 사용 가능하기 때문에 PC에서는 빠져있습니다.
 https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent */
}

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

• 스크린리더는 width:0 height:0 인요소를 읽지않는다.

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

4. 중요한 이미지 대체텍스트로 이미지 off 시 에도 대체 텍스트를 보여주고자 할때

• 현재 많이 쓰이는 기법
• ex) 이미지폰트를 사용하는 상황에 이미지가 로딩에 실패했을때 대체 텍스트를 보여줌

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

네이버가 사용하는 방법

• IE 구버전에서 인식을 못하는 경우가 있기 때문에 margin: -1px; 을 사용
• clip 속성을 통해 요소를 잘라내는것도 가능

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

쿠팡이 사용하는 방법

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

CSS Sprite 기법

여러가지의 이미지를 하나의 이미지 파일안에 배치하여 이미지로드 부담을 줄이는 방법

• 단점 : 작은이미지들이 모여서 스프라이트가 너무 커지면 오히려 부담이 될 수 있다.
  • 해결방법 : 여러개로 분리해서 해서 사용하자
• 단점 : 스프라이트 안에 이미 사용되고 있는 이미지를 수정하기 어렵다. 큰 규모 회사일수록 다른 어느부분에서 사용되는지 몰라서
  • 해결방법 : 수정하는것보단 여백에 새로 추가해서 사용하자

레티나 디스플레이 대응법

레티나란?

특정한 시야 거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도(300 PPI가 넘을 경우)를 가진 애플 LCD 제품의 브랜드 이름

일반디스플레이와 레티나 디스플레이의 차이점

원인

레티나(고해상도 화면)로 넘어오면서 논리픽셀(css에서 표현하는 화소의 기본 단위)과 물리픽셀(디바이스가 실제로 처리할 수 있는 화소의 기본 단위)의 차이가 발생

문제점

브라우저는 css에서 정의한 픽셀만큼 이미지를 렌더링 해야하기 때문에 원래는 물리픽셀에 맞게 렌더링된 이미지가 논리픽셀 만큼 커져버리게 됨

해결 방법

1.화면에 우리가 그리고자 하는 사이즈의 2배 되는 이미지를 준비함
2.2배되는 이미지에 background-size를 너비/2,높이/2해서 압축시킴