ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • (65)CSS_미디어 쿼리 실전예제
      HTML, CSS 2023. 4. 3. 17:27
      728x90
       

      (56)CSS_레이아웃 기본 문법

      다단 레이아웃 텍스트를 column 속성으로 다단을 생성 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 column-count: 단의 갯수를 설정 column-rule: 단과 단사이의 구분선, 구분의 모양,

      jm-rograming.tistory.com

      <!DOCTYPE html>
      <html lang="en">
      <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>솔로의 식탁</title>
          <link rel="stylesheet" href="css/style.css">
      </head>
      <body>
          <div id="container">
              <header>
                  <h1>솔로의식탁</h1>
              </header>
              <section id="menus">
                  <div id="menu1">
                      <h2>밥/죽</h2>
                  </div>
                  <div id="menu2">
                      <h2>샐러드</h2>
                  </div>
                  <div id="menu3">
                      <h2>반찬</h2>
                  </div>
                  <div id="menu4">
                      <h2>토스트</h2>
                  </div>
                  <div id="menu5">
                      <h2>음료/칵테일</h2>
                  </div>
              </section>
              <footer><p>솔로의식탁</p></footer>
          </div>
      </body>
      </html>
      • 외부 css 코드
      #container{
          width: 100%;
      }

      #header{
          width: 100%;
      }

      header > h1 {
          text-align: center;
          font-size: 3em; /*pc:16px, Mobile:12px*/

      }

      #menus{
          width: 100%;
      }

      #menus > div{
          height: 400px;
          border: 1px solid black;
          margin-bottom: 15px;
          position: relative;
      }

      #menus h2{
          position: absolute;
          right: 3%;
          bottom: 10px;
          font-size: 2em;
          color: white;
          text-shadow: 3px 3px 5px black;
      }

      #menu1,#menu2,#menu3,#menu4,#menu5 {
          width: 100%;
      }

      #menu1{
          background: url(../images/images/dish1.jpg) no-repeat center;
          background-size: cover;
      }
      #menu2{
          background: url(../images/images/dish2.jpg) no-repeat center;
          background-size: cover;
      }
      #menu3{
          background: url(../images/images/dish3.jpg) no-repeat center;
          background-size: cover;
      }
      #menu4{
          background: url(../images/images/dish4.jpg) no-repeat center;
          background-size: cover;
      }
      #menu5{
          background: url(../images/images/dish5.jpg) no-repeat center;
          background-size: cover;
      }

      footer{
          width: 100%;
          background-color: black;
          height: 100px;

      }

      footer > p{
          font-size: 1.5em;
          color: white;
          text-align: center;
          line-height: 100px;
      }

      @media screen and (min-width: 768px) {
          #menus{
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
          }

          #menu1,#menu2,#menu3,#menu4{
              width: 49%;
          }
      }


      @media screen and (min-width: 1024px) {

          #menu1,#menu2,#menu3,#menu4{
              width: 32%;
          }
          #menu5{
              width: 66%;
          }
          #menu5{
              flex-basis: 0;
              flex-grow: 2;
              flex-shrink: 1;
              margin-left: 1.8%;
          }
      }



      • 핸드폰 크기일때

      • 패드 사이즈 크기일때

      • 컴퓨터 크기 사이즈 일때

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

      (67)CSS_동적인 카페 소개 페이지 만들기  (0) 2023.04.04
      (66)CSS_기본문법  (0) 2023.04.04
      (64)CSS_미디어 쿼리2  (0) 2023.04.03
      (63)CSS_미디어 쿼리1  (0) 2023.04.03
      (62)CSS_플렉스 레이아웃3  (0) 2023.04.03

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바