본문 바로가기

CSS

(4)
[CSS] em과 rem, 제대로 알고 사용하자! em과 rem em과 rem은 CSS 상대 단위 중 하나이다. 절대 단위인 px와는 다르게 동작한다. 상대 단위와 절대 단위의 차이는, 현실에서 km²와 여의도 x배의 면적 차이와 동일하다. 마찬가지로, 1px는 어느 곳에서나 1px이지만, 1em이나 1rem은 상황에 따라 달라질 수 있다. em은 요소의 글꼴 크기 1em은 요소의 글꼴 크기다. 1em은 해당 element의 font-size 값과 동일하다. element의 글꼴 크기가 12px이면, 1em은 12px이 되고, 2em은 24px이 된다. rem은 루트 요소의 글꼴 크기 1rem은 루트 요소의 글꼴 크기다. 1rem은 루트 요소(일반적으로 태그) font-size 속성의 값과 동일하다. 일반적으로는 브라우저에서 지정한 값인 16px을 나타..
웹 폰트에서 EOT, TTF 파일을 배제해야하는 이유 필요한 웹폰트 파일은 WOFF2 뿐 폰트 파일을 사용할 때는, 원칙적으로는 WOFF2만 쓰는 것이 좋고, IE에 대한 호환이 필요한 경우에 WOFF파일을 사용하면 된다. EOT파일은, 100%라고 표현할 수 있을 정도로, 모든 경우에 필요하지 않다. EOT 파일이 필요한 경우는 IE 8 이하의 브라우저를 지원해야하는, 아주 극단적인 레거시 페이지에서만 필요하다. 물론 그러한 페이지에서 웹 폰트를 사용해서 꾸미는 경우는 거의 없을 것이다. TTF 파일도 필요 없다 TTF파일도 마찬가지로, 굳이 제공해줄 필요가 없는 것이, 모든 브라우저에서 WOFF와 WOFF2 형식을 지원하고 있다. IE를 지원해야하는 경우라도, WOFF를 쓰는 것이 옳다. TTF는 압축되지 않은채로 제공되기 때문에, 사용자 경험에 악영향..
[CSS] span에서의 ... 말 줄임표(text-overflow: ellipsis 속성) 처리 div와 같은 block 요소와는 다르게, span은 inline요소이기 때문에, text-overflow: ellipsis 속성을 줘도 제대로 동작하지 않는다. 이러한 경우에는 span 요소에 display: inline-block이나 display: block 을 추가하여 block 요소로 변경하면 정상적으로 동작한다.
깔끔한 모던 날씨 카드 디자인 HTML과 CSS만 이용해서 만든 날씨 카드 샘플이다. 영감은 https://story.pxd.co.kr/1379 그래프는 생각보다 어렵기 때문에(이미지가 아니면 좀 복잡하다) 제외했다. 생각보다 깔끔하게 디자인이 나왔다.