HTML&CSS 25일차 (정리x)

💜 HTML,CSS
HTML&CSS 25일차 (정리x)

Genie_. 2024. 3. 23. 22:19
728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>그리드(중요중요)</title>
</head>
<style>
    .container {
        /* 부모를 grid container, 자식을 grid item이라고 부른다.*/
        display: grid;
        background-color: bisque;
        /*grid-template-columns: 100px 200px 50px;*/
        /* fr은 비율로 따지라는 것 */
        /* grid 부모의 width를 4로 나눈 다음 3:1 비율로 나눠 가져라 */
        /*grid-template-columns: 3fr 1fr; !* 전체 4중에 3과 1씩 차지함 *!*/
        /*grid-template-columns: repeat(5, 1fr); !* 균등하게 나눠 가지는 경우는 repeat을 사용할 수 있다 *!*/
        /*grid-template-columns: 100px repeat(3, 1fr); !* 맨 처음 열은 100px고정. 나머지 3열은 남은 부분을 균등하게 나눠 가져라 *!*/

        /* minmax: 최솟값과 최댓값을 지정할 수 있음
           minmax(100px, auto) 최소 100px이고, 최대는 자동으로 늘어나라.
           => 아무리 내용이 없어도 100px는 가지고 있고, 커져야 하는 상황이면 알아서 늘어나라
        */
        /*grid-template-columns: minmax(100px, auto) minmax(100px, auto) minmax(100px, auto);*/
        /*grid-template-columns: repeat(3, minmax(auto, 200px));*/

        /*
            auto-fill, auto-fit: 열 개수를 미리 정하지 않고, 설정된 너비가 허용하는 한 최대한 자식들로 채워라
            auto-fit은 여백이 발생하면 남는 공간을 늘려서 채워줌
         */
        /*grid-template-columns: repeat(auto-fill, minmax(20%,auto));*/
        grid-template-columns: repeat(auto-fit, minmax(20%,auto));


        /*
            grid- 가 붙는 속성은 브라우저 호환 범위를 넓힉 ㅣ위해 다시 나온 것이다. 뭘 사용해도 상관없음
        */
        gap: 20px 10px; /* row column */
        /*column-gap: 20px;*/
        /*row-gap: 20px;*/

    }

    .item{
        background-color: orange;
    }
    .item:first-child{
        grid-column-start: 1;
        grid-column-end: 3;
        grid-column: 1 / span 2;  /* 1부터 시작해서 2칸 차지해라 */
    }
    .item:nth-child(4){
        grid-row-start: 2;
        grid-row-end: 4;
        grid-row: 2 / 4; /* 위 두개(start, end) 합친거 */
    }
    /**********************************************/

    .container2{
        display: grid;
        margin-top: 20px;
        background-color: #e3c8ff;
        grid-template-columns: 1fr 2fr 4fr;
        grid-template-rows: 100px 200px;
        /*justify-items: center;*/
        /*align-items: center;*/
        grid-gap: 10px;
        grid-template-areas:
                    "a1 a2 a5"
                    "a3 a4 a5"
                    ". a6 . ";
    }
    .item2{
        background-color: orange;
    }
    .item2:nth-child(1){
        grid-area: a1;
    }
    .item2:nth-child(2){
        grid-area: a2;
    }
    .item2:nth-child(3){
        grid-area: a3;
    }
    .item2:nth-child(4){
        grid-area: a4;
    }
    .item2:nth-child(5){
        grid-area: a5;
    }
    .item2:nth-child(6){
        grid-area: a6;
    }


</style>
<body>
    <div class="container">
<!--        div.item{item$}*10-->
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
        <div class="item">item10</div>
    </div>



    <div class="container2">
<!--        div.item{item$}*10-->
        <div class="item2">item1</div>
        <div class="item2">item2</div>
        <div class="item2">item3</div>
        <div class="item2">item4</div>
        <div class="item2">item5</div>
        <div class="item2">item6</div>
    </div>
</body>
</html>
728x90
저작자표시 비영리 변경금지