HTML과 CSS만으로 만든 카드 레이아웃입니다.
게시물 내용이 감춰져있고 마우스를 올렸을 때 카드의 바디 부분이 위로 올라가면서 내용이 보이게 됩니다.
저는 여행지에서 동행을 찾기 위한 게시물을 이렇게 카드형으로 나타냈는데요,
아래에 전체 코드가 있으니 입맛에 맞게 고쳐쓰시면 되겠습니다.
[CSS + HTML]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<title>Insert title here</title>
<style>
html, body, div, span, applet, object, iframes, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, quotes, code, del,
dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, u,
i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
do: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section {
display: block;
}
blockquote, q {
quotes: none;
}
blockquote : before, blockquote : after, q : before, q : after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*css 초기화*/
.card {
height: 400px;
width: 350px;
border-radius: 15px;
display: inline-block;
margin-top: 30px;
margin-left: 30px;
margin-bottom: 30px;
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
overflow: hidden;
}
.card-header {
-webkit-transition: 0.5s; /*사파리 & 크롬*/
-moz-transition: 0.5s; /*파이어폭스*/
-ms-transition: 0.5s; /*인터넷 익스플로러*/
-o-transition: 0.5s; /*오페라*/
transition: 0.5s;
width: 100%;
height: 270px;
border-radius: 15px 15px 0 0;
background-image: url("images/korea.jpeg");
background-size: 100% 280px;
background-repeat: no-repeat;
}
.card:hover .card-header {
opacity: 0.8;
height: 100px;
}
.card-header-is_closed{
background-color: #EF5A31 ;
color: #FFF ;
font-weight: bold ;
text-align: center ;
float: right;
margin: 15px 15px 0 0;
border-radius: 50%;
font-weight: bold;
padding: 10px 10px;
line-height: 20px;
}
h1 {
font-size: 22px;
font-weight: bold;
}
.card-body {
}
.card-body-header{
line-height: 25px;
margin: 10px 20px 0px 20px;
}
.card-body-description {
opacity: 0;
color: #757B82;
line-height: 25px;
-webkit-transition: .2s ease-in-out; /*사파리&크롬*/
-moz-transition: .2s ease-in-out; /*파이어폭스*/
-ms-transition: .2s ease-in-out; /*익스플로러*/
-o-transition: .2s ease-in-out; /*오페라*/
transition : .2s ease-in-out;
overflow: hidden;
height: 180px;
margin: 5px 20px;
}
.card:hover .card-body-description {
opacity: 1;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-ms-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition : .5s ease-in-out;
overflow: scroll;
}
.card-body-hashtag {
color: #2478FF;
font-style: italic;
}
.card-body-footer {
position: absolute;
margin-top: 15px;
margin-bottom: 6px;
bottom: 0;
width: 314px;
font-size: 14px;
color: #9FA5A8;
padding: 0 15px;
}
.icon {
display: inline-block;
vertical-align: middle;
margin-right: 2px;
}
.icon-view_count {
width: 25px;
height: 17px;
background: url("images/eye.jpg") no-repeat;
}
.icon-comments_count {
margin-left: 5px;
width: 25px;
height: 17px;
background: url("images/comment.jpg") no-repeat;
}
.reg_date {
float: right;
}
</style>
</head>
<body>
<a href=""> <!-- 클릭 시 링크 설정 -->
<div class="card">
<!-- 카드 헤더 -->
<div class="card-header" >
<div class = "card-header-is_closed" >
<div class = "card-header-text" > 모집중 </div >
<div class = "card-header-number" > 2 / 5 </div >
</div >
</div>
<!-- 카드 바디 -->
<div class="card-body">
<!-- 카드 바디 헤더 -->
<div class="card-body-header">
<h1>4월 15일 순천만 동행구해요!</h1>
<p class="card-body-hashtag">#여수 #순천 #광양</p>
<p class = "card-body-nickname">
작성자: ENDORPHIN0710
</p>
</div>
<p class="card-body-description">
안녕하세요!
4월 15일 순천만 동행구합니다!
</p>
<!-- 카드 바디 본문 -->
<!-- 카드 바디 푸터 -->
<div class="card-body-footer">
<hr style="margin-bottom: 8px; opacity: 0.5; border-color: #EF5A31">
<i class="icon icon-view_count"></i>조회 38회
<i class="icon icon-comments_count"></i>댓글 4개
<i class="reg_date"> 2018/04/12 </i>
</div>
</div>
</div>
</a>
</body>
</html>
'PROGRAMMING > HTML & CSS' 카테고리의 다른 글
| 키보드 입력과 확인 + 로딩화면 (0) | 2018.05.20 |
|---|---|
| 폼(FORM)안에서 버튼 클릭시 자동으로 제출(SUBMIT)되는 문제 (0) | 2018.04.23 |
| 너비(width)에 패딩(padding)도 포함이 되나요? (0) | 2018.04.15 |
| 토글버튼(toggle button) + 로그인 폼(login form) (0) | 2018.03.24 |
| 이클립스에서 웹프로젝트 실행할 웹브라우저 설정하기 (0) | 2018.03.01 |