반응형 웹(4) - 가변형 레이아웃

김검정 2024. 7. 14. 14:58

em을 이용해 상대적인 크기의 폰트를 적용할 때처럼, 레이아웃에도 비율에 기반한 개념을 적용할 수 있다.

부모 요소의 크기에 비례해 자식 요소의 크기가 변하는 방식은 가변 레이아웃을 만들 때 흔히 사용되는 방식이다.

그럴 때 사용되는 상대적이고 비례적인 단위는 바로 % (퍼센트) 이다.

% 단위는 백분율 값을 나타낸다. 보통 부모 요소와의 상대적 크기를 지정할때 사용한다. 너비와 높이, 여백 뿐 아니라 글자 크기에도 사용할 수 있다.

/* 부모 요소의 글자 크기가 100% */
font-size: 50%;

/* 부모 요소의 높이가 100% */
height: 50%;

/* 부모 요소의 너비가 100% */
width: 50%;
margin: 50%;
padding: 10%;

아래의 코드로 연습을 해보자

<!DOCTYPE html>
<html lang="en">
<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>가변 레이아웃</title>
    <style>
        .container {
            width: 960px;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width: 960px;
            height: 100px;
            background-color: tomato;
        }
        .main{
            float: left;
            width: 640px;
            height: 300px;
            background-color: orange;
        }
        .asdie{
            float: right;
            width: 320px;
            height: 300px;
            background-color: purple;
        }
        .footer{
            clear: both; /*float으로 인해 문맥이 흐트러지는 것을 방지*/
            width: 960px;
            height: 100px;
            background-color: violet;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">HEADER</div>
        <div class="main">MAIN</div>
        <div class="aside">ASIDE</div>
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>

위 레이아웃은 960px; 이라는 고정 크기를 가지고 있다. 그래서 960px; 보다 작은 화면을 만나게 되면 요소가 가려지게 된다.

이때 사용하면 좋은것이 가변레이아웃 % 이다.

<!DOCTYPE html>
<html lang="en">
<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>가변 레이아웃</title>
    <style>
        .container {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width: 100%;
            height: 100px;
            background-color: tomato;
        }
        .main{
            float: left;
            width: 640px;
            height: 300px;
            background-color: orange;
        }
        .asdie{
            float: right;
            width: 320px;
            height: 300px;
            background-color: purple;
        }
        .footer{
            clear: both; /*float으로 인해 문맥이 흐트러지는 것을 방지*/
            width: 100%;
            height: 100px;
            background-color: violet;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">HEADER</div>
        <div class="main">MAIN</div>
        <div class="aside">ASIDE</div>
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>

가장 부모 요소인 container 를 90% 로 설정해보자

960px 이었을때 동일하게 960px을 가지고 있던 header, footer 를 100% 로 설정할 수 있다.

main과 aside도 동일하게 % 단위로 변경해보자.

<!DOCTYPE html>
<html lang="en">
<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>가변 레이아웃</title>
    <style>
        .container {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width: 100%;
            height: 100px;
            background-color: tomato;
        }
        .main{
            float: left;
            width: 67%;
            height: 300px;
            background-color: orange;
        }
        .asdie{
            float: right;
            width: 33%;
            height: 300px;
            background-color: purple;
        }
        .footer{
            clear: both; /*float으로 인해 문맥이 흐트러지는 것을 방지*/
            width: 100%;
            height: 100px;
            background-color: violet;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">HEADER</div>
        <div class="main">MAIN</div>
        <div class="aside">ASIDE</div>
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>

이렇게 변경하면

브라우저 창이 작아져도 레이아웃을 유지하는 것을 확인할 수 있다.

<!DOCTYPE html>
<html lang="en">
<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>가변 레이아웃</title>
    <style>
        *{ box-sizing: border-box;}
        .container {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width: 100%;
            height: 100px;
            background-color: tomato;
        }
        .main{
            float: left;
            width: 67%;
            height: 300px;
            padding: 10%;
            background-color: orange;
        }
        .asdie{
            float: right;
            width: 33%;
            height: 300px;
            padding: 10%;
            background-color: purple;
        }
        .footer{
            clear: both; /*float으로 인해 문맥이 흐트러지는 것을 방지*/
            width: 100%;
            height: 100px;
            background-color: violet;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">HEADER</div>
        <div class="main">MAIN</div>
        <div class="aside">ASIDE</div>
        <div class="footer">FOOTER</div>
    </div>
</body>
</html>

위와 같이 padding: 10%; 로 줘보자

그러면 부모 요소인 container 너비를 기준으로 10% 의 padding 크기를 갖는걸 확인할 수 있다.

정리