조반짝의 도전일지

※ Full Screen Landing Page 구현 1. Full Screen Landing Page 구현 : 이미지 파일 용량 줄이기(최적화) landing page 구현시 용량은 적은 이미지를 활용한다! Front-End 웹 Landing Page 구현 시 이미지 파일의 용량이 크면 자칫, 웹사이트 구동에 시간이 걸릴 수 있습니다. 그렇기 때문에, 다음과 같은 이미지 파일 용량을 줄여주는 최적화 웹 사이트를 활용하는 것도 필요합니다. [이미지 파일 용량 줄여주는 최적화 웹사이트 : TinyPNG – Compress WebP, PNG and JPEG images intelligently] https://tinypng.com/ [실습 확인] test.JPG(약 1.8MB) 파일의 용량을 TinyPNG ..

1. 배경 - 영상 넣기 글꼴넣기 다른방법으로 폰트 넣기 font : 17px 1.4(줄간격) 폰트종류 body css편집 wrap에서 fixed 하기 object-fit: cover; 비율 맞추기 html 마크업 #circle css 편집 #circle 3d효과 지정 #circle html 세부 마크업 #circle article css 편집 위치 정하기 #circle html 세부 마크업2 #circle article h2 css 편집 #circle article .inner css 편집 article 숨겨주기 div 하나하나 편집해준다. face1 부터 편집 face1 html 마크업 div 6개가 필요하다. 폰트어썸 이미지를 넣어야하기 때문에 폰트어썸 링크를 걸어주자 i태그 밖에 p태그를 추가해준..