레이아웃 - float 유형 - 반응형 한 번에 이해하기

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

✍🏻 레이아웃 - float 유형 - 반응형 ✍🏻

오늘은 사용자가 모바일을 사용해도 깨지지 않는 반응형에 대해 알아보겠습니다.

1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<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>레이아웃 - float유형 - 반응형</title>
	<style>    //head 태그에 style 태그를 입력해줍니다.                     
        * {                               
            margin: 0;   //구역을 초기화 시키기 위해 전체 구역 *{ }에 margin: 0;, padding: 0;을 줍니다.       
            padding: 0;		     
        }				  
        body {              
            background-color: #E8F5E9;              
        }                                               
        #wrap {    //wrap 구역이 가운데 정렬이 될 수 있도록 margin: 0 auto;를 입력해줍니다.                               
            width: 1200px;                               
            margin: 0 auto;
        }
        #header {    //각 영역에 알맞는 width값과 hegiht값과 배경색을 입력해줍니다.
            width: 100%;
            height: 100px;
            background-color: #C8E6C9;
        }
        #nav {		//각 영역에 알맞는 width값과 hegiht값과 배경색을 입력해줍니다.
            width: 100%;
            height: 100px;
            background-color: #A5D6A7;
        }
        #section {
            overflow: hidden;   //위와 같이 입력을 하면 footer 구역이 사라지므로 article 
            					//구역의 부모인 section 구역에 overflow: hidden;을 입력해줍니다. 
        }
        .article1 {		//각 영역에 알맞는 width값과 hegiht값과 배경색을 입력해줍니다.
            width: 30%;			
            height: 780px;
            background-color: #81C784;
            float: left;  //article 구역이 나열되어야하기 때문에 float 유형을 사용해서
            			//float: left; 를 입력해줍니다.
        }
        .article2 {		//각 영역에 알맞는 width값과 hegiht값과 배경색을 입력해줍니다.
            width: 40%;
            height: 780px;
            background-color: #66BB6A;
            float: left;    //article 구역이 나열되어야하기 때문에 float 유형을 사용해서 
            				//float: left; 를 입력해줍니다.
        }
        .article3 {		//각 영역에 알맞는 width값과 hegiht값과 배경색을 입력해줍니다.
            width: 30%;
            height: 780px;
            background-color: #4CAF50;
            float: left;    //article 구역이 나열되어야하기 때문에 float 유형을 사용해서 
            				//float: left; 를 입력해줍니다.
        }
        #footer {		//각 영역에 알맞는 width값과 hegiht값과 배경색을 입력해줍니다.
            width: 100%;
            height: 100px;
            background-color: #43A047;
        }
    </style>
</head>
<body>    //header 구역, nav 구역, sectioin 구역, footer 구역을 만들어줍니다. 
    <div id="wrap">                    
        <div id="header"></div>         
        <div id="nav"></div>           
        <div id="section">	 //section 구역 안이 반응형에 반응할 수 있도록 자식으로 새로운 태그
        					//article 구역을 3개 만들어줍니다.     
            <div class="article1"></div>	
            <div class="article2"></div>		 
            <div class="article3"></div>		  
        </div>        
        <div id="footer"></div>        
    </div>
</body>
</html>

결과  1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃

✍🏻 반응형 ✍🏻

style 태그 사이에 @media를 통해 반응형 값을 입력해줍니다.

노트북 같은 최대 width값이 1220px일 때

@media (max-width: 1220px){
    #wrap {
        width: 96%;
    }
}

레이아웃 전체 구역인 wrap 구역의 width값을 96%를 주게 되면 배경인 body 구역이 보기 좋게 나오고

wrap구역이 깨지지 않고 화면에 보이게 됩니다.

태블릿 같은 최대 width값이 768px일 때

@media (max-width: 768px){
    #wrap {
        width: 100%;
    }
    .article1 {
        width: 30%;
        height: 630px;
    }
    .article2 {
        width: 70%;
        height: 630px;
    }
    .article3 {
        width: 100%;
        height: 150px;
    }
}

//section 구역에 article 구역이 반응이 되므로 각 구역에 맞는 width값과 height값을 다시 입력해줍니다.

레이아웃 전체 구역인 wrap 구역의 width값을 100%를 주면서 화면 전체에 가득 채우도록 합니다.

스마트폰 같은 최대 width값이 480px일 때

@media (max-width: 468px){
    .article1 {
        width: 100%;
        height: 200px;
    }
    .article2 {
        width: 100%;
        height: 430px;
    }
}

//article 구역이 반응되므로 각 구역에 맞는 width값과 height값을 다시 입력해줍니다.

✨ 감사합니다.

'css' 카테고리의 다른 글

레이아웃 - grid 유형 (12)	2023.03.02
레이아웃 - flex 유형 완전 정복 (10)	2023.03.01
CSS 선택자 한 번에 완벽 정리 (13)	2023.02.26
what is 레이아웃 float ? (15)	2023.02.26
ID 와 CSS의 차이점 ? (6)	2023.02.21

xoouxa

레이아웃 - float 유형 - 반응형 한 번에 이해하기

- Frederick Philips Brooks

✍🏻 레이아웃 - float 유형 - 반응형 ✍🏻

✍🏻 반응형 ✍🏻

'css' 카테고리의 다른 글

'css'의 다른글

티스토리툴바

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

레이아웃 - float 유형 - 반응형 한 번에 이해하기

- Frederick Philips Brooks

✍🏻 레이아웃 - float 유형 - 반응형 ✍🏻

✍🏻 반응형 ✍🏻

'css' 카테고리의 다른 글

'css'의 다른글

관련글

티스토리툴바