[스파르타 코딩 클럽] 1주차 과제 기록 (원페이지 쇼핑몰 만들기)

※스파르타 코딩 클럽 과제 기록

1. 폰트 변경

<link href="https://fonts.googleapis.com/css2?family=Cute+Font&display=swap" rel="stylesheet"> <style type="text/css"> * { font-family: 'Cute Font', cursive; }

   

   1) 사이트 접속 https://fonts.google.com/

   2) language(Korean) 선택 

   3) 폰트 선택 (Select this style)

   4) 오른쪽 Selected Family의 Embed탭 클릭

   5) link와 css rules 복사하여 head에서 변경

2. 이미지 변경

.img { background-image: url('https://kkoma.net/web/product/big/201905/4aa48d0ebab9f50f9e3b47fb7b8af386.jpg'); background-size: cover; background-position: center; width: 500px; height: 300px; padding-top: 500px; margin-top: 30px; }

1) 구글에서 cloud 검색 
2) 이미지 주소 복사
3) head>style>.image의 url 주소 변경
4) 이미지가 천장에 붙길래 padding-top: 500px; 추가
   내부 여백이여서 내가 원하는 사진 위로 여백은 안생겼지만 잘렸던 사진이 더 켜지길래 적용함 ㅋ
5) margin: 30px 추가 
   margin: 30px도 가능하나 사방으로 붕뜨는 느낌. margin-top: 30px 적용

*margin과 padding 설명 잘되어있는 블로그: https://blog.naver.com/jm3ds/221619894995

3. 선택 가능 수량 변경

<select class="custom-select" id="order-count">     <option selected value=""> -- 수량을 선택하세요 --</option>     <option value="1">1</option>     <option value="2">2</option>     <option value="3">3</option>     <option value="4">4</option>     <option value="5">5</option> </select>

input form 바꿔보려다가 안되서 쉬운 것 그냥 추가

1) <option value="1">1</option> 복사해서 숫자만 바꿔서 추