히바리 쿄야 와 함께 하는 Developer Cafe
[2일차] DO IT 반응형 웹 만들기/p96 ~ 200/플렉서블 박스, 실전 반응형 웹 싸이트 만들기 본문
[2일차] DO IT 반응형 웹 만들기/p96 ~ 200/플렉서블 박스, 실전 반응형 웹 싸이트 만들기
TWICE&GFRIEND 2021. 2. 6. 20:34플렉서블 박스 기본설정
display : flex, inline-flex 모든 요소
flex : 박스를 블록 수준의 플렉서블 박스로 작동하게 한다.
inline-flex : 박스를 인라인 수준의 플렉서블 박스로 작동하게 한다.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{
display:-webkit-flex; /* 웹키트 전용 접두사 */ /* 기존의 박스를 플렉서블 박스로 작동시키기 위해 사용하는 설정 값 */
display:flex;
width:90%;
height:500px;
margin:0 auto;
background:#eb4a24;
border:4px solid #000;
}
</style>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
| 속성명 | 속성값 | 적용요소 |
| flex-direction | row(기본값), | 플렉서블 박스 |
| row-reverse, | ||
| column | ||
| column-reverse |
row : 박스를 왼쪽에서 오른쪽으로 배치, 해당 속성값으로 설정 할때 주축은 가로가 되고 교차축은 세로가 된다.
row-reverse : 박스를 가로로 배치하되 역방향으로 배치, 오른쪽에서 왼쪽으로 배치한다.
해당 속성값으로 설정 시 주축은 가로가 되고 교차축은 세로가 된다.
column : 박스를 위에서 아래로 배치, 해당 속성값으로 설정 시 주축은 세로가 되고 교차축은 가로가 된다.
column-reverse : 박스를 세로로 배치하되 역방향으로 배치. 즉, 아래에서 위로 배치 해당 속성 값으로
주축은 세로가 되고 교차축은 가로가 된다.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{
display:flex;
flex-direction:row;
width:90%;
height:500px;
margin:0 auto;
border:4px solid #000;
}
#wrap div{
width:33.33%;
}
#wrap div:first-child{
background:#eb4a24;
}
#wrap div:nth-child(2){
background:#1488c8;
}
#wrap div:nth-child(3){
background:#f7e041;
}
</style>
</head>
<body>
<div id="wrap">
<div></div><div></div><div></div>
</div>
</body>
</html>
flex-flow : [flex-direction] [flex-wrap], row nowrap(기본값) 플렉서블 박스
[flex-direction] [flex-wrap] : 첫 번째 속성값은 박스의 배치 방향을 설정하는 속성의 값을 작성하고, 두 번째 속성값은
박스를 여러 줄로 배치하는 속성의 값을 작성한다.
justify-content
속성
flex-start(기본값) : 자식 박스를 부모 박스 주축의 시작점으로 배치, 기본값
flex-end, : 자식 박스를 부모 박스 주축의 끝점으로 배치
center, : 자식 박스를 부모 박스의 중앙으로 배치
space-between, : 플렉서블 박스에 빈 공간이 있을 때 사용, 첫 번째 박스와 마지막 박스는 양쪽 끝으로 붙이고, 나머지
박스는 동일한 간격으로 정렬
space-around : 플렉서블 박스에 빈 공간이 있을 때 사용, 단, 양쪽 끝에 있는 박스의 양 옆에도 공간을 둔 채 자동
정렬 된다.
-플렉스 배치 예제-
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{
display:flex;
width:90%;
justify-content:space-around;
height:500px;
margin:0 auto;
border:4px solid #000;
}
#wrap div{
width:20%;
}
#wrap div:first-child{
background:#eb4a24;
}
#wrap div:nth-child(2){
background:#1488c8;
}
#wrap div:nth-child(3){
background:#f7e041;
}
</style>
</head>
<body>
<div id="wrap">
<div></div><div></div><div></div>
</div>
</body>
</html>
align-items
속성
stretch(기본값) : 박스를 확장해서 배치함
flex-start : 박스를 교차축의 시작점에 배치
flex-end : 박스를 교차축의 끝점에 배치
center : 박스를 교차축의 중앙에 배치
baseline : 자식 박스들을 교차축의 시작점에서 배치되는 자식 박스의 글자 베이스라인에 맞춰 배치
시작점에 배치되는 자식 박스는 교차축의 시작점과 글자 베이스라인의 거리가 가장 먼 박스가 교차축의 시작점에 배치
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{
display:flex;
width:90%;
align-items:center;
height:500px;
margin:0 auto;
border:4px solid #000;
}
#wrap div{
width:33.33%;
height:200px;
}
#wrap div:first-child{
background:#eb4a24;
}
#wrap div:nth-child(2){
background:#1488c8;
}
#wrap div:nth-child(3){
background:#f7e041;
}
</style>
</head>
<body>
<div id="wrap">
<div></div><div></div><div></div>
</div>
</body>
</html>
align-self
속성
auto : 플렉서블 박스(플렉스 아이템의 부모 박스) align-items 속성값을 상속 받는다
부모 박스에 적용된 속성값이 없는 경우에는 stretch 속성값이 적용된다.
stretch
flex-start
flex-end
center
baseline
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{
display:flex;
width:90%;
height:500px;
margin:0 auto;
border:4px solid #000;
}
#wrap div{
width:33.33%;
height:200px;
}
#wrap div:first-child{
align-self:flex-end;
background:#eb4a24;
}
#wrap div:nth-child(2){
background:#1488c8;
}
#wrap div:nth-child(3){
background:#f7e041;
}
</style>
</head>
<body>
<div id="wrap">
<div></div><div></div><div></div>
</div>
</body>
</html>
- align-content : 박스가 여러 줄일때에만 적용되는 속성임
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{
display:flex;
flex-wrap:wrap;
align-content:space-between;
width:90%;
height:500px;
margin:0 auto;
border:4px solid #000;
}
#wrap div{
width:100%;
height:100px;
}
#wrap div:first-child{
background:#eb4a24;
}
#wrap div:nth-child(2){
background:#1488c8;
}
#wrap div:nth-child(3){
background:#f7e041;
}
</style>
</head>
<body>
<div id="wrap">
<div></div><div></div><div></div>
</div>
</body>
</html>
플렉스 아이템 배치 순서
order : 0(기본값), 정수값
입력된 정수값에 따라 박스가 배치됨 동일한 양수값을 입력하면 html 태그 순서상 뒤에 작성된 태그가 적용
음수 값을 입력하면 기본값인 0이 된다.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{
display:flex;
width:90%;
height:500px;
margin:0 auto;
border:4px solid #000;
}
#wrap div{
width:33.33%;
}
#wrap div:first-child{
order:3;
background:#eb4a24;
}
#wrap div:nth-child(2){
order:1;
background:#1488c8;
}
#wrap div:nth-child(3){
order:2;
background:#f7e041;
}
</style>
</head>
<body>
<div id="wrap">
<div></div><div></div><div></div>
</div>
</body>
</html>
[flex-grow] [flex-shrink] [flex-basis].
0 1 auto(기본값)
0 auto(0 1 auto와 같다)
initial(0 1 auto와 같음)
auto(1 1 auto 와 같다)
none(0 0 auto 와 같다)
flex-grow : 플렉서블 박스에 여백이 있을 시 플렉스 아이템의 크기를 늘릴 수 있는 속성 속성 값은 비율로 설정
단 음수 값을 사용할 수 없으며 width, flex-basis 속성 값에 따라 늘어나는 크기가 변할 수 있음
flex-shrink : 플렉서블 박스 안의 플렉스 아이템의 크기가 넘칠 경우 크기를 줄일 수 있는 속성
속성 값은 비율로 설정 단 음수 값을 사용 할 수 없다. width, flex-basis 속성값에 따라 줄어드는 크기가 변할 수 있음
flex-basis : 플렉스 아이템의 기본 크기를 설정하기 위한 속성. width 속성에서 사용할 수 있는 모든 값을 사용할 수
있음 단 음수 값은 안된다.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{
display:flex;
width:90%;
height:500px;
margin:0 auto;
border:4px solid #000;
}
#wrap div:first-child{
flex:1 1 0;
background:#eb4a24;
}
#wrap div:nth-child(2){
flex:1 1 0;
background:#1488c8;
}
#wrap div:nth-child(3){
flex:2 2 0;
background:#f7e041;
}
</style>
</head>
<body>
<div id="wrap">
<div></div><div></div><div></div>
</div>
</body>
</html>
- 플렉서블 박스 이용 컨텐츠 배치 -
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap {
display:flex;
flex-flow:row wrap;
width:90%;
margin:0 auto;
}
.header {
display:flex;
order:1;
justify-content: flex-end; /* 플렉스 아이템의 끝점에 배치됨 */
position:relative;
width:100%;
}
.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.08333333333333333333333333333%;
height: 440px;
background: #f8de73;
}
.rankup_section {
order: 4;
width: 22.91666666666666666666666666667%;
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.91666666666666666666666666667%;
}
.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.083333333333333333333333333333%;
height: 270px;
background: #fe6eda;
}
</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>
플렉서블 메인페이지 실습
reset.css
@charset utf-8;
/* CSS 초기화 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite,
code, del, dfn, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font-family: NamumGodic,나눔고딕,'Namum Godic','맑은 고딕',HelveticaNeue,DroidSans,Sans-serif,Helvetica;
background:url(images/s_images/body_bg.png);
line-height:1;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul, li{
list-style:none;
}
a {
margin:0;
padding:0;
font-size:100%;
text-decoration: none;
vertical-align: baseline;
color: #fff;
background: transparent;
}
img {
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input {
margin: 0;
padding: 0;
box-sizing: content-box;
vertical-align: top;
appearance: none;
border: 1px solid #e65d5d;
color: #e65d5d;
border-radius: 0;
font-family: NanumGothic,나눔고딕,'Nanum Gothic','맑은 고딕',HelveticaNeue,DroidSans,
Sans-serif,Helvetica;
}
input::-moz-input-placeholder {
color:#e65d5d;
}
input::-webkit-input-placeholder {
color: #e65d5d;
}
* 웹폰트 CSS */
@font-face {
font-family: 'Nanum Gothic';src:url(../webfont/NanumGothic.eot)
}
@font-face {
font-family: 'Nanum Gothic';src:url(../webfont/NanumGothic.woff)
}
mobile.css
/* 모바일용 CSS */
/* 기본 CSS */
#wrap{
display:flex;
flex-flow:column nowrap;
width:80%;
margin:0 auto;
max-width:1200px;
}
#wrap section{
box-sizing:border-box;
}
/* 인포메이션 영역 CSS */
.info_section{
order:1;
width:100%;
background:#2ecc71;
border-bottom:1px solid #39d67c;
}
.info_list{
display:flex;
}
.info_list li{
width:25%;
text-align:center;
}
.info_list li a{
display:block;
padding:15px 0;
padding:0.938rem 0;
}
/* 헤더 영역 CSS */
.header{
display:flex;
order:2;
flex-direction:column;
position:relative;
width:100%;
}
.logo{
order:1;
width:100%;
padding:30px 0;
padding:1.875rem 0;
font-size:1.188em;
font-size:1.188rem;
line-height:21px;
line-height:1.313rem;
text-align:center;
text-transform:uppercase;
background:#2ecc71;
text-shadow:0px 1px 1px #25ab5e;
}
.nav{
order:2;
width:100%;
}
.gnb li{
display:flex;
background:#2c3e50;
}
.gnb li a{
width:80%;
padding:20px 0;
padding:1.250rem 0;
font-size:0.938em;
font-size:0.938rem;
text-indent:20px;
text-indent:1.250rem;
font-weight:bold;
text-transform:uppercase;
}
.gnb li span{
width:20%;
text-indent:-9999px;
background:url(../images/s_images/sub_menu_toggle_btn.png) center center no-repeat;
cursor:pointer;
}
.menu_toggle_btn{
display:block;
width:30px;
width:1.875rem;
height:30px;
height:1.875rem;
position:absolute;
top:10px;
top:0.625rem;
right:10px;
right:0.625rem;
text-indent:-9999px;
background:url(../images/s_images/menu_toggle_btn.png) no-repeat;
cursor:pointer;
}
/* 슬라이더 영역 CSS */
.slider_section{
display:flex;
justify-content:space-between;
align-items:center;
order:3;
width:100%;
height:300px;
height:18.750rem;
background:url(../images/p_images/slider_01.jpg) center center no-repeat;
}
.slider_section span{
width:34px;
width:2.125rem;
height:39px;
height:2.438rem;
text-indent:-9999px;
background:url(../images/s_images/slider_arrow.png) no-repeat;
cursor:pointer;
}
span.prev_btn{
margin-left:-10px;
margin-left:-0.625rem;
background-position:0 0;
}
span.next_btn{
margin-right:-10px;
margin-right:-0.625rem;
background-position:-34px 0;
}
/* 최근 글 영역, 인기 글 영역 CSS */
.latest_post_section{
order:4;
background:#ffc40f;
text-shadow:0px 1px 1px #b98e0b;
}
.popular_post_section{
order:5;
background:#a660c2;
text-shadow:0px 1px 1px #714185;
}
.latest_post_section, .popular_post_section{
padding:40px 12.5%;
padding:2.500rem 12.5%;
/* 40px ÷ 320px */
}
.title{
margin-bottom:30px;
margin-bottom:1.875rem;
font-size:1.188em;
font-size:1.188rem;
text-align:center;
text-transform:uppercase;
color:#fff;
}
.latest_post_list li, .popular_post_list li{
margin-top:15px;
margin-top:0.938rem;
padding-left:14px;
padding-left:0.875rem;
font-weight:bold;
text-transform:uppercase;
background:url(../images/s_images/post_circle_icon.png) no-repeat;
}
.latest_post_list li:first-child, .popular_post_list li:first-child{
margin-top:0;
}
/* 갤러리 영역 CSS */
.gallery_section{
order:6;
padding:50px 12.5%;
padding:3.125rem 12.5%;
/* 40px ÷ 320px */
text-align:center;
background:#e65d5d;
text-shadow:0px 1px 1px #c43434;
}
.gallery_section img{
width:100%;
max-width:100%;
border-radius:3px;
box-shadow:0px 1px 1px #c43434;
}
.gallery_list li:nth-child(2){
margin-top:30px;
margin-top:1.875rem;
}
.gallery_list li figcaption{
margin-top:20px;
margin-top:1.250rem;
font-size:1.188em;
font-size:1.188rem;
text-transform:uppercase;
font-weight:bold;
}
/* 인기 검색어 영역 CSS */
.rankup_section{
order:7;
padding:40px 12.5%;
padding:2.500rem 12.5%;
/* 40px ÷ 320px */
background:#219af7;
text-shadow: 0px 1px 1px #1974ba;
}
.rankup_list{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.rankup_list li{
width:47.916666666666666666666666666667%;
/* 115px ÷ 240px */
margin-top::15px;
margin-top:0.938rem;
text-align:center;
text-transform:uppercase;
font-weight:bold;
}
.rankup_list li:first-child, .rankup_list li:nth-child(2){
margin-top:0;
}
.rankup_list li a{
display:block;
padding:10px 0;
padding:0.625rem 0;
border:1px solid #fff;
border-radius:5px;
}
/* 배너 영역 CSS */
.banner_section{
order:8;
}
.banner_box_01{
background:#e6567a;
}
.banner_box_01 a{
display:block;
padding:30px 0;
padding:1.875rem 0;
text-align:center;
}
.banner_box_02{
background:#c44968;
}
.banner_list{
display:flex;
justify-content:space-between;
padding:30px 12.5%;
padding:1.875rem 12.5%;
/* 40px ÷ 320px */
}
/* 소셜 네트워크 영역 CSS */
.social_section{
order:9;
padding:24px 12.5%;
padding:1.500rem 12.5%;
/* 40px ÷ 320px */
background:#fff;
}
.social_list{
display:flex;
justify-content:space-between;
}
/* 푸터 영역 CSS */
.footer{
order:10;
width:100%;
background:#474747;
}
.footer p{
padding:20px;
padding:1.250rem;
font-size:0.813em;
font-size:0.813rem;
text-align:center;
text-transform:uppercase;
font-weight:bold;
color:#fff;
text-shadow:0px 1px 1px #191919;
}
pc.css
/* PC용 CSS */
@media all and (min-width:960px){
/* 기본 CSS */
#wrap{
position:relative;
width:90%;
}
/* 인포메이션 영역 CSS */
.info_section{
order:0;
position:absolute;
top:30px;
top:1.875rem;
right:30px;
right:1.875rem;
z-index:30;
width:auto;
border-bottom:0;
}
.info_list li{
width:auto;
margin-left:15px;
margin-left:0.625rem;
}
.info_list li a{
padding:0;
}
/* 헤더 영역 CSS */
.header{
order:1;
justify-content:flex-end;
position:static;
}
.logo{
width:12.5%;
/* 120px ÷ 960px */
}
.nav{
display:flex;
align-items:center;
position:static;
width:87.5%;
/* 840px ÷ 960px */
}
.gnb{
display:flex !important;
flex-direction:row;
position:static;
width:100%;
text-shadow:0px 1px 1px #25ab5e;
}
.gnb li{
display:block;
margin-left:5.20833333333333%;
/* 50px ÷ 840px */
background:none;
}
.gnb li a{
width:auto;
padding:0;
text-indent:0;
}
.gnb li span{
display:none;
}
.menu_toggle_btn{
display:none;
}
/* 슬라이더 영역 CSS */
.slider_section{
order:2;
width:50%;
/* 480px ÷ 960px */
}
/* 최근 글 영역, 인기 글 영역 CSS */
.latest_post_section, .popular_post_section{
display:flex;
flex-direction:column;
align-items:center;
width:30%;
/* 288px ÷ 960px */
padding-left:0;
padding-right:0;
}
/* 갤러리 영역 CSS */
.gallery_section{
order:3;
width:27.08333333333333%;
/* 260px ÷ 960px */
}
.gallery_list{
display:block;
}
.gallery_list li{
width:auto;
}
.gallery_list li:nth-child(2){
margin-top:30px;
margin-top:1.875rem;
margin-left:0;
}
/* 인기 검색어 영역 CSS */
.rankup_section{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
width:22.91666666666667%;
/* 220px ÷ 960px */
padding:0;
}
.rankup_list{
display:block;
}
.rankup_list li{
width:auto;
text-align:left;
counter-increment:rankup-counter;
}
.rankup_list li:nth-child(2){
margin-top:15px;
margin-top:0.938rem;
}
.rankup_list li:before{
padding-right:6px;
padding-right:0.375rem;
text-transform:uppercase;
font-weight:bold;
color:#fff;
text-shadow:0px 1px 1px #428e9e;
content:counter(rankup-counter) '.';
}
.rankup_list li a{
display:inline;
padding:0;
border:0;
}
/* 배너 영역 CSS */
.banner_section{
order:7;
width:22.91666666666667%;
/* 220px ÷ 960px */
}
/* 소셜 네트워크 영역 CSS */
.social_section{
order:8;
width:17.08333333333333%;
/* 164px ÷ 960px */
}
/* 푸터 영역 CSS */
.footer{
order:9;
}
.footer p{
padding-left:3.125%;
/* 30px ÷ 960px */
text-align:left;
}
}
tablet.css
/* 태블릿용 CSS */
@media all and (min-width:768px){
/* 기본 CSS */
#wrap{
flex-flow:row wrap;
}
/* 헤더 영역 CSS */
.header{
flex-direction:row;
}
.logo{
position:absolute;
top:0;
left:0;
z-index:10;
width:15.625%;
/* 120px ÷ 768px */
padding:0;
}
.logo a{
display:block;
padding:50px 0;
padding:3.125rem 0;
}
.nav{
position:relative;
min-height:80px;
min-height:5.000rem;
background:#2ecc71;
}
.gnb{
position:absolute;
top:100%;
right:0;
z-index:20;
width:40.10416666666667%;
/* 308px ÷ 768px */
}
.menu_toggle_btn{
top:50%;
right:30px;
right:1.875rem;
z-index:20;
margin-top:-15px;
margin-top:-0.938rem;
}
/* 슬라이더 영역 CSS */
.slider_section{
width:59.89583333333333%;
/* 460px ÷ 768px */
height:auto;
}
.slider_section span{
position:relative;
z-index:10;
}
/* 최근 글 영역, 인기 글 영역 CSS */
.latest_post_section{
order:5;
}
.popular_post_section{
order:6;
}
.latest_post_section, .popular_post_section{
width:41.666666666666666666666666666667%;
/* 320px ÷ 768px */
padding-left:5.208333333333333333333333333333%;
padding-right:5.208333333333333333333333333333%;
/* 40px ÷ 768px */
}
/* 갤러리 영역 CSS */
.gallery_section{
order:8;
width:71.354166666666666666666666666667%;
/* 548px ÷ 768px */
padding-left:5.208333333333333333333333333333%;
padding-right:5.208333333333333333333333333333%;
/* 40px ÷ 768px */
}
.gallery_list{
display:flex;
}
.gallery_list li{
width:47.008547008547008547008547008547%;
/* 220px ÷ 468px */
}
.gallery_list li:nth-child(2){
margin-left:5.982905982905982905982905982906%;
/* 28px ÷ 468px */
margin-top:0;
}
/* 인기 검색어 영역 CSS */
.rankup_section{
order:4;
width:40.10416666666667%;
/* 308px ÷ 768px */
padding-left:5.20833333333333%;
padding-right:5.20833333333333%;
/* 40px ÷ 768px */
}
/* 배너 영역 CSS */
.banner_section{
display:flex;
order:9;
flex-direction:column;
width:28.645833333333333333333333333333%;
/* 220px ÷ 768px */
}
.banner_section div{
flex:1 1 0;
}
.banner_box_01{
display:flex;
justify-content:center;
align-items:center;
}
.banner_box_01 a{
display:inline;
padding:0;
}
.banner_box_02{
display:flex;
justify-content:center;
align-items:center;
}
.banner_list{
padding:0;
justify-content:flex-start;
}
.banner_list li:nth-child(2){
margin:0 14px;
margin:0 0.875rem;
}
/* 소셜 네트워크 영역 CSS */
.social_section{
display:flex;
order:7;
justify-content:center;
align-items:center;
width:16.66666666666667%;
/* 128px ÷ 768px */
padding:0;
}
.social_list{
flex-direction:column;
justify-content:flex-start;
}
.social_list li:nth-child(2){
margin:24px 0;
margin:1.500rem 0;
}
/* 푸터 영역 CSS */
.footer p{
padding:40px 0;
padding:2.500rem 0;
}
}
index.html -> 메인페이지 html 태그
'Resposive Web' 카테고리의 다른 글
| [4일차] DO IT 반응형 웹 만들기/p247 ~ p336/09 반응형 웹 사이트 준비 작업하기 (0) | 2021.02.16 |
|---|---|
| [3일차] DO IT 반응형 웹 만들기/p 201 ~ p 245 / 서브페이지 만들기 (0) | 2021.02.16 |
| [1일차] DO IT 반응형 웹 만들기/p16 ~p95/ 반응형 웹이란? 가변 그리드, 미디어 쿼리 (0) | 2021.02.05 |
