-
HTML/CSS 기초를 활용해 미니 쇼핑몰 웹페이지 만들기예대 출신의 코딩 도전기 2021. 7. 6. 23:50
스파르타코딩클럽 1주차 미니 프로젝트
잘못된 정보를 발견하셨다면 댓글로 알려주시면 감사하겠습니다! 🤢
HTML/CSS 그리고 부트스트랩을 이용해 아래 예시와 같은 페이지를 만드는 과제였다.
예시 페이지 계획
전체적으로 요소가 중앙에 정렬되어 있어서 <body>~</body>에 있는 모든 요소를 <div>로 감싸서 일정 width과 margin: auto를 주어야 할 필요가 보였다.
맨 상단의 이미지는 <body>에 <img>를 이용하거나 <div>를 생성하고 CSS에 background-image를 넣어 준다.
하단 인풋 박스들과 '주문하기'버튼은 Bootstrap Components를 사용
결과물
1차
코드 전문
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <title>스파르타코딩클럽 | 부트스트랩 연습하기</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Serif+KR&display=swap" rel="stylesheet"> <style> .text1 { font-family: 'Black Han Sans', sans-serif; } .text2 { font-family: 'Noto Serif KR', serif; } .wrap { width : 640px; margin: auto; } .item_image { background-color : green; width: 640px; height: 360px; margin-top: 20px; background-image: url("https://image.zdnet.co.kr/2019/07/26/jh7253_mi8B3WeX2kprf.jpg"); background-size: cover; background-position: center; } .item_dsc { margin: 20px auto 20px auto } .col-auto2 { width:640px; } .btn { display: block; margin:auto; } </style> <script> function hey() { alert('구매 감사합니다.') } </script> </head> <body> <div class="wrap"> <div class="item_image"></div> <div class="item_dsc"> <h1 class="text1">정든 맥북을 팝니다 <span style="font-size:16px"> 가격: 1,000,000원 / 개 </span></h1> <p class="text2">제가 쓰던 맥북을 판매합니다. 제가 대학교를 졸업할 수 있게 도와준 녀석입니다. 제가 오랜기간 길들여놔서 사람 말을 잘 듣습니다. 성능상 하자 없구요. 외관도 정말 정말 깨끗합니다. 지금까지 이런 맥북은 없었다. 이것은 중고인가 새것인가. 퇴사해서 돈이 없어요 사주세요...</p> </div> <!--col-auto가 적용된 상태에서 width 변경이 안되어서 col-auto2로 변경하여 해당 클래스에 width적용함--> <div class="text1"> <div class="col-auto2"> <label class="sr-only" for="inlineFormInputGroup">Username</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">주문자이름</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup" placeholder=""> </div> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <label class="input-group-text" for="inputGroupSelect01">수량</label> </div> <select class="custom-select" id="inputGroupSelect01"> <option selected>--수량을 선택하세요--</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="col-auto2"> <label class="sr-only" for="inlineFormInputGroup">Username</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">주소</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup" placeholder=""> </div> </div> <div class="col-auto2"> <label class="sr-only" for="inlineFormInputGroup">Username</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">전화번호</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup" placeholder=""> </div> </div> </div> <div class="btn"> <button onclick="hey()" type="button" class="btn btn-primary">주문하기</button> </div> </div> </body> </html>
피드백 사항
인풋 박스가 좌우 길이가 짧게 들어가 안 맞았다. 아래 ‘주문자이름’ 등 입력창들을 부트스트랩에서 Input Group에서 찾을 생각을 못하고 Form에서 비슷한 걸 찾아서 가져와 썼더니 좌우 길이가 안맞는 문제가 생김. 그래서
- 부트스트랩에서 복사해온 원래 <div class=“col-auto”></div>를 새로운 <div>태그로 감싸고 class를 새로 주어 width를 넣으니 변화가 없음.
- 부트스트랩에서 복사해온 원래 <div class=“col-auto”></div> 있던 class 이름을 다르게 바꿔서 width를 주었더니 좌우길이 맞게 변화…
이렇게 해결했지만 부트스트랩의 자체적인 class는 수정하지 않는 것이 좋을 것 같아서 피드백을 받았다. 내용은 다음과 같았다.
- 부트스트랩에서 자체적인 class로 컴포넌트 스타일이 지정되어 있기에 자체 class는 수정하지 않는 것이 좋다.
- 기존 class에 css에서 스타일 추가해서 사용 (추후 동일 클래스 사용 시, 스타일 재설정하는 문제가 발생할 수 있으므로 유의)
- 새로운 class를 추가 부여!
참고 : class 값이 여러개인 경우에는 CSS 코드 순서대로 적용된다. (나중에 지정된 스타일이 적용)
그리고 Component를 잘 가져오자..
'예대 출신의 코딩 도전기' 카테고리의 다른 글
개발일지 Week 3 / Python 웹스크래핑, MongoDB (0) 2021.08.10 Week 2 / JQuery, Ajax 기초와 다뤄보기 (0) 2021.07.14 M1 Mac 환경에 Homebrew(홈브루) 설치하는 법 (0) 2021.07.12 Week 1 - HTML, CSS, JavaScript 기초 (0) 2021.07.04 예대 출신의 코딩 도전기 -시작 / Week 0 (0) 2021.07.03