하루 하루

미디어 쿼리 + 플렉서블 박스 레이아웃 본문

IT/Web

미디어 쿼리 + 플렉서블 박스 레이아웃

san_deul 2020. 5. 18. 02:48

개념 

[ 미디어쿼리 ]

사용자가 어떤 미디어를 사용하는 가에 따라 사이트의 형태가 바뀌도록 css를 작성하는 방법

    <style type="text/css">
    /*모든 상황에서 똑같이 사용할 스타일 */
    ...
    /* 가로 320px 이하 */
    ...
    /* 스마트폰 세로  */
    @media (min-width:320px){
    ...
    }
 
    /* 스마트폰 가로  */
    @media (min-width:480px){
    ...
    }
 
     /* 태블릿 세로   */
    @media (min-width:768px){
    ...
    }
 
    /* 태블릿 가로& 데스크톱  */
    @media (min-width:1024px){
    ...
    }

  </style>

 

[ 플렉서블 박스 레이아웃 ] 

플렉서블 박스 레이아웃은 그리드 레이아웃으로 기본으로 해서 플렉스 박스를 원하는 위치에 배치는 하는 것입니다.

플렉스 박스를 이용하게 되면 여유 공간에 따라 나타나는 높이, 위치를 자유롭게 변형할 수 있습니다.

 

[ 미디어 쿼리 + 플렉서블 박스 레이아웃 코드 보기 ]

<!DOCTYPE html>
<html>
  <head>
	  <meta charset="utf-8">
    <title>가변그리드패턴</title>
	  <!--여기 아랫줄 암기.. 반응형에 꼭 들어가는 구문 : 초기 스케일을 기기화면에 맞추겠다는 구문-->
	  <meta name="viewport" content="width=device-width,initial-scale=1">

    <style type="text/css">
    /*모든 상황에서 똑같이 사용할 스타일 */
    .container{
      display:flex; /*플렉스 컨테이너 사용 */
      flex-flow:row wrap;  /*왼쪽에서 오른쪽으로 여러줄에 표시*/
    }
    .container div{  
      min-width:140px;
      min-height:150px;
    }

    /* 가로 320px 이하 */
    .c1, .c2, .c3, .c4,.c5{
        width:100%;
    }
    /* 스마트폰 세로  */
    @media (min-width:320px){
      .c1, {
        width:100%;
      }
      .c2, .c3, .c4,.c5 {width:50%;}
    }
 
    /* 스마트폰 가로  */
    @media (min-width:480px){
      .c1,.c2{width:50%;}
      .c3, .c4, .c5{width:33.33%;}
    }
 
     /* 태블릿 세로   */
    @media (min-width:768px){
      .c1{ width:100%;}
      .c2, .c3, .c4{width:33.33%;}
      .c5{width:100%;}
    }
 
    /* 태블릿 가로& 데스크톱  */
    @media (min-width:1024px){
      .c1{
        width:100%;
      }
      .c2, .c3, .c4,.c5{width:25%;}
    }
    

  </style>
  </head>  
  <body>
    <div class="container" style="background-color: cornsilk;">
      <div class="c1" style="background-color: pink;"> 
        <h1>1</h1>
      </div>
      <div class="c2" style="background-color: powderblue;"> 
        <h1>2</h1>
      </div>
      <div class="c3" style="background-color: lightsalmon;"> 
        <h1>3</h1>
      </div>
      <div class="c4" style="background-color: lightgrey;"> 
        <h1>4</h1>
      </div>
      <div class="c5" style="background-color: thistle;"> 
        <h1>5</h1>
      </div>
	  </div>
  </body>
</html>

 

/* 가로 320px 이하 */
    .c1, .c2, .c3, .c4,.c5{
        width:100%;
    }

 

 

@media (min-width:320px){
      .c1, {
        width:100%;
      }
      .c2, .c3, .c4,.c5 {width:50%;}
}

 

    @media (min-width:480px){
      .c1,.c2{width:50%;}
      .c3, .c4, .c5{width:33.33%;}
    }

    @media (min-width:768px){
      .c1{ width:100%;}
      .c2, .c3, .c4{width:33.33%;}
      .c5{width:100%;}
    }

 

@media (min-width:1024px){
      .c1{ width:100%; }
      .c2, .c3, .c4,.c5{width:25%;}
}

참고 

'https://m.blog.naver.com/PostView.nhn?blogId=kkaria&logNo=221396631564&proxyReferer=https:%2F%2Fwww.google.com%2

 

[레이아웃 : 반응형 웹] 01. 가변 그리드 패턴 w/ 미디어 쿼리

가변그리드패턴 실습 (미디어쿼리 중심 반응형 웹 디자인 모듈) ◆ 헤드 작성◆ 실습할 요소 세팅 ◆ 미디...

blog.naver.com

 

 

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=31591715

 

Do it! HTML5 + CSS3 웹 표준의 정석

HTML에 대한 사전 지식이 없는 사람들도 예제를 통해 기본 이론을 익히고, 실무를 위한 태그를 쉽게 배울 수 있다. 국내 HTML의 권위자가 정석대로, 웹 표준에 맞춰 기초 태그부터 하나하나 제대로

www.aladin.co.kr

 

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

'IT > Web' 카테고리의 다른 글

[ SharePoint Framework ] 2. Set up your Office 365 tenant  (0) 2020.06.01
[ SharePoint Framework ] 1. Overview  (0) 2020.05.31
Lazy Loading  (0) 2020.05.17
모달 창 만들기 js  (0) 2020.05.17
모듈 형태의 JS  (0) 2020.05.17
'IT/Web' Related Articles more
Comments