IR(Image Replacement) 테크닉
디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는
텍스트를 html 곳곳에 숨겨두는 방법
<!--네이버가 사용하는 방법-->
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}clip clip-path
position: absolute;
clip: rect(0 0 0 0);
clip position: absolute; 있어야 사용할 수 있는 속성이다
rect( top, right, bottom, left)
top : 위를 기준으로 시작하는 위치
right : 왼쪽을 기준으로 끝나는 위치
bottom : 위를 기준으로 끝나는 위치
left : 왼쪽을 기준으로 시작하는 위치
ex) 2번째 속성을 사용할때 만약 이미지가 500px인데 속성값 400이면 100px 자르겠다는 뜻
Internet Explorer 때문에 clip 속성을 사용하지만
구글은 clip-path 사용한다
CSS Sprite 기법
여러가지의 이미지를 하나의 이미지 파일안에 배치하여 이미지로드 부담을 줄이는 방법
(image sprite generator 검색) [https://www.toptal.com/developers/css/sprite-generator/]
여러개의 이미지를 하나의 이미지로 통합을 하고 background-position 사용해서 위치를
잡아준다. 용량을 최적화 할 수 있는 방법!!
- 사용할 때
- 브랜드 아이콘- 고정되는 이미지
- 폰트 용량이 크고 자주 사용하지 않는 폰트도 이미지로 만들어서 사용한다
-- 사용하지 말아야 할때는 언제일까?
1. 변경될 수 있는 이미지는 쓸때
2. 하나의 이미지로 했을때 너무 용량이 큰 경우
- 레티나 디스플레이 대응
모니터 화소의 차이가 다르기 때문에 설정을 해줘야 한다
이미지를 2배를 크게 한 후 하나의 이미지로 저장한 다음
background-size를 이미지 크기에서 2로 나누기
-예를 들어 size가 116, 88이라면 58, 44로 설정한다.
background-position도 2로 나눈 후 위치에 맞는지 조정하면서 조절한다
부트스트랩
부트스트랩은 웹 프레임워크, 프레임워크은 최소한의 작업으로 빠르게 결과물을 만들 수 있도록 구축해 놓은 종합 공구 세트라고 생각하면 된다
(bootstrap) https://getbootstrap.com/
(부트스트랩) http://bootstrapk.com/
📌구글에서 부트스트랩을 한글로 검색하면 안된다 영어로 검색한 것과 버전 차이가 많이 난다!
꼭 영어로 검색해서 홈페이지에 들어가자
드롭다운 버튼은 안되는 것이 많아 사용을 안한다
bootstrap 템플릿 라이센스를 꼭 확인하고 사용해야한다
회고 🔨
폰트의 용량이 크고 폰트를 많이 안 쓸 때 이미지로 만드는 거는 저번 시간에 배웠는데
이번에 여러 가지의 이미지를 하나의 이미지로 통합하고 하는 것을 배워서 또 새로웠다.
다양한 방법이 많다. 최적화를 하는 방법으로 좋은 방법인거 같다. 하지만 무조건 좋은 것만은
아니니 효율적으로 잘 이용해야겠다.
