DAY-36. 부트스트랩

🎨 2022-04-22

부트스트랩 사용

❗ 수업을 듣고, 개인이 공부한 내용을 적은 것 이기에 오류가 많을 수도 있음

🔔 class=”container”

안쪽 패딩을 준다

🔔 row & col

하나의 row안에는 총 12개의 col이 들어간다

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

• 12개중 가장 좌측이 6칸 가운데 3칸 우측 3칸을 차지한다는 의미

사이즈에 따른 변화 sm,md,lg

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

• 기본은 col-12 즉 한줄씩 차지한다 하지만 col-md인 768px이상으로 페이지가 조정되면 col이 6개씩 차지해 한 줄에 다 모인다

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

1. sm 이상이면 row가 2개 발생 :

첫줄에는 6 /6 반반 가지고 두번째는 한칸 다 차지

2. sm 이하를 다르게 지정해 주지않고 sm 이하가 되면

sm 보다 작아지면 row 1개씩 차지해서 세줄이 되버림(❗ col을 설정하지 않으면 기본이 col-12이다)

• 즉 위 코드는 페이지의 크기가 sm이상이면 row가 2개가 되고 페이지가 sm 이하이면 row가 3개가 된다

ordering

breakpoint에 따라서 레이아웃 배치를 바꿔줄때 요소들에 order를 주고 그 순서에 맞게 배치하는게 가능

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

1. order-sm-2 : 페이지가 sm이상이면 user가 두번째가 된다→ 페이지가 sm이하이면 user가 첫 번째가 된다 order-2에 의해서

2. order-2 : 기본적인 의미는 하나의 row 에서 두번째 에 위치하라는 의미 → 페이지가 sm미만 이면 contents가 밑으로 내려간다

display

만약 화면의 크기가 바뀌었을 때 보여주고 싶지 않은 요소를 결정해주고 싶으면 d속성값을 사용한다 (display)

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

1. d-none : 값을 안보이게함

2. d-md-none : md사이즈 이상이면 값이 안보임 md 사이즈 이하면 보임

3. d-md-block : md 사이즈 이상이면 값이 보임

4. d-block : 값을 보이게 함

🔔 Modal 커스터 마이징

See the Pen Untitled by kimyeong96 (@kimyeong96) on CodePen.

• 기존의 Vertically centered 모달을 커스터 마이징 했다
• w-100을 이용해 버튼과 input 등의 크기를 크게 해줬다
• header text “로그인”을 가운데로 하게 하는게 힘들었다
• Modal에서 header text 가운데로 오게 하기 : https://stackoverflow.com/questions/42121897/boostrap-v4-0-0-alpha-6-model-how-to-center-model-title