본문 바로가기
CSS

[css] box model

BAKSSSE

1. Box-sizing

1-1. Content-Box (기본값)

기본값이며, width, height는 content의 영역만 해당 됩니다.

content-box (기본값)

2-1.    Border-Box

box-sizing속성으로 width, height는 content, padding, border 를 합친 크기입니다.

Border-Box 를 지정할수 있으며, 쓰기 편하기 때문에  요즘에 많이 쓰는 방법, 하지만 지원하지 않는 브라우저가 있기 떄문에 조심해서 써야합니다.

border-box

 

브라우저 호환성

https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

2.  기본 반응형 웹 레이아웃 

2-1. display inline block %로 2단 컬럼 레이아웃 만들기

css

body {
    margin :0;
    font-size: 1em;
}
h1, p {
    margin: 0;
}

/* * {
    margin: 0;
    padding: 0;
}  */
/*  모든 태그를 체크, 렌더링 속도가 느려지기 때문에 사용하지않는다. */

.container {
    font-size: 0;
    max-width: 1000px; /* 최대 폭 */
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto; /* 상하 0, 좌우 auto */
}

.item {
    display: inline-block; /* inline은 박스가 아니기떄문에 block 필요  */
    vertical-align: top; /* 수직정렬 */
    padding: 5%;
    font-size: 1rem; /* root(html) em: 16px */
}

.item-a {
    
    width: 30%;
    background-color: yellow;
}

.item-b {
    width: 50%;
    background-color: yellowgreen;
}

html

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <section class="item item-a">
                <h1>Section a</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel velit massa. Nulla eget justo tellus. Donec in imperdiet tortor. Praesent sagittis dapibus tortor, ultrices aliquet lacus scelerisque at. Cras nec enim ut odio tempus condimentum. Proin quis odio id leo facilisis laoreet at id sem. Nullam mattis, felis at posuere vehicula, metus tellus maximus turpis, in malesuada mauris nunc quis tortor. Pellentesque volutpat ultrices sollicitudin. Nam luctus semper nunc elementum viverra.</p>
            </section>
            <!-- section 사이에 공백이 포함되어 있다. container의 폰트사이즈를 0으로 설정-->
            <section class="item item-b">
                <h1>Section a</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel velit massa. Nulla eget justo tellus. Donec in imperdiet tortor. Praesent sagittis dapibus tortor, ultrices aliquet lacus scelerisque at. Cras nec enim ut odio tempus condimentum. Proin quis odio id leo facilisis laoreet at id sem. Nullam mattis, felis at posuere vehicula, metus tellus maximus turpis, in malesuada mauris nunc quis tortor. Pellentesque volutpat ultrices sollicitudin. Nam luctus semper nunc elementum viverra.</p>
            </section>
        </div>
        
    </body>
</html>

2.2. float로 만들기

css

body {
    margin :0;
    font-size: 1em;
}
h1, p {
    margin: 0;
}

/* * {
    margin: 0;
    padding: 0;
}  */
/*  모든 태그를 체크하기때문에 렌더링 속도가 느려지기때문에 사용하지않는다. */

.container {
    background-color: peru;
}
/* float를 사용하면 container 부모의 영역 높이가 0이기때문에 clear 해줘야한다. */
/* 부모엘리먼트가 정상적으로 높이를 가지기 위해 사용 */
.container::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.item {
    float: left;
    padding: 5%;

}

.item-a {
    
    width: 30%;
    background-color: yellow;
}

.item-b {
    width: 50%;
    background-color: yellowgreen;
}
footer {
     clear: both;  /* float left right 클리어 */
    background-color: gray;
}

html

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <section class="item item-a">
                <h1>Section a</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel velit massa. Nulla eget justo tellus. Donec in imperdiet tortor. Praesent sagittis dapibus tortor, ultrices aliquet lacus scelerisque at. Cras nec enim ut odio tempus condimentum. Proin quis odio id leo facilisis laoreet at id sem. Nullam mattis, felis at posuere vehicula, metus tellus maximus turpis, in malesuada mauris nunc quis tortor. Pellentesque volutpat ultrices sollicitudin. Nam luctus semper nunc elementum viverra.</p>
            </section>
            
            <section class="item item-b">
                <h1>Section a</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel velit massa. Nulla eget justo tellus. Donec in imperdiet tortor. Praesent sagittis dapibus tortor, ultrices aliquet lacus scelerisque at. Cras nec enim ut odio tempus condimentum. Proin quis odio id leo facilisis laoreet at id sem. Nullam mattis, felis at posuere vehicula, metus tellus maximus turpis, in malesuada mauris nunc quis tortor. Pellentesque volutpat ultrices sollicitudin. Nam luctus semper nunc elementum viverra.</p>
            </section>
        
        </div>
        <!-- float left 이기때문에 블럭처럼 사용이 안된다 -->
        <footer>footer</footer> 
    </body>
</html>

2.3. 반응형 레이아웃 1단 -> 2단으로 자동으로 변경

css

body {
    margin :0;
    font-size: 1em;
}
h1, p {
    margin: 0;
}

.container {
    background-color: peru;
}
.item {
    padding: 5%;
}

.item-a {
    background-color: yellow;
}

.item-b {
    background-color: yellowgreen;
}

/* media 쿼리 */
@media screen and (min-width: 700px) {
    .container {
        font-size: 0;
    }
    .item {
        display: inline-block;
        vertical-align: top;
        font-size: 1rem;
    }

    .item-a {
        width: 30%;
    }
    .item-b {
        width: 50%;
    }

}

html

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div class="container">
            <section class="item item-a">
                <h1>Section a</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel velit massa. Nulla eget justo tellus. Donec in imperdiet tortor. Praesent sagittis dapibus tortor, ultrices aliquet lacus scelerisque at. Cras nec enim ut odio tempus condimentum. Proin quis odio id leo facilisis laoreet at id sem. Nullam mattis, felis at posuere vehicula, metus tellus maximus turpis, in malesuada mauris nunc quis tortor. Pellentesque volutpat ultrices sollicitudin. Nam luctus semper nunc elementum viverra.</p>
            </section>
            
            <section class="item item-b">
                <h1>Section b</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel velit massa. Nulla eget justo tellus. Donec in imperdiet tortor. Praesent sagittis dapibus tortor, ultrices aliquet lacus scelerisque at. Cras nec enim ut odio tempus condimentum. Proin quis odio id leo facilisis laoreet at id sem. Nullam mattis, felis at posuere vehicula, metus tellus maximus turpis, in malesuada mauris nunc quis tortor. Pellentesque volutpat ultrices sollicitudin. Nam luctus semper nunc elementum viverra.</p>
            </section>
        
        </div>
    </body>
</html>

 

 

참고 사이트

www.youtube.com/watch?v=Zny5Vxqk6Mk&list=PLe9WXHRkq9p3zQgGf4T6qrWJWRQpP0-TW&index=4

저작자표시

'CSS' 카테고리의 다른 글

[css] css 초기화 시키기  (0) 2021.02.21
의미 없는 텍스트 내용이 필요할 때  (0) 2021.02.20
CSS 선택자(seletor) 개념 정리 & 종류  (0) 2021.02.18

'CSS' Related Articles

티스토리툴바