21.04.29 // width % 값 주는 방법.

[CSS] 넓이가 다른 width %값 주기.

1. 클래스 명으로 지정하기.

• 장점
  1. 첫 번째, 마지막 자식 요소에서 항상 margin이나 padding요소를 넣지 않아도 된다.
  2. 클래스를 지정해서 운영하기 편리하다.
• 단점
  1. 태그 이름이 많아진다.

<div class="container">
    <div class="row">
        <div class="col col-3">
            <div class="box" style="background: blue;"></div>
        </div>
        <div class="col col-7">
            <div class="box" style="background: green;"></div>
        </div>
    </div>
</div>

.container {
    width: 1280px;
    margin: auto;
    background: #ddd;
}
/* Q. 왜 row에 margin을 줄까? */
.row {
    margin: 0 -50px;
}
.col {
    float: left;
    padding: 0 50px;
}

/* col에 %로 된 클래스 명을 지정. */
.col-1 { 10%; }
.col-2 { 20%; }
.col-3 { 30%; }
.col-4 { 40%; }
.col-5 { 50%; }
.col-6 { 60%; }
.col-7 { 70%; }
.col-8 { 80%; }
.col-9 { 90%; }
.full-width { 100%; }

결과.

blue와 green에 각각 padding이 25px이 들어가있다.

굳이 first-child , last-child를 써서 margin값을 주지 않아도 된다.

그럼 왜 row에 margin을 줄까?

margin을 주지 않으면 양 옆에 여백이 생긴다.

그래서 양옆을 당겨주기 위해 (col에 padding을 주기 위해) row에 margin을 주는 것이다.

정리.

row에 margin을 주는 이유는, col에 padding 값을 일정하게 주기 위함이다.

덧붙여서,

col에는 width 값만 지정해주고 box에서 스타일을 지정해준다.

col에 스타일을 지정했을 때 후에 수정하면 다 틀어짐.

 

2. -webkit-box 사용하기.

저번 블로그에서 인용.

2021.04.07 - [🔥 TIL] - 2021.04.07

-webkit-box는 float 과 비슷해서 col에 float을 주지 않아도 수직으로 맞추게 된다.

<div class="container">
    <div class="row-box">
        <div class="col-box col-2" style="background: orange;">
            <div class="box">box1</div>
        </div>
        <div class="col-box col-5" style="background: tomato;">
            <div class="box">box2</div>
        </div>
        <div class="col-box col-3" style="background: red;">
            <div class="box">box3</div>
        </div>
    </div>
</div>

.row-box {
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-pack: center;
    /* -webkit-box-direction:reverse; */
    margin: 0 -50px;
}
.col-box {
    -webkit-box-ordinal-group:1;
    -webkit-box-flex: .1;
    padding: 0 50px;
}
.col-2 { width: 20%;}
.col-3 { width: 30%; }
.col-5 { width: 50%; }

결과.

위와 똑같이 나온다.

 

3. 번외

2021.03.18 - [🔥 TIL] - [CSS] 선택자 사용하여 % 값으로 템플릿 설정하기

만약 두개 일 때는 50%, 하나일 때는 100%로 하려면 어떻게 해야 될까?

위의 1, 2 처럼 클래스 명을 따로 주게 되면 고정값이므로 수정이 될 때 손이 많이 간다. 그럼으로 애초에 아래 코드를 넣어 미리 대비하는 것이 좋다.

.row .col:first-child:last-child {
    width: 100% !important;
}
.row .col:first-child:nth-last(2)-child,
row .col:first-child:nth-last(2)-child + .col {
    width: 50% !important;
}

그럼 태그를 삭제해도 지정해놓은 width 값으로 변경된다.