티스토리 뷰

Bootstrap4

[Bootstrap] 레이아웃 / sizing

에스파니아 2020. 4. 3. 12:29
728x90
반응형

 

.
sizing
부트스트랩에서 제시하는 div 엘리먼트의 사이즈 조절에 관한 클래스.
.
width
w-25 width 25%
w-50 width 50%
w-75 width 75%
w-100 width 100%
w-auto(default) width auto

CSS 의 width:"auto"는 Boostrap 에서 w-auto 클래스 명으로 설정한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>BootStrap WIDTH 적용하기</title>
  <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<style>
    body{
      color:white; 
      background-color:black
    }
    .container-fluid{
      margin:10px auto; 
      border:10px solid white
    }
    .container-fluid>div {
      padding: 20p;
      border: 10px solid white;
      font-size: 20px;
      text-align: center;
    }

    .container-fluid>div:nth-child(odd) {
      background: purple;
    }

    .container-fluid>div:nth-child(even) {
      background: red;
    }
</style>
  
    <body>
        <div class="container-fluid">

            <h1 class="display-1 text-center">WIDTH</h1>

            <br>

            <div class="w-25">25%</div>

            <div class="w-50">50%</div>

            <div class="w-75">75%</div>

            <div class="w-100">100%</div>

            <div class="w-auto">AUTO</div>

            <div class="w-auto" style="width: 200px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid qui aliquam nemo atque unde, quos, vero recusandae, rem corrupti dolor voluptates necessitatibus odio. Amet sit rerum soluta nam, minus obcaecati!</div>

            <div style="width: 200px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ullam, dignissimos rerum laudantium neque voluptate, veritatis, aut accusamus ipsum earum quas libero sunt, consequatur laborum nulla. Dolorum iste voluptatibus, dolores!</div>

        </div>
    </body>                           
</html>
출력 화면(링크 : https://jsbin.com/foraveliru/edit?html,output)

w-auto 는 자신의 고유 width 값을 버리고 부모의 width 값으로 적용된다.

 

.
height
h-25 height 25%
h-50 height 50%
h-75 height 75%
h-100 height 100%
h-auto(default) height auto 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>BootStrap HEIGHT 적용하기</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<style>
body{
  color:white; 
  background-color:black
}
.container-fluid{
  margin:10px auto; 
  border:10px solid white
}
.container-fluid>div {
  padding: 20p;
  border: 10px solid white;
  font-size: 20px;
  text-align: center;
}
.container-fluid>div:nth-child(odd) {
  background: black;
}
.container-fluid>div:nth-child(even) {
  background: red;
}
.row-vh {
height: 500px;
}
.row-vh > div {
    display: inline-block;
    border: 5px solid white;
    width:15%;
    background: red;
}
</style>
<body>
  <div class="container-fluid">
        <h1 class="display-1 text-center">HEIGHT</h1>

        <br>
        <div class="row-vh">
            <div class="h-25">Height 25%</div>

            <div class="h-50">Height 50%</div>

            <div class="h-75">Height 75%</div>

            <div class="h-100">Height 100%</div>

            <div class="h-auto">Height auto</div>
        </div>
    </div>
</body>
</html>
출력화면 (링크: https://jsbin.com/qelodibape/edit?html,output)

w-auto 나 h-auto 는 부모 엘리먼트의 height 값의 따라 영향을 받고, 그 영향권 내에서만 범위를 조절할 수 있다. 일단 부모 엘리먼트의 height 값을 지정해 주게 되면 w-auto 나 h-auto는 가변적이고 자동적으로 조절된다. 따라서 위 예제에서는 .row-vh{height:500px} 로 초기화 해주었다.

 

참고





728x90

'Bootstrap4' 카테고리의 다른 글

Bootstrap Contents / typography  (0) 2020.04.03
[Bootstrap] 레이아웃 / spacing  (0) 2020.04.03
[Bootstrap] 레이아웃 / auto margin  (0) 2020.04.03
[Bootstrap] 레이아웃 / d-flex / justify-content / align-items / align-self  (0) 2020.04.03
[Bootstrap] 레이아웃 / CSS3 flex-1 / direction / wrap  (0) 2020.04.02
댓글
반응형
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함