개발일지 21/06/16

학습한 내용
1.블로그 메인 오른쪽 영역
2.블로그 메인 푸터

1.블로그 메인 오른쪽 영역(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;
}
~~

2.블로그 메인 푸터(CSS)

#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;
}

학습한 내용 중 어려웠던 점 또는 해결못한 것들

해결방법 작성
학습 소감