ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • (67)CSS_동적인 카페 소개 페이지 만들기
      HTML, CSS 2023. 4. 4. 15:37
      728x90
       

      (66)CSS_기본문법

      trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을

      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/css.css">
      </head>

      <body>
          <div id="container">
              <header>
                  <nav>
                      <ul>
                          <li><a href="#intro"> 카페소개</a></li>
                          <li><a href="#map">오시는 길</a></li>
                          <li><a href="#choice">이달의 추천</a></li>
                      </ul>
                  </nav>
              </header>
              <section id="intro">
                  <div class="page-title">
                      <h2>카페 소개</h2>
                  </div>
                  <div class="content">
                      <div class="photo"><img src="images/coffee.jpg" alt="커피"></div>
                      <div class="text">
                          <p>영업 시간: 오전 9시 ~ 밤 10시</p>
                          <p>휴무: 매주 수요일 <i><small>(수요일이 공휴일인 경우 수요일 영업, 다음날 휴무)</small></i></p>
                      </div>
                  </div>
              </section>
              <section id="map">
                  <div class="page-title">
                      <h2>오시는길</h2>
                  </div>
                  <div class="content">
                      <div class="photo"><img src="images/map.jpg" alt="지도"></div>
                      <div class="text">
                          <p>서귀포시 안덕면 사계리 000-000</p>
                          <p>제주 올레 10 코스 산방산 근처</p>
                      </div>
                  </div>
              </section>
              <section id="choice">
                  <div class="page-title">
                      <h2>이달의 추천</h2>
                  </div>
                  <div class="content">
                      <div class="photo"><img src="images/ice.jpg" alt="추천"></div>
                      <div class="text">
                          <h2>핸드드립 아이스 커피</h2>
                          <ol>
                              <li>1인분 기준으로 서버에 각 얼음 5조각(한조각은 20cc) 넣고 추출을 시작한다.</li>
                              <li>평상시 보다 원두의 양은 2배정도(20g)와 추출액은 얼음 포함해서 200cc까지 내린다.</li>
                              <li>아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다.</li>
                          </ol>
                      </div>
                  </div>
              </section>
              <footer>
                  <p>My times with Coffee</p>
              </footer>
          </div>
      </body>

      </html>
      • 외부 css코드
      @font-face {
          font-family: 'GmarketSansMedium';
          font-weight: normal;
          font-style: normal;
      }

      body{
          font-family: 'GmarketSansMedium';
      }

      #container {
          width: 100%;
          margin: 0 auto;
      }
      nav {
          height: 50px;
          background-color: black;
      }
      nav > ul {
          list-style: none;
          margin: 0;
          padding: 3px;
      }
      nav > img {
          width: 100%;
      }
      nav > ul > li {
          display: inline-block;
          margin: 15px 20px;
      }
      a{
          text-decoration: none;
      }
      a:link{
          color: white;
      }
      a:visited{
          color: white;
      }
      a:active{
          color: yellow;
      }
      a:hover{
          color: yellow;
      }

      header {
          width: 100%;
          height: 300px;
          background-image: url(../images/header.jpg);
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          margin: 0;
      }

      .page-title > h2{
          font-weight: bold;
          padding: 10px;
          margin: 5px;
      }

      .photo{
          display: none;
      }

      section{
          position: relative;
          width: 100%;
          padding: 15px 5%;
      }

      .page-title{
          position: absolute;
          top: 20px;
          left: 0px;
          padding: 30px 50px;
      }

      .content {
          margin: 80px auto 10px;
          width: 90%;
          padding: 20px;
          box-sizing: border-box;
      }

      #container section:nth-child(even){
          background-color: navajowhite;
      }

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

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

      @media screen and (min-width: 768px){
          header{
              height: 400px;
          }
          #choice{
              clear: both;
          }
          #intro,#map{
              box-sizing: border-box;
              width: 50%;
              float: left;
              margin: 0;
              height: 300px;
          }
      }

      @media screen and (min-width: 1024px){
          #container {
              width: 1000px;
              margin: 0 auto;
          }
          .photo{
              display: flex;
          }
          header{height: 450px;}
          #intro,#map,#choice{
              box-sizing: border-box;
              position: relative;
              margin: 0;
              height: 400px;
              width: 100%;
              padding: 15px 5%;
          }
          .photo{
              display: block;
              width: 40%;
              margin-top: 20px;
          }
          .content{
              margin: 80px auto 10px;
              width: 90%;
              padding: 20px;
          }

          #intro .photo, #map .photo {
              float: left;
              margin-right: 5%;
          }

          #choice .photo{
              float: right;
          }

          .text{
              width: 45%;
          }

          #intro .text, #map .text{
              float: right;
          }

          #choice .text{float: right;}

          #choice .photo img{
              border: 1px solid white;
              border-radius: 50%;
          }

          footer{
              clear: both;
          }
         
      }
      • 모바일모드

      • 탭 크기 모드

      pc모드

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

      (69)CSS_transition1  (0) 2023.04.04
      (68)CSS_transfrom  (0) 2023.04.04
      (66)CSS_기본문법  (0) 2023.04.04
      (65)CSS_미디어 쿼리 실전예제  (0) 2023.04.03
      (64)CSS_미디어 쿼리2  (0) 2023.04.03

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바