728x90
★ CSS3 레이아웃
- flex(선형 레이아웃), grid(평면 레이아웃)
★ Grid
- Grid 함수
Grid Container
- Grid 전체 영역
Grid Item
- 내부 요소
- <div class="item">
Grid Cell
- Grid의 한칸
Grid Line
- Grid Cell을 구분하는 각각의 선
Grid Number
- Grid Line 번호
Grid Gap
- Grid Cell 사이의 간격- 사용 방법
.container {
display : grid;
}
.container {
/* 행과 열의 개수 + 크기 > 2행 3열*/
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px 100px;
}- 행과 열 옵션을 주어 배열을 만들어냄
- 실행 결과
- 퍼센트를 이용하여 하는경우
grid-template-columns: 3fr 1fr;- 반복 : repeat을 이용하여 하는경우
grid-template-columns: repeat(3, 1fr);- 크기를 지정하여 하는경우
width: 300px;
height: 300px;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr ;- 셀 병합(가로축)
/* 방법 1 */
.container .item:nth-child(1) {
grid-column-start: 1;
grid-column-end: 4;
}
/* 방법 2 */
.container .item:nth-child(1) {
grid-column-end: span 3 ;
}
/* 방법 3 */
.container .item:nth-child(1) {
grid-column : 1/4;
}
- 셀 병합 (세로축)
/* 방법 1 */
.container .item:nth-child(2) {
grid-row-start: 2;
grid-row-end: 4;
}
/* 방법 2 */
.container .item:nth-child(1) {
grid-column-end: span 3 ;
}
/* 방법 3 */
.container .item:nth-child(2) {
grid-row : 2/4;
}
■ 응용 ex)
- HTML 코드
<body>
<main>
<div class="menu">
<h1>Study</h1>
<ul>
<li>JDK</li>
<li>JAVA</li>
<li>Oracle</li>
<li>SQL</li>
<li>JDBC</li>
</ul>
<hr>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>JQuery</li>
</ul>
<hr>
<div>
©Copyright test.com 2023 <br>All rights reserved.
</div>
</div>
<div class="search">
<input type="text">
<button>Search</button>
</div>
<div class="banner">
<img src="images/gimbal.jpg">
</div>
<div class="list">
<!-- (div>(img[src=images/rect_icon0$.png]+(div>lorem)))*6 -->
<div>
<img src="images/rect_icon01.png" alt="">
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel quasi porro soluta adipisci, harum optio laudantium nulla saepe eveniet! Labore laboriosam quod quidem incidunt ad? Nisi vel voluptatem facere veniam.</div>
</div>
<div>
<img src="images/rect_icon02.png" alt="">
<div>Doloremque eos provident explicabo quia iure unde saepe, vitae praesentium incidunt dolores accusamus asperiores dolore, ut architecto amet repellat nisi exercitationem tempora voluptatum totam cum. Consectetur quam odio voluptates quis.</div>
</div>
<div>
<img src="images/rect_icon03.png" alt="">
<div>Eaque sit, odit nulla accusamus enim aut provident laudantium praesentium voluptate et modi totam quaerat saepe aliquid dolorem pariatur, nam quasi. Quam reiciendis deleniti, error impedit explicabo esse molestias. Beatae!</div>
</div>
<div>
<img src="images/rect_icon04.png" alt="">
<div>Repellat error doloribus illum blanditiis debitis qui, minus quod corporis recusandae praesentium dolore suscipit aspernatur necessitatibus officia voluptatibus provident ad dignissimos! Illo aspernatur incidunt quod ex eaque reprehenderit cupiditate velit.</div>
</div>
<div>
<img src="images/rect_icon05.png" alt="">
<div>Magnam alias explicabo expedita voluptatem aut placeat dolorem veniam earum accusamus reprehenderit veritatis, rem porro labore quasi, vero quos. Aliquam temporibus ducimus ratione sunt nostrum odit corporis asperiores vero possimus.</div>
</div>
<div>
<img src="images/rect_icon06.png" alt="">
<div>Officiis corporis aliquam consequuntur dolorem harum recusandae, nesciunt nulla praesentium id blanditiis culpa vitae, magnam eius excepturi neque totam suscipit voluptatem aliquid alias earum, quasi voluptas ducimus placeat officia. Fuga.</div>
</div>
</div>
</main>
</body>- CSS 코드
<style>
html, body {
margin : 0;
padding : 0;
}
main {
/* border : 10px solid black; */
display : grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 50px 200px 1fr;
}
.menu {
background-color: tomato;
grid-row: 1/4;
text-align: center;
color : white;
}
.menu h1 {
font-variant: small-caps;
}
.menu ul {
list-style-type: none;
padding : 0;
}
.menu div {
font-size : 12px;
}
.menu hr {
border : 0;
border-top : 1px dashed white;
}
.search {
background-color: gold;
display : flex;
justify-content: center;
align-items: center;
}
.search input {
border : 1px solid yellow;
width : 400px;
padding : 4px;
outline: none;
}
.search button {
border : 1px solid yellow;
width : 100px;
height: 25px;
background-color: rgba(255,255,0,.5);
margin-left : 3px;
}
.banner {
background-color: yellowgreen;
}
.banner img {
object-fit: cover;
width : 100%;
height: 100%;
}
.list {
background-color: cornflowerblue;
display : grid;
grid-template-columns: repeat(4, 1fr);
/* grid-gap: ; */
gap : 20px;
padding : 20px;
}
.list div {
background-color: turquoise;
}
.list div img {
display : block;
margin : 20px auto;
border : 5px solid white;
padding : 3px;
}
.list div div {
margin : 30px;
font-size : 14px;
color : #555;
}
/* 모바일 */
@media screen and (max-width:768px) {
/* 0px ~ 768px */
main {
grid-template-columns: 1fr;
grid-template-rows: 200px 50px 200px 1fr;
}
.menu {
grid-row : auto;
}
.menu ul {
display : flex;
justify-content: center;
margin : 0;
}
.menu li {
margin : 0 7px;
}
.menu hr {
display: none;
}
.menu div {
margin-top : 12px;
}
.list {
grid-template-columns: repeat(3, 1fr);
}
}
</style>- 실행 결과
728x90
'웹페이지' 카테고리의 다른 글
| JAVASCRIPT STEP 2 - DataType (0) | 2023.04.20 |
|---|---|
| JAVASCRIPT STEP 1 - JavaScript의 기초 (0) | 2023.04.20 |
| CSS STEP 33 - Responsive (0) | 2023.04.20 |
| CSS STEP 32 - Variable (0) | 2023.04.20 |
| CSS STEP 31 - Animation (0) | 2023.04.19 |
