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

터미널에 'watch'를 하기 위해 사용한 json-server --watch db.json 명령어가 오류가 나길래 왜인가 싶었더니 해당 json-server를 global 로 설치하니 포트가 연결되면서 해결이됐다. 그 전에 이 파일 안에서만 설치하도록 했던 것이 오류 원인이였던 것이다. npm install json-server 말고 npm install json-server -g 를 설치하면 된다. 그 후 json-server --watch jason.db를 써주면 \{^_^}/ hi! 가 출력된다.

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; } 자세히 설명 드리자면 해당 css에서 -윗 부분 코드는 ..

CSS를 쓰다보면 특정한 셀렉터를 쓰고 싶을때 어떻게 써야 할지 막힐 때가 있다. 이를 쉽고, 재밌게 배울 수가 있는 방법이 있는데 바로 css dinner 게임으로 익히는 것이다. 이는 깃허브에서 제공하는 무료프로그램으로 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 위의 창을 누르면 해볼 수 있다. 게임을 하는 방법은 이렇게 가운데 문제가 뜨면 (ex plate를 골라라) 왼쪽 아래의 흰창 첫째줄에 정답인 셀렉터를 쓰고 엔터키를 누르면 된다. 바로 옆 검은 페이지에는 html 코드가 적혀 있으므로 이를 참고하면 되고 막힐때는 가장 오른쪽의 힌트와..

div나 section 등으로 만든 박스가 있다. 이 박스 내에 써진 글 뿐만 아니라 border인 테두리까지 가운데로 정렬 하고 싶다면 어떻게 해야할까? CSS에서 일단 어느 정도 크기를 할지 (박스크기) 를 width와 height를 정해주고 margin-left : auto , margin-right : auto 를 { } 안에 써주면 가운데로 정렬이 된다! text-align 과의 차이점은 얘는 text만 정렬되기 때문 box자체가 정렬되는 것이 아니다. (그래서 만약 box width가 원하는 길이보다 짧다면 박스 내에서는 center지만 원하는 것보다 왼쪽으로 치우친 글을 만날 수 있게 된다.)

html에서 name과 id의 차이는 뭘까? name -> 중복가능 id -> 유일하게 하나 여야함 그래서 중복으로 무언가 묶어야 하면 name을 사용한다

figure 태그를 배우며 헷갈렸던게 왜 img가 있는데 또 figure태그를 사용하는가 였다 figure의 뜻은 '이미지'로 태그는 그림이나 영상등의 요소를 넣고 감싸는데 사용된다. 즉 figure 태그 안에 img가 들어갈 수 있는 것으로 figure태그 자체만으로는 이미지를 불러올 수는 없었다. 이미지 불러오기 -> img 이미지 감싸기 -> figure 그렇다면 이미지를 감싸서 어디다 사용할 수 있을까? 그건 바로 기사나 논문등을 보면 이미지 하단에 뭔가 글이 길다랗고 조그맣게 적혀있는 것을 볼 수 있다. 그 안에 대체로 이미지의 제목이나 출처가 적혀있는데 그것을 구분해 주기 위해 바로 이 키워드가 존재한다! (참고로 figure 태그는 시멘틱 태그로 의미가 있는 태그이다.)

html코드를 보다 을 보면 에 너무 익숙해져서 그런가 hr의 뜻이 뭔가 head와 연관이 있지 않을까 하는 이상한 해석을 자주한다 그러나 태그의 뜻은 A horizontal rule로 수평선같이 긴 가로선을 의미한다 또한 얘는 종료태그가 필요하지 않고 그냥 만 써주면 끝으로 사용하지 않는다

html을 배우다 보면 css 파일을 사용할 때 부분에서 link를 사용해 파일을 연결한다. 이 때 우리는 단순히 link만 사용하는게 아니라 rel과 href을 사용하는데 rel은 relation의 약자로 '관계'를 의미한다. 즉 어떠한 파일을 연결할때 이 파일과 현재 파일의 관계를 정의하는 것이다 그래서 = 다음에 불러올 파일을 현파일과 어떤 관계로 정의할 것인지 쓴다. (예시 사진에서 rel은 stylesheet 즉 style.css가 스타일을 담당함을 의미한다) href은 hyper reference의 약자로 '하이퍼 참조'를 의미한다. 이름만 보았을때는 어렵게 느껴질 수 있는데 굉장히 쉬운 개념으로 참조할 하이퍼*(=하이퍼링크를 떠올려보자)을 의미한다 그래서 = 다음에는 참조할 파일명을 이 다음..