메가박스 사이트 따라 만들기 - 새로운 영화 영역 2

megabox15

새로운 영화 영역 2

box-sizing: border-box;

조건 : width값이 50px / 마진 20px / 패딩 10px / 보더 1px
결과 : 총 width값 : 90px(패딩, 보더값 불포함)

결과

HTML

<section id="new">
  <div class="container">
    <div class="row">
      <div class="new">
        <h2>새로운 영화</h2>
        <div class="new_left">
          <div class="play">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120"
              style="enable-background:new 0 0 120 120;" xml:space="preserve">
              <circle class="st0" cx="60" cy="60.4" r="56" />
              <path class="st1"
                d="M81,65.4c4.8-2.8,4.8-7.2,0-10L53.5,39.6c-4.8-2.8-8.7-0.5-8.7,5v31.7c0,5.5,3.9,7.8,8.7,5L81,65.4z" />
            </svg>
          </div>
        </div>
        <div class="new_right">
          <h3 class="title">로그 원: 스타워즈 스토리</h3>
          <span class="release">2016년 10월 28일 개봉</span>
          <div class="star">
            <span class="icon star1"></span>
            <span class="icon star1"></span>
            <span class="icon star1"></span>
            <span class="icon star2"></span>
            <span class="icon star0"></span>
            <strong>7.5/10</strong>
          </div>
          <ul class="summary">
            <li class="genre"><span class="bar">액션</span><span>미국, 오스트레일리아</span></li>
            <li class="age"><span class="bar">142분</span><span>12세 이상 관람가</span></li>
            <li class="desc">단숨에 행성 하나를 파괴할 위력을 지닌 데스 스타가 완성되기 전에 설계도를 훔쳐내야 하는 이번 작전의 성공 확률은 고작 2.4%. 생사도 모르는 아버지에 얽힌
              비밀을 밝히려는 진을 ...비롯해 유능한 정보 요원 ‘카시안’(디에고 루나), 두 눈이 멀었지만 탁월한 무술 실력을 지닌 ‘치루트’(견자단), 전투 베테랑 ‘베이즈’, 파일럿 ‘보디’,
              시니컬한 드로이드 ‘K-2SO’까지 합류, 거대한 전쟁을 끝낼 ‘로그 원’이 이끄는 가장 비밀스런 작전이 시작되는데…</li>
          </ul>
          <div class="select">
            <div class="s1">
              <label for="udate" class="ir_so">날짜</label>
              <input type="text" id="udate" name="udate" value="2019년 1월 25일" class="ui_select2">
            </div>
            <div class="s2">
              <label for="utime" class="ir_so">시간</label>
              <select id="utime" name="utime" class="ui_select2">
                <option value="오전 0:00">오전 0:00</option>
                <option value="오전 1:00">오전 1:00</option>
                <option value="오전 2:00">오전 2:00</option>
                <option value="오전 3:00">오전 3:00</option>
                <option value="오전 4:00">오전 4:00</option>
                <option value="오전 5:00">오전 5:00</option>
                <option value="오전 6:00">오전 6:00</option>
                <option value="오전 7:00">오전 7:00</option>
                <option value="오전 8:00">오전 8:00</option>
                <option value="오전 9:00">오전 9:00</option>
                <option value="오전 10:00">오전 10:00</option>
                <option value="오전 11:00">오전 11:00</option>
                <option value="오전 12:00">오전 12:00</option>
                <option value="오후 1:00">오후 1:00</option>
                <option value="오후 2:00">오후 2:00</option>
                <option value="오후 3:00">오후 3:00</option>
                <option value="오후 4:00">오후 4:00</option>
                <option value="오후 5:00">오후 5:00</option>
                <option value="오후 6:00">오후 6:00</option>
                <option value="오후 7:00">오후 7:00</option>
                <option value="오후 8:00">오후 8:00</option>
                <option value="오후 9:00">오후 9:00</option>
                <option value="오후 10:00">오후 10:00</option>
                <option value="오후 11:00">오후 11:00</option>
                <option value="오후 12:00">오후 12:00</option>
              </select>
            </div>
            <div class="s3">
              <label for="utext" class="ir_so">주소 또는 도로명을 입력해주세요.</label>
              <input type="text" id="utext" name="utext" class="ui_input3" placeholder="주소 또는 도로명을 입력해주세요.">
            </div>
          </div>
          <div class="btn">
            <a href="" class="white">좌석확인</a>
            <a href="" class="purple">예매하기</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- //new -->

 

style.css

 

.new .new_right .title {
  font-size: 28px;
  color: #000;
}

.new .new_right .release {
  font-size: 12px;
  color: #333;
}

.new .new_right .star {
  padding: 13px 0;
}

.new .new_right .star strong {
  font-size: 15px;
  padding-left: 5px;
}

.new .new_right .star span {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -3px;
}

.new .new_right .star .star1 {
  background-position: -393px 0;
}

.new .new_right .star .star2 {
  background-position: -412px 0;
}

.new .new_right .star .star0 {
  background-position: -374px 0;
}

.new .new_right .summary {
  font-size: 14px;
}

.new .new_right .summary .genre {
  padding-bottom: 3px;
}

.new .new_right .summary .age {
  padding-bottom: 10px;
}

.new .new_right .summary .desc {
  margin-bottom: 20px;
  height: 108px;
  overflow: hidden;
}

.new .new_right .select {
  overflow: hidden;
}

.new .new_right .select .s1 {
  float: left;
  width: 49%;
  background: #000;
  margin-right: 2%;
}

.new .new_right .select .s2 {
  float: left;
  width: 49%;
  background: #000;
}

.new .new_right .select .s3 {
  float: left;
  width: 100%;
  margin-top: 2%;
}

.new .new_right .btn {
  overflow: hidden;
  margin-top: 2%;
  text-align: center;
}

.new .new_right .btn a {
  float: left;
  width: 49%;
  box-sizing: border-box;
  display: block;
  padding: 10px 30px 12px 30px;
}

.new .new_right .btn a.white {
  background: #fff;
  margin-right: 2%;
  color: #3a0e6a;
  border: 1px solid #3a0e6a;
}

.new .new_right .btn a.purple {
  background: #3a0e6a;
  color: #fff;
  border: 1px solid #6e40c4;
}

@media (max-width: 960px) {
  .new .new_left {
    margin-right: 0;
    height: 400px;
  }

  .new .new_right {
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 768px) {
  #new .row {
    padding: 0 24px;
  }

  .new {
    padding: 24px;
    background-color: #fff;
    margin-top: 24px;
  }

  .new h2 {
    font-size: 24px;
    font-weight: 700;
    height: 27px;
    margin-bottom: 20px;
    padding-bottom: 10px;
  }

  .new .new_right {
    padding: 24px;
  }
}

@media (max-width: 600px) {
  #new .row {
    padding: 0 8px;
  }

  .new {
    padding: 16px;
    margin-top: 8px;
  }

  .new h2 {
    font-size: 18px;
    margin-bottom: 0;
  }

  .new .new_left {
    height: 300px;
  }

  .new .new_right {
    padding: 17px;
  }

  .new .new_right .title {
    font-size: 22px;
  }

  .new .new_right .star {
    padding: 9px 0;
  }

  .new .new_right .select .s1 {
    width: 100%;
    margin-right: 0;
    margin-bottom: 2%;
  }

  .new .new_right .select .s2 {
    width: 100%;
  }
}

 

reset.css

 

/* input style */
input {
  background-image: none;
}

input[type=button],
input[type=reset],
input[type=text],
input[type=password],
input[type=submit],
input[type=search],
input[type=tel],
input[type=email] {
  -webkit-appearance: none;
  border-radius: 0
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

input:checked[type=checkbox] {
  background-color: #666;
  -webkit-appearance: checkbox
}

/* 셀렉트 메뉴 메인 스타일 */
.ui_select2 {
  width: 100%;
  box-sizing: border-box;
  background: #2c2f34;
  color: #fff;
  display: inline-block;
  height: 36px;
  border: 0 none;
  padding: 0 10px;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
  background: #2c2f34 url(../img/down.svg) no-repeat right 10px center;
  background-size: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* 메인 텍스트 박스 스타일1 */
.ui_input3 {
  background: #2c2f34;
  color: #fff;
  border: 0;
  width: 100%;
  height: 36px;
  padding: 0 10px;
}

 

출력