프로젝트를 하면서 웹폰트 설정 관련해서 이전엔 안 써본 font 속성에 대하여 정리! - 웹 폰트 최적화 방법 : 텍스트가 항상 보이게 하기 * 웹폰트 적용시 텍스트 번쩍임 현상 발생 1) FOIT (Invisible) (Firefox, Chrome) 웹폰트가 적용되지 않은 “텍스트”가 보이지 않는 상태에서 폰트가 바뀌면 텍스트 번쩍임 현상 발생. 2) FOUT (Unstyled) (Internet Explorer) 웹폰트가 적용되지 않은 “폴백 폰트 상태”에서 폰트가 바뀌면서 텍스트 번쩍임 현상이 일어나는 현상 발생. * CSS의 font-display 속성을 사용하면 외부 라이브러리를 사용하지 않고도 웹폰트의 로딩 상태에 따른 동작 설정이 가능함. (현, IE 미지원.) font-display : a..
mediaquery 에 대하여 찾아보다가 이전까지는 사용하지 않았던 방식을 발견해서 메모메모! header main head 안에 link 태그를 보면 "media="(max-width: 400px)" 이라고 적힌 부분이 보인다. (최대 가로넓이 기준 400px 까지 적용) 예전 프로젝트에서 전체페이지는 적응형이나, main 페이지만 반응형 작업을 요청해서 css 파일 중복으로 애먹은 적이 있었는데, 그 때 이방식을 사용한다면 얼마나 유용했을까! 이 외에도 프린트 할때 색상을 지정하거나 등의 다양한 기능이 있다. 나름 유용할듯! http://tcpschool.com/html-tag-attrs/link-media
img 태그를 영역안에 맞추는 방식으로, 1. verticalCrop, horizonCrop class 만 만들어서 사용하다보니 다른 방식으로 만드는 방법에 대한 질문에 대답을 못했다..! 😖 .thumbnail{ position: relative; overflow: hidden; } /* 세로이미지 꽉차게 적용. */ .verticalCrop{ /* 고정 가로,세로값 지정 */ width: 150px; height: 80px; } /* 가로이미지 꽉차게 적용. */ .horizonCrop{ /* 고정 가로,세로값 지정 */ width: 80px; height: 150px; } .thumbnail img{ position: absolute; top: 50%; left: 50%; transform: tra..