/*기본 CSS 설정*/
* { box-sizing: border-box; margin:0; padding:0; }
div { display:inline-block; }
body { background:#f1f1f1; color:#676767; font-family: "맑은 고딕", "Malgun Gothic", "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", Ngothic, sans-serif; }
a { text-decoration: underline; }
a:link, a:hover, a:visited, a:focus { color:inherit; text-decoration:none; }
.hidden { display: none; visibility: hidden; }
/* 사전 애니메이션 효과 설정, 삭제해도 기능*/
@-webkit-keyframes twinkle {
0% {
background: transparent; }
50% {
background: rgba(255, 255, 255, 0.3); }
100% {
background: transparent; }}
@-ms-keyframes twinkle {
0% {
background: transparent; }
50% {
background: rgba(255, 255, 255, 0.3); }
100% {
background: transparent; }}
@keyframes twinkle {
0% {
background: transparent; }
50% {
background: rgba(255, 255, 255, 0.3); }
100% {
background: transparent; }}
@-webkit-keyframes btn-border {
0% {
border-color: #77bfdd;
background-color: #bed8ea; }
50% {
border-color: #07a;
background-color: #cbddea; }
100% {
border-color: #77bfdd;
background-color: #bed8ea; } }
@-ms-keyframes btn-border {
0% {
border-color: #77bfdd;
background-color: #bed8ea; }
50% {
border-color: #07a;
background-color: #cbddea; }
100% {
border-color: #77bfdd;
background-color: #bed8ea; } }
@keyframes btn-border {
0% {
border-color: #77bfdd;
background-color: #bed8ea; }
50% {
border-color: #07a;
background-color: #cbddea; }
100% {
border-color: #77bfdd;
background-color: #bed8ea; } }
/* 디자인 CSS 바깥 부분 */
.wrap {
position:relative;
display:block;
width:100%;
height:100%;
font-size:14px;
max-width:800px;
max-height:453px;
margin:0 auto;
}
.item {
width:50%;
padding:5px;
float:left;
}
.inner {
background:#fff;
border:1px solid #a8a8a8;
padding:5px;
}
.item:hover .inner {
border-color:#07a;
}
/* 이미지 부분 디자인 */
.frame {
width:100%;
height:130px;
float: left;
overflow:hidden;
}
.link {
position:relative;
display: inline-block;
width: 100%;
height: 100%;
}
.link::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.item:hover .link::before {
-webkit-animation: twinkle 1s infinite;
-ms-animation: twinkle 1s infinite;
animation: twinkle 1s infinite;
}
.image {
display:inline-block;
width:100%;
height:100%;
background:#99c4e2;
}
/* 텍스트 부분 디자인 */
.text {
height:145px;
padding:10px;
overflow:hidden;
}
.text h3 {
display:inline-block;
width:100%;
height:40px;
line-height:30px;
padding: 5px 10px;
background: rgba(91, 192, 222, 0.1);
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.2);
color:#54616f;
font-size:19px;
overflow:hidden;
}
.description {
padding: 5px 10px;
font-size: 15px;
font-weight: 600;
line-height: 1.9;
letter-spacing: -1px;
}
/* UI 버튼 디자인 */
.wrap-ui {
width:100%;
}
.btn {
display: table;
width: 50%;
height: 50px;
float: left;
background: #f1f1f1;
text-align: center;
cursor: pointer;
padding:5px;
}
.btn_content {
display:table-cell;
width:100%;
height:100%;
color: #a8a8a8;
border: 1px solid #a8a8a8;
vertical-align: middle;
padding: 5px;
font-weight:600;
font-size:16px;
text-shadow: 1px 1px rgba(255,255,255,0.5);
}
/* UI 기능 구현 CSS */
/* 라벨 버튼이 활성화 되었을 때 버튼 디자인 */
input#type-grid[type=radio]:checked ~ .wrap-ui .grid .btn_content ,
input#type-webzine[type=radio]:checked ~ .wrap-ui .webzine .btn_content {
-webkit-animation: btn-border 1s infinite;/* 애니메이션 효과, 삭제해도 기능 */
-ms-animation: btn-border 1s infinite;/* 애니메이션 효과, 삭제해도 기능 */
animation: btn-border 1s infinite;/* 애니메이션 효과, 삭제해도 기능 */
color: #0f609a;
}
/* 라벨 버튼을 클릭하여 인풋을 클릭하였을 때, 각 박스의 넓이를 100% 까지 키움 */
input#type-webzine[type=radio]:checked ~ .item {
width:100%;
-webkit-transition-delay: 0.3s;/* 애니메이션 효과, 삭제해도 기능 */
transition-delay: 0.3s; /* 애니메이션 효과, 삭제해도 기능 */
}
/* 라벨 버튼을 클릭하여 인풋을 클릭하였을 때, 박스 안에 있는 이미지의 높이를 0으로 하여 화면에서 안보이도록 가림 */
input#type-webzine[type=radio]:checked ~ .item .frame {
height:0;
-webkit-transition-delay: 0s;/* 애니메이션 효과, 삭제해도 기능 */
transition-delay: 0s; /* 애니메이션 효과, 삭제해도 기능 */
}
/* 아래는 반드시 필요한 부분이 아닌 애니메이션 효과를 주기 위한 코드 */
.item {
-webkit-transition: width 0.3s ease;/* 애니메이션 효과, 삭제해도 기능 */
transition: width 0.3s ease;/* 애니메이션 효과, 삭제해도 기능 */
}
.frame {
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
-webkit-transition-delay: 0.3s;/* 애니메이션 효과, 삭제해도 기능 */
transition-delay: 0.3s;/* 애니메이션 효과, 삭제해도 기능 */
}
!
