bootstrap을 사용하기 전에, CSS를 초기화하는 작업이 필요하다 Reset CSS 모든 HTML 요소 스타일을 일관된 기준으로 재설정하는 간결하고 압축된 규칙 세트 HTML Element, Table, List 등의 요소들을 일관성 있게 스타일을 적용시키는 기본 단위 bootstrap 파일 상단에 있었던 몇 백줄짜리 코드는 CSS를 다 정리하는 코드이다. 우리가 지금 Chrome 브라우저를 많이 써서 그렇지, 모든 브라우저는 다 각자가 가지고 있는 스타일이 있다. (User-agent stylesheets) 똑같은 HTML을 쓰더라도, 이것을 어떤 브라우저에서 켜느냐에 따라서 스타일이 다르다. 사용자가 어떤 브라우저를 쓰던지 상관없이 디자인이 똑같게 만들기 위해서

class 선택자 부트스트랩은 모든 스타일이 class의 형태로 지정되어 있다. Hello, world! margin top - 5 부트스트랩은 왼쪽 오른쪽 개념이 아니라 start, end의 개념으로 바라본다. top부터 bottom까지 한번에 선택할 수 있는 건 y (y축이니까) left부터 right까지 한번에 선택할 수 있는 건 x이다. mx-5 : margin 좌우로 5 rem : root em / 16px을 가지고 상대적인 비율의 크기를 구하는 것 0.25rem = 0.25 * 16 = 4px 더 세부적인 크기는 우리가 따로 정해줘야한다. 자기네들이 만들어놓은 클래스 이름 쓰지말라고 !important를 썼음 우리가 custom할 때는 최대한 다른 이름을 쓰도록 하기 결론적으로, 부트스트랩에는..

bootstrap CDN 온라인 CDN 서버에 업로드 된 css 및 js 파일을 불러와서 사용하는 것 1. Bootstrap 홈페이지 > Download > "Complied CSS ans JS" 다운로드 https://getbootstrap.com/docs/5.3/getting-started/download/ Download Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more. getbootstrap.com 2. CDN을 통해 가져오는 bootstrap CSS와 js 파일 확인하기 3. ..

CDN (Content Delivery Networ) 지리적 제약없이 빠르고 안전하게 콘텐츠를 바로 사용할 수 있게 한 기술 서버와 사용자의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화함. 지리적으로 사용자와 가까운 CDN 서버에 콘텐츠를 저장해서 사용자에게 전달한다.

▷ Bootstrap CSS 프론트엔드 프레임워크(Toolkit) 미리 만들어진 다양한 디자인 요소들을 제공하여, 웹사이트를 빠르고 쉽게 개발할 수 있도록 한다 트위터가 처음으로 만들었다 https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com 한글은 버전업이 느릴 수도 있어서, 영어로 된 문서를 보는게 더 좋다. - Do..