본문 바로가기

공부매니아

[스파르타 코딩 클럽] 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> 복사해서 숫자만 바꿔서 추