웹 성능을 최적화하는 방법으로 다양한 방법이 있지만그 중 간단한 방법을 뽑자면 바로 '폰트 경량화'입니다. 폰트 경량화는 2가지 종류로 나뉘는데요.1)폰트 용량을 줄이는 방법과2)잘 쓰지 않는 글자를 빼버리는 방법입니다. 2번의 방법은 한글과 같이 다양한 문자가 발생 가능한 언어에서만 사용가능하며모든 언어에서 사용 가능하지는 않습니다.따라서 이번 포스팅에서는 1번의 방법에 대해서 자세히 소개하겠습니다.✔폰트 종류(용량별)WOFF2: 가장 성능이 좋은 폰트 ( WOFF보다 더 압축된 폰트 )WOFF: 기본적인 압축 폰트EOT / TTF : 압축이 되어 있지 않은 폰트폰트 용량을 줄이는 방법으로는 다른 확장자의 파일을 사용하는 것입니다.이 중에서도 woof2 파일이 가장 압축률이 좋아 파일 용량이 적습니다...

HTML로 웹페이지를 만들다 보면 반응형으로 웹을 만들어야 겠다는 생각을 하게 됩니다.일반적으로 반응형 웹을 고려하고 만들지 않으면  제작한 디바이스가 아닌다른 디바이스로 들어갔을때 UI 요소들이 이상한 곳에 가있거나 글씨가 깨지게 깨져 있기 때문입니다. *반응형 웹은 ?디바이스의 창의 크기에 따라 알아서 요소들이 유기적으로 배치되는 사이트를 의미  이를 해결하기 위한 방법으로는 3단계로 1.html - 특정 meta 태그 삽입하기2.폰트 사이즈 px 대신 em 이나 rem사용하기3.css - 미디어 쿼리 사용하기 가 있습니다.1.html - 특정 meta 태그 삽입하기위와 같이 head 태그 안에 저 meta 태그를 삽입해주면 됩니다. 해당 내용을 자세히 설명해드리자면viewport는 웹 페이지에서 보..

위 사진처럼   html과 css를 이용해 원을 만들고 글자,이미지를 원 위에 배치하고 싶으신가요..?저도 처음 웹페이지를 제작 하며 자초지종 다 겪어가며 성공했는데요 ㅠㅠㅠ정답이 아닐 수도 있습니다만 html과 css로 제가 완성시킨 방법을 알려드릴게요1) 원 만들기첫번째로 우리는 원을 만들어 줘야 합니다.HTML에서 태그를 만들어주세요 그 다음으로는 css에서 꾸며주면 돼요이 때 중요한것은 position !! 꼭 relative 여야 해요div{ background-color: antiquewhite; border-radius: 50%; width: 24%; padding-bottom: 24%; position: relative;} 자세히 설명 드리자면 해당..