CSS (47) 썸네일형 리스트형 유용한 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%); 이미지를 쪼개 넣는 CSS Spirtes에 대해서 이미지 파일은 별도의 GET 요청을 통해 다운받는다. 한 페이지에 자잘한 이미지 파일이 많이 있다면 GET 요청을 여러번 할 수밖에 없다. 서버 요청의 수를 덜기 위해 CSS Sprites라는 수법이 생겼다. 작은 이미지들을 하나의 이미지로 묶어 한 번의 GET 요청만 하고 CSS로 background-position을 조절해서 원하는 부분만 이미지로 나타나게 하는 방법이다. 대신 용량이 큰 이미지들을 이렇게 묶는 건 다운로드 시간이 오래 걸려 사용자 경험에 좋지 않고 아이콘과 같은 작은 이미지들에만 활용하는 게 보통이다. 아래의 사이트에서 CSS Sprites를 위한 파일을 쉽게 만들 수 있다. cssspritestool.com 이미지의 background-position을 자동으로 설정해 놓은 CSS.. 그밖에 유용한 Font 속성들 text-align 좌우 정렬 text-align: left; text-align: center; text-align: justify; /* 글자 간격을 벌려서 좌우 끝을 맞춘다. */ text-indent 들여 쓰기 text-indent: 1rem; text-decoration text-decoration: underline; /* 밑줄 */ text-decoration: line-through; /* 가운데 줄 */ text-transform 대소문자 변환 text-decoration: uppercase; /* 대문자 변환 */ text-decoration: lowercase; /* 소문자 변환 */ text-decoration: capitalize; /* 단어 첫 글자만 대문자 */ 한 줄로 표시되.. Font Size에 관한 모든 것 font-size의 단위로 px을 쓰지 말아야 한다. 장치의 픽셀 환경에 따라 다른 크기로 표시될 수 있기 때문이다. 대신 rem을 쓴다. rem은 상대적인 값이다. root인 html에서 font-size로 설정한 px 값의 배수를 표현한 값이다. 예를 들어 아래와 같이 설정했다면 html { font-size: 16px; } 1rem은 16px이고 2rem은 두 배인 32px이 된다. 크롬에서 기본 font-size는 16px이고 크롬 환경 설정에서 기본 글자 크기를 변경할 수도 있으니 위처럼 html에 font-size를 직접 명시하지는 않는다. 이해를 위해 코드를 첨부했을 뿐이다. 대신 아래처럼 rem의 계산을 편하게 하기 위해 62.5%로 설정하기도 한다. html { font-size: 62... 이전 1 2 3 4 5 6 다음
