소프트웨어 Bootstrap (부트스트랩) 2. 반응형으로 만들어보자
작성일 19-01-09 15:03
페이지 정보
작성자 쿨거래닷컴 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 조회 6,198회 댓글 0건본문
태그에서 class="..." 라고 지정해 주면 자동으로 반응형으로 동작하게 할 수 있습니다
예) <div class="col-md-6">md 6칸짜리 태그</div>
여기서 md 는 이 태그의 크기 범위를 나타내고 6은 그 크기의 몇 배인지 정해줍니다
태그 크기 범위는
xs (~768)
sm (768~992)
md (992~1200)
lg (1200~)
이렇게 4가지가 있습니다
그리고 몇배인지는 1부터 12배 까지 정해줄 수 있습니다
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
이렇게 1짜리가 12개이면 화면 가로가 md 사이즈의 범위(992~1200)에 있을 경우 가로로 가득차게 됩니다
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-6">col-md-6</div>
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-6 |
6은 몇배짜리인지 나타내니까 6배짜리가 하나 있어서 가로로 가득 차게 됩니다
태그의 크기는 태그안에서 여러 개를 동시에 정할 수 있는데 각 범위에 따라서 크기가 변하므로 반응형으로 동작하게 만들 수 있는 것입니다
예) <div class="col-md-4 col-sm-5 col-sx-6">반응형</div>
이렇게 적어주면
화면 가로가 922~1200 사이이면 4칸 짜리가 되고
화면 가로가 768~922 사이가 되면 5칸 짜리가 되었다가
화면 가로가 768 이하가 되면 6칸 짜리로 변하게 되는 것입니다
이것을 응용해서 예쁜 반응형 틀을 만들어 보시기 바랍니다
댓글목록
등록된 댓글이 없습니다.