<div class="wrapper">
<div id="talk">
<ul>
<li class="left_list">
<a href="#">
<i class="icon_arrow icon_arrow_left"></i>
<div class="content_wrap">
<div class="txt_wrap">
<h3>패션뷰티판</h3>
<p>
동해물과 백두산이<br>
마르고 닳도록
</p>
</div>
<img src="https://via.placeholder.com/52">
</div>
</a>
</li>
<li class="left_list">
<a href="#">
<i class="icon_arrow icon_arrow_left"></i>
<div class="content_wrap">
<div class="txt_wrap">
<h3>패션뷰티판</h3>
<p>
동해물과 백두산이<br>
마르고 닳도록
</p>
</div>
<img src="https://via.placeholder.com/52">
</div>
</a>
</li>
<li class="right_list">
<a href="#">
<div class="content_wrap">
<img src="https://via.placeholder.com/52">
<div class="txt_wrap">
<h3>패션뷰티판</h3>
<p>
동해물과 백두산이<br>
마르고 닳도록
</p>
</div>
</div>
<i class="icon_arrow icon_arrow_right"></i>
</a>
</li>
<li class="right_list">
<a href="#">
<div class="content_wrap">
<img src="https://via.placeholder.com/52">
<div class="txt_wrap">
<h3>패션뷰티판</h3>
<p>
동해물과 백두산이<br>
마르고 닳도록
</p>
</div>
</div>
<i class="icon_arrow icon_arrow_right"></i>
</a>
</li>
</ul>
</div>
<div id="today">
<div class="container">
<div class="content_header">
<h2>오늘의 네이버</h2>
<a href="#">더보기</a>
</div>
<div class="content_body">
<img class="banner" src="https://via.placeholder.com/345x140">
<div class="bottom_wrap">
<i class="icon"></i>
<div class="txt_wrap">
<h3>클로바 램프 최대 42% 혜택</h3>
<p>
동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세
</p>
</div>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
ol, ul {
list-style: none;
}
img {
vertical-align: middle;
}
a {
text-decoration: none;
}
button {
border: none;
background-color: transparent;
}
input {
border: none;
background-color: transparent;
}
input:focus {
outline: none;
}
.wrapper {
overflow-x: hidden;
overflow-y: auto;
width: 375px;
height: 100vh;
margin: 0 auto;
background-color: #eaeef3;
}
#talk {
padding: 20px 0;
}
#talk ul {
overflow: hidden; /* 자식이 float */
}
#talk ul li {
position: relative;
width: 277px;
background-color: #fff;
padding: 15px 0;
margin-bottom: 12px;
box-shadow: 0 1px 6px 0 rgb(0 0 0 / 6%), 0 1px 0 0 rgb(0 0 0 / 2%);
}
#talk ul li:last-child {
margin-bottom: 0;
}
#talk ul li .icon_arrow {
display: inline-block;
width: 20px;
height: 16px;
}
#talk ul li a {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: center;
padding: 0 20px;
color: #000;
}
#talk ul li h3 {
font-size: 14px;
font-weight: 600;
}
#talk ul li p {
font-size: 13px;
line-height: 16px;
margin-top: 3px;
}
#talk ul li img {
width: 52px;
height: 52px;
border-radius: 50%;
}
#talk ul .left_list {
float: left;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
}
#talk ul .left_list .icon_arrow_left {
background-color: purple;
}
#talk ul .left_list .content_wrap {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
}
#talk ul .left_list .content_wrap h3 {
color: purple;
}
#talk ul .left_list .content_wrap img {
margin-left: 8px;
}
#talk ul .right_list {
float: right;
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;
}
#talk ul .right_list .icon_arrow_right {
background-color: #0ac666;
}
#talk ul .right_list .content_wrap {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
}
#talk ul .right_list .content_wrap h3 {
color:#0ac666;
}
#talk ul .right_list .content_wrap img {
margin-right: 8px;
}
#today {
padding: 50px 0;
}
#today .container {
padding: 0 20px;
}
#today .content_header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: center;
border-top: solid 1px #e0e4ea;
padding-top: 24px;
margin-bottom: 10px;
}
#today .content_header h2 {
font-size: 18px;
font-weight: bold;
}
#today .content_header a {
color: #767678;
font-size: 14px;
font-weight: 400;
}
#today .content_body {
overflow: hidden;
width: 100%;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 1px 6px 0 rgb(0 0 0 / 6%), 0 1px 0 0 rgb(0 0 0 / 2%);
}
#today .content_body .banner {
width: 100%;
height: 140px;
}
#today .content_body .bottom_wrap {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
padding: 14px 13px 12px 15px;
}
#today .content_body .bottom_wrap .icon {
display: block;
width: 52px;
height: 52px;
background-color: purple;
border-radius: 50%;
margin-right: 8px;
}
#today .content_body .bottom_wrap .txt_wrap h3 {
font-size: 15px;
font-weight: 600;
}
#today .content_body .bottom_wrap .txt_wrap p {
font-size: 13px;
font-weight: 400;
line-height: 16px;
color: #929294;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.