웹아틀리에 - Web atelier

[크로스브라우징]구버전 ie 테이블 가로스크롤 이슈 해결법 퍼블리셔라면 한번쯤 고민해 봤을 크로스브라우징 이슈 입니다. 이번 포스팅은 ie7에서 ie8~9와 다르게 가로스크롤이 나타나는 현상의 해결법 입니다. 출처 (HEIVLAB) 테이블을 이용하여 상하스크롤이 있는 컨텐츠를 만들기 위해서 어떻게 해야 할까요?? 테이블을 감싸고 있는 div에 height값을 주고 스크롤을 위해 overflow:auto 속성을 줍니다. 테이블요소의 속성으로 ​위와 같이 적용했습니다. 왼쪽은 IE8 ~ IE11브라우저에서 확인한 화면 오른쪽은 IE7에서 확인한 화면 입니다. 그 결과 IE7브라우저에서 상하스크롤 뿐만 아니라 좌우스크롤도 함께 생긴 것을 볼 수 있습니다. 좌우 스크롤을 없애기 위해 oveflow-x:hidde..

[반응형웹]em 과 rem을 적절하게 사용하자. 반응형 웹을 개발하면서 다들 고민을 해보셨을 이야기 입니다. em과 rem의 차이. 그리고 적절한 활용 방법을 정확하게 알려주는 글이 있어서 가져옵니다. 출처 (https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984) 여러분은 아마 좀 더 유연한 측정 단위의 사용을 고려해 보신 적이 있으셨을 겁니다. 그런데 언제 rem 단위를 쓰고, 또 언제 em을 쓸 것인지 아직 완전하게 이해하지 못하셨다면, 이번에 확실하게 안내해 드리겠습니다! em과 rem 모두 길이가 유연한 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로..

[웹폰트] 올바른 방법으로 로딩하자. - 사이트 로딩 속도 개선 평소 웹을 보면 심심치않게 웹폰트가 적용되어 있는 것을 볼 수 있습니다. 이미 널리 쓰이고 있는 중인데요. 그런데 알고 계신가요? 웹폰트의 용량은 생각보다 큽니다. 영문 폰트의 경우는 그래도 괜찮습니다. 종류도 다양하고 용량도 작습니다. 문제는 한글 웹폰트죠. 실제로 c드라이브의 폰트 폴더에 가서 확인해 보면 한글 폰트의 용량은 매우 큰 편입니다. 그 용량을 웹에서 로딩한다면...? 사이트 이용자는 속도도 그렇지만 매번 폰트 다운로드로 인한 용량 때문에 데이터에 신경을 쓸 수 밖에 없습니다. 이미지는 경량화 하는데... 폰트는..? 사실 폰트를 서버에 올려서 사용하는 방법은 그리 추천드리지 않습니다. 데스크탑의 폰트는 용량이 매우 크기 때문..