학습내용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>네이버 뉴스</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- 네이버 뉴스 상단 -->
<header id="news-header">
<div class="news-container">
<div class="news-flex-between">
<nav class="news-header-left">
<ul class="news-flex-start">
<li class="on"><a href="#">뉴스</a></li>
<li><a href="#">TV연예</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="#">TOKYO 2020</a></li>
</ul>
</nav>
<div class="news-header-right news-flex-end">
<a href="#" class="btn-login">로그인</a>
<button type="button" class="btn-menu"></button>
</div>
</div>
</div>
<nav class="sub-nav">
<div class="news-container">
<div class="news-flex-between">
<ul class="news-flex-start">
<li><a href="#" class="on">뉴스홈</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="#">IT/과학</a></li>
<li><a href="#">오피니언</a></li>
<li><a href="#">포토</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">랭킹뉴스</a></li>
</ul>
<div class="news-search-wrap news-flex-between">
<input type="text" placeholder="뉴스 검색">
<button type="button" class="btn-search"></button>
</div>
</div>
</div>
</nav>
</header>
<div id="news-headline">
<div class="news-container">
<div class="news-headline-menu-wrap news-flex-between">
<ul class="main-lists news-flex-start">
<li><a href="#">신문 헤드라인</a></li>
<li><a href="#">저녁 방송 뉴스</a></li>
</ul>
<ul class="sub-lists news-flex-end">
<li><a href="#">팩트체크</a></li>
<li><a href="#">언론사 설정</a></li>
<li><a href="#">언론사 뉴스</a></li>
<li><a href="#">라이브러리</a></li>
</ul>
</div>
<ul class="news-headline-lists news-flex-between">
<li>
<a href="#">
<article>
<h3>연합뉴스TV 뉴스리뷰</h3>
<div class="image-wrap">
<img src="https://via.placeholder.com/150">
<div class="overlay">
<div class="headline-info news-flex-start">
<i></i>
<div>
<span>다시보기</span>
<p>신규확진 1,900명 육박... 6일 만에 또 최다</p>
</div>
</div>
</div>
</div>
</article>
</a>
</li>
<li>
<a href="#">
<article>
<h3>연합뉴스TV 뉴스리뷰</h3>
<div class="image-wrap">
<img src="https://via.placeholder.com/150">
<div class="overlay">
<div class="headline-info news-flex-start">
<i></i>
<div>
<span>다시보기</span>
<p>신규확진 1,900명 육박... 6일 만에 또 최다</p>
</div>
</div>
</div>
</div>
</article>
</a>
</li>
<li>
<a href="#">
<article>
<h3>연합뉴스TV 뉴스리뷰</h3>
<div class="image-wrap">
<img src="https://via.placeholder.com/150">
<div class="overlay">
<div class="headline-info news-flex-start">
<i></i>
<div>
<span>다시보기</span>
<p>신규확진 1,900명 육박... 6일 만에 또 최다</p>
</div>
</div>
</div>
</div>
</article>
</a>
</li>
<li>
<a href="#">
<article>
<h3>연합뉴스TV 뉴스리뷰</h3>
<div class="image-wrap">
<img src="https://via.placeholder.com/150">
<div class="overlay">
<div class="headline-info news-flex-start">
<i></i>
<div>
<span>다시보기</span>
<p>신규확진 1,900명 육박... 6일 만에 또 최다</p>
</div>
</div>
</div>
</div>
</article>
</a>
</li>
</ul>
<div class="news-headline-arrows news-flex-end">
<div class="btn-wrap news-flex-start">
<a href="#" class="btn btn-prev"></a>
<a href="#" class="btn btn-next"></a>
</div>
<a href="#" class="btn btn-up"></a>
</div>
</div>
</div>
<!-- 네이버 뉴스 메인 -->
<main role="main" id="news-main">
<div class="news-container">
<div class="news-left">
<div class="news-main-wrap news-custom">
<div class="news-main-header news-flex-between">
<div class="news-main-header-left news-flex-start">
<h3><a href="#">헤드라인 뉴스</a></h3>
<ul class="news-flex-start">
<li><a href="#">헤드라인 뉴스와 각 기사묶음 타이틀은 기사 내용을 기반으로 자동 추출됩니다.</a></li>
</ul>
</div>
<div class="news-main-header-right news-flex-end">
<i class="icon-1"></i>
<i class="icon-2"></i>
<i class="icon-3"></i>
</div>
</div>
<div class="news-main-body news-flex-start">
<div class="image-wrap">
<img src="https://via.placeholder.com/220x140">
<h4>김의겸에 "뻔뻔하다" 맹공 퍼부은 김현아에 "SH 사장 후보자 즉각 사퇴하라"</h4>
</div>
<ul class="news-lists">
<li><a href="#">"공군 18비, 가해자 아닌 피해자 거짓말탐지기 조사"</a><i></i></li>
<li><a href="#">농심, 라면값 인상…국내 이익 2배 증가 효과 기대-NH</a><i></i></li>
<li><a href="#">기재차관 “소상공인 희망회복자금 내달 17일, 손실보상 10월말 지급”</a><i></i></li>
<li><a href="#">'단일화' 언급한 이낙연측에 정세균 "주제넘은 말"</a><i></i></li>
<li><a href="#">새 대법관 후보에 손봉기·하명호·오경미</a><i></i></li>
</ul>
</div>
</div>
<div class="news-main-wrap">
<div class="news-main-header news-flex-between">
<div class="news-main-header-left news-flex-start">
<h3><a href="#">정치</a></h3>
<ul class="news-flex-start">
<li><a href="#">일반</a></li>
<li><a href="#">국회/정당</a></li>
<li><a href="#">청와대</a></li>
</ul>
</div>
<div class="news-main-header-right news-flex-end">
<i class="icon-1"></i>
<i class="icon-2"></i>
<i class="icon-3"></i>
</div>
</div>
<div class="news-main-body news-flex-start">
<div class="image-wrap">
<img src="https://via.placeholder.com/220x140">
<h4>[현장연결] 김총리 "8월초 모더나 백신"</h4>
</div>
<ul class="news-lists">
<li><a href="#">윤석열 측, ‘김건희씨 비방 벽화’에 “정치적 테러이자 반인륜적 행위”</a><span>한국일보</span></li>
<li><a href="#">title 2</a><span>뉴스1</span></li>
<li><a href="#">title 3</a><span>세계일보</span></li>
<li><a href="#">title 4</a><span>연합뉴스</span></li>
<li><a href="#">title 5</a><span>조선일보</span></li>
</ul>
</div>
</div>
<div class="news-main-wrap">
<div class="news-main-header news-flex-between">
<div class="news-main-header-left news-flex-start">
<h3><a href="#">경제</a></h3>
<ul class="news-flex-start">
<li><a href="#">일반</a></li>
<li><a href="#">금융</a></li>
<li><a href="#">생활경제</a></li>
</ul>
</div>
<div class="news-main-header-right news-flex-end">
<i class="icon-1"></i>
<i class="icon-2"></i>
<i class="icon-3"></i>
</div>
</div>
<div class="news-main-body news-flex-start">
<div class="image-wrap">
<img src="https://via.placeholder.com/220x140">
<h4>[현장연결] 김총리 "8월초 모더나 백신"</h4>
</div>
<ul class="news-lists">
<li><a href="#">윤석열 측, ‘김건희씨 비방 벽화’에 “정치적 테러이자 반인륜적 행위”</a><span>한국일보</span></li>
<li><a href="#">title 2</a><span>뉴스1</span></li>
<li><a href="#">title 3</a><span>세계일보</span></li>
<li><a href="#">title 4</a><span>연합뉴스</span></li>
<li><a href="#">title 5</a><span>조선일보</span></li>
</ul>
</div>
</div>
<div class="news-main-wrap">
<div class="news-main-header news-flex-between">
<div class="news-main-header-left news-flex-start">
<h3><a href="#">사회</a></h3>
<ul class="news-flex-start">
<li><a href="#">일반</a></li>
<li><a href="#">교육</a></li>
<li><a href="#">노동</a></li>
</ul>
</div>
<div class="news-main-header-right news-flex-end">
<i class="icon-1"></i>
<i class="icon-2"></i>
<i class="icon-3"></i>
</div>
</div>
<div class="news-main-body news-flex-start">
<div class="image-wrap">
<img src="https://via.placeholder.com/220x140">
<h4>[현장연결] 김총리 "8월초 모더나 백신"</h4>
</div>
<ul class="news-lists">
<li><a href="#">윤석열 측, ‘김건희씨 비방 벽화’에 “정치적 테러이자 반인륜적 행위”</a><span>한국일보</span></li>
<li><a href="#">title 2</a><span>뉴스1</span></li>
<li><a href="#">title 3</a><span>세계일보</span></li>
<li><a href="#">title 4</a><span>연합뉴스</span></li>
<li><a href="#">title 5</a><span>조선일보</span></li>
</ul>
</div>
</div>
<div class="news-main-wrap">
<div class="news-main-header news-flex-between">
<div class="news-main-header-left news-flex-start">
<h3><a href="#">생활/문화</a></h3>
<ul class="news-flex-start">
<li><a href="#">건강</a></li>
<li><a href="#">여행</a></li>
<li><a href="#">자동차</a></li>
</ul>
</div>
<div class="news-main-header-right news-flex-end">
<i class="icon-1"></i>
<i class="icon-2"></i>
<i class="icon-3"></i>
</div>
</div>
<div class="news-main-body news-flex-start">
<div class="image-wrap">
<img src="https://via.placeholder.com/220x140">
<h4>[현장연결] 김총리 "8월초 모더나 백신"</h4>
</div>
<ul class="news-lists">
<li><a href="#">윤석열 측, ‘김건희씨 비방 벽화’에 “정치적 테러이자 반인륜적 행위”</a><span>한국일보</span></li>
<li><a href="#">title 2</a><span>뉴스1</span></li>
<li><a href="#">title 3</a><span>세계일보</span></li>
<li><a href="#">title 4</a><span>연합뉴스</span></li>
<li><a href="#">title 5</a><span>조선일보</span></li>
</ul>
</div>
</div>
<div class="news-main-wrap">
<div class="news-main-header news-flex-between">
<div class="news-main-header-left news-flex-start">
<h3><a href="#">세게</a></h3>
</div>
<div class="news-main-header-right news-flex-end">
<i class="icon-1"></i>
<i class="icon-2"></i>
<i class="icon-3"></i>
</div>
</div>
<div class="news-main-body news-flex-start">
<div class="image-wrap">
<img src="https://via.placeholder.com/220x140">
<h4>[현장연결] 김총리 "8월초 모더나 백신"</h4>
</div>
<ul class="news-lists">
<li><a href="#">윤석열 측, ‘김건희씨 비방 벽화’에 “정치적 테러이자 반인륜적 행위”</a><span>한국일보</span></li>
<li><a href="#">title 2</a><span>뉴스1</span></li>
<li><a href="#">title 3</a><span>세계일보</span></li>
<li><a href="#">title 4</a><span>연합뉴스</span></li>
<li><a href="#">title 5</a><span>조선일보</span></li>
</ul>
</div>
</div>
<div class="news-main-wrap">
<div class="news-main-header news-flex-between">
<div class="news-main-header-left news-flex-start">
<h3><a href="#">IT/과학</a></h3>
<ul class="news-flex-start">
<li><a href="#">모바일</a></li>
<li><a href="#">통신</a></li>
<li><a href="#">인터넷</a></li>
</ul>
</div>
<div class="news-main-header-right news-flex-end">
<i class="icon-1"></i>
<i class="icon-2"></i>
<i class="icon-3"></i>
</div>
</div>
<div class="news-main-body news-flex-start">
<div class="image-wrap">
<img src="https://via.placeholder.com/220x140">
<h4>[현장연결] 김총리 "8월초 모더나 백신"</h4>
</div>
<ul class="news-lists">
<li><a href="#">윤석열 측, ‘김건희씨 비방 벽화’에 “정치적 테러이자 반인륜적 행위”</a><span>한국일보</span></li>
<li><a href="#">title 2</a><span>뉴스1</span></li>
<li><a href="#">title 3</a><span>세계일보</span></li>
<li><a href="#">title 4</a><span>연합뉴스</span></li>
<li><a href="#">title 5</a><span>조선일보</span></li>
</ul>
</div>
</div>
</div>
<div class="news-right">
<div id="news-popular">
<div class="news-popular-header news-flex-between">
<div>
<h3>언론사별 가장 많이 본 뉴스</h3>
<p>오전 10시~오전11시까지 집계한 결과입니다.</p>
</div>
<span>더보기</span>
</div>
<ul class="news-popular-lists">
<li class="news-flex-between">
<div class="news-pupular-info">
<h4><a href="#">"'흑수저' 카카오 김범수, 이재용 제치고 한국 최고 부자"</a></h4>
<i></i><span>헤럴드경제</span>
</div>
<img src="https://via.placeholder.com/88x60">
</li>
<li class="news-flex-between">
<div class="news-pupular-info">
<h4><a href="#">"'흑수저' 카카오 김범수, 이재용 제치고 한국 최고 부자"</a></h4>
<i></i><span>헤럴드경제</span>
</div>
<img src="https://via.placeholder.com/88x60">
</li>
<li class="news-flex-between">
<div class="news-pupular-info">
<h4><a href="#">"'흑수저' 카카오 김범수, 이재용 제치고 한국 최고 부자"</a></h4>
<i></i><span>헤럴드경제</span>
</div>
<img src="https://via.placeholder.com/88x60">
</li>
<li class="news-flex-between">
<div class="news-pupular-info">
<h4><a href="#">"'흑수저' 카카오 김범수, 이재용 제치고 한국 최고 부자"</a></h4>
<i></i><span>헤럴드경제</span>
</div>
<img src="https://via.placeholder.com/88x60">
</li>
<li class="news-flex-between">
<div class="news-pupular-info">
<h4><a href="#">"'흑수저' 카카오 김범수, 이재용 제치고 한국 최고 부자"</a></h4>
<i></i><span>헤럴드경제</span>
</div>
<img src="https://via.placeholder.com/88x60">
</li>
</ul>
</div>
<div class="news-banner"></div>
<div id="news-today">
<div class="news-today-header news-flex-start">
<h3>TODAY</h3>
<span>07.30 (금)</span>
</div>
<div class="news-today-body">
<ul class="news-notice-lists">
<li>
<h4>공지</h4>
<p>언론사 편집판 심층기획 기사 영역 신설 안내</p>
</li>
<li>
<h4>날씨</h4>
<p>실시간 기상 정보 확인하기</p>
</li>
<li>
<h4>운세</h4>
<p>오늘의 띠별 운세 확인하기</p>
</li>
</ul>
<div class="news-stock-wrap">
<ul class="news-stock-lists news-flex-between">
<li>
<span>코스피</span>
<h3>3,206.39</h3>
<em class="down">36.26</em>
</li>
<li>
<span>코스닥</span>
<h3>1,030.86</h3>
<em class="up">13.27</em>
</li>
</ul>
<div class="news-stock-search-wrap news-flex-between">
<input type="" placeholder="종목검색">
<button type="button" class="btn-search"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- 네이버 뉴스 하단 -->
<div id="news-nav-bottom">
<div class="news-container news-flex-between">
<ul class="news-flex-start">
<li><a href="#">언론사 목록</a></li>
<li><a href="#">분야별 목록</a></li>
</ul>
<a href="#">마이스크랩</a>
</div>
</div>
<footer>
</footer>
</body>
</html>학습 소감
오탈자만 없으면 이제 제법 출력값은 잘 나오는 것 같다. 아직 코딩을 이해하고 치기 보단 그냥 배끼는 기분이 든다는 점이 문제인 것 같다.
AI School for Daegu