250x250
Notice
Recent Posts
Recent Comments
Link
«   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
Tags more
Archives
Today
Total
관리 메뉴

개린이 개발노트

css 활용한 반응형 웹 본문

웹/CSS,HTML

css 활용한 반응형 웹

개린이9999 2022. 12. 25. 23:25
728x90
<!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>CSS활용 반응형웹코딩</title>
  <link rel="stylesheet" href="css활용반응형웹.css">
  <style>
    *{padding: 0;margin: 0;}
    body{
      background: pink;
    }
    #wrapper{
      border: 1px solid gray;
      width: 80%;
      margin: 0 auto;
      font-size: 2vw;
    }
    nav li {
      list-style: none;
      float: left;
      border: 1px solid gray;
        width: 20%;
        box-sizing: border-box;
        text-align: center;
    }
    nav ul{
      overflow: hidden;
    }
    header h1 {
      text-align: center;
      margin-bottom: 20px;
    }
    header{
      padding: 20px 0;
      border: 1px solid gray;
    }
    .content{
      padding: 5px;
    }
    footer{
      border: 1px solid gray;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
   @media (max-width:767px) {
      body{
        background-color: purple;
      }
      #wrapper {
        width: 100%;
        font-size: 2em;
      }
      nav li {
        width: 100%;
      }
   }
    @media (min-width:768px) {
      body{
        background-color: orange;
      }
      #wrapper {
        width: 100%;
      }
    }
    @media (min-width:992px) {
      body{
        background-color: skyblue;
      }
      #wrapper {
        width: 80%;
      }
    }
    @media (min-width:1200px) {
      body{
        background-color: lemonchiffon;
      }
    }
   
  </style>
</head>
<body>
<div id="wrapper">
  <header>
    <h1>반응형 웹</h1>
  <nav>
    <ul>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
      <li>menu5</li>
    </ul>
  </nav>
</header>
  <div class="content">
    <h2>반응형 웹은 미디어쿼리를 사용하여 스타일링 합니다.</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
      Voluptatibus qui ducimus dignissimos quisquam, error quos hic quis, o
      dit molestias, 
      vitae ex pariatur. 
      Laborum commodi, asperiores officia optio sapiente nesciunt amet.
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde laborum doloremque, 
      fuga necessitatibus ratione repudiandae et iure fugiat odio. Omnis placeat explicabo aut, 
      labore neque blanditiis suscipit ipsum fugit recusandae.
    </p>
  </div>
  <footer>
     <h1>Desinged by Note9999</h1>
  </footer>
</div>  
</body>
</html>

미디어쿼리 규칙의 코딩은 @media (디바이스 사이즈) {

css스타일

} 로 표시.

 

부트스트랩에서는 디바이스 장치의 사이즈를 크게 3개로 나누는데 그 중에 laptop 컴퓨터용 사이즈는

디바이스가 최소 992px 이상일때이고, 스마트폰은 디바이스 사이즈가 최대 767px 이상일 때다.

728x90

'웹 > CSS,HTML' 카테고리의 다른 글

HTML <option> 태그  (0) 2023.08.01
프리웨어 코딩 프로그램 설치  (0) 2022.12.25
코딩시간을 절반으로 줄여주는 VSCode 9개 기능  (2) 2022.12.22
[HTML] HTML 각종태그, 결과값 까지 확인해보기2 (feat.VS CODE)  (0) 2022.12.18
[HTML] HTML 각종태그, 결과값 까지 확인해보기(feat.VS CODE)  (0) 2022.12.18
'웹/CSS,HTML' Related Articles more