멋쟁이사자처럼 프론트엔드 스쿨 2기 16_Day

📖 오늘 학습 내용

1. 커스텀 input, select box

2. IR 테크닉

3. image sprite

1. 커스텀 input, select box

1) input box custom

<!-- txt-hide 라는 IR 기법이 적용된 클래스로 input 요소를 숨겨줍니다. -->
<input type="checkbox" id="inpHold" class="inp-hold txt-hide">
<label for="inpHold" class="labl-hold">로그인 상태 유지</label>

웹접근성을 고려하여 input 태그를 IR 기법으로 숨기고 label 태그를 스타일링 하는 방법이 있습니다. 단순하게 이미지를 삽입하는 방법보다 더 나은 코드라고 볼 수 있습니다.

---

2) select box custom

<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>

select box도 위에 input box와 마찬가지로 h2 태그를 IR 기법으로 처리해 웹접근성을 고려했으며, option 태그에 고정되어 있는 스타일이 바뀌지 않기 때문에 select, option 태그를 사용하지 않고 button으로 스타일링 했습니다. 저도 처음에 인터넷 검색으로 select option 태그를 사용했다가 CSS가 안 먹혀 li 태그로 변경했습니다.😅

2. IR 테크닉

🕵️‍♀️ IR 기법이란?
이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다.
1. 이미지내 의미있는 텍스트의 대체텍스트를 제공할 때
➡ 이미지 안에 포함되어 있는 텍스트는 스크린리더가 읽어줄 수 없기 때문에 작성.
2. 스크린리더가 읽을 필요는 없지만 마크업 구조상 필요할 때.
3. 중요한 이미지 대체텍스트로 이미지 off 시 에도 대체 텍스트를 보여주고자 할때
➡ 이미지가 모종의 이유로 로드되지 않았을 때 이미지 뒤에 있던 관련 설명을 보여줌으로써 사용자 편의성을 도모.

3. image sprite

🕵️‍♀️ 이미지 스프라이트란?
여러가지의 이미지를 하나의 이미지 파일안에 배치하는 기법입니다.
🙆‍♂️장점 : 하나의 이미지 파일안에 여러 이미지가 배치되기 때문에 이미지 로드 부담이 적습니다.
🤦‍♂️단점 : 이미지를 개별 포지션으로 잡아서 사용해되며, 스프라이트 이미지 하나가 웹에 로드되지 않으면 전체 이미지를 사용할 수 없다는 점입니다.
✋주의 : 레티나 디스플레이에서 노멀 디스플레이 이미지를 그대로 사용할 경우, 이미지 화질이 낮아 보일 수 있습니다. 레티나 디스플레이는 인치에 비해 픽셀이 압축되어 같은 인치의 노멀 디스플레이 보다 픽셀이 더 많습니다. 압축되어 있는 픽셀을 CSS에서 정의한 픽셀만큼 브라우저가 다시 키우기 때문에 위와 같은 현상이 발생되게 됩니다.
🔨해결 : 이미지 사이즈를 2배로 적용시켜 이미지 깨짐 현상을 개선할 수 있습니다.
참고 블로그 : https://zinee-world.tistory.com/542