본문 바로가기
728x90
300x250
SMALL

Front-end312

giphy 움짤 직이는 이미지 모음 어플 사이트 다양한 움짤 모음 사이트로 유명한 giphy 입니다. https://giphy.com/search/icon Icon GIFs - Find & Share on GIPHY Find GIFs with the latest and newest hashtags! Search, discover and share your favorite Icon GIFs. The best GIFs are on GIPHY. giphy.com giphy는 어플로도 다운받을 수 있습니다. 외국 사이트라 영어로 검색해야 하지만 엄청 다양한 종류의 움짤들을 확인할 수 있습니다. 클릭을 해서 link나 iframe으로 불로 올 수도 있습니다. 자신이 직접만든 움짤을 업로드 할 수도 있습니다. 이미지는 다르이름으로 저장해서 다운 받아서 사용할 수.. 2021. 6. 15.
구글 웹폰트 사용 방법 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위에 Google Fonts에 접속합니다. 원하는 폰트를 찾으면 되는데 한글 폰트를 찾는다면 Language를 Korean로 변경합니다. 여러개의 폰트중 원하는 폰트를 클릭합니다. 저는 Nanum Pen Script라는 폰트를 선택했습니다. Select this style를 클릭합니다. 그러면 오른쪽 편에 내가 선택한 폰트가 담긴걸 확인할 수 있습니다. link를 복사해서 구글폰트 사용법 테스트 입니다. Download all 해서 사용할 수도 있습니다. 다운받은 폰트를 원하는 위.. 2021. 6. 14.
폰트 사이즈 em, rem 구하는 방법 em 폰트 크기를 설정하는 값 중 em은 동적으로 변경되는 사이즈를 가집니다. em은 부모 엘리먼트 크기와 같고 만약 폰트 사이즈를 따로 설정하지 않았다면 기본 폰트로 지정되는데 기본 폰트는 보통 16px입니다. 즉 1em = 16px이고 2em = 32px이 되고 2.5em은 2.5*16 해서 40px이 됩니다. 만약 body 엘리먼트 font-size가 20px로 설정된 경우 1em=20px이 되고 2em은 40px이 되는 것입니다. em표현을 픽셀 값으로 표현하면 아래와 같이 표현할 수 있습니다. em = 구하고자 하는 엘리먼트의 pixel 값 / 부모 엘리먼트의 font-size pixel 값 예를 들어 폰트 크기가 1em이고 브라우저 기본값이 16px로 정의돼 있을 때 만약 12px폰트로 지정하.. 2021. 6. 13.
html 제목태그의 필요성 제목태그(h태그) h1, h2, h3, h4, h5, h6 이렇게 html의 제목 태그가 존재하지만 제목태그를 사용하지 않아도 같은 결과를 줄 수 있습니다. 시맨틱 태그등을 사용하지 않아도 div나 sapn만으로도 코딩이 가능합니다. 실제로 div만으로 코딩하신분도 몇번 본적이 있습니다. 결과로 보면 비슷해 보이지만 html에 의미에 맞게 사용해야 합니다. 오늘은 그이유에 대해서 알아보겠습니다. 아래와 같은 코드가 있을때 title title 위에처럼 의 제목태그로 감싼 코딩과 아래와 같이 strong과 sapn으로 깜싸고 스타일을 준 코딩은 결과만 보면 차이가 없어 보입니다. 하지만 여러가지 이유로 제목태그를 사용할 것을 권장합니다. 제목태그의 필요성 1. 간결함 위에 예시 코드만 봐도 알겠지만 제목 .. 2021. 6. 12.
728x90
반응형
LIST