본문 바로가기
Dev/React

Display - flex , grid

by 컴포넌트설계자 2026. 3. 25.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .main{
        background-color: pink;
        height: 600px;
        display: flex;
        /* flex-direction: row; */
        flex-flow: row wrap;
        /* flex-wrap: wrap; */

        /* 중심축을 기준으로 아이템을 정렬 */
        justify-content: space-evenly;

        /* 반대축을 기준으로 아이템정렬 */
        align-content: space-evenly;
    }

    .main .item{
        width: 50px; height: 50px;
        border: 1px solid red; box-sizing: border-box;
        text-align: center; align-content: center;

    }
</style>
<body>
    <div class="main">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>

     
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
body{
    height: 100vh;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 100px auto 50px;

    grid-template-areas: 'header header' 'main aside' 'footer footer';
}

header{grid-area: header; background-color: antiquewhite;}
main{grid-area: main; background-color: aqua; padding: 30px;}
aside{grid-area: aside; background-color: orange;}
footer{grid-area: footer; background-color: antiquewhite;}

/* main 영역 css  */

 .main{
            height: 100vh;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 100px ;

            /* 영역설계 */
            /* 영역설계 */
           grid-template-areas:
        'a a a'
        'b b c'
        'e g f'
        'd g f'; 
          
        }

        img{
            width: 100%;  height: 100%;
            opacity: 0.8; border-radius: 10px;
        }

    
    .img1{grid-area: a;}
    .img2{grid-area: b;}
    .img3{grid-area: c;}
    .img4{grid-area: d;}
    .img5{grid-area: e;}
    .img6{grid-area: f;}
    .img7{grid-area: g;}

</style>
<body>
    <header>heaader</header>
    <main> 
        <div class="main">
        <img src="https://picsum.photos/id/100/200/200" alt="" class="img1">
        <img src="https://picsum.photos/id/110/200/200" alt="" class="img2">
        <img src="https://picsum.photos/id/102/200/200" alt="" class="img3">
        <img src="https://picsum.photos/id/103/200/200" alt="" class="img4">
        <img src="https://picsum.photos/id/104/200/200" alt="" class="img5">
        <img src="https://picsum.photos/id/114/200/200" alt="" class="img6">
        <img src="https://picsum.photos/id/109/200/200" alt="" class="img7">
    </div>
</main>

<aside>aside</aside>
<footer>footer</footer>
</body>
</html>

 

https://flexboxfroggy.com/#ko

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

개구리들이 기뻐하고 있다.

저작자표시 비영리 변경금지 (새창열림)

'Dev > React' 카테고리의 다른 글

자바스크립트 var 변수  (0) 2026.03.26
[JS] 등록form 이메일 유효성 체크 및 JavaScript 적용 예제  (0) 2026.03.26
CSS margnin padding ,position  (0) 2026.03.25
프론트엔드#2-CSS실습 기본적인 style적용  (0) 2026.03.24
프론트엔드 - form 예시  (0) 2026.03.24

관련글

티스토리툴바