zooooss

[반응형 웹] 상대단위(rem / em)와 레이아웃(grid / flex) - 02 본문

STUDY/Responsive Web

[반응형 웹] 상대단위(rem / em)와 레이아웃(grid / flex) - 02

zooooss 2023. 8. 14. 20:37

상대단위 rem과 em의 개념, 그리고 레이아웃 grid와 flex의 차이에 대하여 알아보겠습니다!

- em과 rem

em과 rem은 상대단위를 의미하는데요! 이와 반대의 개념으로는 자주 쓰이는 절대단위 픽셀값인 px가 있습니다!

상대단위 em과 rem은 기준에 따라 크기가 변화합니다!

 

rem : 루트 엘리먼트의 font-size가 기준

em : 자신과 부모의 font-size가 기준

 

쉽게 설명하자면,

em은 전체 html의 font-size에 상대적으로 계산되는 단위입니다!

어느 곳에서 사용되던 제일 상위로 설정된 font-size의 n배인 것입니다! 2em이면 2 * font-size를 의미하죠!

 

반면에, rem은 현재 rem이 쓰인 요소 안의 font-size나 부모 요소의 font-size를 따라갑니다!

전체 html의 font-size에는 영향을 받지 않아요!

하지만, 더 생각해보면 해당 요소에 font-size지정이 되어있지 않다면 루트 요소의 font-size를 따라갈 수밖에 없겠죠!

 

해당 코드를 통해 더 이해해보겠습니다!

<!DOCTYPE html>
<html>
    <head>
        <title>EM test</title>
        <meta charset="utf-8">
        <style>
            html{
                font-size: 10px;
            }
            ul {
                font-size: 15px;
            }
            ul ul li{
                font-size: 2em;
            }
        </style>
    </head>
        <body>
            <h1>EM test</h1>
            <ul>
                <li>첫 번째</li>
                <li>두 번째</li>
                <li>세 번째</li>
                <ul>
                    <li>changed</li>
                    <li>changed</li>
                    <li>changed</li>
                </ul>
            </ul>
        </body>
</html>

보시다시피 2em으로 맞춰둔 폰트 크기는 html의 폰트사이즈인 10px의 2배인 20px로 나타나며,

첫 세 줄에 해당하는 폰트 크기는 요소에 설정해둔 15px로 나타나는 것을 확인할 수 있었습니다!

 

확실히 이해하기 위해서는 직접 rem, em 값을 이리저리 바꿔보는 연습이 필요해요 ㅎㅎ

- grid와 flex

웹 개발을 하다보면, 레이아웃을 Flex와 Grid 중 어느 것을 쓸 지 고민하는 순간이 오실텐데요!

Flex : 축이 하나일 때 사용! / 1차원적! / 진행방향이 한 방향!

Grid : 축이 여러 개일 때 사용! / 2차원적! / 진행방향이 여러 방향!

이렇게 생각하시면 사용하실 때 결정하기가 쉬워집니다!

먼저 Flex를 코드로 확인해보겠습니다!

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            .container{
                width: 300px;
                height: 300px;
                background-color: yellow;

                display: flex;
                flex-direction: row;
                justify-content: flex-start; /*center, space-between 등 */
                align-items: flex-end; /*교차축의 정렬 변화*/
            }
            .flex-item{
                width: 150px;
                height: 150px;
                background-color: blue;
                border: 5px solid black;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="flex-item">A</div>
            <div class="flex-item">B</div>
            <div class="flex-item">C</div>
            <div class="flex-item">D</div>
        </div>
    </body>
</html>

이렇게 flex-direction에 의해 행을 기준으로 정렬된 것을 보실 수 있습니다!

 

다음은 반응형의 꽃인 Grid를 코드로 확인해보겠습니다!

<!DOCTYPE html>
<html>
    <head>
        <title>grid-test</title>
        <meta charset="utf-8">
        <style>
            .grid-container{
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                grid-template-rows: 1fr 1fr 1fr;
                grid-gap: 20px;
                grid-template-areas: 
                "sidebar header header corner"
                "sidebar main1 main2 side"
                "sidebar main3 main4 side";
                width: 600px;
                height: 450px;
            }

        .gird-item{
                color: black;
            }

        .sidebar{
            grid-area: sidebar;
            background-color: skyblue;
        }
        .header{
            grid-area: header;
            background-color:green;
        }
        .corner{
            grid-area: corner;
            background-color:plum;
        }
        .main1{
            grid-area: main1;
            background-color:purple;
        }
        .main2{
            grid-area: main2;
            background-color:yellow;
        }
        .main3{
            grid-area: main3;
            background-color:teal;
        }
        .main4{
            grid-area: main4;
            background-color:thistle;
        }
        .side{
            grid-area: side;
            background-color:tomato;
        }
        </style>
    </head>
    <body>
        <div class="grid-container">
            <div class="grid-item sidebar">sidebar</div>
            <div class="grid-item header">header</div>
            <div class="grid-item corner">corner</div>
            <div class="grid-item main1">main1</div>
            <div class="grid-item main2">main2</div>
            <div class="grid-item main3">main3</div>
            <div class="grid-item main4">main4</div>
            <div class="grid-item side">side</div>
        </div>
    </body>
</html>

이렇게 2차원의 형태로 나오는 것을 확인하실 수 있습니다!

 

*** 참고로 1fr 1fr 1fr 1fr은 repeat함수를 이용해! repeat(4,1fr)로 사용하실 수 있습니다! 1fr을 4번 반복한다는 의미이죠!

여기까지 상대단위와 레이아웃에 대해 알아보았습니다!

 

해당 관련 코드는

 

https://github.com/zooooss/ResponsiveWeb.git

 

GitHub - zooooss/ResponsiveWeb

Contribute to zooooss/ResponsiveWeb development by creating an account on GitHub.

github.com

 

깃허브를 통해 확인하실 수 있습니다 ㅎㅎ

'STUDY > Responsive Web' 카테고리의 다른 글

[반응형 웹] SCSS(Sass)란? - 03  (0) 2023.08.14
[반응형 웹] viewport와 media query - 01  (0) 2023.08.06
'STUDY/Responsive Web' Related Articles more