메가박스 사이트 따라 만들기 - 메가박스 할인카드

megabox17

메가박스 할인카드

min-height

영역이 없을 경우 min-height값을 줘서 영역을 잡아줍니다.

 

결과

HTML

<article class="help_box2">
  <h3>메가박스 할인카드</h3>
  <div class="card">
    <ul>
      <li>
        <a href="#">
          <span><img src="assets/img/card01.jpg" srcset="assets/img/card01@2.jpg 2x" alt="card01"></span>
          <strong>T멤버십 일반</strong>
          <em>영화 2,000원 현장 즉시 할인(1일 5매)</em>
        </a>
      </li>
      <li>
        <a href="#">
          <span><img src="assets/img/card02.jpg" srcset="assets/img/card02@2.jpg 2x" alt="card01"></span>
          <strong>T멤버십 일반</strong>
          <em>영화 2,000원 현장 즉시 할인(1일 5매)</em>
        </a>
      </li>
      <li>
        <a href="#">
          <span><img src="assets/img/card03.jpg" srcset="assets/img/card03@2.jpg 2x" alt="card01"></span>
          <strong>T멤버십 일반</strong>
          <em>영화 2,000원 현장 즉시 할인(1일 5매)</em>
        </a>
      </li>
    </ul>
  </div>
</article>

 

style.css

/* 할인카드 */
.card {
  padding: 17px;
}

.card ul {}

.card ul li {
  position: relative;
  border: 1px solid #d7d7d7;
  padding: 17px;
  margin-bottom: 17px;
  min-height: 102px;
  box-sizing: border-box;
}

.card ul li span {
  position: absolute;
  left: 17px;
  top: 17px;
}

.card ul li span img {
  width: 105px;
}

.card ul li strong {
  display: block;
  font-size: 18px;
  color: #777;
  padding-left: 120px;
}

.card ul li em {
  display: block;
  font-size: 14px;
  color: #777;
  font-weight: 300;
  padding-left: 120px;
}

 

출력