본문 바로가기
IT관련/Web Publishing

부트스트랩 정리1

by 비제이체 2020. 12. 15.

<div class=container>
<div class=row>
<div class=col-sm-4 col-xs-4 col-md-4 col-lg-4>

container는 말그대로 무언가를 채울수있는 빈컨테이너라고 생각하면 된다.
row클래스는 col-sm-4 등을 이용하기전 미리 선언해 줘야한다.
col-sm-4등은 가로폭을 어떻게 분할하여 표현할지 정해준다.
부트스트랩의 가로폭은 12등분까지 분할가능하며 col-sm-1~12까지의 숫자를 적용할수 있다
sm은 소형기기에서 보이는 화면 xs는 그보다 좀더큰 태블릿 정도 md는 노트북 정도 lg는 데스크톱 모니터 등의 대형화면에서 보이는 분할정도를 나타낸다.

4가지를 다안정하고 하나만 정해줘도 문제는 없는데 그에따른 나머지 분할정도는 정해진 공식이 있다.

 

 

 

<footer class="py-3 bg-dark">
<div class="container footer">
<div class="row">
<div class="col-md-3 text-white text-left">

 

패딩(p)은 내부여백 마진(m)은 외부여백을 말하며

pb-3 pt-3 py-3 px-3 pl-3 pr-3 mb-3 mt-3 my-3 mx-3 ml-3 mr-3 등등이 있다

py는 위아래 px는 좌우과 적용되며 p-3 m-3 와같이 적용하면 위아래좌우가 적용된다.

 

푸터같은 경우 py값으로 세로폭을 조절하는것이 좋다.

 

댓글


홈페이지 제작/유지보수
반응형 홈페이지 퍼블리싱, 개발, 디자인
스타트업, 기업용