2주차 수요일 개인과제 - bootstrap 사용하여 카피하기

부트스트랩 사용하여 카피페이지 만들기.

 

조건 - css 추가 x, 외부 플러그인 추가x

 

1.

navbar에 fixed-top을 주니 아래 컨텐츠들을 잡아먹는문제.

body에 padding-top:70px을 주면 된다고 한다.

다른 방법으로는, body에 class=“pt-5”를 줘서 패딩을 전체 추가해도 해결된다고 한다.(아마도 부트스트랩 내에서 해당 클래스에 패딩을 잡아놓은 듯 하다)

 

그러나 나는 css를 줄 수 없는데.. 어떻게 해결해야하지? cdn으로 받아온 거라 네브바 안쪽의 css를 건드릴 수도 없었다...

그냥 탑패딩을 주는것으로 처리.

 

애초에 main container를 navbar를 제외한 모두로 두면 되는 문제였다.

row 그리드와 container그리드는 서로 겹칠일이 없다. 영역을 명확히 두고 있는 div들이므로.

 

2.

그리드에서 576px과 768px사이에 자꾸 원하는대로 그리드 모양이 안잡히는 문제가 있었다.

 

내가 적어놓은 클래스 명은 col-12 col-sm-9 col-md-9.

내가 알고있는대로라면 대략 700px정도부터는 화면에 꽉차게 컬럼이 반응해야했는데(col-12) 그렇지 않았다.

 

인터넷을 찾아보다 보니 내가 알고있던 정보가 잘못된 것이라는 것을 알았다.

 

bootstrap3까지는 그리드에서 총 4개의 반응영역을 지정해놓았다. 768px 미만의 xs, 768px 이상의 sm, 992px이상의 md, 1200px이상의 lg.

 

그러나 bootstrap4에서부터는 총 5개의 영역을 지원한다.

576px미만의 xs, 576px이상의 sm, 768px이상의 md, 992px이상의 lg, 1200px이상의 xl.

 

즉 576px과 768px사이는 사실은 sm영역으로 바뀌었는데, 나는 여전히 xs영역을 지정하면서 xs영역처럼 움직이길 바랬던 것이다.

이를 깨닫고 sm옵션을 지우니 원하던대로 동작했다. 576px까지만이 아니라 768px까지 컬럼이 꽉차게 반응했다.

 

해결!

 

 

 

실패한 점:

한국어 부트스트랩사이트에서 가져온 navbar는 올리자마자 row가 브라우저 화면에 꽉차게 나왔는데, getbootstrap사이트에서 가져온 컴포넌트 navbar는 row크기도 마음대로 지정이 잘 되지 않았고 화면에 꽉 차지도 않았다. 일단 fixed-top을 주니 꽉차긴 했는데 z-index가 높게 설정되어있는지 아래의 컨텐츠들을 먹는 문제가 있었다.

 

nav bar의 경우 row임에도 불구하고 브라우저 화면에 꽉차게 나오지 않았다면, col-12를 클래스에 추가하는것이  나았을 듯하다. 깨달은점에도 느꼈지만 row의 크기조정보다 col의 크기조정이 훨씬 쉽다. col-12를 이용하여 row의 크기가 꽉차게 둘수 있었을듯.

 

해결하려고 했으나 css로 패딩을 주는 수밖에 없다는 구글링을 보고 그냥 패딩을 줘서 임시방편으로 넘어갔다.

 

padding을 주지 않았어도 그냥 navbar를 제외한 모든 main을 container로 잡아줬으면 서로 먹지 않았을것.

또, {m,p} {t,b,r,l,x,y}-n 을 조합해서 마진을 주는 클래스명도 있었다. 더 찾아볼걸.

 

또 jumbotron의 bg color가 기본 색깔보다 조금 더 짙은 것 같았는데, bg-color파트를 부트스트랩사이트에서 뒤져봐도 해당 색깔과 같은 느낌의 색깔로 지정된 클래스를 찾을 수 없었다. Css를 사용할 수 없었으므로 고치지 못하고 그냥 넘어갔다.

 

jumbotron의 상상도 못한 정체 alert...... 굳이 jumbotron을 쓰지 않아도 커다란 박스 만드는건 여러 방법이 있나보다.

 

 

깨달은 점:

row보다 col이 훨씬 쓰기 쉽다.

row에는 기초마진이 -15px잡혀있는데다가 크기도 왔다갔다하고, 다른 col 또는 row와 붙을때도 딱붙거나 튕겨날아가거나…. 쓰기 훨씬 어려운거 같다. row는 최소한으로 모양을 잡아주는데 쓰자. 가로로 길다고 다 row라고 생각하지말고 col으로 바꿔쓰자.

 

대부분의 여백은 row와 col의 조합, 그리고 사이사이에 있는 container로 다 조정 할 수 있었다.

내 화면과는 다르게 이상하게 마진이 생기는 부분들은 대부분 container로 내부를 한번 더 감싸놓아서 자동적인 margin과 padding이 잡힌 것이었다.