CSS STEP 34 - Grid — Developer Story House

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>
                &copy;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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

CSS STEP 34 - Grid

'웹페이지' 카테고리의 다른 글

'웹페이지' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역