영화 예고편 페이지 제작하기
지금까지 배운 flex와 position을 이용해서 간단한 '영화 예고편' 페이지를 만들어 보았다. 마지막 이미지의 '최초' 타이틀과 세 번째 이미지의 'HD'박스는 일부러 제외하였다. 기초연습용으로 태그를 익히기 좋은 예제이다.
헷갈렸던 부분
- HTML 구성 - 4개의 list를 구성하고, 그 자식으로 a태그를 넣고 그 안에 다시 list를 넣어 pht(재생버튼/최초타이틀)/title(HD)/tip 로 구성한다.
- 이미지는 CSS에서 삽입 후 스타일을 지정한다.
HTML / CSS 코드 👇
<body>
<div id="wrap">
<header>
<h1>개봉예정작</h1>
</header>
<section>
<h2>예고편</h2>
<ul>
<li>
<a href="#">
<ol>
<li class="pht">
<span>동영상보기</span>
<span>최초</span>
</li>
<li class="tit">
<span>HD</span>영화 1</li>
<li class="tip">티저 예고편</li>
</ol>
</a>
</li>
<li>
<a href="#">
<ol>
<li class="pht">
<span>동영상보기</span>
<span>최초</span>
</li>
<li class="tit">
<span>HD</span>영화 2</li>
<li class="tip">메인 예고편</li>
</ol>
</a>
</li>
<li>
<a href="#">
<ol>
<li class="pht">
<span>동영상보기</span>
<span>최초</span>
</li>
<li class="tit">영화 3</li>
<li class="tip">메인 예고편 2</li>
</ol>
</a>
</li>
<li>
<a href="#">
<ol>
<li class="pht">
<span>동영상보기</span>
</li>
<li class="tit">
<span>HD</span>영화 4</li>
<li class="tip">촬영장 비하인드</li>
</ol>
</a>
</li>
</ul>
</section>
<footer>
© Designed by Roong
</footer>
</div>
의미와 가치를 쫓는 개발자 ✨