학습내용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>네이버</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- 네이버 상단 -->
<header id="main-header">
<div class="search-area">
<div class="search-wrap">
<input type="text">
<button type="button"></button>
</div>
</div>
<div id="navbar">
<div class="container">
<ul>
<li><a href="#">메일</a></li>
<li><a href="#">카페</a></li>
<li><a href="#">블로그</a></li>
<li><a href="#">지식in</a></li>
<li><a href="shop.html">쇼핑</a></li>
</ul>
</div>
</div>
</header>
<!-- 네이버 중단(왼쪽, 오른쪽) -->
<main role="main" class="container">
<div id="main-left">
<div id="banner-wrap"></div>
<div id="news-wrap">
<div class="news-header">
<h2>뉴스 스탠드</h2>
<div class="news-btn-wrap">
<button class="setting-1"></button>
<button class="setting-2"></button>
<button class="setting-3"></button>
</div>
</div>
<ul class="news-lists">
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
<li class="news-list">
<img src="https://via.placeholder.com/45x20">
</li>
</ul>
</div>
<div id="blog-wrap">
<div class="blog-header">
<div class="left-header">
<h3>오늘 읽을만한 글</h3>
<span>주제별로 분류된 다양한 글 모음</span>
</div>
<div class="right-header">
<span class="count"><strong>1,853</strong> 개의 글</span>
<span>관심주제 설정</span>
</div>
</div>
<nav class="blog-nav">
<ul>
<li><a href="#">엔터</a></li>
<li><a href="#">스포츠</a></li>
<li><a href="#">자동차</a></li>
<li><a href="#">웹툰</a></li>
<li><a href="#">경제M</a></li>
<li><a href="#">레시피</a></li>
<li><a href="#">게임</a></li>
<li><a href="#">영화</a></li>
</ul>
</nav>
<div class="blog-list-wrap">
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/170x114">
<div class="blog-list-info">
<span>경제M</span>
<h4>Title</h4>
<p> 최근 SBS FiL 프로그램을 통해 ‘당신의 일상을 밝히는가’ 심혜진이 운영하는
호텔&리조트가 공개됐다. 인터넷상에서 심혜진 리조트로 유명세를 치르는 곳인
이곳은 마치 동남아 여행을 온 것 같은 분위기로 많은 이들의 궁금증을 자아냈다.
</p>
<div class="date-wrap">
<span>머니그라운드</span>
<span>6일 전</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/170x114">
<div class="blog-list-info">
<span>경제M</span>
<h4>Title</h4>
<p> 최근 SBS FiL 프로그램을 통해 ‘당신의 일상을 밝히는가’ 심혜진이 운영하는
호텔&리조트가 공개됐다. 인터넷상에서 심혜진 리조트로 유명세를 치르는 곳인
이곳은 마치 동남아 여행을 온 것 같은 분위기로 많은 이들의 궁금증을 자아냈다.
</p>
<div class="date-wrap">
<span>머니그라운드</span>
<span>6일 전</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/170x114">
<div class="blog-list-info">
<span>경제M</span>
<h4>Title</h4>
<p> 최근 SBS FiL 프로그램을 통해 ‘당신의 일상을 밝히는가’ 심혜진이 운영하는
호텔&리조트가 공개됐다. 인터넷상에서 심혜진 리조트로 유명세를 치르는 곳인
이곳은 마치 동남아 여행을 온 것 같은 분위기로 많은 이들의 궁금증을 자아냈다.
</p>
<div class="date-wrap">
<span>머니그라운드</span>
<span>6일 전</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/170x114">
<div class="blog-list-info">
<span>경제M</span>
<h4>Title</h4>
<p> 최근 SBS FiL 프로그램을 통해 ‘당신의 일상을 밝히는가’ 심혜진이 운영하는
호텔&리조트가 공개됐다. 인터넷상에서 심혜진 리조트로 유명세를 치르는 곳인
이곳은 마치 동남아 여행을 온 것 같은 분위기로 많은 이들의 궁금증을 자아냈다.
</p>
<div class="date-wrap">
<span>머니그라운드</span>
<span>6일 전</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="blog-media-wrap">
<ul>
<li>
<img src="https://via.placeholder.com/232x130">
<div class="blog-media-info">
<h4>Title</h4>
<span>신사임당</span>
</div>
</li>
<li>
<img src="https://via.placeholder.com/232x130">
<div class="blog-media-info">
<h4>Title</h4>
<span>신사임당</span>
</div>
</li>
<li>
<img src="https://via.placeholder.com/232x130">
<div class="blog-media-info">
<h4>Title</h4>
<span>신사임당</span>
</div>
</li>
</ul>
</div>
<div class="blog-list-wrap">
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/170x114">
<div class="blog-list-info">
<span>경제M</span>
<h4>Title</h4>
<p> 최근 SBS FiL 프로그램을 통해 ‘당신의 일상을 밝히는가’ 심혜진이 운영하는
호텔&리조트가 공개됐다. 인터넷상에서 심혜진 리조트로 유명세를 치르는 곳인
이곳은 마치 동남아 여행을 온 것 같은 분위기로 많은 이들의 궁금증을 자아냈다.
</p>
<div class="date-wrap">
<span>머니그라운드</span>
<span>6일 전</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/170x114">
<div class="blog-list-info">
<span>경제M</span>
<h4>Title</h4>
<p> 최근 SBS FiL 프로그램을 통해 ‘당신의 일상을 밝히는가’ 심혜진이 운영하는
호텔&리조트가 공개됐다. 인터넷상에서 심혜진 리조트로 유명세를 치르는 곳인
이곳은 마치 동남아 여행을 온 것 같은 분위기로 많은 이들의 궁금증을 자아냈다.
</p>
<div class="date-wrap">
<span>머니그라운드</span>
<span>6일 전</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/170x114">
<div class="blog-list-info">
<span>경제M</span>
<h4>Title</h4>
<p> 최근 SBS FiL 프로그램을 통해 ‘당신의 일상을 밝히는가’ 심혜진이 운영하는
호텔&리조트가 공개됐다. 인터넷상에서 심혜진 리조트로 유명세를 치르는 곳인
이곳은 마치 동남아 여행을 온 것 같은 분위기로 많은 이들의 궁금증을 자아냈다.
</p>
<div class="date-wrap">
<span>머니그라운드</span>
<span>6일 전</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/170x114">
<div class="blog-list-info">
<span>경제M</span>
<h4>Title</h4>
<p> 최근 SBS FiL 프로그램을 통해 ‘당신의 일상을 밝히는가’ 심혜진이 운영하는
호텔&리조트가 공개됐다. 인터넷상에서 심혜진 리조트로 유명세를 치르는 곳인
이곳은 마치 동남아 여행을 온 것 같은 분위기로 많은 이들의 궁금증을 자아냈다.
</p>
<div class="date-wrap">
<span>머니그라운드</span>
<span>6일 전</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="blog-media-wrap">
<ul>
<li>
<img src="https://via.placeholder.com/232x130">
<div class="blog-media-info">
<h4>Title</h4>
<span>신사임당</span>
</div>
</li>
<li>
<img src="https://via.placeholder.com/232x130">
<div class="blog-media-info">
<h4>Title</h4>
<span>신사임당</span>
</div>
</li>
<li>
<img src="https://via.placeholder.com/232x130">
<div class="blog-media-info">
<h4>Title</h4>
<span>신사임당</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="main-right">
<div id="account">
<p>네이버를 더 안전하고 편안하게 이용하세요.</p>
<a href="#">로그인</a>
<div class="account-sub">
<div class="left">
<span>아이디</span>
<span>비밀번호 찾기</span>
</div>
<span>회원가입</span>
</div>
</div>
<div id="banner"></div>
<div id="shop-wrap">
<div class="shop-title">
<h3><a href="#">트렌드 쇼핑</a></h3>
<div class="right">
<h4><a href="#">상품</a></h4>
<h4><a href="#">쇼핑몰</a></h4>
<h4><a href="#">MEN</a></h4>
</div>
</div>
<div class="shop-content">
<ul class="commerce-lists">
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
<li><a href="#">11번가</a></li>
</ul>
<div class="shop-goods">
<ul class="product-lists">
<li>
<a href="#">
<img src="https://via.placeholder.com/107x140">
<div class="product-info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/107x140">
<div class="product-info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/107x140">
<div class="product-info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/107x140">
<div class="product-info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/107x140">
<div class="product-info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/107x140">
<div class="product-info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/107x140">
<div class="product-info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/107x140">
<div class="product-info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/107x140">
<div class="product-info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/107x140">
<div class="product-info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/107x140">
<div class="product-info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/107x140">
<div class="product-info">
<h3>퀄리티가 중요한</h3>
<span>당신을 위한 룩</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div >
</main>
<!-- 네이버 하단 -->
<footer id="main-footer">
<div class="container">
<ul class="news-lists">
<li>
<img src="https://via.placeholder.com/160x86">
<div class="news-info">
<span>부스트캠프 2021</span>
<h3>온라인 설명회 신청하기</h3>
<P>
SW 개발자를 위한 교육<br>
지원꿀팁과 생생한 후기들!
</P>
</div>
</li>
<li>
<img src="https://via.placeholder.com/160x86">
<div class="news-info">
<span>부스트캠프 2021</span>
<h3>온라인 설명회 신청하기</h3>
<P>
SW 개발자를 위한 교육<br>
지원꿀팁과 생생한 후기들!
</P>
</div>
</li>
<li>
<img src="https://via.placeholder.com/160x86">
<div class="news-info">
<span>부스트캠프 2021</span>
<h3>온라인 설명회 신청하기</h3>
<P>
SW 개발자를 위한 교육<br>
지원꿀팁과 생생한 후기들!
</P>
</div>
</li>
</ul>
<ul class="corp-lists">
<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>
<li><a href="#">청소년보호정책</a></li>
<li><a href="#">네이버 정책</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</div>
</footer>
</body>
</html>문제 및 해결방안
길이가 길어질 수록 복잡해지는데 그만큼 반복해서 같은 내용을 입력하는 경우가 많은데 띄어쓰기를 다르게 했다던가, 스펠링, 하이픈삽입을 잘못 한 경우가 있었다. 그러한 경우 오탈자를 찾아내기 너무 어려웠고, 천천히 상위 개념을 훓어보고 왠만하면 같은 태그일 경우에 한해서는 복붙해서 태그를 입력하는 것도 오류를 줄이는 방법이 될 것 같다.
학습소감
강의 시간은 1시간 정도라 줄었지만 실제로 한번 해 보는데는 두시간이 넘게 걸렸던 것 같다. 보고 따라만 하는 정도이지만 시간이 많이 걸릴 수 밖에 없었던 이유가 오류를 찾아내기가 너무 어려웠기 때문이다. 벌써 한달여 가까이 입력을 해오고 있는데 여전히 오탈자와의 전쟁중이다. 분량이 길어지는 만큼 더 복잡해지고, 오류를 찾지 못해 당황해서 막 다그치다보면 오히려 오류가 없는 부분을 수정해서 없던 오류도 만들어서 마치 챗바퀴도는 듯한 기분이 들었다. 오류가 있다는 걸 인지했으면 침착하게 한번 훓어보면서 상위 태그와 비교를 해 보고 또 수정 후에 바로 출력값을 확인해 보고 하는 식으로 다음부터는 조금 차분하게 입력 및 수정을 해 보아야 겠다.
AI School for Daegu