학습내용
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>네이버</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header id="blog-header">
<div class="blog-header-top">
<div class="blog-container">
<div class="blog-header-left">
<h2><a href="#">블로그</a></h2>
<div class="blog-header-input-wrap">
<div class="blog-search-wrap">
<input type="text">
<button type="button" class="btn-search"></button>
</div>
<button class="btn-total-search">통합 검색</button>
</div>
</div>
<div class="blog-header-right">
<a href="#" class="btn-login">로그인</a>
<button type="button" class="btn-menu"></button>
</div>
</div>
</div>
<div class="blog-header-nav">
<div class="blog-container">
<nav class="nav-left">
<ul>
<li class="on"><a href="#">블로그 홈</a></li>
<li><a href="#">주제별 보기</a></li>
<li><a href="#">이달의 블로그</a></li>
<li><a href="#">공식 블로그</a></li>
<li><a href="#">첼린지 프로그램</a></li>
</ul>
</nav>
<nav class="nav-right">
<ul>
<li class="on"><a href="#">블로그 마켓 가입</a></li>
<li><a href="#">아이템 팩토리</a></li>
<li><a href="#">블로그팀 공식블로그</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main role="main" class="blog-main">
<div id="hot-topic">
<div class="blog-container">
<div class="hot-topic-left">
<div class="topic-heading">
<h3>핫토픽</h3>
<i></i>
<a href="#">다꾸를 해요</a>
</div>
<ul class="topic-lists">
<li>
<img src="https://via.placeholder.com/252x240">
<p>동해물과 백두산이 마르고 닳도록</p>
</li>
<li>
<img src="https://via.placeholder.com/252x240">
<p>동해물과 백두산이 마르고 닳도록</p>
</li>
<li>
<img src="https://via.placeholder.com/252x240">
<p>동해물과 백두산이 마르고 닳도록</p>
</li>
</ul>
<div class="pagination-wrap">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
</div>
<div class="hot-topic-right">
<div class="topic-banner"></div>
<div class="pagination-wrap">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
</div>
</div>
</div>
<div id="blog-main-content" class="blog-container">
<div class="blog-main-left">
<div id="blog-main-notification">
<p>
로그아웃 상태입니다.<br>
로그인하여 이웃 새글을 확인해보세요.
</p>
</div>
<div id="blog-article">
<nav class="blog-article-nav">
<ul>
<li><a href="#">전체</a></li>
<li><a href="#">음악</a></li>
<li><a href="#">사진</a></li>
<li><a href="#">취미</a></li>
</ul>
</nav>
<ul class="blog-article-lists">
<li>
<a href="#">
<div class="blog-article-info">
<div class="blog-profile-wrap">
<img src="https://via.placeholder.com/32x32">
<div class="blog-profile-info">
<h3>Jim</h3>
<p>13시간 전</p>
</div>
</div>
<h2>Title 1</h2>
<p class="paragraph">
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
</p>
<div class="comments">
<span>공감<em>46</em></span>
<span>댓글<em>11</em></span>
</div>
</div>
<img src="https://via.placeholder.com/167x167">
</a>
</li>
<li>
<a href="#">
<div class="blog-article-info">
<div class="blog-profile-wrap">
<img src="https://via.placeholder.com/32x32">
<div class="blog-profile-info">
<h3>Jim</h3>
<p>13시간 전</p>
</div>
</div>
<h2>Title 1</h2>
<p class="paragraph">
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
</p>
<div class="comments">
<span>공감<em>46</em></span>
<span>댓글<em>11</em></span>
</div>
</div>
<img src="https://via.placeholder.com/167x167">
</a>
</li>
<li>
<a href="#">
<div class="blog-article-info">
<div class="blog-profile-wrap">
<img src="https://via.placeholder.com/32x32">
<div class="blog-profile-info">
<h3>Jim</h3>
<p>13시간 전</p>
</div>
</div>
<h2>Title 1</h2>
<p class="paragraph">
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
</p>
<div class="comments">
<span>공감<em>46</em></span>
<span>댓글<em>11</em></span>
</div>
</div>
<img src="https://via.placeholder.com/167x167">
</a>
</li>
<li>
<a href="#">
<div class="blog-article-info">
<div class="blog-profile-wrap">
<img src="https://via.placeholder.com/32x32">
<div class="blog-profile-info">
<h3>Jim</h3>
<p>13시간 전</p>
</div>
</div>
<h2>Title 1</h2>
<p class="paragraph">
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
</p>
<div class="comments">
<span>공감<em>46</em></span>
<span>댓글<em>11</em></span>
</div>
</div>
<img src="https://via.placeholder.com/167x167">
</a>
</li>
</ul>
</div>
</div>
<div class="blog-main-right">
</div>
</div>
</main>
</body>
</html>CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
img {
vertical-align: middle;
}
.clearfix {
clear: both;
}
body {
overflow-x: hidden;
}
button {
border: none;
background-color: transparent;
cursor: pointer;
}
input, textarea {
outline: none;
}
.container {
width: 1130px;
margin: 0 auto;
}
#main-header {
position: relative;
background-color: #fff;
}
#main-header .search-area {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 160px;
background-color: #ffffff;
border-bottom: solid 1px #e4e8eb;
}
#main-header .search-area .search-wrap {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 582px;
height: 52px;
border: solid 2px #19ce60;
}
#main-header .search-area .search-wrap input {
width: calc(100% - 52px);
height: 100%;
padding: 13px 15px;
border: none;
font-size: 22px;
}
#main-header .search-area .search-wrap input:focus {
outline: none;
}
#main-header .search-area .search-wrap button {
width: 52px;
height: 100%;
background-color: #19ce60;
}
#main-header #navbar {
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}
#main-header #navbar ul {
padding: 11px 0;
}
#main-header #navbar ul li {
display: inline-block;
margin-right: 5px;
}
#main-header #navbar ul li a {
color: #03c75a;
font-size: 15px;
font-weight: 700;
}
main {
overflow:hidden;
padding-top: 20px;
}
main #main-left {
float: left;
width: 750px;
/* height: 2000px;
background-color: yellow; */
}
main #main-right {
float: right;
width: 350px;
/* height: 2000px;
background-color: pink; */
}
/* 왼쪽 */
main #main-left #banner-wrap{
width: 750px;
height: 135px;
background-color: purple;
margin-bottom: 12px;
}
main #main-left #news-wrap .news-header{
padding: 22px 0 16px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
main #main-left #news-wrap .news-header h2 {
font-size: 18px;
font-weight: 700;
}
main #main-left #news-wrap .news-header .news-btn-wrap {
width: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
main #main-left #news-wrap .news-header .news-btn-wrap button {
width: 15px;
height: 15px;
background-color: red;
}
main #main-left #news-wrap .news-lists {
overflow:hidden;
border: 1px solid #dae1e6;
}
main #main-left #news-wrap .news-lists .news-list {
position: relative;
float: left;
width: 16.66%;
height: 65px;
background-color: #ffffff;
padding: 0;
border-bottom: solid 1px #e4e8eb;
border-right: solid 1px #e4e8eb;
text-align: center;
}
main #main-left #news-wrap .news-lists .news-list:nth-child(6n) {
border-right: none;
}
main #main-left #news-wrap .news-lists .news-list:nth-child(19),
main #main-left #news-wrap .news-lists .news-list:nth-child(20),
main #main-left #news-wrap .news-lists .news-list:nth-child(21),
main #main-left #news-wrap .news-lists .news-list:nth-child(22),
main #main-left #news-wrap .news-lists .news-list:nth-child(23),
main #main-left #news-wrap .news-lists .news-list:nth-child(24) {
border-bottom: none;
}
/* y축 중앙정렬 공식 */
main #main-left #news-wrap .news-lists .news-list img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* 블로그 */
main #blog-wrap {
padding-top: 35px;
}
main #blog-wrap .blog-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 17px;
}
main #blog-wrap .blog-header .left-header {
display: flex;
align-items: center;
}
main #blog-wrap .blog-header .left-header h3 {
font-size: 14px;
margin-right: 8px;
}
main #blog-wrap .blog-header .left-header span,
main #blog-wrap .blog-header .right-header span {
font-size: 12px;
color: gray;
}
main #blog-wrap .blog-header .right-header {
display: flex;
justify-content: end;
align-items: center;
}
main #blog-wrap .blog-header .right-header span strong{
color: black;
}
main #blog-wrap .blog-nav ul {
overflow: hidden;
border: solid 1px #dae1e6;
}
main #blog-wrap .blog-nav ul li{
float: left;
width: 12.5%;
height: 49px;
border-right: solid 1px #dae1e6;
}
main #blog-wrap .blog-nav ul li:last-child {
border-right: 0;
}
main #blog-wrap .blog-nav ul li a {
display: block;
width: 100%;
height: 100%;
line-height: 49px;
text-align: center;
}
main #blog-wrap .blog-list-wrap {
padding-top: 18px;
border-bottom: solid 1px #dae1e6;
}
main #blog-wrap .blog-list-wrap ul li {
margin-bottom: 18px;
}
main #blog-wrap .blog-list-wrap ul li a {
display: flex;
justify-content: flex-start;
align-items: center;
}
main #blog-wrap .blog-list-wrap li a img {
width: 170px;
height: 114px;
margin-right: 21px;
}
main #blog-wrap .blog-list-wrap li .blog-list-info {
width: 559px;
padding-right: 47px;
}
main #blog-wrap .blog-list-wrap li .blog-list-info span {
font-size: 12px;
color: #35ae5e;
}
main #blog-wrap .blog-list-wrap li .blog-list-info h4 {
font-size: 13px;
}
main #blog-wrap .blog-list-wrap li .blog-list-info p {
font-size: 13px;
}
main #blog-wrap .blog-list-wrap li .blog-list-info .date-wrap span {
font-size: 12px;
color: #505050;
}
main .blog-media-wrap ul {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
border-bottom: solid 1px #dae1e6;
}
main .blog-media-wrap ul li .blog-media-info {
padding-top: 12px;
}
main .blog-media-wrap ul li .blog-media-info h4 {
font-size: 13px;
}
main .blog-media-wrap ul li .blog-media-info span {
font-size: 12px;
}
/* main-right */
#main-right #account {
width: 100%;
border: solid 1px #dae1e6;
padding: 16px 16px 12px 16px;
margin-bottom: 12px;
}
#main-right #account p {
font-size: 12px;
padding-left: 3px;
margin-bottom: 11px;
}
#main-right #account a {
display: block;
width: 100%;
background-color: #19ce60;
border-radius: 2px;
/* padding 값 조정해서 왼쪽 큰 배너랑 크기 맞춰줌 */
padding: 13px 0;
margin-bottom: 14px;
color: #ffffff;
font-weight: 700;
text-align: center;
font-size: 13px;
}
#main-right #account .account-sub {
padding: 0 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
#main-right #account .account-sub span {
font-size: 12px;
}
#main-right #banner {
width: 348px;
height: 198px;
background-color: yellowgreen;
margin-bottom: 20px;
}
#main-right #shop-wrap .shop-title {
display: flex;
justify-content: space-between;
align-items: center;
}
#main-right #shop-wrap .shop-title h3,
#main-right #shop-wrap .shop-title h4 {
font-size: 13px;
}
#main-right #shop-wrap .shop-title h4 {
margin-left: 15px;
}
#main-right #shop-wrap .shop-title .right {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 12px 0;
}
#main-right #shop-wrap .shop-content {
border: solid 1px #e4e8eb;
padding: 0 0 22px 0;
}
#main-right #shop-wrap .shop-content .commerce-lists-wrap {
background-color: #f7f9fa;
padding: 12px 4px;
border-bottom: solid 1px #dae1e6;
}
#main-right #shop-wrap .shop-content .commerce-lists {
/* overflow: hidden; */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#main-right #shop-wrap .shop-content .commerce-lists li {
/* float: left; */
font-size: 12px;
margin: 0 0 5px 10px;
}
#main-right #shop-wrap .shop-content .commerce-lists li:first-child {
margin-left: 0;
}
#main-right #shop-wrap .shop-content .shop-goods {
padding: 55px 8px 0 8px;
}
#main-right #shop-wrap .shop-content .shop-goods .product-lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}#main-right #shop-wrap .shop-content .shop-goods .product-lists li {
margin-bottom: 10px;
}
#main-right #shop-wrap .shop-content .shop-goods .product-lists .product-info {
text-align: center;
}
#main-right #shop-wrap .shop-content .shop-goods .product-lists li h2,
#main-right #shop-wrap .shop-content .shop-goods .product-lists li span
{
font-size: 12px;
}
#main-footer {
background-color: #fafbfc;
border-top: solid 1px #e4e8eb;
padding-bottom: 92px;
}
#main-footer .news-lists {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 0;
}
#main-footer .news-lists li {
display: flex;
justify-content: flex-start;
align-items: center;
}
#main-footer .news-lists li img {
margin-right: 15px;
}
#main-footer .news-lists li .news-info {
width: 172px;
font-size: 13px;
}
#main-footer .news-lists li .news-info span {
color: #58c464;
}
#main-footer .corp-lists {
padding-top: 25px;
border-top: solid 1px #e4e8eb;
}
#main-footer .corp-lists li {
display: inline-block;
vertical-align: middle;
}
#main-footer .corp-lists li::before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
margin: 0 8px;
background-color: #e4e8eb;
vertical-align: -1px;
}
#main-footer .corp-lists li:first-child::before {
content: initial;
}
#main-footer .corp-lists li a {
font-size: 12px;
}
/* 쇼핑 페이지 */
#shop-body {
background-color: #e9ece8;
}
.shop-container {
width: 1300px;
margin: 0 auto;
}
.shop-border {
border: solid 1px #ced2d7;
}
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
#shop-header #shop-header-top {
width: 100%;
height: 36px;
background-color: #03c75a;
border-bottom: solid 1px #e8e8e8;
}
#shop-header #shop-header-top a {
height: 100%;
padding-left: 10px;
font-size: 20px;
color: #ffffff;
font-weight: 900;
line-height: 36px;
}
#shop-header #shop-header-middle {
width: 100%;
height: 66px;
background-color: #03c75a;
}
#shop-header nav {
width: 100%;
background-color: #ffffff;
border-top: solid 1px #e8e8e8;
border-bottom: solid 1px #e8e8e8;
}
#shop-header nav ul {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 13px 0 8px 0;
}
#shop-header nav ul li {
margin-right: 16px;
}
#shop-main .list-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#shop-main .list-item {
position: relative;
width: 308px;
height: 496px;
background-color: transparent;
margin-bottom: 20px;
}
#shop-main .list-item.banner img {
width: 100%;
height: 100%;
}
#shop-main .list-item .category-wrap {
overflow: hidden;
}
#shop-main .list-item .category-wrap .category-left {
float: left;
width: 124px;
background-color: #333949;
}
/* rgba 코드로 색상 넣기 */
#shop-main .list-item .category-wrap .category-left h3 {
padding: 14px 0 14px 13px;
border-bottom: 1px solid #2b313f;
font-size: 13px;
color: rgba(255, 255, 255, 0.46);
font-weight: 700;
}
#shop-main .list-item .category-wrap .category-left ul li a {
display: block;
padding: 7px 8px;
font-size: 13px;
color: rgba(255, 255, 255, 0.46);
font-weight: 700;
}
#shop-main .list-item .category-wrap .category-right {
float: right;
width: 181px;
background-color: #ffffff;
}
#shop-main .list-item .category-right .category-right-top {
height: 306px;
border-bottom: 1px solid #e7e7e7;
text-align: center;
}
#shop-main .list-item .category-right-top .category-info {
padding: 20px 0;
/* text-align: center; */
}
#shop-main .list-item .category-right-top .headline,
#shop-main .list-item .category-right-bottom .headline {
display: inline-block;
margin-bottom: 7px;
font-size: 12px;
border: solid 1px #00ab33;
color: #00ab33;
}
#shop-main .list-item .category-right-top .category-info h3 {
font-size: 18px;
}
#shop-main .list-item .category-right-top .category-info .price {
color: skyblue;
}
#shop-main .list-item .category-right-top .image-wrap {
display: inline-block;
width: 140px;
height: 160px;
}
#shop-main .list-item .category-right-top .image-wrap img {
width: 100%;
height: 100%;
}
#shop-main .list-item .category-right-bottom {
padding-top: 20px;
text-align: center;
}
#shop-main .list-item .category-right-bottom .tag-wrap .tag {
display: inline-block;
width: auto;
height: 24px;
max-width: 80px;
margin: 6px 1px 0 1px;
padding: 0 5px;
background-color: #e8eef4;
font-size: 12px;
line-height: 24px;
color: #666;
vertical-align: top;
}
#shop-main .list-item .list-half {
width: 100%;
height: 240px;
background-color: #ffffff;
}
#shop-main .list-item .list-half.list-half-top {
position: absolute;
left: 0;
top: 0;
}
#shop-main .list-item .list-half.list-half-bottom {
position: absolute;
left: 0;
bottom:0;
}
#shop-main .list-item .list-half .list-half-header {
position: relative;
width: 100%;
height: 62px;
background-color: #ffffff;
padding-top: 10px;
border-bottom: solid 1px #e7e7e7;
text-align: center;
}
#shop-main .list-item .list-half .list-half-header .half-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0, 0.5);
}
#shop-main .list-item .list-half .list-half-header.list-half-bg {
padding-top: 0;
border-bottom: solid 1px #ffffff;
background-image: url(../img/checkbox.png);
}
#shop-main .list-item .list-half .list-half-header.list-half-bg .shop-title-border {
position: relative;
display: inline-block;
padding: 2px 4px;
border: solid 1px #fff;
color: #fff;
top: 50%;
transform: translateY(-50%);
}
#shop-main .list-item .list-half .list-half-header .headline {
display: inline-block;
border: solid 1px #000000;
margin-bottom: 5px;
padding: 2px 4px;
}
#shop-main .list-item .list-half .list-half-header h3 {
font-size: 14px;
}
#shop-main .list-item .list-half .content-lists {
overflow: hidden;
height: 177px;
}
#shop-main .list-item .list-half .content-lists.content-lists-3 li {
float: left;
width: 33.33%;
height: 100%;
border-right: solid 1px #f0f0f0;
text-align: center;
}
#shop-main .list-item .list-half .content-lists.content-lists-3 li:last-child {
border-right: none;
}
#shop-main .list-item .list-half .content-lists.content-lists-3 li img {
width: 100%;
margin-bottom: 5px;
}
#shop-main .list-item .list-half .content-lists.content-lists-3 li h3 {
font-size: 13px;
margin-bottom: 5px;
}
#shop-main .list-item .list-half .content-lists.content-lists-3 li span {
font-size: 12px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 {
display: flex;
justify-content: center;
padding-top: 11px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li {
width: 130px;
height: 150px;
margin-right: 8px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li:last-child {
margin-right: 0;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap {
position: relative;
width: 130px;
height: 90px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap .discount {
position: absolute;
display: inline-block;
width: 42px;
height: 42px;
background-color: orangered;
border-radius: 50%;
font-size: 14px;
color: #ffffff;
line-height: 42px;
text-align: center;
top: 6px;
right: 5px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li h3 {
margin-top: 5px;
font-size: 13px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li .price {
color: #62a7ee;
font-size: 12px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li .price em {
font-style: normal;
font-size: 14px;
font-weight: 700;
}
#shop-main .list-item .list-row-3 {
background-color: #ffffff;
border-top: none;
}
#shop-main .list-item .list-row-3 li {
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: solid 1px #f0f0f0;
padding: 14px 19px 11px 19px;
}
#shop-main .list-item .list-row-3 li:last-child {
border-bottom: none;
}
#shop-main .list-item .list-row-3 li .list-image-wrap {
width: 90px;
height: 60px;
margin-right: 10px;
}
#shop-main .list-item .list-row-3 li .list-image-wrap img {
width: 100%;
height: 100%;
}
#shop-main .list-item .list-row-3 li .list-row-info span {
font-size: 12px;
color: #62a7ee;
}
#shop-main .list-item .list-row-3 li .list-row-info h3 {
font-size: 13px;
}
#shop-main .brand-wrap {
background-color: #ffffff;
}
#shop-main .brand-wrap .brand-lists {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px;
}
#shop-main .brand-wrap .brand-lists li {
width: 64px;
height: 64px;
}
#shop-main .brand-wrap .brand-lists li img {
width: 100%;
height: 100%;
}
/* footer */
#shop-footer {
padding-bottom: 27px;
text-align: center;
}
#shop-footer .policy-wrap {
border-top: solid 2px #5d5d5d;
padding-top: 27px;
margin-bottom: 12px;
}
#shop-footer .policy-wrap span {
font-size: 12px;
}
#shop-footer .policy-wrap span::before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
margin: 0 8px;
background-color: #d7d7d7;
vertical-align: -1px;
}
#shop-footer .policy-wrap span:first-child:before {
content: initial;
}
#shop-footer p {
font-size: 12px;
color: #888;
margin-bottom: 11px;
}
/* 웹툰 부분 공통 */
.webtoon-container {
width: 960px;
margin: 0 auto;
}
.webtoon-border {
border: solid 1px #ced2d7;
}
#webtoon-header {
background-color: #ffffff;
}
#webtoon-header .webtoon-header-top {
background-color: #ffffff;
border-bottom: solid 1px #f2f2f2;
padding: 10px 0 8px 0;
}
#webtoon-header .webtoon-header-top .webtoon-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#webtoon-header .webtoon-header-top .webtoon-header-left {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 550px;
}
#webtoon-header .webtoon-header-top .webtoon-header-left h2 {
font-size: 20px;
}
#webtoon-header .webtoon-header-top .webtoon-header-left .bar {
width: 1px;
height: 13px;
background-color: #d2d2d2;
margin: 0 10px 0 8px;
}
#webtoon-header .webtoon-header-top .webtoon-header-left h3 {
margin-right: 30px;
font-size: 16px;
}
#webtoon-header .webtoon-header-top .webtoon-header-left h3 a {
color: gray;
}
#webtoon-header .webtoon-header-top .webtoon-header-input-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 315px;
height: 37px;
border: solid 1px #e5e5e5;
}
#webtoon-header .webtoon-header-top .webtoon-header-input-wrap input {
width: calc(100% - 35px);
height: 100%;
border: none;
padding: 0 10px;
outline: none;
}
#webtoon-header .webtoon-header-top .webtoon-header-input-wrap .btn-search {
width: 35px;
height: 100%;
background-color: #00d564;
}
#webtoon-header .webtoon-header-top .webtoon-header-right {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
#webtoon-header .webtoon-header-top .webtoon-header-right .btn-login {
margin-right: 20px;
padding: 2px 4px;
border: solid 1px #000000;
font-size: 12px;
}
#webtoon-header .webtoon-header-top .webtoon-header-right .btn-menu {
width: 16px;
height: 16px;
background-color: teal;
}
#webtoon-header .webtoon-header-nav {
border-bottom: solid 1px #e5e5e5;
}
#webtoon-header .webtoon-header-nav .webtoon-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#webtoon-header .webtoon-header-nav nav ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#webtoon-header .webtoon-header-nav nav ul li {
width: auto;
height: 40px;
}
#webtoon-header .webtoon-header-nav nav ul li a {
display: block;
width: 100%;
height: 100%;
padding: 0 15px;
line-height: 40px;
font-size: 14px;
font-weight: 700;
}
#webtoon-header .webtoon-header-nav nav ul li.on a {
background-color: #00d564;
color: #ffffff;
}
#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap .icon-ex-mark {
display: inline-block;
width: 16px;
height: 14px;
background-color: violet;
vertical-align: middle;
}
#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap a {
vertical-align: middle;
font-size: 12px;
color: #606060;
}
#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap a:hover {
text-decoration: underline;
}
#webtoon-main {
padding-bottom: 100px;
}
#webtoon-main .webtoon-container {
overflow: hidden;
}
#webtoon-main .webtoon-container .webtoon-main-left {
float: left;
width: 694px;
}
#webtoon-main .webtoon-container .webtoon-main-right {
float: right;
width: 240px;
}
#webtoon-main .webtoon-main-left .webtoon-carousel {
overflow: hidden;
width: 694px;
height: 252px;
background-color: white;
margin-bottom: 20px;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left {
float: left;
width: 112px;
height: 100%;
padding: 20px 5px 0 15px
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left h2 {
margin-bottom: 13px;
font-size: 25px;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left h2 span {
color: #00d564;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left p {
font-size: 12px;
color: #808285;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left ul {
margin-top: 35px;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left ul li {
margin-bottom: 10px;
font-size: 12px;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left ul li:last-child {
margin-bottom: 0;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left ul li.on a{
color: #00d564;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-right {
float: right;
width: calc(100% - 112px);
height: 100%;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-right .webtoon-banner {
width: 582px;
height: 192px;
}
#webtoon-main .webtoon-main-left .webtoon-banner img {
width: 100%;
height: 100%;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav {
position: relative;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul{
display: flex;
justify-content: flex-start;
align-items: stretch;
width: 540px;
margin: 0 auto;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li {
width: 135px;
height: 58px;
border-left: solid 1px #ced2d7;
border-bottom: solid 1px #ced2d7;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li:last-child {
border-right: solid 1px #ced2d7;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li:hover {
border-bottom: solid 2px black;
box-sizing: initial;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li img {
/* display: none; */
width: 100%;
height: 100%;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn {
position: absolute;
width: 20px;
height: 58px;
background-color: pink;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-prev {
left: 0;
top: 0;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-next {
right: 0;
top: 0;
}
#webtoon-main .webtoon-main-left .webtoon-banner {
width: 100%;
height: 80px;
background-color: darkcyan;
}
#webtoon-main .webtoon-main-left .webtoon-content {
background-color: #ffffff;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header {
position: relative;
border-bottom: solid 1px #e5e5e5;
padding: 26px 0 10px;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header h2 {
font-size: 20px;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header.webtoon-content-header-recommend {
padding-bottom: 0;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header h2 span {
color: #00d564;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav {
margin-top: 20px;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav ul {
display: flex;
justify-content: flex-start;
align-items: center;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav ul li {
width: auto;
height: 22px;
margin-right: 15px;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav ul li.on {
margin-bottom: -1px;
border-bottom: solid 2px #00d564;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav ul li a {
display: block;
padding-bottom: 6px;
font-size: 13px;
color: #737373;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav {
padding: 12px 0;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul {
display: flex;
justify-content: flex-end;
align-items: center;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul li {
margin-right: 8px;
font-size: 12px;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul li.on a {
color: #00d564;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul li a {
color: gray;
}
#webtoon-main .webtoon-main-left .webtoon-content-col-3 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-1 {
width: 210px;
height: 196px;
font-size: 12px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-1 img {
margin-bottom: 10px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-1 .webtoon-content-col-3-info h {
margin-bottom: 5px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-1 .webtoon-content-col-3-info p {
margin-bottom: 5px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-1 .webtoon-content-col-3-info span {
color: gray;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-2 {
width: 210px;
font-size: 12px;
margin-top: 14px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-2 h3 {
font-size: 14px;
color: gray;
margin-bottom: 10px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-2 .webtoon-lists {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-2 .webtoon-lists li {
display: flex;
justify-content: flex-start;
align-items: center;
height: 90px;
margin-bottom: 20px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-2 .webtoon-lists li img {
margin-right: 10px;
}
#webtoon-main .webtoon-main-left .webtoon-content-info-right p {
color: gray;
}
#webtoon-main .webtoon-main-left .webtoon-content-info-right .webtoon-content-rating {
margin-top: 15px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap {
width: 100%;
height: 255px;
background-color: #f9f9fc;
padding: 20px 18px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap h3 {
font-size: 18px;
margin-bottom: 11px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap h3 span {
color: #00d564;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap img {
width: 100%;
height: 110px;
margin-bottom: 18px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info a {
font-size: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info a:hover {
text-decoration: underline;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info .webtoon-title-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info .webtoon-title-wrap h4 {
font-size: 16px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info p a{
color: gray;
}
#webtoon-main .webtoon-main-right .webtoon-banner.webtoon-banner-1 {
width: 100%;
height: 240px;
background-color: indigo;
margin-bottom: 8px;
}
#webtoon-main .webtoon-main-right .webtoon-banner.webtoon-banner-2 {
width: 100%;
height: 86px;
background-color: lime;
margin-bottom: 8px;
}
#webtoon-main .webtoon-main-right .webtoon-popular {
background-color: #ffffff;
margin-bottom: 8px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-header h2 {
font-size: 14px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs {
display: flex;
justify-content: space-between;
align-items: center;
border-top: solid 1px #e1e1e1;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab {
width: 50%;
height: 30px;
border-bottom: solid 1px #e1e1e1;
text-align: center;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab:first-child {
border-right: solid 1px #e1e1e1;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab span {
display: block;
width: 100%;
height: 100%;
line-height: 30px;
font-size: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab.active {
border-bottom: solid 1px #ffffff;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking {
width: 100%;
background-color: #ffffff;
padding: 15px 0 7px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 13px;
font-size: 12px;
margin-bottom: 7px;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-content {
display: flex;
justify-content: flex-start;
align-items: center;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-content a {
display: inline-block;
width: 140px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-content a:hover {
text-decoration: underline;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-content .rank {
margin-right: 5px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-box {
display: flex;
justify-content: space-between;
align-items: center;
width: 30px;
height: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-box .status {
width: 12px;
height: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-box .status.status-stay {
background-color: black;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-box .status.status-up {
background-color: red;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-box .status.status-down {
background-color: blue;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-box .number {
position: relative;
display: inline-block;
top: -1px;
}
/* 썸네일 이미지가 포함된 랭킹 */
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank.rank-custom {
position: relative;
top: -10px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .img-wrap {
display: flex;
justify-content: flex-start;
align-items: center;
width: 140px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .img-wrap img {
width: 30px;
height: 33px;
margin-right: 5px;
}
#webtoon-main .webtoon-main-right .webtoon-popular-ranking .img-wrap .webtoon-info {
width: 100px;
}
#webtoon-main .webtoon-main-right .webtoon-popular-ranking .img-wrap .webtoon-info .webtoon-title,
#webtoon-main .webtoon-main-right .webtoon-popular-ranking .img-wrap .webtoon-info .author {
width: 100px;
display: block;
}
#webtoon-footer {
padding-bottom: 78px;
font-size: 12px;
}
#webtoon-footer .webtoon-container {
padding-top: 40px;
border-top: solid 1px #e6e7e8;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 32px;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap .webtoon-footer-left,
#webtoon-footer .webtoon-container .webtoon-footer-wrap .webtoon-footer-right {
width: 50%;
padding-left: 25px;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap .webtoon-footer-right {
border-left: solid 1px #d9d9d9;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap ul {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 8px;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap ul li::before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
background-color: #d9d9d9;
margin: 0 5px;
vertical-align: -1px;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap ul li:first-child:before {
content: initial;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap span {
text-transform: uppercase;
}
#webtoon-footer .webtoon-container .webtoon-footer-paragraph {
padding-left: 25px;
}
.webtoon-detail {
padding-top: 0;
}
.webtoon-detail .nav-1 {
background-color: #fafafa;
border-bottom: solid 1px #ededed;
}
.webtoon-detail .nav-1 ul {
display: flex;
align-items: center;
}
.webtoon-detail .nav-1 ul li {
width: auto;
height: 36px;
margin-right: 14px;
}
.webtoon-detail .nav-1 ul li:last-child {
margin-right: 0;
}
.webtoon-detail .nav-1 ul li.on a {
color: black;
font-weight: 700;
}
.webtoon-detail .nav-1 ul li a {
display: block;
width: 100%;
height: 100%;
line-height: 36px;
text-align: center;
font-size: 12px;
color: #434343;
}
.webtoon-detail .nav-2 {
padding-top: 20px;
border-bottom: solid 1px #ededed;
}
.webtoon-detail .nav-2 ul {
display: flex;
align-items: center;
}
.webtoon-detail .nav-2 ul li {
margin-right: 14px;
padding-bottom: 5px;
border-bottom: solid 2px transparent;
}
.webtoon-detail .nav-2 ul li:last-child {
margin-right: 0;
}
.webtoon-detail .nav-2 ul li a {
font-size: 13px;
}
.webtoon-detail .nav-2 ul li.on {
border-color: #00d564;
margin-bottom: -1px;
font-weight: 700;
}
.webtoon-detail .nav-2 ul li.on a {
color: #00d564;
}
/* 이달의 웹툰 */
.webtoon-detail #webtoon-this-month {
padding: 20px 0;
}
.webtoon-detail #webtoon-this-month h2 {
font-size: 16px;
margin-bottom: 8px;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-lists {
display: flex;
justify-content: space-between;
align-items: center;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list {
width: 218px;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list .monthly-img-wrap {
position: relative;
width: 100%;
height: 120px;
margin-bottom: 5px;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list .monthly-img-wrap img {
position: absolute;
width: 100%;
height: 100%;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list .monthly-img-wrap .new-mark {
position: absolute;
width: 30px;
background-color: #00c85e;
color: #ffffff;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list h3 {
font-size: 14px;
margin-bottom: 5px;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list .author {
display: block;
font-size: 14px;
margin-bottom: 5px;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list p {
font-size: 14px;
}
/* 일일툰 */
.webtoon-detail #webtoon-daily {
padding-top: 20px;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 8px;
border-bottom: solid 1px #eaeaea;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap h2 {
font-size: 16px;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap ul {
display: flex;
justify-content: flex-end;
align-items: center;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap ul li {
margin-right: 10px;
font-size: 12px;
font-weight: 700;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap ul li:last-child {
margin-right: 10px;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap ul li.on a {
color: #00d564;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap ul li a {
color: gray;
}
.webtoon-detail #webtoon-daily .webtoon-day-lists {
display: flex;
align-items: stretch;
border-bottom: solid 1px #f4f4f4;
}
.webtoon-detail #webtoon-daily .webtoon-day-lists .webtoon-day-list {
width: 14.2855%;
text-align: center;
border-right: solid 1px #f4f4f4;
padding: 0 8px;
}
.webtoon-detail #webtoon-daily .webtoon-day-lists .webtoon-day-list:last-child {
border-right: none;
}
.webtoon-detail #webtoon-daily .webtoon-day-list.active {
background-color: #3a3a3a;
border-color: #3a3a3a;
color: #fdcb00;
}
.webtoon-detail #webtoon-daily .webtoon-day-list.active a {
color: #fdcb00;
}
.webtoon-detail #webtoon-daily .webtoon-day-list span {
display: block;
height: 32px;
line-height: 32px;
font-size: 14px;
}
.webtoon-detail #webtoon-daily .webtoon-day-list .webtoon-lists .webtoon-list {
margin-bottom: 10px;
}
.webtoon-detail #webtoon-daily .webtoon-day-list .webtoon-list a {
display: block;
width: 100%;
}
.webtoon-detail #webtoon-daily .webtoon-day-list .webtoon-list a img {
width: 100%;
margin-bottom: 5px;
}
.webtoon-detail #webtoon-daily .webtoon-day-list .webtoon-list a h3 {
font-size: 12px;
}
/* 네이버 블로그 페이지 */
.blog-container {
width: 1080px;
margin: 0 auto;
}
#blog-header .blog-header-top {
height: 60px;
background-color: #00c73c;
border-bottom: 1px solid #51b036;
}
#blog-header .blog-header-top .blog-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-header .blog-header-top .blog-header-left {
display: flex;
flex-wrap: wrap;
align-items: center;
/* margin-top: 8px; */
}
#blog-header .blog-header-top .blog-header-left {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
#blog-header .blog-header-top .blog-header-left h2 {
font-size: 20px;
margin-right: 20px;
}
#blog-header .blog-header-top .blog-header-left h2 a {
color: #ffffff;
font-weight: 700;
}
#blog-header .blog-header-top .blog-header-input-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#blog-header .blog-header-top .blog-search-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 325px;
height: 40px;
background-color: #ffffff;
margin-right: 5px;
}
#blog-header .blog-header-top .blog-search-wrap input {
width: calc(100% - 40px);
height: 40px;
background-color: #ffffff;
border: solid 1px #4da733;
padding: 0 15px; /* 좌우로 15px */
}
#blog-header .blog-header-top .blog-header-input-wrap .blog-search-wrap input:focus {
outline: none;
}
#blog-header .blog-header-top .blog-header-input-wrap .blog-search-wrap .btn-search {
width: 40px;
height: 40px;
background-color: #28a93a;
border: solid 1px #239e36;
}
#blog-header .blog-header-top .blog-header-input-wrap .btn-total-search {
width: auto;
height: 40px;
background-color: #28a93a;
border: solid 1px #239e36;
padding: 0 5px;
line-height: 40px;
color: #ffffff;
}
#blog-header .blog-header-top .blog-header-right {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
#blog-header .blog-header-top .blog-header-right .btn-login {
display: inline-block;
padding: 5px 10px;
border: solid 1px #239e36;
padding: 2px 5px;
margin-right: 20px;
color: #ffffff;
font-size: 12px;
}
#blog-header .blog-header-top .blog-header-right .btn-menu {
width: 60px;
height: 60px;
background-color: #00c73c;
border-left: solid 1px #239e36;
border-right: solid 1px #239e36;
cursor: pointer;
}
#blog-header .blog-header-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height: 40px;
background-color: #ffffff;
border-bottom: solid 1px #e5e5e5;
}
#blog-header .blog-header-nav .blog-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-header .blog-header-nav .nav-left ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#blog-header .blog-header-nav .nav-left ul li {
height: 40px;
margin-right: 16px;
border-bottom: 3px solid transparent;
}
#blog-header .blog-header-nav .nav-left li a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
}
#blog-header .blog-header-nav .nav-left ul li:hover,
#blog-header .blog-header-nav .nav-left ul li.on {
border-bottom: 3px solid #00ab33;
}
#blog-header .blog-header-nav .nav-left ul li:hover a,
#blog-header .blog-header-nav .nav-left ul li.on a{
color: #00ab33;
font-weight: 700;
}
#blog-header .blog-header-nav .nav-left ul li a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
font-size: 13px;
}
#blog-header .blog-header-nav .nav-right ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
#blog-header .blog-header-nav .nav-right ul li {
width: auto;
height: 26px;
border: solid 1px rgba(0, 0, 0, 0.07);
margin-left: 8px;
}
#blog-header .blog-header-nav .nav-right ul li a {
display: block;
width: 100%;
height: 100%;
background-color: #ffffff;
border: 1px solid #cecece;
line-height: 20px;
padding: 0 10px;
font-size: 13px;
}
#blog-header .blog-header-nav .nav-right ul li.on a{
background-color: #00c73c;
border-color: rgba(0, 0, 0, 0.07);
color: #ffffff;
border: solid 1px #cecece;
line-height: 26px;
padding: 0 10px;
font-size: 13px;
}
#blog-main {
padding-top: 0;
}
#blog-main #hot-topic {
height: 305px;
background-color: #f5f5f5;
padding: 20px 0 15px;
}
#blog-main #hot-topic .blog-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-main #hot-topic .hot-topic-left {
position: relative;
width: 770px;
}
#blog-main #hot-topic .hot-topic-left .topic-heading {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 11px;
}
#blog-main #hot-topic .hot-topic-left .topic-heading h3 {
font-size: 16px;
font-weight: 600;
color: #e55e5e;
}
/* i태그는 inline 속성 */
#blog-main #hot-topic .hot-topic-left .topic-heading i {
display: block;
width: 8px;
height: 13px;
background-color: gray;
margin: 0 8px;
}
#blog-main #hot-topic .hot-topic-left .topic-heading a {
font-size: 16px;
}
#blog-main #hot-topic .hot-topic-left .topic-heading h3:hover,
#blog-main #hot-topic .hot-topic-left .topic-heading a:hover {
cursor: pointer;
text-decoration: underline;
}
#blog-main #hot-topic .hot-topic-left .topic-lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-main #hot-topic .hot-topic-left .topic-lists li {
position: relative;
width: 252px;
height: 240px;
}
#blog-main #hot-topic .hot-topic-left .topic-lists li a img {
position: absolute;
width: 100%;
height: 100%;
}
#blog-main #hot-topic .hot-topic-left .topic-lists li a p {
position: absolute;
width: 100%;
background-color: rgba(55, 66, 87, 0.9);
padding: 20px 18px;
bottom: 0;
color: #ffffff;
text-align: center;
}
#blog-main #hot-topic .pagination-wrap {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
position: absolute;
top: 0;
right: 0;
}
#blog-main #hot-topic .pagination-wrap a {
display: block;
width: 20px;
height: 20px;
border: 1px solid rgba(221, 221, 223, 0.8);
background-color: #f6f6f7;
margin-left: 4px;
color: #888;
font-size: 12px;
text-align: center;
line-height: 17px;
}
#blog-main #hot-topic .pagination-wrap a.on {
border: 1px solid #69707d;
background-color: #69707d;
color: #fff;
}
#blog-main #hot-topic .pagination-wrap a:hover {
border: 1px solid #69707d;
}
/* 핫토픽 */
#blog-main #hot-topic .hot-topic-right {
position: relative;
width: 280px;
padding-top: 30px;
}
#blog-main #hot-topic .hot-topic-right .topic-banner {
width: 100%;
height: 240px;
background-color: royalblue;
}
/* 메인콘텐츠 */
#blog-main-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
margin-top: 20px;
}
#blog-main-content .blog-main-left {
width: 770px;
height: 2000px;
/* background-color: skyblue; */
}
#blog-main-content .blog-main-left #blog-main-notification {
background-color: #ffffff;
padding: 54px 0;
text-align: center;
}
#blog-main-content .blog-main-left #blog-main-notification p {
line-height: 30px;
font-size: 16px;
}
#blog-main-content .blog-main-left #blog-article .blog-article-nav {
border-top: solid 1px #999;
border-bottom: solid 1px #999;
background-color: #ffffff;
padding: 10px 0;
font-size: 14px;
}
#blog-main-content #blog-article .blog-article-nav ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#blog-main-content #blog-article .blog-article-nav ul li {
margin-right: 22px;
}
#blog-main-content #blog-article .blog-article-nav ul li.on a {
color: #00ab33;
font-weight: 700;
}
#blog-main-content #blog-article .blog-article-nav ul li:hover a {
text-decoration: underline;
}
#blog-main-content #blog-article .blog-article-lists li {
border-bottom: solid 1px #eeeeef;
padding: 25px 0 23px;
}
#blog-main-content #blog-article .blog-article-lists li a {
display: block;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
#blog-main-content .blog-article-lists .blog-article-info {
width: 573px;
}
#blog-main-content .blog-article-lists .blog-article-info .blog-profile-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#blog-main-content .blog-article-lists .blog-article-info .blog-profile-wrap img {
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 10px;
}
#blog-main-content .blog-article-lists .blog-article-info .blog-profile-wrap .blog-profile-info h3 {
font-size: 14px;
margin-bottom: 3px;
}
#blog-main-content .blog-article-lists .blog-article-info .blog-profile-wrap .blog-profile-info p {
font-size: 11px;
color: #959595;
}
#blog-main-content .blog-article-lists .blog-article-info h2 {
margin-top: 16px;
font-size: 17px;
}
#blog-main-content .blog-article-lists .blog-article-info .blog-profile-wrap .blog-profile-info:hover h3,
#blog-main-content .blog-article-lists .blog-article-info h2:hover,
#blog-main-content .blog-article-lists .blog-article-info .paragraph:hover {
text-decoration: underline;
}
#blog-main-content .blog-article-lists .blog-article-info .paragraph {
max-height: 60px;
margin-top: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
color: #666666;
line-height: 20px;
}
#blog-main-content .blog-article-lists .blog-article-info .comments {
margin-top: 14px;
color: #959595;
font-size: 12px;
/* letter-spacing: -1px; */
}
#blog-main-content .blog-article-lists .blog-article-info .comments span {
margin-right: 9px;
}
#blog-main-content .blog-article-lists .blog-article-info .comments span em {
font-style: normal;
}
#blog-main-content .blog-article-lists .blog-article-img-wrap {
position: relative;
width: 167px;
height: 167px;
}
#blog-main-content .blog-article-lists .blog-article-img-wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#blog-main-content .blog-article-lists .blog-article-img-wrap i {
display: block;
position: absolute;
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, 0.07);
bottom: 0;
right: 0;
}
#blog-main-content .blog-article-pagination-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 28px;
margin: 40px 0 70px;
color: #666;
text-align: center;
}
#blog-main-content .blog-article-pagination-wrap a {
display: inline-block;
width: 28px;
height: 28px;
border: 1px solid #ffffff;
margin: 0 1px;
padding: 0 6px;
font-size: 13px;
line-height: 24px;
}
#blog-main-content .blog-article-pagination-wrap a.on {
border: 1px solid #e0e0e0;
color: #00ab33;
font-weight: 600;
}
#blog-main-content .blog-article-pagination-wrap a:hover {
border: 1px solid #e0e0e0;
}
#blog-main-content .blog-article-pagination-wrap .btn-next {
margin-left: 12px;
height: 28px;
padding-right: 15px;
background-image: url(../img/next.png);
background-repeat: no-repeat;
background-position: right;
background-size: 12px 12px;
text-align: center;
font-size: 13px;
line-height: 28px;
cursor: pointer;
}
#blog-main-content .blog-article-pagination-wrap .btn-next:hover {
text-decoration: underline;
}
#blog-main-content .blog-main-right {
width: 280px;
height: 2000px;
/* background-color: skyblue; */
}
#blog-main-content .blog-main-right #blog-account {
width: 100%;
border: solid 1px #dddddf;
background-color: #f5f5f6;
padding: 20px 15px;
margin-bottom: 12px;
}
#blog-main-content .blog-main-right #blog-account p {
font-size: 11px;
margin-bottom: 7px;
color: #888;
}
#blog-main-content .blog-main-right #blog-account a {
display: block;
width: 100%;
background-color: #fff;
border-radius: 4px;
border: solid 1px #ccc;
padding: 10px 0;
margin-bottom: 14px;
color: #000000;
font-weight: 700;
text-align: center;
font-size: 13px;
}
#blog-main-content .blog-main-right #blog-account .account-sub {
display: flex;
justify-content: space-between;
align-items: center;
}
#blog-main-content .blog-main-right #blog-account .account-sub span {
font-size: 11px;
color: #888;
}
#blog-main-content .blog-main-right #blog-account .account-sub em {
display: inline-block;
width: 1px;
height: 11px;
background-color: #c5c5c5;
vertical-align: -2px;
}
#blog-main-content .blog-main-right #blog-banner {
width: 100%;
height: 240px;
border: solid 1px #dddddf;
background-color: darkmagenta;
}
#blog-main-content .blog-main-right .blog-guide {
border: solid 1px #dddddf;
border-width: 0 1px 1px;
padding: 19px 20px;
}
#blog-main-content .blog-main-right .blog-guide a {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-main-content .blog-main-right .blog-guide p {
width: 170px;
font-size: 17px;
line-height: 25px;
color: #222;
}
#blog-main-content .blog-main-right .blog-guide p span {
font-size: 18px;
font-weight: 700;
}
#blog-main-content .blog-main-right .blog-guide i {
display: inline-block;
width: 65px;
height: 65px;
background-color: olivedrab;
}
#blog-main-content #blog-notice {
border: solid 1px #dddddf;
border-width: 0 1px 1px;
padding: 24px 22px 22px;
}
#blog-main-content #blog-notice .blog-notice-heading {
margin-bottom: 13px;
}
#blog-main-content #blog-notice .blog-notice-heading:hover a h3 {
text-decoration: underline;
}
#blog-main-content #blog-notice .blog-notice-heading a {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-main-content #blog-notice .blog-notice-heading a h3 {
font-size: 14px;
font-weight: 600;
}
#blog-main-content #blog-notice .blog-notice-heading a i {
width: 8px;
height: 13px;
background-color: orange;
}
#blog-main-content #blog-notice .blog-notice-lists li:hover a {
text-decoration: underline;
}
#blog-main-content #blog-notice .blog-notice-lists li a {
font-size: 12px;
}
/* 헬프 */
#blog-main-content #blog-helper {
border: solid 1px #dddddf;
border-width: 0 1px 1px;
padding: 24px 16px;
}
#blog-main-content #blog-helper .blog-helper-lists li {
font-size: 14px;
margin-bottom: 10px;
}
#blog-main-content #blog-helper .blog-helper-lists li:hover a {
text-decoration: underline;
}
#blog-main-content #blog-helper .blog-helper-lists li a {
display: block;
height: 35px;
padding-left: 30px;
background-image: url(../img/checkbox.png);
background-repeat: no-repeat;
background-position: left;
background-size: 20px 20px;
line-height: 35px;
}
#blog-footer {
padding-top: 40px;
padding-bottom: 55px;
background-color: #f6f6f6;
text-align: center;
}
#blog-footer ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
#blog-footer ul li a {
font-size: 13px;
}
#blog-footer ul li a::before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
background-color: #d7d7d7;
margin: 0 10px;
vertical-align: -1px;
}
#blog-footer ul li:first-child a::before {
content: initial;
}
#blog-footer p {
font-size: 11px;
}
/* 블챌 */
.blog-border {
border: solid 1px #eaeaec;
}
#blog-main-detail {
padding-bottom: 100px;
}
#blog-main-detail #program {
padding: 62px 0 50px;
background-color: #634ea4;
color: #ffffff;
}
#blog-main-detail #program h3 {
margin-bottom: 10px;
font-size: 48px;
font-weight: 400;
}
#blog-main-detail #program p {
font-size: 16px;
}
#blog-main-detail #program-nav {
font-size: 14px;
border-bottom: solid 1px #ebebeb;
background-color: #ffffff;
padding: 10px 0 ;
}
#blog-main-detail #program-nav .blog-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#blog-main-detail #program-nav a {
color: #666;
}
#blog-main-detail #program-nav ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#blog-main-detail #program-nav ul li.on a {
color: #000;
font-weight: 600;
}
#blog-main-detail #program-nav ul li:hover a {
text-decoration: underline;
}
#blog-main-detail #program-nav ul li a::before {
content: "";
display: inline-block;
width: 1px;
height: 12px;
background-color: #ababab;
margin: 0 12px;
}
#blog-main-detail #program-nav ul li:first-child a::before {
content: initial;
}
#blog-main-detail #program-info {
background-color: #f8f8f9;
padding: 44px 0 36px;
}
#blog-main-detail #program-info .program-info-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 50px;
}
#blog-main-detail #program-info .program-info-wrap h4 {
color: #7d55c8;
font-size: 32px;
line-height: 44px;
margin-right: 120px;
}
#blog-main-detail #program-info .program-info-wrap p {
font-size: 18px;
line-height: 28px;
color: #262626;
margin-bottom: 18px
}
#blog-main-detail #program-info .program-info-wrap a {
font-size: 13px;
color: #7d55c8;
}
#blog-main-detail #program-info .program-msg-box {
padding: 29px;
background-color: #ffffff;
}
#blog-main-detail #program-info .program-msg-box .from {
display: block;
font-size: 13px;
font-weight: 600;
color: #7d55c8;
margin-bottom: 6px;
}
#blog-main-detail #program-info .program-msg-box .program-msg-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
}
#blog-main-detail #program-info .program-msg-box p {
width: 810px;
font-size: 18px;
}
#blog-main-detail #program-info .program-msg-box .date {
color: #693bbc;
}
#blog-main-detail #program-info .program-msg-box .txt::before {
content: "";
display: inline-block;
width: 1px;
height: 18px;
background-color: #d5d5d5;
margin: 0 9px;
vertical-align: -3px;
}
#blog-main-detail #program-info .program-msg-box a {
display: block;
width: 179px;
height: 40px;
background-color: rgba(125, 85, 200, 1);
font-size: 14px;
color: #ffffff;
line-height: 40px;
text-align: center;
}
#blog-main-detail #program-info .program-msg-box a:hover {
background-color: rgba(125, 85, 200, 0.8);
}
#blog-main-detail #program-day {
background-color: #ffffff;
}
#blog-main-detail #program-day .program-day-list .program-day-title-wrap {
padding: 36px 0 16px;
font-size: 16px;
line-height: 16px;
}
#blog-main-detail #program-day .program-day-list .program-day-title-wrap .date {
color: #693bbc;
}
#blog-main-detail #program-day .program-day-list .program-day-title-wrap .txt::before {
content: "";
display: inline-block;
width: 1px;
height: 18px;
background-color: #d5d5d5;
margin: 0 9px;
vertical-align: -3px;
}
#blog-main-detail #program-day .program-day-list .program-day-title-wrap .msg {
font-size: 14px;
color: #666666;
line-height: 14px;
}
#blog-main-detail #program-day .program-img-lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-main-detail #program-day .program-img-lists li {
width: 175px;
height: 228px;
}
#blog-main-detail #program-day .program-img-lists li img {
width: 100%;
height: 130px;
margin-bottom: 15px;
}
#blog-main-detail #program-day .program-img-lists li h4 {
font-size: 14px;
color: #333;
margin: 0 15px 15px 15px;
}
#blog-main-detail #program-day .program-img-lists li span {
font-size: 12px;
color: #959595;
margin: 0 15px 15px 15px;
}
/* 뉴스 메인페이지 */
.news-container {
width: 1080px;
margin: 0 auto;
}
.news-flex-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.news-flex-start {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.news-flex-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
#news-header {
background-color: #3f63bf;
}
#news-header .news-header-left {
padding: 17px 0;
}
#news-header .news-header-left ul li:first-child a {
font-size: 20px;
opacity: 0.8;
font-weight: 700;
}
#news-header .news-header-left ul li a {
color: #ffffff;
font-size: 15px;
opacity: 0.8;
}
#news-header .news-header-left ul li a::after {
content: "";
display: inline-block;
width: 1px;
height: 15px;
background-color: #000;
opacity: 0.2;
margin: 0 10px;
}
#news-header .news-header-left ul li:last-child a::after {
content: initial;
}
#news-header .news-header-right .btn-login {
display: inline-block;
width: 55px;
height: 25px;
border: 1px solid rgba(0,0,0,0.12);
margin-right: 20px;
line-height: 25px;
text-align: center;
color: #ffffff;
font-size: 12px;
}
#news-header .news-header-right .btn-menu {
width: 55px;
height: 55px;
border: 1px solid rgba(0,0,0,0.12);
border-width: 0 1px;
}
#news-header .sub-nav {
background-color: #ffffff;
border-top: solid 1px #000000;
border-bottom: 1px solid #e3e3e3;
}
#news-header .sub-nav ul li {
width: auto;
height: 46px;
margin-right: 16px;
text-align: center;
}
#news-header .sub-nav ul li a {
display: block;
width: 100%;
height: 100%;
border-bottom: 2px solid transparent;
font-weight: bold;
line-height: 46px;
}
#news-header .sub-nav ul li a.on {
color: #3f63bf;
border-bottom: 2px solid #3f63bf;
}
#news-header .sub-nav .news-search-wrap {
width: 280px;
height: 30px;
border: solid 1px #e1e1e1;
background-color: #fafafa;
}
#news-header .sub-nav .news-search-wrap input {
width: calc(100% - 30px);
height: 100%;
padding: 3px 9px;
border: none;
font-size: 12px;
color: #888888;
}
#news-header .sub-nav .news-search-wrap .btn-search {
width: 30px;
height: 100%;
background-image: url(../img/search.png);
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: center;
}
/* javascript off*/
#news-headline {
padding-top: 20px;
}
#news-headline .news-container {
border-bottom: solid 1px #000000;
padding-bottom: 12px;
}
#news-headline .news-headline-menu-wrap {
margin-bottom: 15px;
}
#news-headline .news-headline-menu-wrap .main-lists li {
margin-right: 20px;
font-size: 15px;
}
#news-headline .news-headline-menu-wrap .sub-lists li {
font-size: 12px;
}
#news-headline .news-headline-menu-wrap .sub-lists li:hover a {
text-decoration: underline;
}
#news-headline .news-headline-menu-wrap .sub-lists li a:before {
content: "";
display: inline-block;
width: 1px;
height: 12px;
background-color: #e0e0e0;
margin: 0 5px;
vertical-align: -1px;
}
#news-headline .news-headline-menu-wrap .sub-lists li:first-child a::before {
content: initial;
}
#news-headline .news-headline-lists {
margin-bottom: 12px;
}
#news-headline .news-headline-lists li {
width: 255px;
height: 178px;
border: solid 1px #ccc;
}
#news-headline .news-headline-lists li a {
display: block;
width: 100%;
height: 100%;
}
#news-headline .news-headline-lists li a article {
position: relative;
width: 100%;
height: 100%;
}
#news-headline .news-headline-lists li a article h3 {
width: 100%;
height: 44px;
text-align: center;
line-height: 44px;
}
#news-headline .news-headline-lists li a article .img-wrap {
position: relative;
width: 100%;
height: calc(100% - 44px);
}
#news-headline .news-headline-lists li a article .img-wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#news-headline .news-headline-lists li a article .img-wrap .overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
}
#news-headline .news-headline-lists .img-wrap .overlay .headline-info {
position: absolute;
width: 100%;
left:0;
bottom:0;
padding: 15px 20px;
color: #ffffff;
}
#news-headline .news-headline-lists .img-wrap .overlay .headline-info i {
display: inline-block;
width: 26px;
height: 26px;
background-color: pink;
border-radius: 50%;
margin-right: 10px;
}
#news-headline .news-headline-lists .img-wrap .overlay .headline-info div {
width: calc(100% - 38px);
}
#news-headline .news-headline-lists .img-wrap .overlay .headline-info span {
font-size: 13px;
font-weight: bold;
}
#news-headline .news-headline-lists .img-wrap .overlay .headline-info p {
display: inline;
font-size: 12px;
}
#news-headline .news-headline-arrows .btn-wrap {
margin-right: 15px;
}
#news-headline .news-headline-arrows .btn {
display: block;
width: 24px;
height: 24px;
border: solid 1px #dcdddc;
}
#news-headline .news-headline-arrows .btn.btn-prev {
background-color: purple;
border-left: none;
}
#news-headline .news-headline-arrows .btn.btn-next {
background-color: blue;
}
#news-headline .news-headline-arrows .btn.btn-up {
background-color: cadetblue;
}
/* 뉴스 메인 */
#news-main .news-container {
overflow: hidden;
}
#news-main .news-left {
float: left;
width: 750px;
height: 2000px;
background-color: cadetblue;
}
#news-main .news-right {
float: right;
width: 327px;
height: 2000px;
background-color: salmon;
border-left: solid 1px #dfdfdf;
padding: 25px 0 40px 26px;
}어려운점
-
코드가 너무 길어져 헷갈림
-
index 파일과 연결이 계속되고 또 비슷한데 다른 연결이 있으니 헷갈림
-
앞의 코드를 보고 다시 고치고 또 최근의 코드를 보고 이상한 점을 고치다보니 뭐가 뭔지 찾기가 어려움
해결방법
-
몇가지 임의로 수정하다 코드가 꼬이고 오류가 나타난 적이 많으나 천천히 쪼개서 봄
-
강의를 복습함
학습소감
- HTML과 CSS를 보고 있는데 각자의 뜻이 무엇인지 잘 몰라 혼선이 와서 문제
Please be wonderful but don't be so serious, enjoy this journey with the good people!