20210728
학습한 내용
네이버 블로그 2편,3편
블로그 메인 오른쪽 영역, 블로그 메인 푸터 영역, 블로그 챌린지 프로그램
blog.html
<div class="blog-main-right">
<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 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>style.css
.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: 0 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: 17px;
line-height: 25px;
color: #222;
}
.blog-main #blog-main-content .blog-main-right #blog-guide p span {
font-size: 18px;
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;
}
/* 블로그 상세 페이지 */
.blog-border {
border: 1px solid #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: 44px;
text-align: center;
}
.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;
}학습내용 중 어려웠던 점
집중이 안되어 작성하는데 오랜 시간이 걸림.
해결방법
한번에 다 들으려하지않고 나눠서 들음.
학습소감
하나를 듣더라도 남을 수 있게 들어야겠다.
