개발일지 21/06/25

학습 내용
1. 네이버 게임 왼쪽 영역 (1) - 게임라운지인기글

(CSS)

#ent-main .ent-right .ent-banner {
width: 300px;
height: 250px;
background-color: grey;

border: solid 1px #000000;

margin-bottom: 30px;

}

#ent-main .ent-right #ent-section-10 {
padding-bottom: 12px;
border-bottom: solid 1px #e8e8e8;
}

#ent-main .ent-right #ent-section-10 .title-wrap {
margin-bottom: 8px;
}

#ent-main .ent-right #ent-section-10 .title-wrap h3 {
font-size: 16px;
}

#ent-main .ent-right #ent-section-10 .title-wrap a {
font-size: 12px;
color: #999;
}

#ent-main .ent-right #ent-section-10 ol {

}

#ent-main .ent-right #ent-section-10 ol li {
margin-bottom: 10px;
}

#ent-main .ent-right #ent-section-10 ol li a {

}

#ent-main .ent-right #ent-section-10 ol li .rank {
display: inline-block;
width: 16px;

font-size: 16px;
color: #e2458f;

text-align: center;

vertical-align: middle;

}

#ent-main .ent-right #ent-section-10 ol li p {
display: inline-block;
width: 270px;
vertical-align: middle;
font-size: 12px;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

}

#ent-section-11 {
border-bottom: solid 1px #f2f2f2;
padding-bottom: 24px;
}

#ent-section-11 ul {
margin-bottom: 12px;
}

#ent-section-11 ul li {
padding: 14px;
border-bottom: solid 1px #f2f2f2;
}

#ent-section-11 ul a {

}

#ent-section-11 ul .title-wrap {
margin-bottom: 10px;
}

#ent-section-11 ul .title-wrap .title-left {

}

#ent-section-11 ul .title-wrap .title-left .count{
width: 20px;
height: 15px;
padding: 2px 4px;
border: solid 1px #e2458f;

color: #e2458f;
font-size: 10px;

margin-right: 8px;

}

#ent-section-11 ul .title-wrap .title-left h3 {
color: #e2458f;
font-size: 12px;
}

#ent-section-11 ul .title-wrap .icon-arrow {
width: 8px;
height: 12px;
background-color: #e2458f;
}

#ent-section-11 ul .article-content {

}

#ent-section-11 ul .article-content .content-left {
width: 190px;
}

#ent-section-11 ul .article-content .content-left h4 {
font-size: 12px;
font-weight: 700;
line-height: 18px;
margin-bottom: 6px;
}

#ent-section-11 ul .article-content .content-left .source {
font-size: 11px;
color: #a6a6a6;
}

#ent-section-11 ul .article-content img {
width: 70px;
height: 70px;
border: solid 1px #000000;
}

#ent-section-11 .bottom .btn-wrap {

}

#ent-section-11 .bottom .btn-wrap .btn {
width: 24px;
height: 24px;
border: solid 1px #f2f2f2;
}

#ent-section-11 .bottom .btn-wrap .btn-prev {
background-color: grey;
border-right: none;
}

#ent-section-11 .bottom .btn-wrap .btn-next {
background-color: yellow;
}

#ent-section-11 .bottom .more {
font-size: 12px;
color: #999;
}

#ent-section-12 {
padding: 20px 0 2px;
border-bottom: solid 1px #e8e8e8;
}

#ent-section-12 .title-wrap {
margin-bottom: 12px;
}

#ent-section-12 .title-wrap h3 {
font-size: 16px;
}

#ent-section-12 ul {

}

#ent-section-12 li {
width: 146px;
margin-bottom: 19px;
}

#ent-section-12 li img {
width: 100%;
height: 138px;
border: solid 1px #000000;
margin-bottom: 9px;
}

#ent-section-12 li h4 {
font-size: 12px;
font-weight: 700;
line-height: 18px;

margin-bottom: 5px;

}

#ent-section-12 li span {
font-size: 11px;
color: #898989;
}

#ent-section-13 {
padding-top: 22px;
}

#ent-section-13 .title-wrap {
margin-bottom: 8px;
}

#ent-section-13 .title-wrap h3 {
font-size: 16px;
}

#ent-section-13 .title-wrap .more {
font-size: 12px;
color: #999;
}

#ent-section-13 .heading {
margin-bottom: 8px;
}

#ent-section-13 .heading .heading-info {
width: 210px;
}

#ent-section-13 .heading h4 {
font-size: 12px;
font-weight: 700;
line-height: 18px;
}

#ent-section-13 .heading .source{
font-size: 11px;
color: #999;
}

#ent-section-13 .heading img {
width: 70px;
height: 70px;
border: solid 1px #000000;
}

#ent-section-13 ul {

}

#ent-section-13 ul li {
margin-bottom: 8px;
}

#ent-section-13 ul a {
display: block;
width: 100%;
font-size: 12px;
color: #222;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

}

#ent-section-13 ul a:before {
display: inline-block;
content: '';
width: 2px;
height: 2px;

vertical-align: top;
background-color: silver;

margin: 5px 5px 0 0;

}

/ Game /
.game-container {
width: 1280px;
margin: 0 auto;
}

.game-flex-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.game-flex-start {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.game-flex-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}

.game-flex-center {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.game-shadow {
box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
}

.game-p-30 {
padding: 30px;
}

.game-m-t-20 {
margin-top: 20px;
}

.font-17 {
font-size: 17px;
}

.font-19 {
font-size: 19px;
}

.font-400 {
font-weight: 400;
}

#game-body {
background-color: #f8f9fd;
}

#game-header {
width: 100%;
background-color: #4e41db;
}

#game-header nav {
height: 60px;
}

#game-header nav .left {

}

#game-header nav .left h1 {
font-size: 20px;
}

#game-header nav .left h1 a{
color: #ffffff;
}

#game-header nav .left ul {

}

#game-header nav .left ul li {

}

#game-header nav .left ul li a {
color: #9da5b6;
font-size: 18px;
}

#game-header nav .left ul li a:before {
display: inline-block;
content: '';
width: 1px;
height: 14px;
border-radius: .5px;
background-color: #9da5b6;

margin: 0 12px;

}

#game-header nav .right {

}

#game-header nav .right .search-wrap {
overflow: hidden;
width: 300px;
border-radius: 20px;
background-color: rgba(0, 0, 0, .28);
}

#game-header nav .right .search-wrap input {
width: calc(100% - 38px);
height: 38px;
background-color: transparent;
padding: 10px 12px 9px 14px;
border: none;

color: #ffffff;
font-size: 15px;

}

#game-header nav .right .search-wrap input:focus {
outline: none;
}

#game-header nav .right .search-wrap button {
width: 38px;
height: 38px;
background-color: transparent;
border: none;
}

#game-header nav .right .ticket-wrap {
position: relative;
width: 40px;
height: 40px;
margin-left: 10px;
}

#game-header nav .right .ticket-wrap .btn-ticket {
display: block;
width: 40px;
height: 40px;
border: solid 1px #ffffff;
}

#game-header nav .right .ticket-wrap .bubble-msg {
position: absolute;
width: 165px;
background-color: #697183;
border-radius: 8px;

padding: 10px 12px;
top: 50px;
left: 50%;
transform: translateX(-50%);

font-size: 14px;
color: #ffffff;
font-weight: 600;

z-index: 100;

}

#game-header nav .right .btn-login {
width: 60px;
border: solid 1px hsla(0, 0%, 80%, .3);
border-radius: 8px;

padding: 7px 0 6px;
margin-left: 10px;

font-size: 12px;
color: #ffffff;
text-align: center;

}

#game-header .game-events-wrap {
padding: 80px 0;
}

#game-header .game-events-wrap .event-wrap {
position: relative;
width: 407px;
height: 264px;
border-radius: 40px;

top: 0;
transition: top linear 0.45s;

}

#game-header .game-events-wrap .event-wrap:hover {
top: -20px;
}

#game-header .game-events-wrap .event-wrap.one {
background-color: rgb(112, 104, 236);
}

#game-header .game-events-wrap .event-wrap.two {
background-color: rgb(69, 39, 39);
}

#game-header .game-events-wrap .event-wrap.three {
background-color: rgb(112, 177, 181);
}

#game-header .game-events-wrap .event-wrap .event-title-wrap {
position: absolute;

left: 30px;
bottom: 30px;

color: #ffffff;	

}

#game-header .game-events-wrap .event-wrap .event-title-wrap span {
display: inline-block;
border: solid 2px #ffffff;
border-radius: 10px;

padding: 4px 8px 2px;

font-size: 12px;
font-weight: 600;

text-align: center;

margin-bottom: 15px;

}

#game-header .game-events-wrap .event-wrap .event-title-wrap h2 {
font-size: 20px;
}

#game-main .game-container {
align-items: stretch;
}

#game-main .left {
width: 900px;
padding-bottom: 200px;
}

#game-main .left .left-banner {
overflow: hidden;
width: 900px;
height: 120px;
border-radius: 12px;

margin-bottom: 24px;

}

#game-main .left .left-banner a {
display: block;
width: 100%;
height: 100%;
}

#game-main .left .left-banner img {
width: 100%;
height: 100%;s
}

.game-section {
position: relative;

background-color: #ffffff;
box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
border-radius: 12px;

padding: 27px 30px 40px;
margin-bottom: 40px;

}

.game-section .section-title-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.game-section .section-title-wrap h2 {
font-size: 19px;
font-weight: 400;
}

.game-section .section-middle-nav {

}

.game-section .section-middle-nav ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;

border-bottom: 1px solid rgba(0, 0, 0, .07);

}

.game-section .section-middle-nav li {

}

.game-section .section-middle-nav a {
display: block;
padding: 14px;
border-bottom: solid 3px transparent;
color: #777;
}

.game-section .section-middle-nav a.active {
border-bottom: solid 3px #7776ff;
font-weight: 700;
color: #7776ff;
}

.game-section .section-body-wrap {
margin-top: 18px;
}

.game-section .section-body-wrap .image-txt-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.game-section .section-body-wrap .image-txt {
width: 407.5px;
}

.game-section .section-body-wrap img {
width: 180px;
height: 100px;
border-radius: 8px;
border: solid 1px rgba(0, 0, 0, .06);

margin-right: 15px;

}

.game-section .section-body-wrap .txt {
width: 212px;
}

.game-section .section-body-wrap .title {
font-size: 15px;
font-weight: 600;
line-height: 20px;

margin-bottom: 3px;

}

.game-section .section-body-wrap .source {
font-size: 13px;
color: #999;
}

.game-section .btn-circle {
position: absolute;
width: 55px;
height: 55px;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);

bottom: -27.5px;

left: 50%;
transform: translateX(-50%);

}

.game-section .btn-circle.icon-arrow {
background-color: grey;
}

.game-section .btn-circle.icon-plus {
background-color: blue;
}

#game-section-1 {

}

#game-section-1 .section-btn-wrap {

}

#game-section-1 .section-btn-wrap a {
font-size: 14px;
color: #9da5b6;
font-weight: 700;
}

#game-section-1 .section-btn-wrap a.active {
color: #7776ff;
}

#game-section-1 .section-btn-wrap a:last-child {
margin-left: 14px;
}

#game-section-1 ol {

}

#game-section-1 ol li {
padding: 10px 0;
border-bottom: solid 1px rgba(0, 0, 0, .03);
}

#game-section-1 ol li a {

}

#game-section-1 ol li .game-thumbnail {
border-radius: 8px;
margin-right: 10px;
}

#game-section-1 ol li .txt-info {
width: 690px;
margin-right: 10px;
}

#game-section-1 ol li .txt-info h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 3px;
}

#game-section-1 ol li .txt-info .source-wrap {

}

#game-section-1 ol li .txt-info .source-wrap .game {
font-size: 13px;
color: #858894;
margin-right: 5px;
}

#game-section-1 ol li .txt-info .source-wrap .author {
font-size: 13px;
color: #858894;
margin-right: 5px;
}

#game-section-1 ol li .txt-info .source-wrap .level {
font-size: 13px;
color: #858894;
margin-right: 5px;
}

#game-section-1 ol li .txt-info .source-wrap .rank {
font-size: 13px;
color: #858894;
}

#game-section-1 ol li .blog-thumbnail {
border-radius: 8px;
}

#game-section-2 {

}

#game-section-2 .section-title-wrap .more {
font-size: 13px;
font-weight: 400;
}

#game-section-2 .section-body-wrap {

}

#game-section-2 .section-body-wrap ul {
margin-top: 25px;
}

#game-section-2 .section-body-wrap li {
margin-bottom: 11px;
}

#game-section-2 .section-body-wrap li:last-child {
margin-bottom: 0;
}

#game-section-2 .section-body-wrap a {

}

#game-section-2 .section-body-wrap ul .title {
width: 776px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#game-section-2 .section-body-wrap ul .source {

}

#game-section-3 .section-body-wrap .image-txt .category {
display: block;

font-size: 13px;
color: #7776ff;
margin-bottom: 3px;

}

#game-main .right {
width: 358px;
}

#game-section-4 ol {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}

#game-section-4 li {

}

#game-section-4 a {
display: block;
}

#game-section-4 .image-wrap {
position: relative;
overflow: hidden;
width: 263px;
height: 148px;
border-radius: 8px;
}

#game-section-4 .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
}

#game-section-4 .image-wrap .icon-play {
position: absolute;
width: 25px;
height: 25px;
background-color: grey;

left: 10px;
bottom: 12px;

}

#game-section-4 .image-wrap .time {
position: absolute;
background-color: rgba(0, 0, 0, .5);
border-radius: 6px;
padding: 2px 6px;

color: #ffffff;
font-size: 14px;

right: 10px;
bottom: 10px;

}

#game-section-4 .section-body-wrap .image-txt {
width: 100%;
margin-top: 10px;
}

#game-section-4 .image-txt h3 {
font-size: 15px;
}

#game-section-4 .image-txt .source,
#game-section-4 .image-txt .count {
font-size: 13px;
color: #999;
}

#game-section-5 .section-title-wrap .info {
font-size: 13px;
color: #999999;
}

#game-section-5 .section-body-wrap .image-wrap {
position: relative;
width: 190px;
height: 120px;
}

#game-section-5 .section-body-wrap .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
border: none;
margin-right: 0;
}

#game-section-5 .section-body-wrap .image-wrap .badge {
position: absolute;
display: inline-block;

color: #ffffff;
background-color: #4e41db;
font-size: 15px;
font-weight: 700;
padding: 4px 8px;
border-radius: 8px;

top: -5px;
left: -5px;

}

#game-section-5 .section-body-wrap .image-wrap .badge.open {
background-color: red;
}

#game-section-5 .section-body-wrap .txt-wrap {
margin-top: 12px;
}

#game-section-5 .section-body-wrap .txt-wrap h3 {
font-size: 15px;
font-weight: 600;
}

#game-section-5 .section-body-wrap .txt-wrap p {
font-size: 13px;
font-weight: 500;
}

#game-section-5 .section-body-wrap .txt-wrap span {
font-size: 13px;
color: grey;
}

#game-section-6 .section-body-wrap img {
width: 80px;
height: 80px;
border-radius: 30px;
}

#game-section-6 .section-body-wrap .category {
font-size: 15px;
}

#game-section-6 .section-body-wrap .txt {
width: 300px;
}

#game-section-6 .section-body-wrap .title {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

font-size: 13px;
color: #666;

}

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

해결방법 작성

학습 소감