Day 21 네이버 웹툰 2

SUN·2021년 7월 26일

1. 학습 내용

웹툰 왼쪽 상단 베스트 도전 만화 ~ 2가지 타입의 배너

왼쪽 상단 베스트 도전

HTML

				<div class="webtoon-challenge-wrap webtoon-border">
				<h3><span>새로운</span> 베스트 도전만화</h3>
                - 색을 달리주기 위해 span으로 따로 뗌
                
				<img src="https://via.placeholder.com/202px*110px">
				<div class="webtoon-info">
					<div class="webtoon-title-wrap">
						<h4><a href="#">돈 벌다 만난 사이</a></h4>
						<a href="#">twinee2018</a>
					</div>
                    - 가로로 배치되어야함
					<p>
						<a href="#">회사에서 돈 벌다 만나서 함께하는 다른 성향의 두 여자 이야기</a>
					</p>
				</div>
			</div>

CSS

#webtoon-main .webtoon-main-right .webtoon-challenge-wrap {
	width: 100%;
	height: 252px;
	background-color: #f9f9fc;

	padding: 20px 18px;
	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 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-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-info .webtoon-title-wrap h4 a {
	font-size: 13px;}

#webtoon-main .webtoon-main-right .webtoon-info a:hover {
	text-decoration: underline;}

#webtoon-main .webtoon-main-right .webtoon-info .webtoon-title-wrap  a {
	font-size: 12px;}

#webtoon-main .webtoon-main-right .webtoon-info p {
	font-size: 14px;}

#webtoon-main .webtoon-main-right .webtoon-info p a {
	color: grey;}

2 가지 배너

HTML

<div class="webtoon-banner-type-1 webtoon-border"></div>
<div class="webtoon-banner-type-2 webtoon-border"></div>

- 웹툰 보더는 공통 적용

CSS

#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;}
    -타입 1 설정

#webtoon-main .webtoon-main-right .webtoon-banner-type-2 {
	width: 100%;
	height: 86px;
	background-color: pink;}
    - 타입 2 설정

오른쪽 랭킹 부분

인기 급상승 만화 랭킹

HTMl

<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>
      - 총 10개의 순위/ 복사해서 사용

CSS

#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 {
	display: flex;
	flex-wrap: wrap;
	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;
	/*활성화된 탭(active)에서는 보더를 없애고 비활성화 된 탭에서 보더가 나타남*/

	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%;
	background-color: #ffffff;

	padding: 15px 0 7px;}


#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;}
    - 번호와 제목의 정렬 설정

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li {
	display: flex;
		flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	font-size: 12px;
	margin-bottom: 7px;
	padding: 0 13px;}
    - 위 항목과 순위변동, 아이콘을 정렬

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li a {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	/*줄바꿈을 하지 않고 한줄로 이어짐*/
	text-overflow: ellipsis;
	/*overflow 히든으로 보이지 않는 글에 대해 말줄임표로 나타냄*/

	width: 140px;}

#webtoon-main .webtoon-main-right .webtoon-popular .rank-content .rank {
	margin-right: 5px;}

#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-box {
	position: relative;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;

	width: 30px;
	height: 12px;

	top: -3px;}

#webtoon-main .webtoon-main-right .webtoon-popular .rank-box .status {
	width: 12px;
	height: 12px;}	

#webtoon-main .webtoon-main-right .webtoon-popular .rank-box .status.status-stay {
	background-color: black;}

#webtoon-main .webtoon-main-right .webtoon-popular .rank-box .status.status-up {
	background-color: red;}

#webtoon-main .webtoon-main-right .webtoon-popular .rank-box .status.status-down {
	background-color: blue;}

연령별 실시간 인기 만화

HTML

  • 인기 급상승 코드를 복사

    		<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-customs">1.</span>
									<div class="image-wrap">
										<img src="https://via.placeholder.com/30px*33px">
										<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">1</span>
								</div>
							</li>

CSS

  • 썸네일 이미지 부분만 수정

    		#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank-customs {
		position: relative;
		top: -10px;
		/*랭크 커스텀이라는 클래스를 만들어 위와 같이 설정하여 번호를 위쪽으로 옮김*/}

		#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap {

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    			width: 140px;}
      -이미지와 제목, 작가 부분 배치

		#webtoon-main .webtoon-main-right .webtoon-popular .rank-content .image-wrap img {
			width: 30px;
			height: 33px;
			margin-right: 5px;}

		#webtoon-main .webtoon-main-right .webtoon-popular .image-wrap .webtoon-info a {
		width: 100px;}
  - 제목, 이미지의 넓이

		#webtoon-main .webtoon-main-right .webtoon-popular .image-wrap .webtoon-info .author {
		display: block;}
  - 블록을 주어 제목과 작가를 y축으로 정렬

네이버 웹툰 하단

HTML

<footer id="webtoon-footer">
	<div class="webtoon-container">
		<div class="webtoon-footer-wrap ">
        - left와 right가 공통된 부분이 많음
        
			<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>&copy; naver corp</span>
				<!-- html에서 입력할 수 있는 기호가 있다. html 특수문자 코드표 검색` -->
				
			</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>&copy; naver webtoon corp</span>
			</div>
		</div>

			<p class="webtoon-footer-paragraph">
			본 콘텐츠의 저작권은 저자 또는 제공처에 있으며, 이를 무단 이용하는 경우 저작권법 등에 따라 법적 책임을 질 수 있습니다
			</p>
	</div>
</footer>

CSS

#webtoon-footer {
	padding-bottom: 78px;

	font-size: 12px;}
    - 아래 공간을 주고 푸터의 모든 글자는 12포인트

#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: 35px;}

#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 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:before {
	display: inline-block;
    - 이것을 부여해야 작대기가 나타남

	content: "";
	width: 1px;
	height: 11px;
	background-color: #d9d9d9;

	vertical-align: -1px;
	margin: 0 8px;}


#webtoon-footer .webtoon-footer-wrap span {
	text-transform: uppercase;
	/*문자를 대문자로 전환,lowercase는 소문자, capitalize는 첫글자만 대문자*/}

#webtoon-footer .webtoon-footer-paragraph {
	padding-left: 25px;}

#webtoon-footer .webtoon-footer-wrap .webtoon-footer-left {
	border-right: solid 1px grey;}

웹툰 디테일 메인

메인의 상단

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>

CSS

.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 li {
	width: auto;
	/*안에 있는 컨텐츠로 넓이 설정*/
	height: 36px;

	margin-right: 28px;}

.webtoon-detail .nav-1 li:last-child {
	margin-right: 0;}	

.webtoon-detail .nav-1 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 #e5e5e5;}

.webtoon-detail .nav-2 ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;}

.webtoon-detail .nav-2 li {
	margin-right: 14px;
	padding-bottom: 5px;
	border-bottom: solid 2px transparent;
	/*모든 곳에 border를 넣어주어서 라인을 맞춰준다. on이 아닌 곳은 투명한 라인(transparent)*/}

.webtoon-detail .nav-2 li.on {
	border-color: #;
	margin-bottom: -1px;
	font-weight: bolder;}

.webtoon-detail .nav-2 li:last-child {
  margin-right: 0;}

.webtoon-detail .nav-2 li a {
	font-size: 13px;}

메인 - 이달의 신규웹툰

HTML

<div id="webtoon-this-month">
				<h2>이달의 신규 웹툰</h2>

				<ul class="webtoon-this-lists">
					<li class="webtoon-this-list">
						
						<div class="this-image-wrap webtoon-border">
							<img src="https://via.placeholder.com/150px*150px">
							<span class="new-mark">new</span>
						</div>

						<h3>아찔한 전남편</h3>
						<span class="author">별규, 기뭉/여백</span>
						<p>국민 여배우 하은성, 여배우 전성기 시절 남편과 첫눈에 반해서 결혼했고</p>
					</li>
					<li class="webtoon-this-list">
						
						<div class="this-image-wrap webtoon-border">
							<img src="https://via.placeholder.com/150px*150px">
							<span class="new-mark">new</span>
						</div>

						<h3>아찔한 전남편</h3>
						<span class="author">별규, 기뭉/여백</span>
						<p>국민 여배우 하은성, 여배우 전성기 시절 남편과 첫눈에 반해서 결혼했고</p>
					</li>
					<li class="webtoon-this-list">
						
						<div class="this-image-wrap webtoon-border">
							<img src="https://via.placeholder.com/150px*150px">
							<span class="new-mark">new</span>
						</div>

						<h3>아찔한 전남편</h3>
						<span class="author">별규, 기뭉/여백</span>
						<p>국민 여배우 하은성, 여배우 전성기 시절 남편과 첫눈에 반해서 결혼했고</p>
					</li>
				</ul>
			</div>

CSS

.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-this-lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;}

.webtoon-detail #webtoon-this-month .webtoon-this-lists .webtoon-this-list {
	width: 218px;}

.webtoon-detail #webtoon-this-month .webtoon-this-list .this-image-wrap {
	position: relative;
	width: 100%;
	height: 120px;
	margin-bottom: 5px;}

.webtoon-detail #webtoon-this-month .webtoon-this-list .this-image-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;}

.webtoon-detail #webtoon-this-month .webtoon-this-list .this-image-wrap .new-mark {
	position: absolute;
	width: 30px;
	background-color: #00d564;
	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 {
	display: block;
    -블록 요소를 줘야 마진이 적용, 인라인은 적용 안됨
	font-size: 14px;
	margin-bottom: 5px;}

.webtoon-detail #webtoon-this-month .webtoon-this-list p {
	font-size: 14px;

메인 - 요일별 전체 웹툰

HTML

<div id="webtoon-total-day">
				<div class="webtoon-total-title-wrap">
					<h2>요일별 전체 웹툰</h2>
					<ul>
						<li><a href="#">인기순</a></li>
						<li><a href="#">조회순</a></li>
						<li><a href="#">업데이트순</a></li>
						<li><a href="#">별점순</a></li>
					</ul>
				</div>
				
				<ul class="webtoon-day-lists">
					<li class="webtoon-day-list active">
					<!-- active 활성화된 창을 나타냄 -->
						<span>일요웹툰</span>

						<ul class="webtoon-lists">
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
						</ul>
					</li>
					<li class="webtoon-day-list">
						<span>월요웹툰</span>

						<ul class="webtoon-lists">
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
						</ul>
					</li>
					<li class="webtoon-day-list">
						<span>화요웹툰</span>

						<ul class="webtoon-lists">
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
						</ul>
					</li>
					<li class="webtoon-day-list">
						<span>수요웹툰</span>

						<ul class="webtoon-lists">
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
						</ul>
					</li>
					<li class="webtoon-day-list">
						<span>목요웹툰</span>

						<ul class="webtoon-lists">
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
							<li class="webtoon-list">
								<img src="https://via.placeholder.com/84px*90px">
								<h3>참교육</h3>
							</li>
						</ul>
					</li>
     - 7개 만들기

CSS

.webtoon-detail #webtoon-total-day {
	padding-top: 20px;}

.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding-bottom: 8px;
	border-bottom: solid 1px #eaeaea;}
    - 전체 웹툰의 머리 부분의 배치

.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap h2 {
	font-size: 16px;}

.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;}

.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap li {
	margin-right: 10px;}

.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap li:last-child {
	margin-right: 0;}

.webtoon-detail #webtoon-total-day .webtoon-total-title-wrap a {
	font-size: 12px;}

.webtoon-detail #webtoon-total-day .webtoon-day-lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
/*개수가 달라도 위에서 부터 내려올 수 있도록 플렉스 스타트 적용 center 적용시 각각 개수가 다르면 붕뜸*/

border-bottom: solid 1px #f4f4f4;}

.webtoon-detail #webtoon-total-day .webtoon-day-list {

	width: 14.2855%;
    -7개가 들어갈 수 있도록 설정
	text-align: center;
	border-right: solid 1px #f4f4f4;

	padding: 0 8px;}

.webtoon-detail #webtoon-total-day .webtoon-day-list.active {
	background-color: #3a3a3a;
	color: #fbcb00;}
    -활성화된 창의 배경과 글자색 설정

.webtoon-detail #webtoon-total-day .webtoon-day-list:last-child {
	border-right: none;}

.webtoon-detail #webtoon-total-day .webtoon-day-list 	.webtoon-list {
	margin-bottom: 10px;}

.webtoon-detail #webtoon-total-day .webtoon-day-list .webtoon-list img {
	width: 100%;
	margin-bottom: 5px;}

.webtoon-detail #webtoon-total-day .webtoon-day-list span {
	display: block;
	height: 32px;
	line-height: 32px;}

.webtoon-detail #webtoon-total-day .webtoon-day-list span,
.webtoon-detail #webtoon-total-day .webtoon-day-list 	.webtoon-list h3 {

	font-size: 14px;}

2. 학습 중 어려웠던 점

내용이 비슷하여 어려운 점은 없었다.

3. 해결 방안

html 코드와 css 코드가 일치하는 지와 구조에 대해서 파악해야할 것 같다.

4. 학습 소감

빨리 java를 공부하고 싶다.

profile
SUN
안녕하세요!
이전 포스트

Day 20. 네이버 웹툰 1

다음 포스트

Day 22 네이버 블로그 1

0개의 댓글