학습내용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>네이버 블로그</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- 블로그 상단 -->
<header id="blog-header">
<div class="blog-header-top">
<div class="blog-container">
<div class="blog-header-left">
<h2><a href="#">블로그</a></h2>
<div class="blog-header-input-wrap">
<div class="blog-search-wrap">
<input type="text">
<button type="button" class="btn-search"></button>
</div>
<button type="button" class="btn-total-search">통합검색</button>
</div>
</div>
<div class="blog-header-right">
<a href="#" class="btn-login">로그인</a>
<button type="button" class="btn-menu"></button>
</div>
</div>
</div>
<div class="blog-header-nav">
<div class="blog-container">
<nav class="nav-left">
<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>
<nav class="nav-right">
<ul>
<li class="on"><a href="#">블로그 마켓 가입</a></li>
<li><a href="#">아이템 팩토리</a></li>
<li><a href="#">블로그팀 공식블로그</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-- 블로그 메인 -->
<main role="main" class="blog-main">
<div id="hot-topic">
<div class="blog-container">
<div class="hot-topic-left">
<div class="topic-heading">
<h3>핫토픽</h3>
<i></i>
<a href="#">그림 그리기</a>
</div>
<ul class="topic-lists">
<li class="topic-list">
<img src="https://via.placeholder.com/252x240">
<p>1일 1그림 아이패드로 고양이 그리기</p>
</li>
<li class="topic-list">
<img src="https://via.placeholder.com/252x240">
<p>만화 감성 가득 담아 인물화 그리기</p>
</li>
<li class="topic-list">
<img src="https://via.placeholder.com/252x240">
<p>귀여운 댕댕이들을 그려봤습니다!</p>
</li>
</ul>
<div class="pagination-wrap">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
</div>
<div class="hot-topic-right">
<div class="topic-banner"></div>
<div class="pagination-wrap">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
</div>
</div>
</div>
<div id="blog-main-content" class="blog-container">
<div class="blog-main-left">
<div id="blog-main-notification">
<p>
로그아웃 상태입니다.<br>
로그인하여 이웃 새글을 확인해보세요.
</p>
</div>
<div id="blog-article">
<nav class="blog-article-nav">
<ul>
<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="#">방송</a></li>
<li><a href="#">좋은글·이미지</a></li>
<li><a href="#">비즈니스·경제</a></li>
</ul>
</nav>
<ul class="blog-article-lists">
<li>
<a href="#">
<div class="blog-article-info">
<div class="blog-profile-wrap">
<img src="https://via.placeholder.com/32x32">
<div class="blog-profile-info">
<h3>마토단풍맘</h3>
<p>14시간 전</p>
</div>
</div>
<h2>Title 1</h2>
<p class="paragraph">며칠 전에 동기들과 바람도 쐴 겸 유명한 남해 맛집에 다녀왔어요.
신선한 재료와 다채로운 반찬까지 모든것이 좋았던 식당이에요.
</p>
<div class="comment">
<span>공감 <em>24</em></span>
<span>댓글 <em>11</em></span>
</div>
</div>
<img src="https://via.placeholder.com/167x167">
</a>
</li>
<li>
<a href="#">
<div class="blog-article-info">
<div class="blog-profile-wrap">
<img src="https://via.placeholder.com/32x32">
<div class="blog-profile-info">
<h3>마토단풍맘</h3>
<p>14시간 전</p>
</div>
</div>
<h2>Title 1</h2>
<p class="paragraph">며칠 전에 동기들과 바람도 쐴 겸 유명한 남해 맛집에 다녀왔어요.
신선한 재료와 다채로운 반찬까지 모든것이 좋았던 식당이에요.
</p>
<div class="comment">
<span>공감 <em>24</em></span>
<span>댓글 <em>11</em></span>
</div>
</div>
<img src="https://via.placeholder.com/167x167">
</a>
</li>
<li>
<a href="#">
<div class="blog-article-info">
<div class="blog-profile-wrap">
<img src="https://via.placeholder.com/32x32">
<div class="blog-profile-info">
<h3>마토단풍맘</h3>
<p>14시간 전</p>
</div>
</div>
<h2>Title 1</h2>
<p class="paragraph">며칠 전에 동기들과 바람도 쐴 겸 유명한 남해 맛집에 다녀왔어요.
신선한 재료와 다채로운 반찬까지 모든것이 좋았던 식당이에요.
</p>
<div class="comment">
<span>공감 <em>24</em></span>
<span>댓글 <em>11</em></span>
</div>
</div>
<img src="https://via.placeholder.com/167x167">
</a>
</li>
<li>
<a href="#">
<div class="blog-article-info">
<div class="blog-profile-wrap">
<img src="https://via.placeholder.com/32x32">
<div class="blog-profile-info">
<h3>마토단풍맘</h3>
<p>14시간 전</p>
</div>
</div>
<h2>Title 1</h2>
<p class="paragraph">며칠 전에 동기들과 바람도 쐴 겸 유명한 남해 맛집에 다녀왔어요.
신선한 재료와 다채로운 반찬까지 모든것이 좋았던 식당이에요.
</p>
<div class="comment">
<span>공감 <em>24</em></span>
<span>댓글 <em>11</em></span>
</div>
</div>
<img src="https://via.placeholder.com/167x167">
</a>
</li>
<li>
<a href="#">
<div class="blog-article-info">
<div class="blog-profile-wrap">
<img src="https://via.placeholder.com/32x32">
<div class="blog-profile-info">
<h3>마토단풍맘</h3>
<p>14시간 전</p>
</div>
</div>
<h2>Title 1</h2>
<p class="paragraph">며칠 전에 동기들과 바람도 쐴 겸 유명한 남해 맛집에 다녀왔어요.
신선한 재료와 다채로운 반찬까지 모든것이 좋았던 식당이에요.
</p>
<div class="comment">
<span>공감 <em>24</em></span>
<span>댓글 <em>11</em></span>
</div>
</div>
<img src="https://via.placeholder.com/167x167">
</a>
</li>
<li>
<a href="#">
<div class="blog-article-info">
<div class="blog-profile-wrap">
<img src="https://via.placeholder.com/32x32">
<div class="blog-profile-info">
<h3>마토단풍맘</h3>
<p>14시간 전</p>
</div>
</div>
<h2>Title 1</h2>
<p class="paragraph">며칠 전에 동기들과 바람도 쐴 겸 유명한 남해 맛집에 다녀왔어요.
신선한 재료와 다채로운 반찬까지 모든것이 좋았던 식당이에요.
</p>
<div class="comment">
<span>공감 <em>24</em></span>
<span>댓글 <em>11</em></span>
</div>
</div>
<img src="https://via.placeholder.com/167x167">
</a>
</li>
</ul>
</div>
</div>
<div class="blog-main-right">
</div>
</div>
</main>
</body>학습소감 및 문제해결
천천히 따라 했더니 할 만 했던 것 같다. 큰 문제 없이 결과값이 나오긴 했으나 시간은 매우 많이 걸렸다.
AI School for Daegu