[CSS] 반응형 사이트 만들기

728x90

▶️ 시맨틱 태그

원래 시맨틱태그가 들어오기 전(=HTML5이전)에는 다음과 같이 class를 지정하여 CSS를 했다고 한다.

하지만, HTML5부터는 시맨틱태그가 나와서 아래와 같은 의미없는 div들을 의미를 가진 명시된 태그가 나왔다.

(지금까지 느낀바로는 시멘틱태그 = div+class이름 같다.)

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
      #wrap {
        width: 1000px;
        margin: 0 auto;
        color: #ffffff;
        font-weight: 1000;
        font-size: 100px;
      }
      .header {
        width: 1000px;
        height: 100px;
        background: #111;
      }
      .nav {
        width: 1000px;
        height: 100px;
        background: #222;
      }
      .side {
        float: left;
        width: 300px;
        height: 600px;
        background: #333;
      }
      .contents {
        float: left;
        width: 700px;
        height: 600px;
        background: #444;
      }
      .footer {
        clear: both;
        width: 1000px;
        height: 100px;
        background: #555;
      }
    </style>
  </head>

  <body>
    <div id="wrap">
      <div class="header">header</div>  -> <header></header>
      <div class="nav">nav</div>   -> <nav></nav>
      <div class="side">side</div>  -> <aside></aside>
      <div class="contents">contents</div>  -> <section></section>
      <div class="footer">footer</div>  -> <footer></footer>
    </div>
  </body>
</html>

▶️ 미디어쿼리

화면 크기에 따른 각각의 속성 값을 지정하여 여러가지 화면을 구성하는 기술 (레이아웃)

@media only all and (조건문) {실행문}

@media : 미디어쿼리가 시작됨을 표시
only : 미디어 쿼리 구문을 해석하라는 명령어 (생략가능, 대부분 생략함)
all : 미디어 쿼리를 해석해야 할 대상을 나타냄 (생략가능, 대부분 생략함)
- all : 모든 미디어 유형에서 사용할 CSS를 정의함
- print : 인쇄 장치에서 사용할 CSS를 정의함
- screen : 컴퓨터 스크린에서 사용할 CSS를 정의함
- aural : 화면을 읽어 소리로 출력해주는 장치에서 CSS를 정의함
- tv : TV에서 사용할 CSS를 정의함
- handheld : 손에 들고 다니는 장치를 사용할 CSS를 정의함
- projection : 프로젝트를 위해 사용할 CSS를 정의함
and : 앞과 뒤의 조건을 나타냄 (생략가능, 대부분 생략함)

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
      body {
        background: #b71c1c;
        color: #fff;
      }
      h1::before {
        content: "1. ";
      }
      h1::after {
        content: " - 기본";
      }
      /* 화면너비가 0~1280px : 데스크탑 */
      @media (max-width: 1280px) {
        body {
          background: #4a148c;
        }
        h1::before {
          content: "2. ";
        }
        h1::after {
          content: " - 1025 ~ 1280px";
        }
      }
      /* 화면너비가 0~1024px : 데스크탑 */
      @media (max-width: 1024px) {
        body {
          background: #880e4f;
        }
        h1::before {
          content: "3. ";
        }
        h1::after {
          content: " - 961 ~ 1024px";
        }
      }
      /* 화면너비가 0~960px : 데스크탑 */
      @media (max-width: 960px) {
        body {
          background: #004d40;
        }
        h1::before {
          content: "4. ";
        }
        h1::after {
          content: " - 769 ~ 960px";
        }
      }
      /* 화면너비가 0~768px : 타블릿 */
      @media (max-width: 768px) {
        body {
          background: #311b92;
        }
        h1::before {
          content: "5. ";
        }
        h1::after {
          content: " - 517 ~ 768px";
        }
      }
      /* 화면너비가 0~576px : 모바일 */
      @media (max-width: 576px) {
        body {
          background: #4a148c;
        }
        h1::before {
          content: "6. ";
        }
        h1::after {
          content: " - 0 ~ 576px";
        }
      }
    </style>
  </head>

  <body>
    <h1>미디어쿼리</h1>
    <p>@media only all and (조건문) {실행문}</p>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </body>
</html>

1️⃣ 유형1

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        background: #f3e5f5;
      }
      #wrap {
        width: 1200px;
        margin: 0 auto;
        color: #ffffff;
        font-weight: 1000;
        font-size: 100px;
      }
      header {
        width: 100%;
        height: 150px;
        background: #9575cd;
      }
      nav {
        width: 100%;
        height: 100px;
        background: #222;
      }
      aside {
        float: left;
        width: 30%;
        height: 700px;
        background: #7e57c2;
      }
      section {
        float: left;
        width: 70%;
        height: 700px;
        background: #673ab7;
      }
      footer {
        clear: both;
        width: 100%;
        height: 150px;
        background: #5e35b1;
      }
      /* 화면너비 0 ~ 1200px */
      @media (max-width: 1220px) {
        #wrap {
          width: 95%;
        }
      }
      /* 화면너비 0 ~ 768px */
      @media (max-width: 768px) {
        #wrap {
          width: 100%;
        }
      }
      /* 화면너비 0 ~ 480px */
      @media (max-width: 480px) {
        #wrap {
          width: 100%;
        }
        header {
          height: 300px;
        }
        aside {
          float: none;
          width: 100%;
          height: 300px;
        }
        section {
          float: none;
          width: 100%;
          height: 300px;
        }
      }
    </style>
  </head>

  <body>
    <div id="wrap">
      <header>header</header>
      <nav>nav</nav>
      <aside>aside</aside>
      <section>section</section>
      <footer>footer</footer>
    </div>
  </body>
</html>