학습한 내용
webtoon.html
<div class="webtoon-main-right">
<div class="webtoon-challenge-wrap webtoon-border">
<h3><span>새로운</span>베스트 도전만화</h3>
<img src="http://via.placeholder.com/202x110">
<div class="webtoon-info">
<div class="webtoon-title-wrap">
<h4><a href="#">돈벌다 만난사이</a></h4>
<a href="#">istell97</a>
</div>
<p><a href="#">회사에서 돈 벌다 만나서 함께하는 서로 다른 성향의 두 여자 이야기</a></p>
</div>
</div>
<div class="webtoon-banner-type-1 webtoon-border"></div>
<div class="webtoon-popular webtoon-border">
<div class="webtoon-popular-header">
<h2>인기급상승 만화</h2>
</div>
<ul class="webtoon-popular-tabs">
<li class="tab active">
<span>인기순</span>
</li>
<li class="tab">
<span>업데이트순</span>
</li>
</ul>
<div class="webtoon-popular-ranking">
<ol>
<li>
<div class="rank-content">
<span class="rank">1</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-stay"></div>
<span class="number">0</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">2</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-up"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
</ol>
</div>
</div>
<div class="webtoon-popular webtoon-border">
<div class="webtoon-popular-header">
<h2>30대 실시간 인기만화</h2>
</div>
<ul class="webtoon-popular-tabs">
<li class="tab">
<span>남자</span>
</li>
<li class="tab active">
<span>여자</span>
</li>
</ul>
<div class="webtoon-popular-ranking">
<ol>
<li>
<div class="rank-content">
<span class="rank rank-custom">1</span>
<div class="image-wrap">
<img src="http://via.placeholder.com/30x33">
<div class="webtoon-info">
<a href="#">헬퍼 2: 킬베로스</a>
<span class="author">샥</span>
</div>
</div>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-stay"></div>
<span class="number">0</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank rank-custom">1</span>
<div class="image-wrap">
<img src="http://via.placeholder.com/30x33">
<div class="webtoon-info">
<a href="#">헬퍼 2: 킬베로스</a>
<span class="author">샥</span>
</div>
</div>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-stay"></div>
<span class="number">0</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank rank-custom">1</span>
<div class="image-wrap">
<img src="http://via.placeholder.com/30x33">
<div class="webtoon-info">
<a href="#">헬퍼 2: 킬베로스</a>
<span class="author">샥</span>
</div>
</div>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-stay"></div>
<span class="number">0</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank rank-custom">1</span>
<div class="image-wrap">
<img src="http://via.placeholder.com/30x33">
<div class="webtoon-info">
<a href="#">헬퍼 2: 킬베로스</a>
<span class="author">샥</span>
</div>
</div>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-stay"></div>
<span class="number">0</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank rank-custom">1</span>
<div class="image-wrap">
<img src="http://via.placeholder.com/30x33">
<div class="webtoon-info">
<a href="#">헬퍼 2: 킬베로스</a>
<span class="author">샥</span>
</div>
</div>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-up"></div>
<span class="number">0</span>
</div>
</li>
</ol>
</div>
</div>
<div class="webtoon-banner-type-2 webtoon-border"></div>
<div class="webtoon-banner-type-2 webtoon-border"></div>
<div class="webtoon-banner-type-2 webtoon-border"></div>
<div class="webtoon-banner-type-2 webtoon-border"></div>
</div>
</div>
</main>
<footer id="webtoon-footer">
<div class="webtoon-container">
<div class="webtoon-footer-wrap">
<div class="webtoon-footer-left">
<ul>
<li><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>
<span>© naver corp</span>
</div>
<div class="webtoon-footer-right">
<ul>
<li><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>
<span>© naver webtoon corp</span>
</div>
</div>
<p class="webtoon-footer-paragraph">
본 콘텐츠의 저작권은 저자 또는 제공처에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임질 수 있습니다.
</p>
</div>
</footer>
</body>
</html>webtoon_detail.html
<main role="main" id="webtoon-main" class="webtoon-detail">
<nav class="nav-1">
<div class="webtoon-container">
<ul>
<li><a href="#">요일별</a></li>
<li><a href="#">장르별</a></li>
<li><a href="#">작품별</a></li>
<li><a href="#">작가별</a></li>
</ul>
</div>
</nav>
<div class="webtoon-container">
<div class="webtoon-main-left">
<nav class="nav-2">
<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>
<div id="webtoon-this-month">
<h2>이달의 신규 웹툰</h2>
<ul class="webtoon-this-lists">
<li class="webtoon-this-lists">
<div class="this-image-wrap webtoon-border">
<img src="http://via.placeholder.com/150x150">
<span class="new-mark">new</span>
</div>
<h3>아찔한 전남편</h3>
<span class="author">별규, 기뭉 / 여백</span>
<p>국민 여배우 하은, 남편과 첫눈에 반해서 결혼했따.</p>
</li>
</ul>
</div>
</div>
<div class="webtoon-main-right">
<div class="webtoon-challenge-wrap webtoon-border">
<h3><span>새로운</span>베스트 도전만화</h3>
<img src="http://via.placeholder.com/202x110">
<div class="webtoon-info">
<div class="webtoon-title-wrap">
<h4><a href="#">돈벌다 만난사이</a></h4>
<a href="#">istell97</a>
</div>
<p><a href="#">회사에서 돈 벌다 만나서 함께하는 서로 다른 성향의 두 여자 이야기</a></p>
</div>
</div>
<div class="webtoon-banner-type-1 webtoon-border"></div>
<div class="webtoon-popular webtoon-border">
<div class="webtoon-popular-header">
<h2>인기급상승 만화</h2>
</div>
<ul class="webtoon-popular-tabs">
<li class="tab active">
<span>인기순</span>
</li>
<li class="tab">
<span>업데이트순</span>
</li>
</ul>
<div class="webtoon-popular-ranking">
<ol>
<li>
<div class="rank-content">
<span class="rank">1</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-stay"></div>
<span class="number">0</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">2</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-up"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank">3</span>
<a href="#">급식아빠-18화 죽은지 얼마나 됐나요?</a>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-down"></div>
<span class="number">1</span>
</div>
</li>
</ol>
</div>
</div>
<div class="webtoon-popular webtoon-border">
<div class="webtoon-popular-header">
<h2>30대 실시간 인기만화</h2>
</div>
<ul class="webtoon-popular-tabs">
<li class="tab">
<span>남자</span>
</li>
<li class="tab active">
<span>여자</span>
</li>
</ul>
<div class="webtoon-popular-ranking">
<ol>
<li>
<div class="rank-content">
<span class="rank rank-custom">1</span>
<div class="image-wrap">
<img src="http://via.placeholder.com/30x33">
<div class="webtoon-info">
<a href="#">헬퍼 2: 킬베로스</a>
<span class="author">샥</span>
</div>
</div>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-stay"></div>
<span class="number">0</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank rank-custom">1</span>
<div class="image-wrap">
<img src="http://via.placeholder.com/30x33">
<div class="webtoon-info">
<a href="#">헬퍼 2: 킬베로스</a>
<span class="author">샥</span>
</div>
</div>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-stay"></div>
<span class="number">0</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank rank-custom">1</span>
<div class="image-wrap">
<img src="http://via.placeholder.com/30x33">
<div class="webtoon-info">
<a href="#">헬퍼 2: 킬베로스</a>
<span class="author">샥</span>
</div>
</div>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-stay"></div>
<span class="number">0</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank rank-custom">1</span>
<div class="image-wrap">
<img src="http://via.placeholder.com/30x33">
<div class="webtoon-info">
<a href="#">헬퍼 2: 킬베로스</a>
<span class="author">샥</span>
</div>
</div>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-stay"></div>
<span class="number">0</span>
</div>
</li>
<li>
<div class="rank-content">
<span class="rank rank-custom">1</span>
<div class="image-wrap">
<img src="http://via.placeholder.com/30x33">
<div class="webtoon-info">
<a href="#">헬퍼 2: 킬베로스</a>
<span class="author">샥</span>
</div>
</div>
</div>
<div class="rank-box">
<!-- status-stay, status-up, status-down -->
<div class="status status-up"></div>
<span class="number">0</span>
</div>
</li>
</ol>
</div>
</div>
<div class="webtoon-banner-type-2 webtoon-border"></div>
<div class="webtoon-banner-type-2 webtoon-border"></div>
<div class="webtoon-banner-type-2 webtoon-border"></div>
<div class="webtoon-banner-type-2 webtoon-border"></div>
</div>
</div>
</main>
<footer id="webtoon-footer">
<div class="webtoon-container">
<div class="webtoon-footer-wrap">
<div class="webtoon-footer-left">
<ul>
<li><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>
<span>© naver corp</span>
</div>
<div class="webtoon-footer-right">
<ul>
<li><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>
<span>© naver webtoon corp</span>
</div>
</div>
<p class="webtoon-footer-paragraph">
본 콘텐츠의 저작권은 저자 또는 제공처에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임질 수 있습니다.
</p>
</div>
</footer>
</body>
</html>css
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap{
width: 100%;
height: 252px;
background-color: #f9f9fc;
padding: 20px 10px;
margin-bottom: 20px;
}
#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{
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info .webtoon-title-wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
#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 a:hover{
text-decoration: underline;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info .webtoon-title-wrap a{
font-size: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info p{
font-size: 14px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info p a{
color: gray;
}
#webtoon-main .webtoon-main-right .webtoon-banner-type-1,
#webtoon-main .webtoon-main-right .webtoon-banner-type-2{
margin-bottom: 8px;
}
#webtoon-main .webtoon-main-right .webtoon-banner-type-1 {
width: 240px;
height: 240px;
background-color: yellow;
}
#webtoon-main .webtoon-main-right .webtoon-banner-type-2 {
width: 100%;
height: 86px;
background-color: pink;
}
#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;
flex-wrap: wrap;
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{
border-top: solid 1px #e1e1e1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#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.active{
border-bottom: solid 1px #ffffff;
}
#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-ranking{
width: 100%;
/*height: 210px;*/
background-color: #ffffff;
padding: 15px 0 7px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking ol{
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li{
font-size: 12px;
margin-bottom: 7px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 0 13px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content a{
display: inline-block;
overflow: hidden;
width: 140px;
white-space: nowrap;
text-overflow: ellipsis;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content .rank{
margin-right: 5px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box{
width: 30px;
height: 12px;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
top: -3px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status{
width: 12px;
height: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-stay{
background-color: black;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-up{
background-color: red;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .status.status-down{
background-color: blue;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box .number{
}
/*썸네일 이미지가 포함된 랭킹*/
#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 .image-wrap{
width: 140px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap img{
width: 30px;
height: 33px;
margin-right: 5px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap .webtoon-info{
background-color: yellow;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap .webtoon-info a{
width: 100px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap .webtoon-info .author{
display: block;
}
#webtoon-footer {
padding-bottom: 78px;
}
#webtoon-footer .webtoon-container{
border-top: solid 1px #e6e7e8;
padding-top: 40px;
}
#webtoon-footer .webtoon-footer-wrap{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
margin-bottom: 32px;
}
#webtoon-footer .webtoon-footer-wrap .webtoon-footer-left,
#webtoon-footer .webtoon-footer-wrap .webtoon-footer-right{
width: 50%;
padding-left: 25px;
}
#webtoon-footer .webtoon-footer-wrap .webtoon-footer-right{
border-left: solid 1px gray;
}
#webtoon-footer .webtoon-footer-wrap ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
margin-bottom: 8px;
}
#webtoon-footer .webtoon-footer-wrap ul li:first-child:before{
content: initial;
}
#webtoon-footer .webtoon-footer-wrap ul li{
/*margin-right: 5px;*/
}
#webtoon-footer .webtoon-footer-wrap ul li:before{
display: inline-block;
content: "";
width: 1px;
height: 11px;
background-color: #d9d9d9;
vertical-align: -1px;
margin: 0 8px;
}
#webtoon-footer .webtoon-footer-wrap ul li a{
font-size: 12px;
}
#webtoon-footer .webtoon-footer-wrap span{
text-transform: uppercase;
}
#webtoon-footer .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;
flex-wrap: wrap;
align-items: center;
}
.webtoon-detail .nav-1 ul li{
width: auto;
height: 36px;
margin-right: 28px;
}
.webtoon-detail .nav-1 ul li:last-child{
margin-right: 0;
}
.webtoon-detail .nav-1 ul li a{
width: 100%;
height: 100%;
display: block;
line-height: 36px;
text-align: center;
font-size: 12px;
color: #434343;
}
.webtoon-detail .nav-2{
padding-top: 20px;
border-bottom: solid 1px #e5e5e5;
}
.webtoon-detail .nav-2 ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
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.on{
border-color: #00d564;
/*border-bottom: solid 2px #00d564;*/
margin-bottom: -1px;
font-weight: 700;
}
.webtoon-detail .nav-2 ul li:last-child{
margin-right: 0;
}
.webtoon-detail .nav-2 ul li a{
font-size: 13px;
}
#webtoon-detail #webtoon-this-month{
}
#webtoon-detail #webtoon-this-month h2{
font-size: 16px;
margin-bottom: 8px;
}
#webtoon-detail #webtoon-this-month .webtoon-this-lists{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#webtoon-detail #webtoon-this-month .webtoon-this-list{
width: 218px;
}
#webtoon-detail #webtoon-this-month .webtoon-this-list .this-image-wrap{
width: 100%;
height: 120px;
position: relative;
margin-bottom: 5px;
}
#webtoon-detail #webtoon-this-month .webtoon-this-lists .this-image-wrap img{
position: absolute;
width: 100%;
height: 100%;
}
#webtoon-detail #webtoon-this-month .webtoon-this-lists .this-image-wrap .new-mark{
position: absolute;
width: 30px;
background-color: #00c85e;
color: #ffffff;
}
#webtoon-detail #webtoon-this-month .webtoon-this-list h3{
font-size: 14px;
margin-bottom: 5px;
}
#webtoon-detail #webtoon-this-month .webtoon-this-list .author{
font-size: 14px;
}
#webtoon-detail #webtoon-this-month .webtoon-this-list p{
font-size: 14px;
}
학습내용 중 어려웠던 점
white-space: nowrap; 코드에서 nowrap을 norwap으로 오타로 쳐서 계속 말 줄임 상태가 되지않았다.
해결 방법
분명히 넣었는데 왜 안되는지 생각을 해보며 차근차근 틀린 것들을 찾아나가보니 오타 부분을 찾을 수 있었다.
학습소감
공식에는 없는? 단어들(오타)이면 프로그램상 틀렸다고 표시가 되면 좋겠으나.. 그게 안되니.. 오타를 치더라도 잘 찾을 수 있도록 어떤 부분에서 안되고 있는지 생각할 수 있는 사고력을 키워야겠다.
hello