Bootstrap 활용해서 쇼핑몰 만들어보기

🌱 데모:https://noona-louisvuitton.netlify.app/
※ 코딩알려주는누나의 html/css 강의 내용을 바탕으로 만들어보았습니다.

---

🪴 프로젝트 소개

Bootstrap에 있는 그리드와 컴포넌트를 활용하여 쇼핑몰 홈페이지를 만들어보았습니다.

프로젝트 기간

• 22.11.06.-22.11.08(3일)
• Github

What is Bootstrap?

부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTM, CSS, JS 프레임워크이다.

• 부트스트랩을 사용하면 코딩량을 줄여 개발시간도 줄어들고 디자인도 깔끔하게 제작이 가능하다.
• 부트스트랩 사용방법

1. CDN 방식으로 링크
2. 다운로드

What is CDN? 🥸
CDN은 Content Delivery Network(콘텐츠 전송 네트워크)의 약자
지리적인 제약 없이 전 세계 사용자에게 빠르고 안전하게 컨텐츠 전송을 할 수 있는 기술

<Bootstrap 사용하는 방법>

https://getbootstrap.kr/docs/5.2/getting-started/introduction/ 의 Bootstrap 의 공식문서를 하나하나 따라서 하면 쉽게 할 수 있다.
1.프로젝트 최상위 폴더에 index.html file파일을 생성하기
2.Bootstrap의 CSS와 JS를 포함시켜주기 ( CSS를 위해서 head에 link 태그를 추가시켜주고, JavaScript body 전에 script 태그를 삽입해주기)

css
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

js
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

※ 주의) css link는 반드시 본인이 만든 style.css보다 위에다 붙여주기!

🌿 새로 배운 점

무궁무진한 Bootstrap의 세계

bootstrap으로는 간단한 css와 html태그에서 button이나 캐러셀같은 것에 제한적으로 활용할 수 있는 건 줄 알았는데 다양한 Utilities를 활용하면 사소한 css조차도 활용가능하다는 점을 알게 되었다.(css에서 자주 활용되는 margin이나 padding 또한 bootstrap에서 활용이 가능하다는 것을 알게 되었다.)

미디어 쿼리의 활용

bootstrap으로도 css를 활용을 할 수 있지만 미디어쿼리를 이용해서 조금 더 세부적으로 css를 조정하는 방법을 알게되었다.

.third-line {
  display: none;
}

@media screen and (max-width: 48rem) {
  .third-line {
    display: block;
  }
}

미디어쿼리를 활용하여 원하는 화면 사이즈에서 글을 보이게 할 수도 있고 사라지게 할 수도 있는 코드를 작성해보면서 미디어쿼리를 사용하는 방법에 대해 더 자세하게 알게 되었던 것 같다.

👀 reference

얄코-CDN은 무엇인가?