학습내용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>네이버웹툰</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- 웹툰 홈 -->
<!-- 웹툰 홈 상단 -->
<header id="webtoon-header">
<div class="webtoon-header-top">
<div class="webtoon-container">
<div class="webtoon-header-left">
<h2><a href="#">만화</a></h2>
<em class="bar"></em>
<h3><a href="#">웹소설</a></h3>
<div class="webtoon-header-input-wrap">
<input type="text">
<button type="button" class="btn-search"></button>
</div>
</div>
<div class="webtoon-header-right">
<a href="#" class="btn-login">로그인</a>
<button type="button" class="btn-menu"></button>
</div>
</div>
</div>
<div class="webtoon-header-nav">
<div class="webtoon-container">
<nav>
<ul>
<li class="on"><a href="webtoon.html">홈</a></li>
<li><a href="webtoon-detail.html">웹툰</a></li>
<li><a href="#">베스트 도전</a></li>
<li><a href="#">도전만화</a></li>
</ul>
</nav>
<div class="webtoon-header-link-wrap">
<i class="icon-ex-mark"></i>
<a href="#">살리고 싶은 사람 <짝사랑의 유서></a>
</div>
</div>
</div>
</header>
<!-- 웹툰 홈 중단-->
<main role="main" id="webtoon-main">
<div class="webtoon-container">
<div class="webtoon-main-left">
<div class="webtoon-carousel webtoon-border">
<div class="webtoon-carousel-left">
<h2>오늘의<br><span>웹툰</span></h2>
<p>7월 23일 금요일</p>
<ul>
<li class="on"><a href="#">인기순</a></li>
<li><a href="#">업데이트순</a></li>
<li><a href="#">조회순</a></li>
<li><a href="#">별점순</a></li>
</ul>
</div>
<div class="webtoon-carousel-right">
<div class="webtoon-carousel-banner">
<img src="https://via.placeholder.com/582x195">
</div>
<div class="webtoon-carousel-banner-nav">
<ul>
<li><img src="https://via.placeholder.com/135x57"></li>
<li><img src="https://via.placeholder.com/135x57"></li>
<li><img src="https://via.placeholder.com/135x57"></li>
<li><img src="https://via.placeholder.com/135x57"></li>
</ul>
<a href="#" class="btn btn-prev"></a>
<a href="#" class="btn btn-next"></a>
</div>
</div>
</div>
<div class="webtoon-banner"></div>
<div class="webtoon-content">
<div class="webtoon-content-header webtoon-content-header-recommend">
<h2>장르별 <span>추천웹툰</span></h2>
<nav>
<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>
<li><a href="#">판타지</a></li>
</ul>
</nav>
</div>
<div class="webtoon-content-body">
<nav>
<ul>
<li><a href="#">인기순</a></li>
<li><a href="#">업데이트 순</a></li>
<li><a href="#">조회순</a></li>
<li><a href="#">별점순</a></li>
</ul>
</nav>
</div>
<ul class="webtoon-content-col-3">
<li class="webtoon-content-col-type-1">
<img src="https://via.placeholder.com/210x120">
<div class="webtoon-content-col-3-info">
<h4>후덜덜덜 남극전자</h4>
<p>102화 전시회 준비</p>
<span>김민혁</span>
</div>
</li>
<li class="webtoon-content-col-type-1">
<img src="https://via.placeholder.com/210x120">
<div class="webtoon-content-col-3-info">
<h4>후덜덜덜 남극전자</h4>
<p>102화 전시회 준비</p>
<span>김민혁</span>
</div>
</li>
<li class="webtoon-content-col-type-1">
<img src="https://via.placeholder.com/210x120">
<div class="webtoon-content-col-3-info">
<h4>후덜덜덜 남극전자</h4>
<p>102화 전시회 준비</p>
<span>김민혁</span>
</div>
</li>
<li class="webtoon-content-col-type-1">
<img src="https://via.placeholder.com/210x120">
<div class="webtoon-content-col-3-info">
<h4>후덜덜덜 남극전자</h4>
<p>102화 전시회 준비</p>
<span>김민혁</span>
</div>
</li>
<li class="webtoon-content-col-type-1">
<img src="https://via.placeholder.com/210x120">
<div class="webtoon-content-col-3-info">
<h4>후덜덜덜 남극전자</h4>
<p>102화 전시회 준비</p>
<span>김민혁</span>
</div>
</li>
<li class="webtoon-content-col-type-1">
<img src="https://via.placeholder.com/210x120">
<div class="webtoon-content-col-3-info">
<h4>후덜덜덜 남극전자</h4>
<p>102화 전시회 준비</p>
<span>김민혁</span>
</div>
</li>
</ul>
</div>
<div class="webtoon-content">
<div class="webtoon-content-header">
<h2>베스트&도전 <span>추천웹툰</span></h2>
</div>
<div class="webtoon-content-body">
<ul class="webtoon-content-col-3">
<li class="webtoon-content-col-type-2">
<h3>에피소드</h3>
<ul class="webtoon-lists">
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>아빠는 N살</h4>
<p>fa3030</p>
<span>아빠 4컷 그림일기</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">9.90</span>
</div>
</div>
</li>
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>도곰보와 친구들</h4>
<p>ocli010</p>
<span>귀엽지만 이상하다</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">8.75</span>
</div>
</div>
</li>
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>까미사랑툰</h4>
<p>qowldbs123</p>
<span>반려가족 일상</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">9.34</span>
</div>
</div>
</li>
</ul>
</li>
<li class="webtoon-content-col-type-2">
<h3>옴니버스</h3>
<ul class="webtoon-lists">
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>아빠는 N살</h4>
<p>fa3030</p>
<span>아빠 4컷 그림일기</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">9.90</span>
</div>
</div>
</li>
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>도곰보와 친구들</h4>
<p>ocli010</p>
<span>귀엽지만 이상하다</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">8.75</span>
</div>
</div>
</li>
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>까미사랑툰</h4>
<p>qowldbs123</p>
<span>반려가족 일상</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">9.34</span>
</div>
</div>
</li>
</ul>
</li>
<li class="webtoon-content-col-type-2">
<h3>스토리</h3>
<ul class="webtoon-lists">
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>아빠는 N살</h4>
<p>fa3030</p>
<span>아빠 4컷 그림일기</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">9.90</span>
</div>
</div>
</li>
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>도곰보와 친구들</h4>
<p>ocli010</p>
<span>귀엽지만 이상하다</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">8.75</span>
</div>
</div>
</li>
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>까미사랑툰</h4>
<p>qowldbs123</p>
<span>반려가족 일상</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">9.34</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="webtoon-content">
<div class="webtoon-content-header">
<h2>장르별 <span>인기 단행본만화</span></h2>
</div>
<div class="webtoon-content-body">
<ul class="webtoon-content-col-3">
<li class="webtoon-content-col-type-2">
<h3>순정</h3>
<ul class="webtoon-lists">
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>아빠는 N살</h4>
<p>fa3030</p>
<span>아빠 4컷 그림일기</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">9.90</span>
</div>
</div>
</li>
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>도곰보와 친구들</h4>
<p>ocli010</p>
<span>귀엽지만 이상하다</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">8.75</span>
</div>
</div>
</li>
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>까미사랑툰</h4>
<p>qowldbs123</p>
<span>반려가족 일상</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">9.34</span>
</div>
</div>
</li>
</ul>
</li>
<li class="webtoon-content-col-type-2">
<h3>소년</h3>
<ul class="webtoon-lists">
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>아빠는 N살</h4>
<p>fa3030</p>
<span>아빠 4컷 그림일기</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">9.90</span>
</div>
</div>
</li>
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>도곰보와 친구들</h4>
<p>ocli010</p>
<span>귀엽지만 이상하다</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">8.75</span>
</div>
</div>
</li>
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>까미사랑툰</h4>
<p>qowldbs123</p>
<span>반려가족 일상</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">9.34</span>
</div>
</div>
</li>
</ul>
</li>
<li class="webtoon-content-col-type-2">
<h3>무협</h3>
<ul class="webtoon-lists">
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>아빠는 N살</h4>
<p>fa3030</p>
<span>아빠 4컷 그림일기</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">9.90</span>
</div>
</div>
</li>
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>도곰보와 친구들</h4>
<p>ocli010</p>
<span>귀엽지만 이상하다</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">8.75</span>
</div>
</div>
</li>
<li class="webtoon-list">
<img src="https://via.placeholder.com/83x90">
<div class="webtoon-content-col-info-right">
<h4>까미사랑툰</h4>
<p>qowldbs123</p>
<span>반려가족 일상</span>
<div class="webtoon-content-rating">
<div class="star"></div>
<span class="score">9.34</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="webtoon-main-right">
</div>
</div>
</main>
</body>문제 및 해결방법
오늘은 작성기준으로 아직 결과가 제대로 출력 되지 않는 부분이 몇몇 남아 있다. 일지 제출 후에 다시 한번 체크해 보아야 겠다. 그리고 코드가 길어지면 아예 별도의 css파일을 만들어서 혼동도 줄이고 더 좋다고 강의에서 배웠다. 매번 느끼고 있는 부분이지만 열림 태그를 입력하고 닫힘 태그를 입력 했는지 부터 상위 태그와 연결이 되었는지, 급하게 쓴 부분에서 꼭 오탈자가 생기고 그걸 나중에 알아보려면 한눈에 들어오지 않아서 시간이 많이 필요로 하다. 출력값이 제대로 나오지 않을 때는 웹사이트의 검사기능을 통해 확인도 가능하지만 분량이 많은 만큼 쉽지 않다. 결국 중간 중간에 틈틈히 출력값이 제대로 나오는지 확인해서 더 지나기 전에 수정 후 계속 이어나가는 편이 나을 것 같다.
학습소감
첫 네이버 메인 페이지를 카피캣 할 때만 해도 조금 흥미도 생기고 재미있다고 했다면 가면 갈수록 길어지고 복잡해진 구조 탓에 피로도가 급 상승하는 것 같다. 연일 날씨도 무더운 탓에 집중력도 다소 떨어지고 하기도 전에 한숨부터 쉬게 되는 것 같다. 이제 실습을 제외하고는 절반 정도에 지점에 온 것 같은데 주말동안 재충전해서 다시 한번 새로 시작하는 마음가짐으로 잘 해보아야 겠다.
AI School for Daegu