23_10_16 CSS 공부정리

개발공부/CSS 2023. 10. 17. 03:07

[코딩애플] 중급모듈

-부트스트랩 사용

Bootstrap 시작하기

Bootstrap은 강력하고 기능이 풍부한 프론트엔드 툴킷입니다. 프로토타입부터 프로덕션까지 뭐든지 빠르게 빌드해보세요.

getbootstrap.kr

1.html먼저 복사(css,js 두개 링크)

2.원하는 거 검색해서 복붙

3.새로운 css파일 만들어서 내 커스텀 디자인 입히기 or Utility Class 찾아서 class명에 넣기

-부트스트랩의로 반응형 레이아웃 만들기

그리드 시스템

강력한 모바일 우선 flexbox 그리드를 사용하여 12개의 열 시스템, 6개의 기본 반응형 계층, Sass 변수 및 믹스인, 수십 개의 사전 정의된 클래스 덕분에 모든 모양과 크기의 레이아웃을 빌드할 수 있

getbootstrap.kr

0.container는 전체 상자를 의미

1.row 한줄은 총 12칸

2.col-3은 3칸을 차지한다는 의미(한 줄에 4박스가 들어가게됨)

</div>

3.가운데에 xs,sm,md,lg,xl,xxl을 넣어서 특정 width이상에서 (몇칸차지할지or순서 등) 조건문을 적을 수 있음

</div> //md사이즈 이상에서 각 박스들은 6칸씩차지. 그 이하에서는 12칸씩

</div>

4.박스간에 순서도 지정 가능

플렉스

반응형 flexbox 유틸리티 세트를 사용해 그리드 열, 네비게이션 바, 컴포넌트, 레이아웃의 정렬 및 크기 조정을 신속하게 관리합니다. 더 복잡한 구현의 경우 사용자 정의 CSS가 필요할 수 있습니다

getbootstrap.kr

-숙제1 할때 실수한것

row에 gap을 줫더니 3개,1개로 정렬되는 경우가 생김. 레이아웃을 짤떈 먼저 박스를 생성하고 그안에 요소를 넣자.

//이렇게 먼저 만든 후 요소를 넣어야 더 편함.

코딩일기장 코딩일기장