IT 개발노트

레이아웃(flex, media query, float, 다단(multicolumn), masonry layout) 본문

기초튼튼/CSS

레이아웃(flex, media query, float, 다단(multicolumn), masonry layout)

limsungju 2019. 3. 11. 10:50

1. 레이아웃
1.1 flex
: CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구이다.
지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았다.
flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있다.

1.2 flex의 기본
: flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야한다. 또한 flex-direction을 이용해서 정렬방향을 바꿀 수 있다. 기본은 row이다.

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .container {
                background-color: powderblue;
                height: 200px;
                display: flex;
                flex-direction: row-reverse;
            }
            .item {
                background-color: tomato;
                color: white;
                border:1px solid white;
            }
        </style>
    </head>
    <body>
       <div class="container">
           <div class="item">1</div>
           <div class="item">2</div>
           <div class="item">3</div>
           <div class="item">4</div>
           <div class="item">5</div>
       </div>
    </body>
</html>


결과

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .container {
                background-color: powderblue;
                height: 200px;
                display: flex;
                flex-direction: column-reverse;
            }
            .item {
                background-color: tomato;
                color: white;
                border:1px solid white;
            }
        </style>
    </head>
    <body>
       <div class="container">
           <div class="item">1</div>
           <div class="item">2</div>
           <div class="item">3</div>
           <div class="item">4</div>
           <div class="item">5</div>
       </div>
    </body>
</html>


결과

- reverse는 기본값의 반대이다.

1.3 grow & shrink
: 아이템은 컨테이너의 크기에 따라서 작아지기도 하고, 커지기도 한다. 이때 작아지고, 커지는 비율을 지정하는 방법이 바로 grow & shrink이다.

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .container {
                background-color: powderblue;
                height: 200px;
                display: flex;
                flex-direction: row;
            }
            .item {
                background-color: tomato;
                color: white;
                border:1px solid white;
                flex-grow: 1; /* container의 여백 공간을 item들이 분할해서 할당받음 */
            }
            .item:nth-child(1) { /* 1번째 item선택 */
                flex-basis: 300px; /* flex 방향에 해당하는 크기를 200px로 설정 */
                flex-shrink: 1; /* 화면이 줄어듦에따라 할당받은 여백 공간이 줄어든다. */
            }
            .item:nth-child(2) {
                flex-basis: 300px;
                flex-shrink: 4;
            }
        </style>
    </head>
    <body>
       <div class="container">
           <div class="item">1</div>
           <div class="item">2</div>
           <div class="item">3</div>
           <div class="item">4</div>
           <div class="item">5</div>
       </div>
    </body>
</html>


결과

1.4 Holy Grail Layout
: Holy Grail은 성배라는 뜻이다. 많은 사람들이 성배를 찾기 위해서 노력했지만 찾기 못한 것처럼 많은 사람들이 아래와 같은 레이아웃을 만들기 위해서 노력했지만 완벽한 방법을 찾기 못했다. 이것에 비유해서 이런 레이아웃을 성배 레이아웃이라고 부르곤 한다. flex는 아주 세련된 방법으로 이 문제를 간편하게 해결한다.

예제

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
58
59
60
61
62
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .container {
                display: flex;
                flex-direction: column;
            }
            header {
                border-bottom: 1px solid gray;
                padding-left: 20px;
            }
            footer {
                border-top: 1px solid gray;
                padding-left: 20px;
                text-align: center;
            }
            .content {
                display: flex;
            }
            .content nav {
                border-right: 1px solid gray;
            }
            .content aside {
                border-left: 1px solid gray;
            }
            nav, aside {
                flex-basis: 150px;
                flex-shrink: 0;
            }
            main {
                padding: 10px;
            }
        </style>
    </head>
    <body>
       <div class="container">
           <header>
                <h1>생활코딩</h1>
           </header>
           <section class="content">
                <nav>
                    <ul>
                        <li>html</li>
                        <li>css</li>
                        <li>javascript</li>
                    </ul>
                </nav>
                <main>
                    생활코딩은 일반인을 위한 코딩 수업입니다.
                </main>
                <aside>
                    AD
                </aside>
           </section>
           <footer>
                <a href = "https://opentutorials.org/course/1">홈페이지</a>
           </footer>
       </div>
    </body>
</html>


결과

1.5 media query
: media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄수 있는 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
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> /* 반응형 동작을 위해 지정 */
        <meta charset="utf-8">
        <style>
            @media (max-width: 600px) { /* body가 600px이하가 되었을때 백그라운드를 green로 지정 */
                body {
                    background-color: green;
                }
            }
            @media (max-width: 500px) { /* body가 500px이하가 되었을때 백그라운드를 red로 지정 */
                body {
                    background-color: red;
                }
            }
            @media (min-width: 601px) { /* body가 601px이상이 되었을때 백그라운드를 blue로 지정 */
                body {
                    background-color: blue;
                }
            }
        </style>
    </head>
    <body>
       ~500px : red
       501~600px : green
       601px~ : blue
    </body>
</html>


: @media (width) 옵션을 사용할때는 범위가 더 작은것을 나중에 작성해주어야 케스케이드 효과로 인해 원하는 대로 동작한다. 범위가 작은것을 먼저 선언해주면 후에 작성된 옵션에 의해 무시된다.

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .container{
            display: flex;
            flex-direction: column;
        }
        header{
            border-bottom:1px solid gray;
            padding-left:20px;
        }
        footer{
            border-top:1px solid gray;
            padding:20px;
            text-align: center;
        }
        .content{
            display:flex;
        }
        .content nav{
            border-right:1px solid gray;
        }
        .content aside{
            border-left:1px solid gray;    
        }
        @media(max-width:500px) {
            .content {
                flex-direction: column;
            }
            .content nav, .content aside {
                border: none;
                flex-basis: auto;
            }
            .content aside {
                border-left: none;
            }
            main {
                order: -1;
            }
            aside {
                display: none;
            }
        }
        nav, aside{
            flex-basis: 150px;
            flex-shrink: 0;
        }
        main{
            padding:10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>생활코딩</h1>
        </header>
        <section class="content">
            <nav>
                <ul>
                    <li>html</li>
                    <li>css</li>
                    <li>javascript</li>
                </ul>
            </nav>
            <main>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis veniam totam labore ipsum, nesciunt temporibus repudiandae facilis earum,
                 sunt autem illum quam dolore, quae optio nemo vero quidem animi tempore aliquam voluptas assumenda ipsa voluptates. Illum facere dolor eos, corporis nobis,
                  accusamus velit, similique cum iste unde vero harum voluptatem molestias excepturi. Laborum beatae, aliquid aliquam excepturi pariatur soluta asperiores
                   laudantium iste, architecto ducimus fugiat sed, saepe quaerat recusandae exercitationem sapiente, impedit nostrum error. Doloremque impedit, eos in quos
                    assumenda illo eum dicta.
            </main>
            <aside>
                AD
            </aside>
        </section>
        <footer>
            <a href="https://opentutorials.org/course/1">홈페이지</a>
        </footer>
    </div>
</body>
</html>


1.6 float
: float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법이다. 또한 레이아웃을 잡을 때도 사용하는 기능이기 때문에 꽤 중요하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                width:300px;
                float:left;
                margin-right: 20px;
                margin-bottom: 10px;
            }
            p {
                border: 1px solid gray;
            }
        </style>
    </head>
    <body>
        <img src="sample.mt.jpg" alt="">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, molestiae magnam et aperiam nobis atque soluta eum facere nemo aliquam quidem
             quae autem tempora veniam a, recusandae, tempore ipsam fugit.</p>
        <p style="clear:both">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe, fugit. Sunt ad unde minus dignissimos repudiandae
             nesciunt quasi reiciendis expedita obcaecati id ut, officiis, illo aspernatur at, aliquam beatae nisi!</p>    
    </body>
</html>


결과

: float효과를 사용중인 엘리먼트가 있을경우 그 이후에 나오는 엘리먼트들은 모두가 float효과를 사용중인 엘리먼트를 피해서 작성되게된다. 이때 float효과에 연연하지 않고 엘리먼트 본연의 자리를 유지하고 싶을경우 clear옵션을 사용하면 되는데 float효과가 left에 있을경우는 clear도 left로 해주고, float효과가 right에 있을경우는 clear도 right로 해주어야한다. 둘다 상관없이 적용하려면 clear를 both로 설정해주면 된다.

1.7 float를 활용한 holy grail layout

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
    <head>
        <style>
            * {
                box-sizing: border-box;
            }
            .container {
                width: 540px;
                border: 1px solid gray;
                margin: auto; /* 화면 가운데에 위치시키기 */
            }
            header {
                border-bottom: 1px solid gray;
            }
            nav {
                float: left;
                width: 120px;
                border-right: 1px solid gray; /* nav의 길이가 길어지더라도 선이 같이 길어지게 만들기 */
            }
            article {
                float: left;
                width: 300px;
                border-left: 1px solid gray; /* article의 길이가 길어지더라도 선이 같이 길어지게 만들기 */
                border-right: 1px solid gray; /* article의 길이가 길어지더라도 선이 같이 길어지게 만들기 */
                margin-left: -1px; /* 마진 겹침현상을 이용하여 선이 두껍게 표시되는것 방지 */
            }
            aside {
                float: left;
                width: 120px;
                border-left: 1px solid gray; /* aside의 길이가 길어지더라도 선이 같이 길어지게 만들기 */
                margin-left: -1px; /* 마진 겹침현상을 이용하여 선이 두껍게 표시되는것 방지 */
            }
            footer {
                clear: both;
                border-top: 1px solid gray;
                text-align: center;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <header>
                <h1>
                   CSS
                </h1>
            </header>
            <nav>
                <ul>
                    <li>position</li>
                    <li>float</li>
                    <li>flex</li>
                </ul>
            </nav>
            <article>
            <h2>float</h2>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, 
            quibusdam dolorum! Ducimus tempora natus laudantium possimus placeat autem. 
            Quam quisquam consequatur tempore. Eos, hic dolores. Facilis cumque suscipit 
            quaerat dolore optio minus numquam, impedit animi, aliquid officia ab neque 
            ducimus itaque modi soluta eligendi? Molestias laudantium suscipit nesciunt 
            maiores asperiores.
            </article>
            <aside>
                ad
            </aside>
            <footer>
                copyleft
            </footer>
        </div>
    </body>
</html>


1.8 다단 (multi column)
: 다단은 아래 신문처럼 화면을 분할해서 좀 더 읽기 쉽도록 만든 레이아웃을 의미한다. 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="egoing">
        <style>
            .column {
                text-align: justify; /* 들쑥날쑥한 글자를 가지런히 정렬시킨다. */
                /* 최대 컬럼수는 count개수이며, 컬럼폭이 200px을 유지할 수 없다면 count가 하나씩 줄어든다. */
                /* 컬럼은 width이상 count이하를 유지하며 나누어진다. */
                column-count: 4; /* 화면을 count수 만큼 나눈다. */
                column-width: 200px; /* 폭에 맞춰서 단을 맞춰준다. */
                column-gap: 20px; /* 컬럼과 컬럼사이의 간격 */
                column-rule-style: solid; /* 컬럼과 컬럼사이의 선을 만들어준다. */
                column-rule-width: 1px; /* 컬럼과 컬럼사이의 선의 크기를 지정 */
                column-rule-color: red; /* 컬럼과 컬럼사이의 선의 색깔을 지정 */
            }
            h1 {
                column-span: all; /* 컬럼에 구애받지 않고 자유롭게 자신의 위치를 찾아간다. */
            }
        </style>
    </head>
    <body>
        <div class="column">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Ullam possimus, rerum porro cumque saepe id ipsa dolorum. 
                Ullam voluptatem debitis soluta, dicta similique eveniet laborum velit! 
                <h1>Lorem ipsum dolor sit amet.</h1>
                Iure quis quam laborum delectus nulla sapiente, minima rem nam ut maiores rerum illo, 
                id voluptas, non quasi quas cum quod! Earum eos suscipit culpa est consequuntur 
                nihil modi nisi assumenda necessitatibus ducimus officia, nostrum repudiandae! 
                Fugit temporibus ea velit corporis iste repellendus aliquam distinctio ducimus minus, 
                unde ullam deleniti enim impedit officiis culpa obcaecati rerum adipisci doloremque 
                laudantium nostrum expedita sequi aliquid voluptate provident! Assumenda, tenetur 
                placeat accusantium sit voluptas aut culpa! Doloribus unde quos nemo recusandae impedit, 
                sed earum voluptatibus molestiae nulla totam rerum porro sint non. 
                Voluptatibus aspernatur, itaque repellendus eveniet libero iste veniam impedit 
                corporis aperiam possimus est rerum explicabo. Perspiciatis provident, 
                commodi culpa tenetur ad quo repellendus ex, porro temporibus beatae aliquid sit debitis 
                expedita quasi recusandae ab labore amet aliquam quod natus? Impedit soluta tenetur sit, 
                fugit explicabo cum iste dolorum modi dolorem, animi sunt maiores neque tempora. 
                Ab eveniet porro vero rem magnam vel blanditiis facilis voluptatum soluta inventore 
                dolorum est quos sit harum quia culpa totam ratione accusamus omnis cumque molestias rerum, 
                in tempora. Et reiciendis dolorum impedit laborum fugiat? Cum, saepe modi recusandae 
                minus fugit neque ipsum enim dolorem quidem blanditiis hic ex beatae eaque debitis omnis 
                commodi voluptate tenetur, adipisci labore sapiente. Placeat, amet consectetur aliquid 
                necessitatibus minus adipisci corrupti, iste est porro repudiandae nisi possimus iure 
                dolore, rem odio facilis modi? Perferendis omnis suscipit possimus explicabo nemo at 
                earum ab molestiae sint a enim ullam et neque, perspiciatis nostrum. Officia cupiditate 
                quam impedit molestiae atque ducimus necessitatibus in magnam, sed exercitationem. 
                Totam, expedita voluptatem eligendi obcaecati consectetur eum est magni aliquam atque 
                cum amet corrupti non ipsam culpa sit beatae animi temporibus tenetur et cumque sapiente 
                ducimus doloribus? Accusamus doloremque adipisci quisquam dignissimos ipsa animi 
                doloribus laudantium consequatur nihil est, eligendi delectus temporibus, et iusto 
                officiis sed quo facere quidem alias. Quidem molestias iusto in sed quae doloremque 
                ducimus recusandae similique adipisci. Modi possimus sit perferendis obcaecati nihil sed 
                necessitatibus aliquam delectus, hic tempora, ipsa quam vel, dolore porro quod aspernatur 
                dolores distinctio animi! Odio odit magni, delectus, suscipit sit reprehenderit, incidunt 
                recusandae veniam dolorum itaque quae. Temporibus ex voluptas soluta repudiandae harum nulla 
                tempora dicta, beatae veritatis doloremque illo aspernatur a, mollitia quo. Et 
                repellendus non deleniti consequuntur impedit laboriosam, quas molestiae. Inventore 
                distinctio, qui provident veniam cum voluptatum vero, facere sequi suscipit obcaecati 
                amet iste sapiente doloribus! Quia nulla repellendus ipsa veniam quibusdam! Nesciunt 
                sapiente reiciendis veniam recusandae sequi voluptatem exercitationem quod odio? Error 
                dignissimos aut nihil dolorem unde quis quaerat architecto iure sapiente reprehenderit, 
                modi molestias consequuntur quam odio sequi. Inventore sunt laudantium debitis sed 
                adipisci esse explicabo, voluptatibus reprehenderit accusamus assumenda ad, neque 
                voluptatem possimus, exercitationem hic nisi cumque illo labore. Eum id quia voluptatibus 
                rerum. Nemo qui temporibus, natus amet esse sit. Consequatur deleniti nemo praesentium 
                blanditiis molestiae nihil alias est dignissimos accusantium, soluta minima voluptatibus 
                dolorum reprehenderit quibusdam tempore magni natus et voluptate nulla, placeat ipsam iure! 
                Iste incidunt quasi suscipit culpa cupiditate asperiores nostrum itaque. Eveniet adipisci 
                sint commodi fuga ab earum ducimus odio voluptatibus hic error! Iure quos accusamus quia 
                animi asperiores repellat temporibus totam mollitia earum possimus sint, dignissimos ut 
                amet tenetur explicabo suscipit, cumque obcaecati, tempore molestiae neque voluptate? 
                Voluptates, fugit molestiae? Nulla, cumque aut dolorem dolores eaque iusto nihil quidem 
                assumenda iure exercitationem? Ad nam maxime placeat deleniti ipsa, minima pariatur 
                distinctio assumenda obcaecati tempore, dolore culpa debitis unde nihil accusamus 
                provident. Aspernatur, commodi quisquam modi quae in aut beatae magni assumenda minima 
                reprehenderit officia voluptatem libero laborum molestiae. Natus cum quis nemo nesciunt, 
                non recusandae similique unde fugiat sed consequuntur error impedit iste! Iste dolor 
                voluptatum aliquam vitae perspiciatis rem, doloremque repudiandae mollitia cum facere 
                eos qui dolorem, laborum quis quia nam quibusdam? Labore numquam, quidem magni quasi 
                natus odit provident neque officia illum reprehenderit a animi voluptatum, eaque ab quod 
                recusandae at assumenda? Autem quod itaque ducimus numquam quis provident dolorem 
                possimus accusantium repudiandae culpa nulla deserunt omnis sunt saepe, aliquam earum 
                quas aut voluptates recusandae praesentium maiores dicta similique vero libero! Debitis, 
                dicta, voluptatum nobis at dolor voluptatem eos velit cupiditate repudiandae tempore 
                porro explicabo. Omnis corporis, assumenda harum illum consectetur unde consequatur ab 
                facere, quis nostrum reprehenderit dolorum neque voluptatum deleniti consequuntur molestiae 
                quia earum. Dolores sint aliquid perferendis. At rerum ullam quas architecto dicta iusto eum ea. 
                Fugit unde numquam earum magnam cupiditate enim voluptatem deleniti, consequuntur 
                deserunt ex! Itaque dolorum placeat tempore non repellendus similique sequi unde, 
                provident ipsum, sit voluptas sed tenetur accusantium at, esse in obcaecati quas fugiat 
                officia ut? Quaerat eius itaque laborum maiores quia ipsam alias voluptates vel deserunt 
                nam non a quod quis rem eaque temporibus, sint earum debitis repudiandae. Aut nisi 
                aliquam voluptatum assumenda accusamus veritatis repellat magnam minima tempore? Tenetur, 
                ipsa harum optio deserunt nihil beatae. Unde cumque laudantium nostrum optio tempore 
                reprehenderit blanditiis magnam molestias debitis corrupti adipisci voluptatum cupiditate 
                ab quas libero, laborum iste ipsam ut nihil a ullam dolor? Odit similique placeat autem 
                non ab distinctio doloremque cum ea. Cupiditate consectetur ipsum similique ex nihil. 
                Minima modi atque voluptatibus culpa praesentium obcaecati totam eius asperiores recusandae 
                dolore, doloribus, neque reprehenderit quasi enim quisquam at. Nesciunt doloremque iusto 
                repudiandae deserunt cumque? Officia modi necessitatibus, nostrum eius ad ullam. 
                Nulla excepturi laboriosam velit tempore eum! Quis suscipit delectus quae cupiditate 
                alias itaque nihil quos molestias deserunt? Ad tenetur totam praesentium veniam facilis 
                harum, placeat laborum eos modi deserunt repellat provident ut fuga quaerat amet beatae 
                qui? Officia in quidem numquam vero labore voluptate, beatae quia dolorem eveniet 
                quibusdam voluptates tenetur explicabo molestias fugiat? Provident exercitationem nobis 
                optio voluptatibus porro eius, vel numquam, quaerat voluptatum, necessitatibus officia 
                suscipit quod iure voluptatem explicabo voluptas natus. Voluptatibus repellendus hic 
                suscipit totam dignissimos assumenda voluptatum provident voluptas at dolores, tempore 
                excepturi. Distinctio eos tempora obcaecati aut non modi. Tenetur doloremque modi fugiat, 
                officia iure blanditiis error totam fuga voluptatem! Quam, saepe velit?
        </div>
    </body>
</html>


결과

1.9 핀터레스트 스타일 레이아웃 만들기 (masonry layout)
: masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데, 이러한 모양의 레이아웃을 masonry 레이아웃이라고 한다.

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="egoing">
    <style>
        #columns {
            column-width: 350px;
            /* border: 5px solid green; */
            column-gap: 15px;
        }
        #columns figure {
            display: inline-block; /* figure와 figcaption 세트로 묶어주기 */
            border: 1px solid rgba(0, 0, 0, 0.2); /* 연한 검정색 */
            margin: 0;
            margin-bottom: 15px;
            padding: 10px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        }
        #columns figure img {
            width: 100%;
        }
        #columns figure figcaption {
            border-top: 1px solid rgba(0, 0, 0, 0.2);
            padding: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="columns">
        <figure> /* 삽화와 삽화에대한 설명 같은 시각적인 정보들을 그루핑해주는 태그이다. */
            <img src="//s3-us-west-
                        2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
            <figcaption>Cinderella wearing European fashion of the mid-1860's</figcaption>
        </figure>
 
        <figure>
            <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg">
            <figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
        </figure>
 
        <figure>
            <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg">
            <figcaption>Belle, based on 1770’s French court fashion</figcaption>
        </figure>
 
        <figure>
            <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg">
            <figcaption>Mulan, based on the Ming Dynasty period</figcaption>
        </figure>
 
        <figure>
            <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sleeping-beauty.jpg">
            <figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption>
        </figure>
 
        <figure>
            <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocahontas_2.jpg">
            <figcaption>Pocahontas based on 17th century Powhatan costume</figcaption>
        </figure>
 
        <figure>
            <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/snow-white.jpg">
            <figcaption>Snow White, based on 16th century German fashion</figcaption>
        </figure>
 
        <figure>
            <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ariel.jpg">
            <figcaption>Ariel wearing an evening gown of the 1890’s</figcaption>
        </figure>
 
        <figure>
            <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/tiana.jpg">
            <figcaption>Tiana wearing the <i>robe de style</i> of the 1920’s</figcaption>
        </figure>
    </div>
</body>
</html>


결과


'기초튼튼 > CSS' 카테고리의 다른 글

레이아웃(인라인 vs 블럭레벨, 박스모델, 마진겹침현상, 포지션)  (0) 2019.03.06
CSS3 스타일 속성 기본  (0) 2019.02.22
CSS3 선택자 기본  (0) 2019.02.20
'기초튼튼/CSS' Related Articles more