비주얼 스튜디오 코드 47_ 반응형 레이아웃

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 47_ 반응형 레이아웃

조반짝 2023. 6. 26. 11:24

728x90

레이아웃 01

●header태그: 헤더는 로고와 네비가 포함된 영역

●aside태그:

css편집

바탕색은 body에서 주면된다.

●aside, section 이 float으로 띄워져 있기때문에 footer가 aside, section 밑으로 겹쳐서 들어가게된다.

footer 영역에 clear:both를 주어 aside, section영역 바로 아래에 위치된다.

●반응형

@media 영역

화면너비 0~1200px

화면 너비에 따라서 화면 스타일이 다르게 나오게 된다.

화면의 크기에 따라 스타일을 따로 준다.

#wrap 너비값으 100%는 wrap이 꽉 차지만 95%는 양쪽 여백이 나온다.

wrap이 1200px 이기 때문에 최대크기를 1200px를 하면 충돌이 날 수 있다.

그래서 좀더 큰 크기인 1220px로한다.

기기별로 화면사이즈가 어떻게 나오는지 미리보기 할 수 있다.

w0-480px 일때 header 영역 높이값 변경

화면너비 0-480px일때 각 영역의 높이와 line-height값을 지정해준다.

화면이 작아지면 영역도 변경되는게 보인다.

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 레이아웃_1</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 24px;
            text-align: center;
            color: #fff;
        }
        body{
            background-color: #f3e5f5;
        }
        #wrap{
            width: 1200px;
            height: 900px;
            margin: 0 auto;
            background-color: #eeee;
        }
        #header{
            width: 100%;
            /* 너비 부모와 똑같이 감(생략가능) */
            height: 150px;
            background-color: #7e57c2;
            line-height: 150px;
        }
        #aside{
            width: 30%;
            height: 700px;
            background-color: #9575cd;
            line-height: 700px;
            /* 왼쪽영역 */
            float: left;
        }
        #section{
            width: 70%;
            height: 700px;
            background-color: #673cb7;
            line-height: 700px;
            /* 오른쪽영역 */
            float: right;
        }
        #footer{
            /* aside, section이 float으로 띄워져있기 때문에 footer가 aside, section 밑으로 겹쳐서 들어간다. 
            clear: both; 를 주어 왼쪽영역, 오른쪽영역 아래로 위치 시켜준다. */
            clear: both;
            width: 100%;
            background-color: darkblue;
            line-height: 150px;
        }
        /* @media 영역 */
        /* 화면너비 0~1200px */
        @media(max-width:1220px){
            #wrap {width:95%}    
            /* 화면 사이즈 100% */
        }
        /* 화면 너비 0~768px */
        @media(max-width:768px){
            #wrap {width:100%;} 
        }
        /* 화면 너비 0~480px */
        @media(max-width:480px){
            #header{height: 300px; line-height: 300px;}
            #aside{width:100%; height: 300px; line-height: 300px;} 
            #section{width: 100%; height: 300px; line-height: 300px;}
            #footer{height: 300px; line-height: 300px;}
        }
    </style>
</head>
<body>
    <div id="wrap">
        <header id="header">헤더</header>
        <aside id="aside">왼쪽영역</aside>
        <section id="section">오른쪽영역</section>
        <footer id="footer">푸터</footer>
    </div>
</body>
</html>

레이아웃 02

W 0-1200px일 때 화면 크기

aside: w 40%

section : w60%

article: w100%, h300px

너비 1220px이하로는 article이 아래로 떨어지게된다.

float을 해제해주면 footer와 article이 겹치게 된다.

이때, clear:both를 넣어주면 이 둘이 겹치지 않는다.

태블릿 사이즈

핸드폰 사이즈

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 레이아웃_2</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-size: 24px;
            text-align: center;
            color: #fff;
        }
        #body{
            background-color:#f1f8e9;
        }
        #wrap{}
        #header{
            background-color: greenyellow;
            height: 150px;
            width: 100%;
        }
        #aside{
            width: 33.33%;
            height: 700px;
            background-color: #aed581;
            float: left;
        }
        #section{
            width: 33.33%;
            height: 700px;
            background-color: #9ccc65;
            float: left;
        }
        #article{
            width: 33.33%;
            height: 700px;
            background-color: #8bc34a;
            float: left;
        }
        #footer{
            width: 100%;
            /* 생략가능 */
            height: 150px;
            background-color: #7cb342;
            clear: both;
        }
        
        /* 화면 크기: 0-1200px: PC사이즈 */
        @media(max-width:1220px){
            #aside{width: 40%;}
            #section{width: 60%;}
            #article{width: 100%; height: 300px; float:none; clear: both;}
            /* float을 해제해주면 footer와 article이 겹치게 된다.
            이때, clear:both;를 넣어주면 겹치지 않게된다. */
        }
         /* 화면 크기: 0-768px: 테블릿 사이즈 */
         @media(max-width:768px){
            #aside{float:none; width: 100%; display:none;}
            /* display:none; 하면 aside가 없어진다. */
            #section{width: 100%; float:none; height: 300px;}       
        }
        /* 화면 크기: 0-480px: 핸드폰 사이즈 */
        @media(max-width:480px){
            #aside{float:none; width: 100%; display:block;}
            /* 위에 값을 가지고 가기 때문에 768px에서 display:none을
            보이게 하기위해 display:block을 한다. */
                 
        }
        
    </style>
</head>
<body>
    <div id="wrap">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <section id="section">section</section>
        <article id="article">article</article>
        <footer id="footer">footer</footer>
    </div>
</body>
</html>

레이아웃 03

css편집

1220px에서 aside, article3 화면 변경하기

화면크기 960이하일때 레이아웃 변경하기

화면크기 600이하일 때 레이아웃 변경하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 레이아웃_3</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-size: 24px;
            color: #fff;
        }
        #wrap{
            background-color: #fbe9e7;
            width: 1200px;
            margin: 0 auto;
        }
        #header{
            width: 100%;
            height: 100px;
            background-color: #ffccbc;     
        }
        #aside{
            width: 30%;
            height: 600px;
            background-color: #ffab91;
            float: left;
        }

        #article1{
            width: 70%;
            height: 200px;
            background-color: #ff7043;
            float: left;
        }
        #article2{
            width: 70%;
            height: 200px;
            background-color: #ff5722;
            float: left;
        }
        #article3{
            width: 70%;
            height: 200px;
            background-color: #f4511e;
            float: left;
        }
        #footer{
            width: 100%;
            height: 100px;
            background-color: #e64a19;
            clear: both;
        }
        /* 화면크기 0-1220px*/
        @media(max-width:1220px){
            /* wrap을 바꿔줘야 화면이 다같이 변경됨 */
            #wrap{width: 100%;}
            #aside{height: 400px;}
            #article3{width: 100%;}
        }
           /* 화면크기 0-960px*/
           @media(max-width: 960px){
            /* wrap을 바꿔줘야 화면이 다같이 변경됨 */
            #wrap{width: 100%;}
            #aside{height: 400px; float:none; width: 100%;}
            #article1, #article2{width: 50%;}      
        }
         /* 화면크기 0-600px*/
         @media(max-width: 600px){
            /* wrap을 바꿔줘야 화면이 다같이 변경됨 */
            #wrap{width: 100%;}
            #aside{height: 400px; float:none; width: 100%;}
            #article1, #article2,#article3{float: none; width: 100%;}
        
        }

        /* 최소 화면 크기 */
        /* @media(min-width:1220px){} */
    </style>
</head>
<body>
    <div id="wrap">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <article id="article1">article1</article>
        <article id="article2">article2</article>
        <article id="article3">article3</article>
        <footer id="footer">footer</footer>
    </div>
</body>
</html>

레이아웃 04

css 영역 잡아주기

컨텐츠 박스 편집하기

footer 편집하기

반응형 레이아웃 설정하기

0-1200px 일때

wrap: width: 100% 로 설정하여 다같이 움직일 수 있도록한다.

0-1024px 일때

div : 23%로 한다. 마진 1%+ 박스사이즈 21% + 마진 1%

밑에 떨어지는 박스 두개 숨겨주기 display:none

768px일 때

div : 31.3% 한다. 마진 1%+박스사이즈 29% +마진 1%

1024px 에서 div(5n)을 숨겨주었기 때문에 nth-child(5)만 display: block을 해서 다시 나타내 준다.

600px일때

480px 일때

padding 값을 똑같이 적용해주려면 padding도 같이 변경시켜주면 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            background-color: #fffde7;
        }
        #wrap{
            width: 1200px;
            margin: 0 auto;
        }
        #header{
            height: 100px;
            background-color: #ffe082;
        }
        #banner{
            width: 100%;
            height: 300px;
            background-color: #ffd54f;
        }
        #contents{
            width: 100%;
            background-color: #ffca28;
            padding: 5%;
            /* padding으로 좌우상하에 여백 넣어주기 */
            overflow: hidden;
            /* float을 넣어서 clearfix 대신에 넣어줌 */
        }
        #contents>div{
            width: 18%;
            margin: 1%;
            height: 170px;
            background-color: #ff9800;
            /* 박스 옆으로 보내기 */
            float: left;
            /* 박스 편집 */
            text-align: center;
            line-height: 170px;
            border-radius: 5%;
        }

        #footer{
            height: 100px;
            background-color: #ffb300;
        }

        /* 화면크기  0-1200px*/
        @media(max-width:1220px){
            #wrap{width:100%}
        }
        /* 화면크기 0-1024px: 노트북사이즈 */
        @media(max-width:1024px){
            #contents>div{width: 23%;}
            #contents>div:nth-child(5n){display: none;}
        }
        /* 화면크기 0-768px */
        @media(max-width:768px){
            #contents>div{width: 31.3%;}
            #contents>div:nth-child(5){display: block;}
        }
        /* 화면크기 0-600px */
        @media(max-width:600px){
            #contents>div{width: 48%;}
            #contents>div:nth-child(10){display: block;}
        }
        /* 화면크기 0-480px */
        @media(max-width:480px){
            #contents>div{width: 100%;}
            /* 마진1%는 제외하고 100%사이즈 맞게 적용한다. */
            /* 양쪽 여백이 두꺼운 이유는 pdding: 5%를 했기 때문이다. */
        }
    </style>
</head>
<body>
    <div id="wrap">
        <header id="header"></header>
        <article id="banner"></article>
        <section id="contents">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </section>
        <footer id="footer"></footer>
    </div>
</body>
</html>

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 49_ 웹표준) 탭메뉴 (0)	2023.06.27
비주얼 스튜디오 코드 48_Parallax (0)	2023.06.26
[JAVASCRIPT] 4. 마우스 오버 효과 (0)	2023.06.23
비주얼 스튜디오 코드 46_ flex (0)	2023.06.23
비주얼 스튜디오 코드 45_웹표준) 컨텐츠 (0)	2023.06.23

현재글비주얼 스튜디오 코드 47_ 반응형 레이아웃

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

Parallax, For문, 자바스크립트, media, 프론트엔드, ACTIVE, 이클립스, offset, HTML, 비주얼스튜디오코드, 웹디자인, 자바, 코딩테스트, float, position, JavaScript, Java, SQL, if문, CSS,

Today :
Yesterday :

조반짝의 도전일지