HTML

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>이벤트</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"
  <meta http-equiv="X-UA-Compatible"content="ie=edge"
  <link rel="stylesheet" href="../silsuep2/css/silsuep2.css">
  <link rel="stylesheet" href="../silsuep2/css/default.css">

</head>


  <div class="event_list">
    <ul>
      <li>
        <a href="">
          <div class="img"><img src="../silsuep2/imges/가로.png" alt=""></div>
          <em>마감</em>
            <div class="info">
               <strong>타쿠대디 공식 블로그 방문자 200만이 되었습니다.</strong>
              <p>
              <span>이벤트기간</span>
              2020.05.07~2020.05.30
              </p>
            </div>
         </a>
      </li>

      <li>
        <a href="">
          <div class="img"><img src="../silsuep2/imges/가로.png" alt=""></div>
          <em>마감</em>
            <div class="info">
               <strong>타쿠대디 공식 블로그 방문자 200만이 되었습니다.</strong>
              <p>
              <span>이벤트기간</span>
              2020.05.07~2020.05.30
              </p>
            </div>
         </a>
      </li>

      <li>
        <a href="">
          <div class="img"><img src="../silsuep2/imges/타쿠-1.jpg" alt=""></div>

            <div class="info">
               <strong>타쿠대디 공식 블로그 방문자 200만이 되었습니다.</strong>
              <p>
              <span>이벤트기간</span>
              2020.05.07~2020.05.30
              </p>
            </div>
         </a>
      </li>

      <li>
        <a href="">
          <div class="img"><img src="../silsuep2/imges/가로.png" alt=""></div>
          <em>마감</em>
            <div class="info">
               <strong>타쿠대디 공식 블로그 방문자 200만이 되었습니다.</strong>
              <p>
              <span>이벤트기간</span>
              2020.05.07~2020.05.30
              </p>
            </div>
         </a>
      </li>

      <li>
        <a href="">
          <div class="img"><img src="../silsuep2/imges/가로.png" alt=""></div>
          <em>마감</em>
            <div class="info">
               <strong>타쿠대디 공식 블로그 방문자 200만이 되었습니다.</strong>
              <p>
              <span>이벤트기간</span>
              2020.05.07~2020.05.30
              </p>
            </div>
         </a>
      </li>

      <li>
        <a href="">
          <div class="img"><img src="../silsuep2/타쿠.jpg" alt=""></div>
          <em>마감</em>
            <div class="info">
               <strong>타쿠대디 공식 블로그 방문자 200만이 되었습니다.</strong>
              <p>
              <span>이벤트기간</span>
              2020.05.07~2020.05.30
              </p>
            </div>
         </a>
      </li>
    </ul>
  </div>

<div class="paging">
      <ul>
        <li class="first"><a href=""><span class="hide">맨처음으로</span></a></li>
        <li class="prev"><a href=""><span class="hide">이전페이지</span></a></li>
        <li><a href="" class="on">1</a></li>
        <li><a href="">2</a></li>
        <li class="next"><a href=""><span class="hide">다음페이지</span></a></li>
        <li class="last"><a href=""><span class="hide">마지막페이지</span></a></li>
      </ul>
</div>

<div class="search">
   <select>
      <option>제목</option>
   </select>
   <input type="search">
   <button>검색</button>
</div>


</body>


</html>

 

 

 

CSS


body {padding: 50px;}
.event_list {width : 1196px;}
.event_list ul { display: flex; flex-flow: row wrap;}
.event_list li { flex: 0 1 25%; padding: 0 0 34px; }

.event_list li a { display: block; position:relative; line-height: 1; width: 271px; height: 382px;
    border: 1px solid #ddd;  }
.event_list li a .img { overflow: hidden; position:relative; width: 271px; height: 272px; border-bottom: 1px solid #ddd;}
.event_list li a .img img { position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);}

.event_list li a .info { padding: 29px 10px 0;}
.event_list li a .info strong { display: block; overflow: hidden; width:100%; white-space: nowrap; text-overflow: ellipsis; font-size:18px; color:#222;} /* 줄내림 없이 한줄로 쓰고싶을때 공식*/
.event_list li a p { padding: 20px 0 0; font-size: 13px; color:#888;}
.event_list li a p span { color:#ed1846, font-size: 15px;}
.event_list li a em { position: absolute; right: 9px; top:9px; z-index: 2;
  width: 60px; height: 60px; background: rgba(0,0,0,0.5); color:#fff;
  text-align: center; line-height:60px;  border-radius: 100%;}


.paging { padding: 28px 0 60px;}
.paging ul { display: flex; justify-content: center; }
.paging a { display: block; width: 42px; height: 42px; text-align: center; line-height: 42px;
       font-size: 15px; color:#555;}
.paging li { margin: 0 7px;}
.paging .first { background: url(../silsuep2/imges/prev-first.png) no-repeat center; margin: 0 16px 0 0;}
.paging .prev { background: url(../silsuep2/imges/paging-prev.png) no-repeat center; margin: 0 6px 0 0;}
.paging .next { background: url(../silsuep2/imges/paging-next.png) no-repeat center; margin: 0 0 0 6px;}
.paging .last { background: url(../silsuep2/imges/next-last.png) no-repeat center; margin: 0 0 0 16px;}

.paging a:hover,
.paging a.on { background: #ed1846; color:#fff;}

.paging .first a:hover,
.paging .prev a:hover,
.paging .next a:hover,
.paging .last a:hover { background: none;}


.search { padding: 20px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
  text-align: center; font-size:0;}

.search * {margin: 0 5px; height: 53px; border: 1px solid #ccc;}
.search select {width: 148px; }
.search input { width: 258px; }
.search button { width: 150px; border: none; background: #ed1846; color: #fff;}

 

 

 

728x90
저작자표시

'프로젝트 및 실습 > 웹 따라 만들기' 카테고리의 다른 글

실무실습) 탭 메뉴 만들기  (0) 2020.05.17
실무실습) 간단한 카테고리 만들기  (0) 2020.05.15
실무실습) 조직도 만들기  (0) 2020.05.13
실무실습) 로그인 페이지 만들기  (0) 2020.05.12
실무실습) 연혁표 만들기  (2) 2020.05.07

+ Recent posts

티스토리툴바