Grid로 만드는 범용 Wrapper Layout Class (Flexbox 버전 포함)
flex, grid 실무적인 적용 방법
■ Grid로 만드는 범용 Wrapper Layout Class (Flexbox 버전 포함)
▼ 우리가 flex에서 했던 것처럼 레이아웃을 좀 더 유연하게 작업하기위해
주어진 코드를 추가해주었다.
.l_row {
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
row-gap: 40px;
}
.l_col {
box-sizing: border-box;
padding: 0 20px;
}
.l_col_12_12 { width: 100%; }
.l_col_11_12 { width: 91.66666667%; }
.l_col_10_12 { width: 83.33333333%; }
.l_col_9_12 { width: 75%; }
.l_col_8_12 { width: 66.66666667%; }
.l_col_7_12 { width: 58.33333333%; }
.l_col_6_12 { width: 50%; }
.l_col_5_12 { width: 41.66666667%; }
.l_col_4_12 { width: 33.33333333%; }
.l_col_3_12 { width: 25%; }
.l_col_2_12 { width: 16.66666667%; }
.l_col_1_12 { width: 8.33333333%; }
grid도 똑같이 할 수있다.
.l_row {
display: grid;
grid-template-columns: repeat( 12, 1fr );
gap: 10px;
}
.l_row_thin { gap: 4px; }
.l_row_wide { gap: 20px; }
.l_col_12_12 { grid-column: auto / span 12; }
.l_col_11_12 { grid-column: auto / span 11; }
.l_col_10_12 { grid-column: auto / span 10; }
.l_col_9_12 { grid-column: auto / span 9; }
.l_col_8_12 { grid-column: auto / span 8; }
.l_col_7_12 { grid-column: auto / span 7; }
.l_col_6_12 { grid-column: auto / span 6; }
.l_col_5_12 { grid-column: auto / span 5; }
.l_col_4_12 { grid-column: auto / span 4; }
.l_col_3_12 { grid-column: auto / span 3; }
.l_col_2_12 { grid-column: auto / span 2; }
.l_col_1_12 { grid-column: auto / span 1; }
◆ (day16/grid-wrapper/flexbox,grid)
■ flex 실무적인 적용 방법
파란색 영역에 이미지를 넣으면 밖에 나오게끔 적용해보자 (유동적이게)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="l_wrapper">
<h1 class="header-logo">HAPPY CODE</h1>
</div>
</header>
<section class="section">
<div class="l_wrapper">
<div class="section-container">
<h2 class="section-title">
START YOUR<br>
DIGITAL<br>
TRANSFORMATION<br>
JOURNEY
</h2>
<div class="section-contents">
</div>
</div>
</div>
</section>
</body>
</html>
/* Resets */
body {
margin: unset;
}
h1, h2 {
margin: unset;
font-weight: unset;
font-size: unset;
}
img {
max-width: 100%;
vertical-align: top;
}
/* Typography */
:root {
font-family: "Montserrat", sans-serif;
}
/* Layouts */
.l_wrapper {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}
/* Components */
body {
background-color: #ddd;
}
.header {
background-color: #eee;
margin-bottom: 20px;
padding: 20px 0;
}
.header-logo {
font-size: 20px;
font-weight: bold;
color: orangered;
}
.section-container {
background-color: white;
display: flex;
}
.section-title {
font-size: 30px;
padding: 20px 60px 20px 20px;
font-weight: 600;
color: rebeccapurple;
}
.section-contents {
flex-grow: 1;
box-shadow: inset 0 0 20px dodgerblue;
}
▼ 창크기를 줄이고 늘렸을때 빈공간까지 찬 이미지가 가변 상태여야한다.
고정된 이미지지가 아닌걸로 요소 밖으로 나오게 할수있는 방법은 네거티브 마진을 사용한다
▼ 하지만 고정픽셀이기에 잠시나마 유연하겠지만 창크기가 달라질수록 변화가있기에
동적으로 변화를 주려면 100vw - wrapper의 너비 *-1 (음수값처리)
▼ 만약 wrapper가 고정값이 아닌 작아질 수도 있는 값 max-width:960px 일때는 100%값을 적용 해 주면 된다.
마진속성의 값으로 %값을 줬을때 기준은 wrapper이다.
▼ 전역변수를 적용하여 편의성 높인다.
실무의 전역변수 참된예
See the Pen
Untitled by VEAMCAMP (@veamcamp)
on CodePen.
■ grid 실무적인 적용 방법
그리드 컨테이너에서 3개의 column을 생성 (1fr , max-width , 1fr)
▼ div를 3개 만드는 것 보다 하나의 div가 이동도 되고 병합도 된다
가운데는 max-width로 적용 해줘야한다.
▼ l_wrapper의 max-width는 언제든 쓰일수도있기에 flex 했던 것 처럼 전역변수 사용해준다.
min-width를 auto 아닌 값으로, max-width는 전역 변수를 통한 960px 적용
▼ colunm start를 적용하여 요소 이동
▼ 셀 병합하여 요소를 늘려준다
▼ 실무 효율을 늘리기위해 숫자를 직관적으로 해줘야한다
[이름] 을 임의로 지정하여 셀을 번호표시가 아닌 셀 이름을 표시한다
숫자를 쓰지않고 이 이름들을 그대로 inside에 적용 해준다.
▼ 이토록 다양한 방식으로 전역변수를 사용하여 시스템을 구축하고 실용성을 더한다
