본문 바로가기

전체보기

 (286)
3D transform 예제 before hover .box { width: 200px; height: 200px; background: dodgerblue; } .box:hover { transform: perspective(200px) rotateY(45deg); transform-origin: 0 50%; } perspective는 화면을 바라보는 사용자와 box의 거리를 의미한다. transform-origin을 위처럼 설정해야 왼쪽 모서리를 축으로 설정할 수 있다.
유용한 CSS Framework Milligram 기본 엘리먼트 디자인은 구리다. 여기에 Milligram을 불러오기만 해도 좋아진다. 단순한 UI를 구현할 때 써먹자. 부트스트랩처럼 class에 정해진 값을 넣어 조금씩 변경할 수 있다. 이름에 부합하듯 용량도 엄청 작다. milligram.io
반응형에 따라 다른 이미지를 불러오는 방법 큰 화면에서 잘 보이는 단체 사진의 얼굴이 작은 화면에서는 안 보일 수도 있다. 이밖에도 화면에 따라서 다른 이미지를 보여줘야 할 때가 있다. 이런 때에는 아래와 같이 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%);
Data URL을 이용한 이미지 CSS Spirtes 말고도 Data URL을 이용하면 HTML 텍스트 안에 이미지 데이터가 포함되므로 GET 요청을 줄일 수 있다. 그러나 기존 이미지보다 용량이 커진다는 것과 (1.4배 정도) HTML 문서의 크기와 복잡도를 높인다는 것과 모바일 장치에서 느리다는 점 때문에 잘 사용하지 않는다.
이미지를 쪼개 넣는 CSS Spirtes에 대해서 이미지 파일은 별도의 GET 요청을 통해 다운받는다. 한 페이지에 자잘한 이미지 파일이 많이 있다면 GET 요청을 여러번 할 수밖에 없다. 서버 요청의 수를 덜기 위해 CSS Sprites라는 수법이 생겼다. 작은 이미지들을 하나의 이미지로 묶어 한 번의 GET 요청만 하고 CSS로 background-position을 조절해서 원하는 부분만 이미지로 나타나게 하는 방법이다. 대신 용량이 큰 이미지들을 이렇게 묶는 건 다운로드 시간이 오래 걸려 사용자 경험에 좋지 않고 아이콘과 같은 작은 이미지들에만 활용하는 게 보통이다. 아래의 사이트에서 CSS Sprites를 위한 파일을 쉽게 만들 수 있다. cssspritestool.com 이미지의 background-position을 자동으로 설정해 놓은 CSS..

티스토리툴바