Like Lion: 16일차

오늘의 과제

커스텀 셀렉창을 하나 만들어 보았다.

실무에서 사용하는 CSS 테크닉

1️⃣ NAVER blind

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

width, height 가 0 이면 스크린리더가 읽지 못한다.
clip: rect : 네모로 자르겠단 의미 (더 이상 사용하지 않는다.)
margin: -1px : 모르겠다.. 레거시코드

margin: -1px에 대한 설명 : 웹 UI 개발

이미지 최적화 웹 : Kraken.io Image Optimizer · Kraken.io
클립 웹 :Clippy — CSS clip-path maker

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

코드도 절약하고 이미지도 줄어드는 효율적인 방법
아래의 웹을 이용하여 제작한다.

❌ 사용하지 말아야 할 경우 :

만든 스프라이트 파일이 너무 큰 경우 오히려 손해일 수 있다.
수정을 많이 해야 하는 이미지일 경우

CSS Sprites Generator

3️⃣ 레티나 디스플레이 대응

길이2배 높이2배되는 넓이 4배의 이미지를 준비해서 해결한다.
스프라이트도 마찬가지

media query : device pixel ratio 고려하여 적용한다.

BootStrap

부품들을 가져와서 사용하는 느낌
굉장히 편리하게 웹사이트 제작할 수 있을 것 같다.
부트스트랩 템플릿도 역시 라이센스를 확인하여야 한다. (MIT license ?)

강사님이 웹개발 외주뛸 때 사용했던 기술들

• 스택은 부트스트랩 + php + mysql
• 부트스트랩 + 워드프레스
• 부트스트랩 + Django
• 부트스트랩 + Node
• 워드프레스는 DIVI 테마와 Pods 플러그인

Containers · Bootstrap v5.1
플러그인 :
SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
Datepicker | jQuery UI
TOAST UI :: Make Your Web Delicious! | TOAST UI :: Make Your Web Delicious!
Examples | bootstrap-select · SnapAppointments Developer

TailWindCSS

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.