7월 26일 Velog

198895 단어 대구AI스쿨대구AI스쿨

학습한 내용

네이버 웹툰 실습

1. Main Right

(0) Default

[html]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="css/style.css">

	<title>웹툰</title>
</head>
<body>

	<header id="webtoon_header"></header>
    
	<main role="main" id="webtoon_main">
		<div class="webtoon_container">

			<div class="webtoon_main_left"></div>



			<div class="webtoon_main_right">				
            			<div class="webtoon_best_challenge_wrap webtoon_border"></div>


				<div class="webtoon_banner_type_1 webtoon_border"></div>

				<div class="webtoon_banner_type_2 webtoon_border"></div>


				<div class="webtoon_popular webtoon_border"></div>

				<div class="webtoon_popular 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"></footer>

</body>
</html>

[css]

#webtoon_main .webtoon_main_right {
	float: right;

	width: 240px;
}

(1) webtoon best challenge

[html]

				<div class="webtoon_best_challenge_wrap webtoon_border">
					<h3><span>새로운</span> 베스트 도전만화</h3>
					<img src="https://via.placeholder.com/202x110">

					<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_best_challenge_wrap {
	width: 100%;
	height: 252px;
	background-color: #f9f9fc;

	padding: 20px 18px;
	margin-bottom: 20px;
}

.webtoon_main_right .webtoon_best_challenge_wrap h3 {
	font-size: 16px;

	margin-bottom: 11px;
}

.webtoon_main_right .webtoon_best_challenge_wrap h3 span {
	color: #00d564;
}

.webtoon_main_right .webtoon_best_challenge_wrap img {
	width: 100%;
	height: 110px;

	margin-bottom: 18px;
}


.webtoon_main_right .webtoon_best_challenge_wrap .webtoon_info a:hover {
	text-decoration: underline;
}

.webtoon_main_right .webtoon_best_challenge_wrap .webtoon_info .webtoon_title_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	margin-bottom: 5px;
}

.webtoon_main_right .webtoon_best_challenge_wrap .webtoon_info .webtoon_title_wrap h4 a {
	font-size: 14px;
}

.webtoon_main_right .webtoon_best_challenge_wrap .webtoon_info .webtoon_title_wrap a {
	font-size: 12px;
}

.webtoon_main_right .webtoon_best_challenge_wrap .webtoon_info p {
	font-size: 12px;
}

.webtoon_main_right .webtoon_best_challenge_wrap .webtoon_info p a {
	color: grey;
}
  • 디폴트로 지정한 클래스 부여해서 볼더로 감싼다.
  • 헤드라인/이미지/텍스트 서랍장(상단/하단 구분)
  • 높이는 왼쪽 carousel과 같은 높이로 설정

(2) banner type 1

[html]

				<div class="webtoon_banner_type_1 webtoon_border"></div>

[css]

#webtoon_main .webtoon_main_right .webtoon_banner_type_1  {
	height: 240px;
	background-color: black;
}

#webtoon_main .webtoon_main_right .webtoon_banner_type_1 {
	margin-bottom: 8px;
}

(3) banner type 2

[html]

				<div class="webtoon_banner_type_2 webtoon_border"></div>

[css]

#webtoon_main .webtoon_main_right .webtoon_banner_type_2 {
	margin-bottom: 8px;
}

#webtoon_main .webtoon_main_right .webtoon_banner_type_2 {
	height: 86px;
	background-color: black;
}
  • 큰 배너/작은 배너 클래스 추가로 만들어서 구분한다.
  • 각각 디폴트로 지정한 클래스 부여해서 볼더로 감싼다.

※ 블록 요소(div)는 width의 디폴트 값으로 부모 영역의 width 값을 가진다.

(4) webtoon popular #1

[html]

				<div class="webtoon_popular webtoon_border">
					
					<div class="webtoon_popular_header">
						<h2>인기급상승 만화</h2>
					</div>

					<ul class="webtoon_popular_taps">
						<li class="tap active"><span>인기순</span></li>
						<li class="tap"><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">4</span>
								</div>
							</li>
							<li>
								<div class="rank_content">
									<span class="rank">4</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">5</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">6</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">7</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">8</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">9</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">10</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>
						</ol>
					</div>

				</div>

[css]

#webtoon_main .webtoon_main_right .webtoon_popular {
	background-color: #ffffff;

	margin-bottom: 8px;
}

.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_right .webtoon_popular .webtoon_popular_header h2 {
	font-size: 14px;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_taps {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	border-top: solid 1px #e1e1e1;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_taps .tap {
	width: 50%;
	height: 30px;

	border-bottom: solid 1px #e1e1e1;

	text-align: center;
} 

.webtoon_main_right .webtoon_popular .webtoon_popular_taps .tap:first-child {
	border-right: solid 1px #e1e1e1;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_taps .tap.active {
	border-bottom: solid 1px #ffffff;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_taps span {
	display: block;

	width: 100%;
	height: 100%;

	line-height: 30px;
	/*y축 중앙 정렬 -> height: 30px;*/
	font-size: 12px;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking {
	width: 100%;
	/*height: 210px;*/
	/*content만큼 높이값을 잡겠다.*/
	background-color: #ffffff;

	padding: 15px 0 7px;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking ol {
	/*list-style: decimal;*/
	/*리스트 스타일 주면 영역을 벗어나기 때문에 span 태그로 대체*/
}

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking ol li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	font-size: 12px;

	margin-bottom: 7px;
	padding: 0 13px;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking li .rank_content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking li .rank_content .rank {
	margin-right: 5px;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking li .rank_content a {
	display: inline-block; 
	/*공간의 크기를 부여하기 위해 지정 width*/

	white-space: nowrap;
	/*컨텐츠가 공간을 벗어날 때 자동 줄바꿈 방지*/
	overflow: hidden;
	/*정해진 공간을 벗어나는 내용은 숨김처리*/
	text-overflow: ellipsis;
	/*숨겨진 내용 말줄임표로 표현*/

	width: 140px;	
}

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking li .rank_content a:hover {
	text-decoration: underline;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box {
	position: relative;
	/*위치 이동 하기 위해 top*/
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	width: 30px;
	height: 12px;

	top: -3px;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box .status {
	width: 12px;
	height: 12px;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box .status.status_stay {
	background-color: black;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box .status.status_up {
	background-color: red;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_box .status.status_down {
	background-color: blue;
}
  • 디폴트로 지정한 클래스 부여해서 볼더로 감싼다.
  • 위/아래 영역의 header는 동일
  • 아래 영역의 header에서 헤드라인과 버튼 정렬 시키기 위해 미리 flex 지정
    ※ justify-content: space-between; 은 박스가 하나이거나 둘이거나 상관 없다. 어차피 첫 박스는 왼쪽부터 정렬되기 때문이다.
  • webtoon_popular_ranking의 컨텐츠는 우선순위가 있기 때문에 ol 태그를 사용한다.
  • 초기화 작업으로 ol의 리스트 스타일 사라져있으므로 다시 숫자 스타일 지정해준다.

(5) webtoon popular #2

[html]

				<div class="webtoon_popular webtoon_border">
					
					<div class="webtoon_popular_header">
						<h2>30대 실시간 인기만화</h2>
					</div>

					<ul class="webtoon_popular_taps">
						<li class="tap"><span>남자</span></li>
						<li class="tap 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="https://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">2</span>
									<div class="image_wrap">
										<img src="https://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">3</span>
									<div class="image_wrap">
										<img src="https://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">4</span>
									<div class="image_wrap">
										<img src="https://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">5</span>
									<div class="image_wrap">
										<img src="https://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>
						</ol>
					</div>

				</div>

[css]

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_content .rank.rank_custom {
	position: relative;

	top: -10px;
}

.webtoon_main_right .webtoon_popular .webtoon_popular_ranking .rank_content .image_wrap {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;

	width: 140px;
}

.webtoon_main_right .webtoon_popular_ranking .rank_content .image_wrap img {
	width: 30px;
	height: 33px;

	margin-right: 5px;
}

.webtoon_main_right .webtoon_popular_ranking .rank_content .image_wrap .webtoon_info {
	/*background-color: yellow;*/
}

.webtoon_main_right .webtoon_popular_ranking .rank_content .image_wrap .webtoon_info a {
	width: 100px;
}

.webtoon_main_right .webtoon_popular_ranking .rank_content .image_wrap .webtoon_info .author {
	display: block;
	/*x축 정렬되어 있는 span 태그를 아래로 y축 정렬*/
}

2. Footer

[html]

	<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>	
					</ul>
					<span>&copy; 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>			
					</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;
}

#webtoon_footer .webtoon_container {
	border-top: solid 1px #e6e7e8;

	padding-top: 40px;
}

#webtoon_footer .webtoon_footer_wrap {
	display: flex;
	flex-wrap: nowrap;
	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: 5px;
}

#webtoon_footer .webtoon_footer_wrap .webtoon_footer_right {
	border-left: solid 1px grey;
}

#webtoon_footer .webtoon_footer_wrap ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;

	margin-bottom: 8px;
}

#webtoon_footer .webtoon_footer_wrap ul li {
}

#webtoon_footer .webtoon_footer_wrap ul li:before {
	display: inline-block;

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

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

#webtoon_footer .webtoon_footer_wrap ul li:first-child:before {
	content: none;
}

#webtoon_footer .webtoon_footer_wrapul li a {

}

#webtoon_footer .webtoon_footer_wrap span {
	text-transform: capitalize;
}

#webtoon_footer .webtoon_footer_paragraph {
	padding-left: 5px;
}
  • &copy; : html 특수문자, 카피라이터

3. Webtoon Detail

header, footer, main right는 webtoon.html과 동일한 코드를 사용한다.

[html]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="css/style.css">

	<title>웹툰</title>
</head>
<body>

	<header id="webtoon_header"></header>
    
 	<main role="main" id="webtoon_main" class="webtoon_detail">
    
    		<nav class="nav_1"></nav>
            
            	<div class="webtoon_container">
                  	<div class="webtoon_main_left"></div>

                  	<div class="webtoon_main_right"></div>
            	</div>
    	</main>

	<footer id="webtoon_footer"></footer>

</body>
</html>

[css]

.webtoon_detail {
	padding-top: 0;
}

4. Webtoon Detail - nav 1

[html]

			<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>

[css]

.webtoon_detail .nav_1 {
	background-color: #fafafa;

	border-bottom: solid 1px #ededed;
}

.webtoon_detail .nav_1 ul {
	display: flex;
	flex-wrap: nowrap;
	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 {
	display: block;
	width: 100%;
	height: 100%;

	line-height: 36px;
	text-align: center;
	font-size: 12px;
	color: #434343;
}

5. Webtoon Detail - Main Left

[html]

			<div class="webtoon_main_left">

				<nav class="nav_2"></nav>

				<div class="webtoon_this_month"></div>

				<div class="webtoon_banner"></div>

				<div class="webtoon_total_day"></div>

			</div>

(1) nav 2

[html]

				<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>

[css]

.webtoon_detail .nav_2 {
	padding-top: 20px;

	border-bottom: solid 1px #e5e5e5;

}

.webtoon_detail .nav_2 ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.webtoon_detail .nav_2 ul li {
	margin-right: 14px;
	padding-bottom: 5px;
	border-bottom: solid 2px transparent;
	/*투명한 볼더, on 태그와 위치 맞추기*/
}

.webtoon_detail .nav_2 ul li:last-child {
	margin-right: 0;
}

.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 .nav_2 ul li a {
	font-size: 13px;
}

(2) webtoon this month

[html]

				<div class="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/218x120">
								<span class="new_mark">new</span>
							</div>

							<h3><strong>아찔한 전남편</strong></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/218x120">
								<span class="new_mark">new</span>
							</div>

							<h3><strong>아찔한 전남편</strong></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/218x120">
								<span class="new_mark">new</span>
							</div>

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

[css]

.webtoon_detail .webtoon_main_left .webtoon_this_month {
	padding: 20px 0;
}

.webtoon_detail .webtoon_main_left .webtoon_this_month h2 {
	font-size: 16px;

	margin-bottom: 8px;
}

.webtoon_detail .webtoon_main_left .webtoon_this_month .webtoon_this_lists {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.webtoon_detail .webtoon_main_left .webtoon_this_month .webtoon_this_lists .webtoon_this_list {
	width: 218px;

}

.webtoon_detail .webtoon_main_left .webtoon_this_month .webtoon_this_list .this_image_wrap {
	position: relative;

	width: 100%;
	height: 120px;

	margin-bottom: 5px;
}

.webtoon_detail .webtoon_main_left .webtoon_this_month .webtoon_this_list .this_image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
}

.webtoon_detail .webtoon_main_left .webtoon_this_month .webtoon_this_list .this_image_wrap .new_mark {
	position: absolute;

	width: 36px;
	background-color: #00d564;

	color: #ffffff;
	text-align: center;

}

.webtoon_detail .webtoon_main_left .webtoon_this_month .webtoon_this_list h3 {
	font-size: 12px;

	margin-bottom: 5px;
}

.webtoon_detail .webtoon_main_left .webtoon_this_month .webtoon_this_list .author {
	display: block;

	font-size: 12px;

	margin-bottom: 5px;
}

.webtoon_detail .webtoon_main_left .webtoon_this_month .webtoon_this_list p {
	font-size: 12px;
}

(3) webtoon total day

[html]

				<div class="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">
							<span>월요웹툰</span>

							<ul class="webtoon_lists">
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<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/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<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/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<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/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<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/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<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/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<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/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
								<li class="webtoon_list">
									<img src="https://via.placeholder.com/84x90">
									<h3>참교육</h3>
								</li>
							</ul>
						</li>
					</ul>
				</div>

[css]

.webtoon_detail .webtoon_main_left .webtoon_total_day {
	padding-top: 20px;
}

.webtoon_detail .webtoon_main_left .webtoon_total_day .webtoon_total_title_wrap {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;

	border-bottom: solid 1px #eaeaea;

	padding-bottom: 8px;
}

.webtoon_detail .webtoon_main_left .webtoon_total_day .webtoon_total_title_wrap h2 {
	font-size: 16px;
}

.webtoon_total_day .webtoon_total_title_wrap ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
}

.webtoon_total_day .webtoon_total_title_wrap ul li {
	margin-right: 10px;
}

.webtoon_total_day .webtoon_total_title_wrap ul li:last-child {
	margin-right: 0;
}

.webtoon_total_day .webtoon_total_title_wrap ul li a {
	font-size: 12px;
}

.webtoon_total_day .webtoon_day_lists {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;

	border-bottom: solid 1px #f4f4f4;
}

.webtoon_total_day .webtoon_day_lists .webtoon_day_list {
	width: 14.2855%;

	border-right: solid 1px #f4f4f4;

	text-align: center;

	padding: 0 8px;
}

.webtoon_total_day .webtoon_day_lists .webtoon_day_list:last-child {
	border-right: 0;
}

.webtoon_total_day .webtoon_day_lists .webtoon_day_list.active {
	background-color: #3a3a3a;
	border-color: #3a3a3a;

	color: yellow;
}

.webtoon_total_day .webtoon_day_lists .webtoon_day_list span {
	display: block;

	height: 32px;

	font-size: 14px;
	line-height: 32px;
}

.webtoon_total_day .webtoon_day_lists .webtoon_day_list .webtoon_lists {

}

.webtoon_total_day .webtoon_day_lists .webtoon_day_list .webtoon_lists .webtoon_list {
	margin-bottom: 10px;
}

.webtoon_total_day .webtoon_day_lists .webtoon_day_list .webtoon_lists .webtoon_list img {
	width: 100%;

	margin-bottom: 5px;
}

.webtoon_total_day .webtoon_day_lists .webtoon_day_list .webtoon_lists .webtoon_list h3 {
	font-size: 14px;
}

학습한 내용 중 어려웠던 점 또는 해결 못한 것들

flex 속성 중 align-items 의 속성값에 따라 레이아웃의 변화를 잘 모르고 있었다.

해결 방법 작성

  1. align-items: center;

  2. align-items: flex-start;
    : flex가 적용되는 자식 태그의 높이값이 각각의 오브젝트에서 독립적이다.

  3. align-items: stretch;
    : flex가 적용되는 자식 태그 중 가장 큰 높이값을 공통적으로 가진다.

66. 부트스트랩
백준 알고리즘 11283번 : 한글 2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage