728x90
반응형
728x90
반응형

HTML코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="2_grid실습.css">


</head>
<body>
    <div id="wrapper">
        <div class="card">
            <header>
                <h3>모바일 HTML</h3>
            </header>
            <figure><img src="../Resource/books/book1.jpg" alt="HTML"></figure>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste quos commodi harum voluptas inventore quo dolor numquam quaerat perspiciatis! Similique dignissimos voluptatum officiis repellendus quos hic molestias, optio iste sequi.</p>
        </div>
        <div class="card">
            <header>
                <h3>CSS3</h3>
            </header>
            <figure><img src="../Resource/books/css.jpg" alt="CSS"></figure>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius veniam quibusdam repudiandae, doloremque nam aperiam. Ipsa vero minus quam at minima possimus nostrum ab, facilis facere voluptatem soluta optio voluptas?</p>
        </div>
        <div class="card">
            <header>
                <h3>바닐라 자바스크립트</h3>
            </header>
            <figure><img src="../Resource/books/js.jpg" alt="JAVA"></figure>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem et enim at eos suscipit necessitatibus atque? Ex dolorum harum autem beatae, natus vitae assumenda? Non cumque accusantium adipisci autem nobis.</p>
        </div>
    </div>
</body>
</html>

 

 

 

 

 

CSS코드

body{
    font-size: 16px;
    background-color: black;
}

#wrapper{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.card {
    background-color: #fff;
    box-shadow: 5px 10px 25px white;
    text-align: center;
}

.card > header {
    font-size: 2rem;
    padding: 0.5px;
}

.card > p {
    line-height: 1.6em;

}

img {
    display: block;
    margin: auto;
    max-width: 100%;
    min-height: 30rem;
}
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

요소 정렬 방법  (0) 2023.01.01
flex 설명  (0) 2023.01.01
grid예제2  (0) 2023.01.01
grid 예제1  (0) 2023.01.01
flex 예제1  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper {
            display: grid;
            width: 700px;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
            grid-template-areas: 
                "box1 box1 box1"
                "box2 box3 box3"
                "box2 . box4"
            ;    
            grid-gap: 10px 10px;
        }
        .box {
            border: 1px solid black;
            color: white;
            text-align: center;
            font-weight: bold;
        }

        .box1{
            background-color: darkcyan;
            grid-area: box1;
        }
        .box2{
            background-color: rgb(1, 155, 103);
            grid-area: box2;
            grid-area: box2;
        }
        .box3{
            background-color: rgb(0, 190, 79);
            grid-area: box3;
        }
        .box4{
            background-color: rgb(103, 6, 141);
            grid-area: box4;
        }


    </style>
</head>
<body>
    <div id="wrapper">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
        <div class="box box4">box4</div>
    </div>
    
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

flex 설명  (0) 2023.01.01
grid실습  (0) 2023.01.01
grid 예제1  (0) 2023.01.01
flex 예제1  (0) 2022.12.29
animation 예제2  (0) 2022.12.29
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #container {
        display: grid; /* grid 형식으로 배치*/  
        /* grid-template-columns : 각 열들의 너비를 지정 */
        grid-template-columns: 200px 200px 200px 200px 200px;
        /* 너비가 전부 같은 열 3개 만드세여 */
        /* fr단위 : 비율 */
        grid-template-columns: repeat(3, 1fr);
        /* minmax(100px auto) : 줄 높이를 최소 100px로 해주세요  */
        grid-template-rows: 200px 300px; 
        /* grid-gap : 각 셀들의 간격을 지정( 세로, 가로 ) */
        grid-gap: 50px 30px;
        
    }

    .items {
        padding: 10px;
        border: 1px solid black;
        background-color: aquamarine;

    }

    /* 홀수번째 items */
    .items:nth-child(odd) {
        background-color: aqua;
    }


    </style>
</head>
<body>
    <div id="container">

        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        
    </div>
    

</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

grid실습  (0) 2023.01.01
grid예제2  (0) 2023.01.01
flex 예제1  (0) 2022.12.29
animation 예제2  (0) 2022.12.29
animation 예제1  (0) 2022.12.29

+ Recent posts

728x90
반응형
">

티스토리툴바