본문 바로가기

Learning/HTML&JavaScript

반응형 웹 디자인

  • 반응형 웹 디자인: 웹 사이트의 내용을 유지하면서 다양한 화면 크기에 맞게 웹 사이트 표시

  • 뷰포트(viewport): 실제 내용이 표시되는 영역. 

  • 그리드 시스템: 화면을 여러 개의 칼럼을 나누고 필요할때마다 칼럼들을 묶어 배치하는 방법

  • 가변 그리드 레이아웃: 전체를 감싸는 요소의 너비를 %로 변환

 

 

 

  • 고정 그리드 레이아웃

<!doctype html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>Fixed Grid Layout</title>

<style>

    #wrapper{

        width: 960px;

        margin: 0 auto;

    }

    header{

        width: 960px;

        height: 120px;

        background-color: aqua;

        border-bottom: 1px solid black;

    }

    .header-text{

        font-size: 40px;

        color: white;

        text-align: center;

        line-height: 120px;

    }

    .content{

        float: left;

        width: 600px;

        height: 400px;

        padding: 15px;

        background-color: yellow;

    }

    .right-side{

        float: right;

        width: 300px;

        padding: 15px;

        height: 400px;

        background-color: thistle;

    }

    footer{

        clear: both;

        height: 120px;

        background-color: yellowgreen;

    }

</style>

</head>



<body>

    <div id="wrapper">

        <header>

            <h1 class="header-text">고정 그리드 레이아웃</h1>

        </header>

        <section class="content">

            <h4>본문</h4>

        </section>

        <aside class="right-side">

            <h4>사이드바</h4>

        </aside>

        <footer>

            <h4>푸터</h4>

        </footer>

    </div>

</body>

</html>

 

 

 


 

  • 가변 그리드 레이아웃

 

<!doctype html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>Fluid Grid Layout</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

    #wrapper{

        width: 96%;

        margin: 0 auto;

    }

    header{

        width: 100%;

        height: 120px;

        background-color: teal;

        border-bottom: 1px solid black;

    }

    .header-text{

        font-size: 32px;

        color: white;

        text-align: center;

        line-height: 120px;

    }

    .content{

        float: left;

        width: 62.5%;

        height: 400px;

        padding: 1.5625%;

        background-color: violet;

    }

    .right-side{

        float: right;

        width: 31.25%;

        height: 400px;

        padding: 1.5625%;

        background-color: thistle;

    }

    footer{

        clear: both;

        height: 120px;

        background-color: yellowgreen;

    }

</style>

</head>



<body>

    <div id="wrapper">

        <header>

            <h1 class="header-text">가변 그리드 레이아웃</h1>

        </header>

        <section class="content">

            <h4>본문</h4>

        </section>

        <aside class="right-side">

            <h4>사이드바</h4>

        </aside>

        <footer>

            <h4>푸터</h4>

        </footer>

    </div>

</body>

</html>

 

 


 

  • 가변 이미지

.content img{

        max-width: 100%;

        height: auto;

    }