17일차_CSS 실무 테크닉

1. 커스텀 input, select 박스

---

디자인적인 개성을 주기 위해 실무에서는 input 요소나 select 박스를 브라우저 스타일과 다르게 표현하곤 합니다.

1.1 개념

---

스타일링이 까다로운 input 요소를 화면에서 숨기고 label 요소를 연결하여 스타일링을 진행합니다.

 

실습내용

 

https://github.com/WannabeCM/DropDown_LikeLion

GitHub - WannabeCM/DropDown_LikeLion

https://wannabecm.github.io/DropDown_LikeLion/

 

2. IR(Image Replacement) 테크닉

---

 

2.1 개념

---

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

html 곳곳에 숨겨두는 방법

 

2.2 방법

---

2.2.1 카카오가 사용하는 방법들

PC용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때

웹최적화에 문제가 있다는 의견도 있지만 검증된 바 없음.

최근 IE10이상만 지원하기에 점차 사용을 줄이고 있음.

.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}

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> */
}

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

만약 헤딩테그를 달지 않으면 벨리데이션 돌릴 때  warning이 나온다.

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

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

ir_wa : 이미지 뒤에 숨겨놓는 텍스트

예시) 다음의 돋보기 창. 백그라운드 이미지가 다운이 안 되더라도 텍스트가 보여짐.

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

2.2.2 네이버가 사용하는 방법

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

IE 구버전에서 인식을 못하는 경우가 있기 때문에 margin: -1px; 을 사용합니다.

clip 속성을 통해 요소를 잘라내는것도 가능합니다.

clip: rect(상,하,좌,우)를 이용해 이미지를 깎을 수도 있다.

rect값을 0, 0,0 0,을 준다는 의미는 아무것도 보이지 않게 하겠다는 의미이다. 

 

참고사이트

https://bennettfeely.com/clippy/

네이버의 경우 ir_wa를 사용하지 않는다.

2.2.3 쿠팡이 사용하는 방법

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

 

 

3. CSS Sprite 기법

---

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

만약 이미지를 따로 다 다운받으려면, 서버에 계속 이미지를 불러달라고 요청해야한다.

따라서 다 다른 이미지로 다운받으려면 굉장히 많은 로딩시간이 필요하기에 이미지 스프라이트 기법이 도입되었다.

 

이미지를 편집할 때는 온라인 에디터를 사용하거나 직접 에디팅 앱(포토샵, 피그마, 스케치 등)을 사용해 개발자가 직접 편집합니다.

image sprite generator 검색 : https://www.toptal.com/developers/css/sprite-generator/

CSS Sprites Generator

참고 : https://www.youtube.com/watch?v=fKyLCIqWjIY

 

4. 레티나 디스플레이 대응법

---

레티나 디스플레이를 많은 분들은 알지만 난 처음 들어본다..!

4.1 레티나란?

---

특정한 시야 거리에서 인간의 눈으로는 화소를 구분할 수 없는

화소 밀도(300 PPI가 넘을 경우)를 가진 애플 LCD 제품의 브랜드 이름입니다.

4.2 원인은 무엇일까?

---

레티나(고해상도 화면)로 넘어오면서 논리픽셀(css에서 표현하는 화소의 기본 단위)과

물리픽셀(디바이스가 실제로 처리할 수 있는 화소의 기본 단위)의 차이가 발생합니다.

그러나 브라우저는 css에서 정의한 픽셀만큼 이미지를 렌더링 해야하기 때문에

원래는 물리픽셀에 맞게 렌더링된 이미지가 논리픽셀 만큼 커져버리게 됩니다.

 

4.3 해결 방법

---

화면에 우리가 그리고자 하는 사이즈의 2배 되는 이미지를 준비합니다.

https://zinee-world.tistory.com/542

[CSS] 이미지 스프라이트(image sprite) 레티나 대응하기