자바 스크립트와 jQuery와 함께 반응형 웹에 대해서도 책으로 공부하고 있다 XD
그중에서 반응형 웹과 환상의 콤비라고 불리는 플렉서블 박스(Flexible Box)에 대해 공부해봤다.
유독 어렵게 느껴지는 친구였다..😒
▼ 책의 예제로 연습한 친구
움짤로 준비하진 못했지만 당연히 반응형...( 당연히 가로길이 %..! )
우선 개념을 간단히 살펴 보면 부모 박스 = 플렉서블 박스, 플렉서블 박스의 자식 박스 = 플렉스 아이템 이라고 불리게 된다.
그리고 아이템의 배치 방향에 따라 주축이 결정 되며 ( 가로 주축. 세로 주축 ) 주축에 교차하는 축을 교차축이라고 말합니다.
( 주죽이 가로라면 교차축은 세로 ! )
+) 플렉서블 박스 기술 개발은 현재 진행형 입니다 :) 호환이 안되는 브라우저가 있을 수도 있다는 사실
.
.
.
|
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
118
119
120
121
122
123
124
125
126
127
128
|
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
display: flex;
flex-flow: row wrap;
width: 90%;
margin: 0 auto;
}
.header{
display: flex;
order: 1;
position: relative;
width: 100%;
justify-content: flex-end;
}
.header h1{
position: absolute;
top: 0;
left: 0;
width: 12.5%;
height: 142px;
background: #FF6B57;
}
.header nav{
width: 87.5%;
min-height: 80px;
background: #FF6B57;
}
.slider_section{
order: 2;
width: 50%;
background: #3C90BE;
}
.gallery_section{
order: 3;
width: 27.08%;
height: 440px;
background: #F8DE73;
}
.rankup_section{
order: 4;
width: 22.91%;
background: #00D2A5;
}
.latest_post_section{
order: 5;
width: 30%;
background: #9CABE4;
}
.popular_post_section{
order: 6;
width: 30%;
background: #D76817;
}
.banner_section{
display: flex;
order: 7;
flex-flow: column nowrap;
width: 22.916%;
}
.banner_section div{
flex: 1 1 0;
}
.banner_section div.banner_box_01{
background: #0175BB;
}
.banner_section div.banner_box_02{
background: #1261C9;
}
.social_section{
order: 8;
width: 17.083%;
height: 270px;
background: #FE6EDA;
}
.footer{
order: 9;
width: 100%;
height: 94px;
background: #474747;
}
</style>
</head>
<body>
<div id="wrap">
<!-- 헤더 -->
<header class="header">
<h1></h1>
<nav></nav>
</header>
<!-- -->
<section class="slider_section"> </section>
<section class="gallery_section"> </section>
<section class="rankup_section"> </section>
<!-- -->
<section class="latest_post_section"> </section>
<section class="popular_post_section"> </section>
<section class="banner_section">
<div class="banner_box_01"></div>
<div class="banner_box_02"></div>
</section>
<section class="social_section"> </section>
<footer class="footer"></footer>
</div>
</body>
</html>ored by Color Scripter
|
cs |
일부분만 올리려다 모두 올려본다.
이제 속성에 대해서 살펴보자.
우선 플렉서블 박스를 만들기 위해서는 display 속성에 flex 또는 inline-flex로 지정해줘야한다.
[ flex = 블록, inline-flex = 인라인 ]
다음으로 flex-direction은 배치 방향을 설정해주는 친구다.
[ row▶ / row-reverse ◀ / column ▼ / column-reverse ▲ ]
flex-wrap은 박스를 여러줄을 설정하기 위해 사용한다.
[ nowrap : 한줄 배치 (default), wrap : 여러줄, wrap-reverse : 여려줄 역방향 ]
이 두개의 친구들을 모아서 사용하는게 flex-flow: [flex-direction] [flex-wrap] 이다.
order은 html태그를 작성한 순서대로 배치해주는 친구다.
기본값은 0이고, 입력된 양숫값에 따라 배치된다.
이외에도 많은 속성이있지만 간단히 포스팅해봤다.
'웹 프로그래밍' 카테고리의 다른 글
| [ HTML / CSS ] 배경 고정 스크롤 (5) | 2018.09.02 |
|---|---|
| [웹 디자인] 디자인의 종류들을 알아보자. (1) | 2018.08.31 |
| [ jQuery ] 슬라이드 배너 만들기 2편 (0) | 2018.08.28 |
| [jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기 (1) | 2018.08.02 |
| jQuery mouseover vs. mousenter 차이점에 대해 알아보기 😏 (2) | 2018.07.13 |