<main role="main" id="webtoon_main">
<div class="webtoon_container">
<div class="webtoon_main_left">
<div class="webtoon_carousel webtoon_border">
<div class="webtoon_carousel_left">
<h2>오늘의<br><span>웹툰</span></h2>
<p>5월 19일 수요일</p>
<ul>
<li class="on"><a href="#">인기순</a></li>
<li><a href="#">업데이트순</a></li>
<li><a href="#">조회순</a></li>
<li><a href="#">별점순</a></li>
</ul>
</div>
<div class="webtoon_carousel_right">
<div class="webtoon_carousel_banner">
<img src="https://via.placeholder.com/582x195">
</div>
<div class="webtoon_carousel_banner_nav">
<ul>
<li><img src="https://via.placeholder.com/135x57"></li>
<li><img src="https://via.placeholder.com/135x57"></li>
<li><img src="https://via.placeholder.com/135x57"></li>
<li><img src="https://via.placeholder.com/135x57"></li>
</ul>
<a href="#" class="btn btn_prev"></a>
<a href="#" class="btn btn_next"></a>
</div>
</div>
</div>
<div class="webtoon_banner">
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
img {
vertical-align: middle;
}
button {
border: none;
}
input, textarea {
outline: none;
}
.clearfix {
clear: both;
}
/* webtoon */
.webtoon_border {
border: solid 1px #ced2d7;
}
.webtoon_container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 960px;
margin: 0 auto;
}
#webtoon_main .webtoon_container {
overflow: hidden;
}
#webtoon_main .webtoon_main_left {
float: left;
width: 694px;
height: 2000px;
background-color: yellow;
}
#webtoon_main .webtoon_main_right {
float: right;
width: 240px;
height: 2000px;
background-color: blue;
}
#webtoon_main .webtoon_main_left .webtoon_carousel {
overflow: hidden;
width: 694px;
height: 252px;
background-color: #fff;
margin-bottom: 20px;
}
#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_left {
float: left;
width: 112px;
padding: 15px 5px 0 15px;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_left h2 {
font-size: 25px;
margin-bottom: 5px;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_left span {
color: #00d564;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_left p {
font-size: 11px;
color: #808285;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_left ul {
margin-top: 40px;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_left li {
font-size: 12px;
margin-bottom: 10px;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_left li.on a {
color: #00d564;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_left li:last-child {
margin-bottom: 0;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_left li a {
}
#webtoon_main .webtoon_main_left .webtoon_carousel .webtoon_carousel_right {
float: right;
width: calc(100% - 112px);
}
#webtoon_main .webtoon_main_left .webtoon_carousel_banner {
width: 582px;
height: 195px;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_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;
flex-wrap: wrap;
align-items: center;
width: 540px;
margin: 0 auto;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_banner_nav ul li {
width: 135px;
height: 57px;
border-left: solid 1px #e5e5e5;
border-right: solid 1px #e5e5e5;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_banner_nav ul li:first-child {
border-left: none;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_banner_nav ul li:last-child {
border-right: none;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_banner_nav ul li img {
width: 100%;
height: 100%;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_banner_nav .btn {
position: absolute;
width: 20px;
height: 57px;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_banner_nav .btn.btn_prev {
left: 0;
top: 0;
background-color: lightpink;
}
#webtoon_main .webtoon_main_left .webtoon_carousel_banner_nav .btn.btn_next {
right: 0;
top: 0;
background-color: lightskyblue;
}
#webtoon_main .webtoon_main_left .webtoon_banner {
width: 100%;
height: 80px;
background-color: gray;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.