2021.07.26 NAVER-6

정혜리·2021년 7월 26일

CSS Naver html 개발일지 코린이 프론트엔드

Practice-copy_websites

목록 보기

10/15

Day21,
저번주에 시작한 네이버 웹툰 페이지 따라만들기를 완료했다..!

오늘 무엇을 배웠지?

Naver 웹툰 페이지 따라 만들어보기 2

Naver-'웹툰 : https://comic.naver.com/index

`<main>` - 2

html

(<main> - 1 html에 이어서)
1.

			<div class="webtoon-main-right">
				<div class="webtoon-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>

				<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>
						</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="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-down"></div>
									<span class="number">1</span>
								</div>
							</li>

							<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-down"></div>
									<span class="number">1</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>

CSS-Style

(<main> - 1 css에 이어서)

웹툰 페이지의 오른쪽 영역인 .webtoon-main-right가 브라우저의 오른쪽에 위치하도록 하고 너비를 설정한다. 새로운 베스트 도전 만화 영역 .webtoon-challenge-wrap를 디자인(너비, 높이, 배경색)하고 간격을 설정한다. 그에 속한 태그들을 디자인한다.

#webtoon-main .webtoon-main-right { float: right; width: 240px; }
#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 h3 span { 
	color: #00d564; }
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap img { 
	width: 100%; height: 110px; }

'flex'기능으로 .webtoon-title-wrap의 배열을 설정하고, 'hover'기능으로 커서를 올렸을 때 밑줄이 그어지도록 설정한다. .webtoon-title-wrap의 자식태그들을 디자인(글자크기, 색)한다.

#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 a:hover { 
	text-decoration: underline; }
#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 .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: grey; }

배너 광고의 너비와 높이를 설정하고 디자인한다.

#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 { height: 240px;
	background-color: yellow; }
#webtoon-main .webtoon-main-right .webtoon-banner-type-2 { height: 86px;
	background-color: pink; }

결과 ▼

.webtoon-popular 영역의 배경색을 설정하고 간격을 설정한다. 'flex'기능으로 .webtoon-popular-header영역의 배열을 설정한다.

#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-popular-tabs의 배열을 'flex'기능으로 설정하고 경계를 border-top값으로 설정한다. 그에 속하는 .tab의 너비가 영역의 반을 차지하고 중앙정렬되도록 설정하고, 높이, 경계를 설정한다. 이때, 인기순과 업데이트순을 구분하는 경계를 만들어준다.

#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;
	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-popular-ranking의 너비, 배경색, 간격을 설정하고 그에 속한 태그 <li>의 배열들을 'flex'기능으로 설정하고 글자크기, 간격등을 설정한다. .rank-content 또한 'flex'기능으로 배열을 설정하고 이때, 너비를 넘어가는 글들은 말줄임표로 표현하기 위해 너비를 설정하고 overflow: hidden; white-space: nowrap; text-overflow: ellipsis;를 적용한다.

#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 li { 
	display: flex; flex-wrap: wrap; justify-content: space-between;
	align-items: center; margin-bottom: 7px; padding: 0 13px;
	font-size: 12px; }
#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 .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-popular-ranking의 .rank-box들의 배열을 'flex'기능으로 설정하고 너비 ,높이, 위치를 설정한다. 각 class에 따른 배경색을 설정한다.

#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: center;
	width: 30px; height: 12px; 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-popular-ranking의 .rank.rank-custom의 position을 relative로 설정해 그에 속한 태그들의 영향을 받도록 한다. 'flex'기능으로 .imgae-wrap의 배열을 설정하고 너비를 설정한다. 그에 속한 태그들을 디자인한다.

#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 { 
	display: flex; flex-wrap: wrap; justify-content: flex-start;
	align-items: center; width: 140px; }
#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 a { 
	width: 100px; }
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .image-wrap .webtoon-info .author { 
	display: block; }

결과 ▼

`<footer>`

html

(<main> html에 이어서)
1.

	<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>&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>
						<li><a href="#">이용약관</a></li>
					</ul>
					<span>&copy; NAVER WEBTOON CORP.</span>
				</div>
			</div>

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

CSS-Style

(Main_right css에 이어서)
1. #webtoon-footer의 영역의 간격, 글자크기를 설정하고 .webtoon-container의 테두리와 영역의 간격을 설정한다.

#webtoon-footer { padding-bottom: 78px; font-size: 12px; }

#webtoon-footer .webtoon-container { border-top: solid 1px #e6e7e8;
	padding-top: 40px; }

.webtoon-footer-wrap의 배열을 'flex'기능으로 설정하고 margin값으로 간격을 설정한다. 그에 속한 태그 left, right가 각각 영역의 반을 차지하도록 설정하고 구분선을 만든다.

#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 grey; }

.webtoon-footer-wrap의 자식 태그들을 디자인한다. <ul>태그의 배열을 설정하고, <li>태그간에 문자를 'content: "";'를 삽입해 구분 짓도록 한다. 이때, 첫번째 <li>태그앞에는 생기지 않도록 설정한다.
+++text-transform:
capitalize는 첫글자만 대문자, uppercase는 전체 대문자, lowercase는 전체 소문자로 설정

#webtoon-footer .webtoon-footer-wrap ul { display: flex; flex-direction: row;
	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; }

.webtoon-footer-paragraph의 왼쪽 간격을 설정한다.

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

결과 ▼

+++ HTML 특수문자
© : ©

webtoon-detail

html , CSS

<header> ,<div class="webtoon-main-right">,<footer>영역은 'webtoon.html'과 동일
<main>
2.

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

.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 { 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; 
	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;
	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; }

				<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/150">
								<span class="new-mark">new</span>
							</div>

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

						</li>
					</ul>
				</div>
                
                <div class="webtoon-banner"></div>

.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-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: #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 { 
	display: block; font-size: 14px; margin-bottom: 5px; }
.webtoon-detail #webtoon-this-month .webtoon-this-list p { font-size: 14px; }

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

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

.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-direction: row; border-bottom: solid 1px #f4f4f4; }
.webtoon-detail #webtoon-total-day .webtoon-day-list { width: 14.2855%;
	text-align: center; border-right: solid 1px #f4f4f4;
	padding: 0 8px; }
.webtoon-detail #webtoon-total-day .webtoon-day-list.active { 
	background-color: #3a3a3a; border-color: #3a3a3a; color: #fbcb00; }

무엇이 어려웠지?

.rank-box .status .status-down로 설정한 이미지가 나타나지 않았다.

어떻게 해결했지?

모든 코딩은 선생님이 알려주신대로 똑같이 작성했으나..! .status와 .status-stay 사이의 공백을 만들고 설정했더니 이미지에 대한 디자인이 적용되지 않았다.

그래서?

저번주에 양이 많아서 엄청 고생했던 기억이 있어서 오늘도 미리 고생할거라는 마음을 먹고 임했다. 완전 새로운 것은 없었지만, 여전히 사이트를 보고 레이아웃을 바로 짜는건 쉽지 않았다. 여러번 수정을 해야했다. 새롭게 배운건, html에서 적용되는 특수문자와, text-transform 으로 소문자, 대문자 등을 설정할 수 있다는 것..!

sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0724

정혜리

이전 포스트

2021.07.23 NAVER-5

다음 포스트

2021.07.26 NAVER-6

Practice-copy_websites

오늘 무엇을 배웠지?

Naver 웹툰 페이지 따라 만들어보기 2

`<main>` - 2

html

CSS-Style

`<footer>`

html

CSS-Style

webtoon-detail

html , CSS

무엇이 어려웠지?

어떻게 해결했지?

그래서?

2021.07.23 NAVER-5

2021.07.27 NAVER-7

0개의 댓글

관련 채용 정보

2021.07.26 NAVER-6

Practice-copy_websites

오늘 무엇을 배웠지?

Naver 웹툰 페이지 따라 만들어보기 2

<main> - 2

html

CSS-Style

<footer>

html

CSS-Style

webtoon-detail

html , CSS

무엇이 어려웠지?

어떻게 해결했지?

그래서?

2021.07.23 NAVER-5

2021.07.27 NAVER-7

0개의 댓글

관련 채용 정보

`<main>` - 2

`<footer>`