멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

🐱‍🏍 CSS 실무 Tip

1. 커스텀 input, select 박스

• 디자인적인 개성을 주기 위해 실무에서는 input 요소, select 박스를 브라우저 스타일과 다르게 표현함
• input, select 박스를 커스텀하는 이유?
  • 시각적인 디자인 개선
  • 일관성 유지
  • 사용자 경험 개선
  • 접근성 향상

input check 박스 커스텀 실습

• 스타일링이 까다로운 input 요소를 화면에서 숨기고, label요소를 연결하여 스타일링

2. IR(Image Replacement) 테크닉

• 디자인적으로 보이진 않지만, 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법
• <img>태그에는 alt=""속성으로 이미지에 대한 설명이 가능하지만, background-image에는 설명을 줄 수 없기 때문의 별도의 작업 필요

[카카오 IR 테크닉 중에서..]

• 중요한 이미지가 off 되었을 때, 대체 텍스트를 보여줌
  • 사용자의 네트워크가 끊기거나, 이미지가 저장되어있는 서비스가 다운되거나 등등의 이유로, 이미지에 대한 설명을 보여줘야 할 때 대체 텍스트를 보여줌
  • 예시) daum '검색' 돋보기 이미지를 지우기 해보면 '검색'이라는 텍스트가 나옴

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

• daum '쇼핑'은 텍스트가 '쇼핑'임에도 불구하고, ir_wa를 사용한 이유?
  • background-image로 적용되어있기 때문
• 텍스트에 똑같은 텍스트 이미지를 적용하는 이유는?
  • 폰트마다 두껍게, 얇게 보이는 경우가 많기 때문에 일관성을 위해 이미지로 사용하는 것 (=이미지 폰트)

숨김처리 관련 참고하면 좋은 자료
https://mulder21c.io/screen-hide-text/

3. CSS Sprite 기법

• 여러가지의 이미지를 하나의 이미지 파일 안에 배치하여 이미지 로드 부담을 줄이는 방법
• 이미지 편집은 온라인 에디터를 사용하거나 직접 에디팅 앱(포토샵, 피그마, 스케치 등)을 사용해 개발자가 직접 편집함
  • https://www.toptal.com/developers/css/sprite-generator/
• 단점: 이미지 교체 어려움, 이미지가 추가될수록 용량이 무거워짐
• <img>태그에 쓰이는 이미지들은 sprite 이미지로 쓰이지 않음
  • why? 항상 동적으로 바뀌는 이미지이기 때문
    

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

• 레티나: 특정한 시야 거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도(300 PPI가 넘을 경우)를 가진 애플의 LCD제품의 브랜드 이름
  • PPI(Pixel Per Inch): 1inch에 몇 개의 픽셀이 들어있는가의 비율
• 고해상도 디스플레이 기술
  • 더 많은 픽셀을 화면에 표시하여 뚜렷하고 선명한 이미지 제공

문제점 (What)
레티나 디스플레이에서 종종 이미지가 흐려져 보이는 경우가 있음

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

해결방법 (How)
원본 이미지의 가로세로 2배 이미지를 하나 더 생성한다.
피그마에서 디자인 이미지를 Export할 때 x2 이미지로 저장

*만약, 저장한 아이콘들을 Sprite로 만들 때는 padding값도 2배를 줘야 함
아이콘의 position값은 절반 줄인 값으로 줘야 제대로 위치해서 나타나게 됨