CSS/Image (4) 썸네일형 리스트형 반응형에 따라 다른 이미지를 불러오는 방법 큰 화면에서 잘 보이는 단체 사진의 얼굴이 작은 화면에서는 안 보일 수도 있다. 이밖에도 화면에 따라서 다른 이미지를 보여줘야 할 때가 있다. 이런 때에는 아래와 같이 picture 엘리먼트를 이용한다. 모던 이미지 포맷인 WEBP 사용하기 인터넷 익스플로러를 무시해도 된다면 webp 이미지를 고려해보자. caniuse.com/?search=webp 이미지 파일의 용량을 확 줄일 수 있다. 다음 사이트에서 변환 가능하다. cloudconvert.com/image-converter 지원하지 않는 브라우저와의 호환을 위해서는 아래와 같이 picture 엘리먼트와 source 엘리먼트를 써야 한다. picture 엘리먼트를 지원하지 않는 브라우저를 위해서 img 엘리먼트도 넣어줘야 한다. img 엘리먼트에서 alt와 class 값을 설정한다. 여기서 레티나 디스플레이일 때의 이미지 설정까지 넣으려면 다음을 참고하자. thinkforthink.tistory.com/303 레티나 디스플레이까지 고려하는 이미지 설정 방법 예전에는 디스플레이의 물리적 픽셀과 논리적 픽셀이 동일했지만 레티나 디스플레이가 생기고 나서는 물리적 픽셀이 더 미세하게 나뉘어지고 2 ~ 3개의 물리적 픽셀이 하나의 논리적 픽셀을 나타내기까지 하게 됐다. 그리하여 사용자에게 픽셀이 눈에 보이지 않을 정도로 선명한 화면을 보여준다. CSS의 픽셀은 논리적 픽셀을 나타낸다. 그림 파일을 100px 크기로 보여준다고 할 때 DPR(물리적 픽셀과 논리적 픽셀의 비율)이 2인 레티나 디스플레이에서는 물리적인 200px을 이용해서 논리적인 100px을 나타내게 된다. 때문에 원본 이미지의 크기가 100px이라면 논리적 100px을 나타내기 위해 물리적 200px을 채우면서 뿌옇게 보인다. 200px은 돼야 모든 물리적 픽셀에 다른 색상이 들어가 깔끔해진다. 이런.. CSS를 이용해서 이미지를 클리핑하는 방법 아래 사이트에서 클리핑할 모양을 만들고 img 엘리먼트에 생성된 CSS 값을 복사해 넣는다. bennettfeely.com/clippy clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 이전 1 다음
