FLEX02


각종 애플리케이션에서 레이아웃은 디자인에서 가장 중요한 요소입니다.


그러나 인류는 레이아웃을 코드로 명확히 표현하기 어려움이 있었는데 FLEX가 등장함으로써 많은 문제가 해결 되었다고 합니다. ( 생활코딩 FLEX 강의 : https://opentutorials.org/course/2418/13526 )



소스 코드 

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
<html>
    <head>
        <style>
            /* */
            .flex-container{
                display: flex; /* 콘텐츠들이 블럭에서 인라인으로 바뀌었다 */
                justify-content: space-evenly; /* 기본 진행방향은 가로, 속성값 : flex-start, flex-end, center */
                /* space-around : 가운데 콘텐츠를 기준으로 여백 ,space-between : 모서리 여백 없음 ,space-evenly : 여백이 모두같음*/
            }
            .item{
display: flex;
                border: 5px solid black;
                height: 100px;
                width: 200px;
                justify-content: center; /* 주 축 정렬( 기본 :row ) */
                align-items: center; /* 수직 축 정렬( col ) */
            }
        </style>
    </head>
    <body>
        <div class="flex-container">
            <div class="item">첫번째 박스</div>
            <div class="item">두번째 박스</div>
            <div class="item">세번째 박스</div>
        </div>
    </body>
</html>

cs







ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

FLEX 05


소스코드


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
<html>
<head>
    <meta charset="utf-8">
    <style>        
        header{
            background-color: yellow;
            height: 80px;
        }
        /* 콘텐츠 스타일 시작 */
        .content{
            display: flex;
            flex-direction: row; /* 기본값 */
            justify-content: space-between;
            height: 500px;
        }
            .content nav{
                background-color: rgb(167, 170, 5);            
                width: 350px;
            }
            .content aside{
                background-color: red;
                width: 350px;
            }
            /* 메인 스타일 시작 */
            .content main{
                flex-direction: column;
                background-color: green;
                width: 800px;
            }
                .mini-head{
                    background-color: green;
                }
                .mini-main{
                    background-color: white;
                }
                .mini-footer{
                    background-color: red;
                }
                /* 메인 스타일 끝 */
        /* 콘텐츠 스타일 끝 */
        footer{
            background-color: pink;
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            header
        </header>
        <section class="content">
            <nav>
                nav
            </nav>
            <main>
                <div class="mini-head">mini-head</div>
                <div class="mini-main">mini-main</div>
                <div class="mini-footer">mini-footer</div>
            </main>
            <aside>
                aside
            </aside>
        </section>
        <footer>
            footer
        </footer>
    </div>
</body>
</html>
cs


ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

FLEX 06


소스 코드

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
<html>
    <head>
        <style>
            body{
                display: flex;
                justify-content: center;
            }
            .container{
                width: auto;
                background-color: gray;
            }
            .header{
                background-color: orange;
                text-align: center;
                margin: 10px;
            }
            .contents{
                background-color: lightgreen;
                text-align: center;
                margin: 10px;
            }
            .button{
                display: flex;
                background-color: lightblue;
                justify-content: center;
                margin: 10px;
            }
            .image-view{
                display: flex;
                width: 1000px;
                background-color: plum;
                flex-direction: column;
            }
            .text{
                text-align: center;
            }
            .image-container{
                display: flex;
                justify-content: space-around;
            }
            div.image1{
                background-image: url("images/london.jpg");
                background-size: cover;
                width: 250px;
                height: 250px;
                margin: 10px 0px;
                
            }
            div.image2{
                background-image: url("images/napa.jpg");
                background-size: cover;
                width: 250px;
                height: 250px;
                margin: 10px 0px;
                
            }
            div.image3{
                background-image: url("images/new-york.jpg");
                background-size: cover;
                width: 250px;
                height: 250px;
                margin: 10px 0px;
            }
            .image-container img{
                width: 250px;
                height: 250px;
                object-fit: fill;
                margin: 10px 0px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">제목</div>
                <div class="contents">콘텐츠</div>
                    <article class="image-view">                                               
                        <div class="text">class image-view width 1000px (pink)</div> 
                        <div class="text">background-image , background-size : cover</div>
                        <div class="image-container">
                            <div class="image1"></div>
                            <div class="image2"></div>
                            <div class="image3"></div>
                        </div>
                    </article>
                <div class="button"><button>버튼</button></div>
 
                <hr>
                
            <div class="header">제목2</div>
                <div class="contents">콘텐츠2</div>
                    <article class="image-view">
                        <div class="text">class image-view width 1000px (pink)</div> 
                        <div class="text">selector img , object-fit : fill</div>
                        <div class="image-container">
                            <div class="image4"><img src="images/san-francisco.jpg" alt=""></div>
                            <div class="image5"><img src="images/san-francisco-2.jpg" alt=""></div>
                            <div class="image6"><img src="images/sonoma.jpg" alt=""></div>
                        </div>
                    </article>
                <div class="button"><button>버튼</button></div>
        </div> <!--container 끝-->
        
    </body>
</html>
cs



마지막시간에 학생들 방치해서 좀 당황했음

저작자표시

'국비지원 Spring프레임워크 > HTML' 카테고리의 다른 글

position: relative, absolute, fixed  (0) 2020.11.04
input 태그  (0) 2020.11.04
div로 컨텐츠 위치 조정하기  (0) 2020.11.03
SVG 이미지  (0) 2020.11.03
Form 태그  (0) 2020.11.03

+ Recent posts

티스토리툴바