상세 컨텐츠

본문 제목

7월 15일_HTML&CSS(프로젝트수행)

CLASS_HTML&CSS

by awesong 2024. 7. 16. 09:29

본문

728x90

# 자유주제 홈페이지 만들기

 

 

*HTML

HTMl

<body>
  <div id="container">
  <header>
  <nav>
    <ul id="main-nav">
      <li><a href="#movie">MOVIE</a></li>					
      <li><a href="#theater">THEATER</a></li>
      <li><a href="#ticket">TICKET</a></li>
      <li><a href="#store">STORE</a></li>
      <li><a href="#event">EVENT</a></li>
      <li><a href="#advantage">BENEFIT</a></li>
    </ul>
  </nav>
  </header>
  
  <section id="movie">
    <div class="page-title">
      <h1>개봉예정작</h1>
    </div>
    <div class="content">
      <div class="photo">
        <img src="images/포스터.jpg" alt="포스터">
    </div>
    <div class="text">
      <p> <span class="bold"> 데드풀과 울버린 (DEADPOOL & WOLVERIN) </span><br> 
      감독 : 숀 레비 <br> 배우 : 라이언 레이놀즈 ,  휴 잭맨 ,  엠마 코린 <br> 
      장르 : 액션, 코미디, SF <br> 
      개봉 : 2024.07.24 </p>
    </div>
    </div>
  </section>

  <section id="theater">
    <div class="page-title">
      <h1>극장안내</h1>
    </div>
    <div class="content">
      <div class="photo">
        <img src="images/극장안내.jpg" alt="극장">
    </div>
    <div class="text">
      <p> <span class="bold">CGV 강남</span> <br>
      서울특별시 강남구 역삼동 814-6 스타플렉스<br>
      1544-1122 <br>
      6관 / 874석 </p>
    </div>
    </div>
  </section>

  <section id="ticket">
    <div class="page-title">
      <h1>예매하기</h1>
    </div>
    <div class="content">
      <div class="photo">
        <img src="images/티켓.jpg" alt="티켓">
    </div>
    <div class="text">
      <p class="button"><span class="bold2">상영작 예매하기 </span></p>
    </div>
    </div>
  </section>

  <section id="store">
    <div class="page-title">
      <h1>스토어</h1>
    </div>
    <div class="content">
      <div class="photo">
        <img src="images/스토어.jpg" alt="팝콘">
    </div>
    <div class="text">
      <p> <span class="bold">라지 콤보 </span><br>
      팝콘(L)2 + 탄산음료(L)2 <br>
      16,000원 </p>
    </div>
    </div>
  </section>

  <section id="event">
    <div class="page-title">
      <h1>이벤트</h1>
    </div>
    <div class="content">
      <div class="photo">
        <img src="images/이벤트.jpg" alt="아이맥스">
    </div>
    <div class="text">
      <p> <span class="bold">최/초/상/영 IMAX 시사회</span> <br>
      CGV ONLY <br>
      기대작 <데드풀과 울버린>을 IMAX로 누구보다 먼저 만나는 기회!! <br>
      CGV 회원 여러분을 초대합니다 </p>
    </div>
    </div>
  </section>

  <section id="advantage">
    <div class="page-title">
      <h1>혜택</h1>
    </div>
    <div class="content">
      <div class="photo">
        <img src="images/혜택.jpg" alt="혜택">
    </div>
    <div class="text">
      <p> <span class="bold">CGV에서 신세계포인트로 영화보자! </span><br>
      영화 예매 시 500P 단위 사용 <br>
      결제금액 0.1% 적립까지 </p>
    </div>
    </div>
  </section>

  <footer>
    <p>(04377)서울특별시 용산구 한강대로 23길 55, 아이파크몰 6층(한강로동)<br>
      대표이사 : 허민회 . 사업자등록번호 : 104-81-45690 . 통신판매업신고번호 2017-서울용산-0662  <br>
      사업자정보확인 : 호스팅사업자 : CJ올리브네트웍스 . 개인정보보호 책임자 : 도형구  <br>
      대표이메일 : cjcgvmaster@cj.net  © CJ CGV. All Rights Reserved</p>
  </footer>
  </div>
</body>
</html>

 

 

*CSS

<style>
    @font-face {
    font-family: 'MoveSans-Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2405-2@1.0/MoveSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    }
    @font-face {
    font-family: 'HSSanTokki20-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2405@1.0/HSSanTokki20-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    }
    @font-face {
    font-family: 'Freesentation-9Black';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-9Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #fff;
    }
    a {
      font-family: 'MoveSans-Bold';
      text-decoration: none;
      font-weight: bolder;
    }
    nav a:link, a:visited {
      color: #000;
    }
    h1 {
      font-size: 1.8em;
      font-family: 'HSSanTokki20-Regular';
      color: rgb(255, 30, 0);
    }
    p, li {
      font-size:  1em;
      line-height: 2em;
      font-family: 'Freesentation-9Black';
    }
    nav {
      height: 80px;
      background-color: rgba(225, 225, 225, 0.5);
    }
    #main-nav {
      list-style: none;
      text-align: center;
      margin: 0 auto;
    }
    #main-nav li {
      display: inline-block;
      color: #000;
      line-height: 80px;
      margin: 0 65px;
    }
    #container {
      margin: 0 auto;
      display: grid;
      grid-column: 1/2;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      grid-template-areas: 
        "header header"
        "movie movie"
        "theater theater"
        "ticket ticket"
        "store store"
        "event event"
        "advantage advantage"
        "footer footer";
    }
    header {
      grid-area: header;
      width: 100%;
      height: 800px;
      background: url("images/메인.jpg") no-repeat center;
      background-size: cover;
    }
    #movie .photo, #theater .photo, #ticket .photo, #store .photo, #event .photo, #advantage .photo {
      float: left;
    }
    img {
      width: 350px;
      height: 233px;
    }
    
    #container section:nth-child(odd) {
      background-color: #eee;
    }
    #movie {
      grid-area: movie;
      width: 100%;
      padding: 30px 10% 5px 10%;
      height: 500px;
    }
    #theater {
      grid-area: theater;
      width: 100%;
      padding: 30px 10% 5px 10%;
      height: 500px;
    }
    #ticket {
      grid-area: ticket;
      width: 100%;
      padding: 30px 10% 5px 10%;
      height: 500px;
    }
    .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ff7300;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 10px;
    }

    .button:hover {
      background-color: #0056b3;
    }
    #store {
      grid-area: store;
      width: 100%;
      padding: 30px 10% 5px 10%;
      height: 500px;
    }
    #event {
      grid-area: event;
      width: 100%;
      padding: 30px 10% 5px 10%;
      height: 500px;
    }
    #advantage {
      grid-area: advantage;
      width: 100%;
      padding: 30px 10% 5px 10%;
      height: 500px;
    }
    footer {
      grid-area: footer;
      width: 100%;
      height: 200px;
      background-color: #000;
      clear: both;
      text-align: left;
      color: #fff;
    }
    footer p {
      font-size: 12px;
      margin-left: 200px;
      padding: 30px;
    }
    .page-title {
      top: 20px;
      left: 0;
      padding: 30px 50px;
    }
    .page-title h1 {
      margin-bottom: 30px;
    }
    .content {
      margin: 10px auto;
      width: 95%;
      padding: 20px;
    }
    .bold {
      font-size: 1.3em;
      color: orangered;
    }
    .bold2 {
      font-size: 1.3em;
      color: white;
    }
    .photo {
      margin-right: 50px;
    }
    @media screen and (max-width: 768px) {
      #container {
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
          "header"
          "movie"
          "theater"
          "ticket"
          "store"
          "event"
          "advantage"
          "footer";
      }
      header {
        height: 300px;
        grid-column: 1 / 2;
      }
      #movie, #theater, #ticket, #store, #event, #advantage {
        height: auto;
        font-size: 80%;
      }
      .photo {
        display: none;
      }
      .text {
        text-align: center;
        padding-left: 20%;
      }
      .content {
        padding-top: 0;
      }
      a {
        font-size: 25%;
      }
      li {
        margin: 0 auto;
        padding: 0;
      }
      h1 {
        text-align: center;
      }
      .text {
        text-align: center;
        padding-left: 0%;
      }
      nav {
      height: 40px;
      background-color: rgba(225, 225, 225, 0.5);
      }
      #main-nav {
      list-style: none;
      text-align: center;
      margin: 0 auto;
      }
      #main-nav li {
        display: inline-block;
        color: #000;
        line-height: 40px;
        margin: 0 10px;
      }
    }


  </style>

 

 

movieweb.html
0.01MB

 

 

저작자표시 비영리 동일조건

'CLASS_HTML&CSS' 카테고리의 다른 글

7월 12일_CSS(flex-box배치 , 고정형& 가변형 그리드)  (0) 2024.07.12
7월 11일_CSS(트랜지션 속성, 기능, 반응형 웹, 미디어쿼리)  (0) 2024.07.11
7월 10일_CSS(선택자, 자식요소, 트래지션)  (0) 2024.07.10
7월 9일_CSS(그라데이션, 속성 선택자, 가상클래스)  (0) 2024.07.09
7월 8일_CSS(float 속성, 요소 위치, 시멘틱태그언어)  (0) 2024.07.08

관련글 더보기

티스토리툴바