공지사항

메가박스 사이트 만들기

동영상 보며 코딩하기 -메가박스 사이트 만들기 

web's 동영상 바로가기

열다섯번째 강의 : 공지사항

<section id="help">
        <div class="container">
            <div class="row">
                <div class="help clearfix">
                    <article class="help_box1">
                        <h3>공지사항</h3>
                        <div class="notice">
                            <ul>
                                <li class="active"><a href="#">전체공지</a>
                                    <ul>
                                        <li>
                                            <dl>
                                                <dt><strong class="bar">전체</strong><em>2019.05.28</em></dt>
                                                <dd>[무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브쇼</dd>
                                            </dl>
                                        </li>
                                        <li>
                                            <dl>
                                                <dt><strong class="bar">전체</strong><em>2019.05.24</em></dt>
                                                <dd>[무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브쇼</dd>
                                            </dl>
                                        </li>
                                        <li>
                                            <dl>
                                                <dt><strong class="bar">전체</strong><em>2019.05.25</em></dt>
                                                <dd>[무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브쇼</dd>
                                            </dl>
                                        </li>
                                        <li>
                                            <dl>
                                                <dt><strong class="bar">전체</strong><em>2019.05.22</em></dt>
                                                <dd>[무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브쇼</dd>
                                            </dl>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#">영화관 공지</a>
                                    <ul style="display: none">
                                        <li>
                                            <dl>
                                                <dt><strong class="bar">안양</strong><em>2019.05.28</em></dt>
                                                <dd>[영화인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브쇼</dd>
                                            </dl>
                                        </li>
                                        <li>
                                            <dl>
                                                <dt><strong class="bar">인덕원</strong><em>2019.05.21</em></dt>
                                                <dd>[영화인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브쇼</dd>
                                            </dl>
                                        </li>
                                        <li>
                                            <dl>
                                                <dt><strong class="bar">서울</strong><em>2019.05.27</em></dt>
                                                <dd>[영화인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브쇼</dd>
                                            </dl>
                                        </li>
                                        <li>
                                            <dl>
                                                <dt><strong class="bar">전체</strong><em>2019.05.23</em></dt>
                                                <dd>[영화인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브쇼</dd>
                                            </dl>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </article>
                    <article class="help_box2">a</article>
                    <article class="help_box3">a</article>
                </div>
            </div>
        </div>
    </section>

 

/* help */
.help {overflow: hidden; padding-bottom: 200px;}
.help article {float: left; width: 32%; margin-right: 2%; height: 350px;}
.help article > div {border: 1px solid #dbdbdb; height: 350px; }
.help article.help_box3 {margin-right: 0;}
.help article h3 {font-size: 30px; font-weight: 500; margin-bottom: 20px;}

/* 공지사항 */
.notice {position: relative; padding: 17px;}
.notice ul {overflow: hidden;}
.notice ul li {float: left; text-align: center; margin-right: -1px;}
.notice ul li a {border: 1px solid #dbdbdb; font-size: 15px; color: #666; display: block; width: 80px; padding: 10px 20px; background-color: #f5f5f5;}
.notice ul li.active a {background-color: #fff;}
.notice ul li ul {position: absolute; left: 17px; top: 70px; width: 90%;}
.notice ul li ul li {width: 100%; box-sizing: border-box; text-align: left; padding: 17px; border-bottom: 1px solid #dbdbdb; }
.notice ul li ul li:last-child {border-bottom: 0;}
.notice ul li ul li dt em {color: #999;}
.notice ul li ul li dt .bar {position: relative; padding-right: 10px;}
.notice ul li ul li dt .bar:after {content: ''; position: absolute; right: 4px; top: 5px; width: 1px; height: 10px; background: #999;}
.notice ul li ul li dd {color: #777; padding-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}