웹아틀리에 - Web atelier

[반응형웹]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드라이브의 폰트 폴더에 가서 확인해 보면 한글 폰트의 용량은 매우 큰 편입니다. 그 용량을 웹에서 로딩한다면...? 사이트 이용자는 속도도 그렇지만 매번 폰트 다운로드로 인한 용량 때문에 데이터에 신경을 쓸 수 밖에 없습니다. 이미지는 경량화 하는데... 폰트는..? 사실 폰트를 서버에 올려서 사용하는 방법은 그리 추천드리지 않습니다. 데스크탑의 폰트는 용량이 매우 크기 때문..

웹상에는 다양한 참고 사이트가 굉장히 많이 있는데요. 실제로 본인이 많이 참고하는 사이트들을 정리해보았습니다. 1.Cordrops 웹 디자인 튜토리얼과 CSS, jQeury 등 매우 많은 자료가 모여있습니다. 데모 뷰 기능이 있어서 매우 편리하기도 하구요. 다운로드 링크도 참조해줍니다. 가장 많이 사용하고 있네요. 라이센스는 대부분 MITLicence지만 항상 라이센스 부분은 꼭꼭 확인해 주도록 합시다. 내가 만든게 중요한만큼 다른 제작자가 만든것도 당연히 중요하겠죠. 2.WDC 웹 디자인, 개발, 마크업 등 다양한 방면으로 자료들을 모은 예제 참고 사이트 인데요. 굉장히 참고할 것들도 많고 구현해볼 것들도 많아 아주 재미있는곳 입니다. 3.Tympanus 페이지 전환 등 웹에서 사용할 수 있는 트랜지션..