CSS로 Layout 구성하기

스튜디오밀의 영상을 보면서 정리한 내용이다.

css의 display 속성

display: block (div, section)

개행처리됨. 부모에게 꽉 참. 박스모델이라 너비 높이 지정 가능

display: inline (a, span, img)

개행처리 안됨. 일반 텍스트 처럼 취급됨. 너비랑 높이 설정 불가

display:inline-block

inline처럼 일반 글자처럼 취급 되나 (바로 옆에 다른 항목이 붙을 수 있다)
너비와 높이를 지정 가능하다.

display: none

메뉴 같은걸 숨길때 유용함

CSS Box Model

box-sizing: content-box (기본값)

실제 컨텐츠 기준으로 크기를 설정한다. padding과 border, margin값은 이 컨텐츠 사이즈 외에 추가로 더 붙게 된다.

box-sizing: border-box

padding과 border까지가 너비 및 높이에 포함된다. 고려할게 적어지므로 더 쉽게 사용 가능하지만, IE구버전 지원이 안되므로 잘 고려해봐야한다.

예제 페이지

2단 레이아웃을 위해 html구조를 아래와 같이 만든다.
inline-block을 사용하는 방식과, float, 마지막으로 반응형을 위한 css가 있으니 link태그를 바꿔서 각각 css로 확인한다.

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
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0">
    <title>CSS Layout</title>
    
    <link href="inline-block.css" rel="stylesheet">
    <!-- <link href="float.css" rel="stylesheet"> -->
    <!-- <link href="respon.css" rel="stylesheet"> -->
</head>
<body>

    <div class="container">
        <section class="item item-a">
            <h1>section A</h1>
            <p>
                Section A Content<br/>
                Section A Content<br/>
                Section A Content<br/>
                Section A Content<br/>
                Section A Content<br/>
                Section A Content
            </p>
        </section>
        <section class="item item-b">
            <h1>section B</h1>
            <p>
                Section B Content<br/>
                Section B Content<br/>
                Section B Content<br/>
                Section B Content<br/>
                Section B Content<br/>
                Section B Content
            </p>
        </section>
    </div>
    <footer>footer</footer>
    
</body>
</html>

inline-block.css

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
body {
    margin: 0;
    font-size: 2em;
}

h1, p {
    margin: 0;
}

.container {
    max-width: 1024px;
    /*margin-left: auto;
    margin-right: auto;*/
    margin: 0 auto;
    background:pink;
}

.container:after {
    clear:both;
    display:block;
    content:'';
/*    height: 0;
    visibility: hidden;*/
}

.item {
    display:inline-block;
    vertical-align: top;
    padding: 5%;
    font-size: 1rem;
    float:left;
 
}

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

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

div {
    background-color:red;
}

span {
    background-color:blue;
}

footer {
    clear: both;
    background: gray;
}

float.css

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
body {
    margin: 0;
    font-size: 1em;
}

h1, p {
    margin: 0;
}

.container {
    /* font-size:0; */
    max-width: 1024px;
    /*margin-left: auto;
    margin-right: auto;*/
    margin: 0 auto;
    background:pink;
}

.container:after {
    clear:both;
    display:block;
    content:'';
/*    height: 0;
    visibility: hidden;*/
}

.item {
    /* display:inline-block;
    vertical-align: top; */
    padding: 5%;
    /* font-size: 1rem; */
    float:left;
 
}

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

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

div {
    background-color:red;
}

span {
    background-color:blue;
}

footer {
    clear: both;
    background: gray;
}

respon.css

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
32
33
34
35
36
37
38
39
40
41
body {
    margin: 0;
    font-size: 1em;
}

h1, p {
    margin: 0;
}

.container {
    background: pink;
}

.item { 
    padding: 5%;
}

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

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

@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%;
    }
}
storybook

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×