1) 학습한 내용
<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 href="#">[안내] 아이템팩토리 정기 정검 안내</a></li>
<li><a href="#">[8일] 네이버 페이 DB 안내</a></li>
<li><a href="#">[안내] 블로그 글발행 해피빈콩 지급 안내</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>
</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>
</ul>
<p>Copyright © NAVER Corp. All Rights Reserved.</p>
</div>
</footer> #blog_header .blog_header_nav .nav_right ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
#blog_header .blog_header_nav .nav_right li {
width: auto;
height: 26px;
margin-left: 8px;}
#blog_header .blog_header_nav .nav_right li.on a {
background-color: #00c73c;
border: solid 1px rgba(0, 0, 0, 0.07);
color: #ffffff;
}
#blog_header .blog_header_nav .nav_right li a {
display: block;
width: 100%;
height: 100%;
background-color: #ffffff;
border: solid 1px #cecece;
line-height: 26px;
padding: 0 10px;
font-size: 13px;}
.blog_main #hot_topic {
height: 305px;
background-color: #f5f5f6;
padding: 20px 0 15px;
}
.blog_main #hot_topic .blog_container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.blog_main #hot_topic .hot_topic_left {
position: relative;
width: 770px;
}
.blog_main #hot_topic .hot_topic_left .topic_heading {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 11px;}
.blog_main #hot_topic .hot_topic_left .topic_heading h3 {
font-size: 16px;
font-weight: 600;
color: #e55e5e;
}
.blog_main #hot_topic .hot_topic_left .topic_heading i {
display: block;
width: 8px;
height: 13px;
background-color: gray;
margin: 0 8px;
}
.blog_main #hot_topic .hot_topic_left .topic_heading a {
font-size: 16px;
}
.blog_main #hot_topic .hot_topic_left .topic_lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.blog_main #hot_topic .hot_topic_left .topic_lists li {
position: relative;
width: 252px;
height: 240px;
}
.blog_main #hot_topic .hot_topic_left .topic_lists img {
position: absolute;
width: 100%;
height: 100%;
}
.blog_main #hot_topic .hot_topic_left .topic_lists p {
position: absolute;
width: 100%;
background-color: rgba(55, 66, 87, 0.9);
padding: 20px 0;
bottom: 0;
color: #ffffff;
text-align: center;}
.blog_main #hot_topic .pagination_wrap {
position: absolute;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
top: 0;
right: 0;}
.blog_main #hot_topic .pagination_wrap a {
display: block;
width: 20px;
height: 20px;
margin-left: 4px;
border: solid 1px rgba(221, 221, 223, 0.8);
background-color: #f6f6f7;
color: #888;
font-size: 12px;
text-align: center;
line-height: 20px;}
.blog_main #hot_topic .hot_topic_right {
position: relative;
width: 280px;
padding-top: 30px;
}
.blog_main #hot_topic .hot_topic_right .topic_banner {
width: 280px;
height: 240px;
background-color: black;
}
.blog_main #blog_main_content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.blog_main #blog_main_content .blog_main_left {
width: 770px;
}
.blog_main #blog_main_content .blog_main_left #blog_main_notification {
background-color: #ffffff;
padding: 54px 0;
text-align: center;}
.blog_main #blog_main_content .blog_main_left #blog_main_notification p {
font-size: 16px;
line-height: 30px;
}
.blog_main #blog_main_content .blog_main_left #blog_article .blog_article_nav {
background-color: #ffffff;
border-top: solid 1px #999999;
border-bottom: solid 1px #999999;
padding: 10px 0;
font-size: 14px;}
.blog_main #blog_main_content .blog_main_left .blog_article_nav ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.blog_main #blog_main_content .blog_main_left .blog_article_nav li {
margin-right: 22px;
}
.blog_main #blog_main_content .blog_main_left .blog_article_nav a {
}
.blog_main #blog_main_content .blog_main_left .blog_article_lists {
}
.blog_main #blog_main_content .blog_article_lists li {
width: 100%;
border-bottom: solid 1px #eeeeef;
padding: 25px 0 23px;}
.blog_main #blog_main_content .blog_article_lists li a {
display: block;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;}
.blog_main #blog_main_content .blog_article_lists .blog_article_info {
width: 573px;
}
.blog_main #blog_main_content .blog_article_lists .blog_profile_wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.blog_main #blog_main_content .blog_article_lists .blog_profile_wrap img {
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 10px;}
.blog_main #blog_main_content .blog_article_lists .blog_profile_info {
}
.blog_main #blog_main_content .blog_article_lists .blog_profile_info h3 {
font-size: 14px;
margin-bottom: 3px;
}
.blog_main #blog_main_content .blog_article_lists .blog_profile_info p {
font-size: 11px;
color: #959595;
}
.blog_main #blog_main_content .blog_article_lists h2 {
margin-top: 16px;
font-size: 17px;
}
.blog_main #blog_main_content .blog_article_lists .paragraph {
margin-top: 10px;
font-size: 13px;
color: #666666;
}
.blog_main #blog_main_content .blog_article_lists .comments {
margin-top: 14px;
color: #959595;
font-size: 12px;
}
.blog_main #blog_main_content .blog_article_lists .comments span {
margin-right: 9px;
}
.blog_main #blog_main_content .blog_article_lists .comments em {
font-style: normal;
}
.blog_main #blog_main_content .blog_main_right {
width: 280px;
}
.blog_main #blog_main_content .blog_main_right #blog_account {
width: 100%;
background-color: #f5f5f6;
border: solid 1px #dddddf;
padding: 20px 15px;
margin-bottom: 12px;
}
.blog_main #blog_main_content .blog_main_right #blog_account p {
font-size: 11px;
color: #888;
margin-bottom: 7px;
}
.blog_main #blog_main_content .blog_main_right #blog_account a {
display: block;
width: 100%;
background-color: #ffffff;
border: solid 1px #cccccc;
border-radius: 4px;
padding: 10px 0;
margin-bottom: 12px;
text-align: center;
font-size: 13px;
color: #000000;
font-weight: 700;}
.blog_main #blog_main_content .blog_main_right #blog_account .account_sub {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 0px 8px;}
.blog_main #blog_main_content .blog_main_right #blog_account .account_sub span {
font-size: 11px;
color: #888;
}
.blog_main #blog_main_content .blog_main_right #blog_banner {
width: 100%;
height: 240px;
background-color: black;
border: solid 1px #dddddf;
}
.blog_main #blog_main_content .blog_main_right #blog_guide {
background-color: #ffffff;
border: solid 1px #dddddf;
border-width: 0 1px 1px;
padding: 19px 20px;}
.blog_main #blog_main_content .blog_main_right #blog_guide a {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.blog_main #blog_main_content .blog_main_right #blog_guide p {
width: 145px;
font-size: 15px;
line-height: 25px;
color: #222;
}
.blog_main #blog_main_content .blog_main_right #blog_guide p span {
font-size: 16px;
font-weight: 700;
}
.blog_main #blog_main_content .blog_main_right #blog_guide i {
display: inline-block;
width: 88px;
height: 65px;
background-color: green;}
.blog_main #blog_main_content .blog_main_right #blog_notice {
background-color: #ffffff;
border: solid 1px #dddddf;
border-width: 0 1px 1px;
padding: 24px 22px 22px;}
.blog_main #blog_main_content #blog_notice .blog_notice_title_wrap {
margin-bottom: 13px;
}
.blog_main #blog_main_content #blog_notice .blog_notice_title_wrap a {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.blog_main #blog_main_content #blog_notice .blog_notice_title_wrap h3 {
font-size: 14px;
font-weight: 600;
}
.blog_main #blog_main_content #blog_notice .blog_notice_title_wrap i {
width: 8px;
height: 13px;
background-color: #000000;
}
.blog_main #blog_main_content #blog_notice .blog_notice_lists {
font-size: 12px;
}
.blog_main #blog_main_content #blog_notice .blog_notice_lists li {
margin-bottom: 4px;
}
.blog_main #blog_main_content #blog_notice .blog_notice_lists li:last-child {
margin-bottom: 0;
}
.blog_main #blog_main_content #blog_helper {
border: solid 1px #dddddf;
border-width: 0 1px 1px;
background-color: #ffffff;
padding: 24px 16px; }
.blog_main #blog_main_content #blog_helper li {
font-size: 14px;
margin-bottom: 10px;
}
.blog_main #blog_main_content #blog_helper li a {
display: block;
height: 35px;
line-height: 35px;
padding-left: 30px;
background-image: url(../img/checkbox.png);
background-repeat: no-repeat;
background-position: left;
background-size: 20px 20px;}
#blog_footer {
padding-top: 40px;
padding-bottom: 55px;
background-color: #f6f6f6;
text-align: center;}
#blog_footer ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-bottom: 20px;}
#blog_footer ul li a:before {
content: '';
display: inline-block;
width: 1px;
height: 12px;
background-color: #d7d7d7;
margin: 0 6px;
vertical-align: -1px;}
#blog_footer ul li:first-child a:before {
content: initial;
}
padding태그는 글자만 영향을 받는다
background-size 배경 이미지의 크기를 조절을 할수 있다.
네이버<link rel="stylesheet" type="text/css" href="css/style.css"><header id="blog_header">
<div class="blog_header_top">
</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">5월 19일</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">5월 18일</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">5월 18일</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">5월 18일</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">5월 18일</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>
</ul>
<p>Copyright © NAVER Corp. All Rights Reserved.</p>
</div>
</footer>/ 챌린지 프로그램 /
.blog_border {
border: solid 1px #eaeaec;
}
.blog_main_detail {
padding-top: 0;
padding-bottom: 100px;
}
.blog_main_detail #program {
background-color: #634ea4;
padding: 62px 0 50px;
color: #ffffff;}
.blog_main_detail #program h3 {
font-size: 38px;
font-weight: 400;
margin-bottom: 10px;
}
.blog_main_detail #program p {
font-size: 16px;
}
.blog_main_detail #program_nav {
border-bottom: solid 1px #ebebeb;
background-color: #ffffff;
padding: 10px 0;}
.blog_main_detail #program_nav .blog_container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.blog_main_detail #program_nav a {
font-size: 14px;
color: #666;
}
.blog_main_detail #program_nav h4 {
font-weight: 600;
}
.blog_main_detail #program_nav h4 a {
color: #000;
}
.blog_main_detail #program_nav ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.blog_main_detail #program_nav ul li a:before {
content: '';
display: inline-block;
width: 1px;
height: 12px;
background-color: #ababab;
margin: 0 12px;
vertical-align: -1px;}
.blog_main_detail #program_info {
background-color: #f8f8f8;
padding: 44px 0 36px;
}
.blog_main_detail #program_info .program_info_wrap {
display: flex;
flex-wrap: wrap;
margin-bottom: 50px;
}
.blog_main_detail #program_info .program_info_wrap h4 {
font-size: 32px;
color: #7d55c8;
line-height: 44px;
margin-right: 120px;}
.blog_main_detail #program_info .program_info_wrap p {
font-size: 18px;
line-height: 28px;
color: #262626;
margin-bottom: 18px;}
.blog_main_detail #program_info .program_info_wrap a {
font-size: 13px;
color: #7d55c8;
}
.blog_main_detail #program_info .program_msg_box {
padding: 29px;
background-color: #ffffff;
}
.blog_main_detail #program_info .program_msg_box .from {
display: block;
font-size: 13px;
font-weight: 600;
color: #7d55c8;
margin-bottom: 6px;}
.blog_main_detail #program_info .program_msg_box .program_msg_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
}
.blog_main_detail #program_info .program_msg_box p {
width: 810px;
font-size: 18px;
}
.blog_main_detail #program_info .program_msg_box .date {
color: #693bbc;
}
.blog_main_detail #program_info .program_msg_box .txt:before {
content: '';
display: inline-block;
width: 1px;
height: 18px;
background-color: #d5d5d5;
margin: 0 9px;
vertical-align: -1px;}
.blog_main_detail #program_info .program_msg_box a {
display: block;
width: 179px;
height: 40px;
background-color: #7d55c8;
color: #ffffff;
line-height: 40px;
text-align: center;
font-size: 15px}
.blog_main_detail #program_info .program_msg_box a:hover {
background-color: rgba(125, 85, 200, 0.8);
}
.blog_main_detail #program_day {
background-color: #ffffff;
}
.blog_main_detail #program_day .program_day_lists {
}
.blog_main_detail #program_day .program_day_list {
}
.blog_main_detail #program_day .program_day_title_wrap {
padding: 36px 0 16px;
}
.blog_main_detail #program_day .program_day_title_wrap .date {
color: #693bbc;
font-size: 16px;
}
.blog_main_detail #program_day .program_day_title_wrap .txt {
font-size: 16px;
}
.blog_main_detail #program_day .program_day_title_wrap .txt:before {
content: '';
display: inline-block;
width: 1px;
height: 18px;
background-color: #d5d5d5;
margin: 0 9px;
vertical-align: -4px;}
.blog_main_detail #program_day .program_day_title_wrap .msg {
font-size: 14px;
color: #666666;
}
.blog_main_detail #program_day .program_image_lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.blog_main_detail #program_day .program_image_lists li {
width: 175px;
height: 228px;
}
.blog_main_detail #program_day .program_image_lists li img {
width: 100%;
margin-bottom: 15px;
}
.blog_main_detail #program_day .program_image_lists li h4 {
font-size: 14px;
color: #333;
margin-bottom: 15px;
}
.blog_main_detail #program_day .program_image_lists li span {
font-size: 12px;
color: #959595;
}
2) 학습내용 중 어려웠던 점
3) 해결 방법
4) 학습소감
곧 수업도 다 끝나가고 10월이 다가오네요 짧으면 짧은 시간을 길다면 긴 시간동안 함께 수업을 듣고해서 정도 많이 들었네요.. 근데 이놈의면접결과는 왜 안알려주는걸까요 화나넹쇼
