학습내용
<div id="blog-account">
<p>네이버를 더 안전하고 편안하게 이용하세요.</p>
<a href="#">로그인</a>
<div class="account-sub">
<div class="left">
<span>아이디</span>
<span>비밀번호 찾기</span>
</div>
<span>회원가입</span>
</div>
</div>
<div id="blog-banner"></div>
<div id="blog-guide">
<a href="#">
<p>온라인 셀러를 위한<br>
<span>블로그 마켓 가입</span>
</p>
<i></i>
</a>
</div>
<div id="blog-guide">
<a href="#">
<p>꼭 한번 확인해야 할<br>
<span>블로그 가이드</span>
</p>
<i></i>
</a>
</div>
<div id="blog-guide">
<a href="#">
<p>누구보다 발빠르게<br>
<span>블로그 새소식</span>
</p>
<i></i>
</a>
</div>
<div id="blog-notice">
<div class="blog-notice-title-wrap">
<a href="#">
<h3>공지사항</h3>
<i></i>
</a>
</div>
<ul class="blog-notice-lists">
<li><a>[안내] 07.28일 모바일웹 스마트에디터 3.0</a></li>
<li><a></a>[안내] PC 블로그 홈에서 쪽지 보내기 기능이</a></li>
<li><a></a>[17일] 블로그 DB 점검 안내</a></li>
</ul>
</div>
<div id="blog-helper">
<ul class="blog=helper-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>
</ul>
</div>
</div>
</div>
</main>
<!-- 블로그 하단 -->
<footer id="blog-footer">
<div class="blog-container">
<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>
<li><a href="#">게시중단요청서비스</a></li>
</ul>
<p>Copyright © NAVER Corp. All Rights Reserved.</p>
</div>
</footer>
</body><!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><a href="blog.html">블로그 홈</a></li>
<li><a href="#">주제별 보기</a></li>
<li><a href="#">이달의 블로그</a></li>
<li><a href="#">공식 블로그</a></li>
<li class="on"><a href="blog-detail.html">챌린지 프로그램</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-detail">
<div id="program">
<div class="blog-container">
<h3>챌린지 프로그램</h3>
<p>화제의 토픽, 영화 리뷰, 미션위젯과 함께 목표에 다가가는 당신의 도전을 기다립니다!</p>
</div>
</div>
<nav id="program-nav">
<div class="blog-container">
<h4><a href="#">HOT TOPIC 도전</a></h4>
<ul>
<li><a href="#">블로거, 영화를 말하다</a></li>
<li><a href="#">목표달성! 미션위젯</a></li>
</ul>
</div>
</nav>
<div id="program-info">
<div class="blog-container">
<div class="program-info-wrap">
<h4>
핫토픽 도전으로<br>
인기 블로거가<br>
되어보세요.
</h4>
<div class="program-txt-wrap">
<p>
핫토픽 도전은 매주 화/목/금 블로그씨 질문에 답한 도전글에서 선정되며<br>
선정된 글과 동영상은 블로그 홈 HOT TOPIC 영역에 일정기간 노출됩니다.
</p>
<a href="#">HOT TOPIC 도전 가이드</a>
</div>
</div>
<div class="program-msg-box blog-border">
<span class="from">From, 블로그씨</span>
<div class="program-msg-wrap">
<p class="question">
<span class="date">7월 28일</span>
<span class="txt">블로그씨는 큰맘 먹고 오븐을 샀지만 그대로 방치 중이에요..
나의 아기자기한 홈 카페를 영상과 함께 보여주세요!</span>
</p>
<a href="#">블로그씨 질문에 답하기</a>
</div>
</div>
</div>
</div>
<div id="program-day">
<div class="blog-container">
<ul class="program-day-lists">
<li class="program-day-list">
<div class="program-day-title-wrap">
<span class="date">7월 27일</span>
<span class="txt">덕질 일기</span>
<span class="msg">블로그씨는 요즘 귀여운 캐릭터 소품 수집에 빠졌답니다.</span>
</div>
<ul class="program-image-lists">
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>나의 덕질은 끝나지 않았다.</h4>
<span>똑똑</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>피규어 수집에 진심입니다~</h4>
<span>만학도</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>제가 키우는 반려동물 그림</h4>
<span>미미</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>귀여운 최애 캐릭더 무민 소품</h4>
<span>씨데잇트리</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>제가 요즘 푹 빠져서 모으고 있는</h4>
<span>에잇치</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>만화책, 웹툰 단행본 모으는</h4>
<span>다람</span>
</a>
</li>
</ul>
</li>
<li class="program-day-list">
<div class="program-day-title-wrap">
<span class="date">7월 27일</span>
<span class="txt">덕질 일기</span>
<span class="msg">블로그씨는 요즘 귀여운 캐릭터 소품 수집에 빠졌답니다.</span>
</div>
<ul class="program-image-lists">
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>나의 덕질은 끝나지 않았다.</h4>
<span>똑똑</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>피규어 수집에 진심입니다~</h4>
<span>만학도</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>제가 키우는 반려동물 그림</h4>
<span>미미</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>귀여운 최애 캐릭더 무민 소품</h4>
<span>씨데잇트리</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>제가 요즘 푹 빠져서 모으고 있는</h4>
<span>에잇치</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>만화책, 웹툰 단행본 모으는</h4>
<span>다람</span>
</a>
</li>
</ul>
</li>
<li class="program-day-list">
<div class="program-day-title-wrap">
<span class="date">7월 27일</span>
<span class="txt">덕질 일기</span>
<span class="msg">블로그씨는 요즘 귀여운 캐릭터 소품 수집에 빠졌답니다.</span>
</div>
<ul class="program-image-lists">
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>나의 덕질은 끝나지 않았다.</h4>
<span>똑똑</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>피규어 수집에 진심입니다~</h4>
<span>만학도</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>제가 키우는 반려동물 그림</h4>
<span>미미</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>귀여운 최애 캐릭더 무민 소품</h4>
<span>씨데잇트리</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>제가 요즘 푹 빠져서 모으고 있는</h4>
<span>에잇치</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>만화책, 웹툰 단행본 모으는</h4>
<span>다람</span>
</a>
</li>
</ul>
</li>
<li class="program-day-list">
<div class="program-day-title-wrap">
<span class="date">7월 27일</span>
<span class="txt">덕질 일기</span>
<span class="msg">블로그씨는 요즘 귀여운 캐릭터 소품 수집에 빠졌답니다.</span>
</div>
<ul class="program-image-lists">
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>나의 덕질은 끝나지 않았다.</h4>
<span>똑똑</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>피규어 수집에 진심입니다~</h4>
<span>만학도</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>제가 키우는 반려동물 그림</h4>
<span>미미</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>귀여운 최애 캐릭더 무민 소품</h4>
<span>씨데잇트리</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>제가 요즘 푹 빠져서 모으고 있는</h4>
<span>에잇치</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>만화책, 웹툰 단행본 모으는</h4>
<span>다람</span>
</a>
</li>
</ul>
</li>
<li class="program-day-list">
<div class="program-day-title-wrap">
<span class="date">7월 27일</span>
<span class="txt">덕질 일기</span>
<span class="msg">블로그씨는 요즘 귀여운 캐릭터 소품 수집에 빠졌답니다.</span>
</div>
<ul class="program-image-lists">
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>나의 덕질은 끝나지 않았다.</h4>
<span>똑똑</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>피규어 수집에 진심입니다~</h4>
<span>만학도</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>제가 키우는 반려동물 그림</h4>
<span>미미</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>귀여운 최애 캐릭더 무민 소품</h4>
<span>씨데잇트리</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>제가 요즘 푹 빠져서 모으고 있는</h4>
<span>에잇치</span>
</a>
</li>
<li class="blog-border">
<a href="#">
<img src="https://via.placeholder.com/170x130">
<h4>만화책, 웹툰 단행본 모으는</h4>
<span>다람</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</main>
<!-- 챌린지 프로그램 하단 -->
<footer id="blog-footer">
<div class="blog-container">
<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>
<li><a href="#">게시중단요청서비스</a></li>
</ul>
<p>Copyright © NAVER Corp. All Rights Reserved.</p>
</div>
</footer>
</body>학습소감 및 문제해결
이때까지 했던 익숙한 태그들이어서 큰 어려움은 없었으나 placeholder를 이용해서 이미지를 입력했지만, 결과값이 출력이 되지 않거나 배열이 조금 일그러진 경우가 있었는데 오탈자에 의한 오류여서 별 어려움 없이 수정하였다.
AI School for Daegu