사이트 그대로 따라 만들기(롯데월드 메인 페이지-css)

@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

body {
    font-family: 'NotoSans-Light', '맑은 고딕', 'Malgun Gothic', sans-serif;
    font-size: 16px;
    color: #555;
}

header {
    height: 147px;
}

section {
    height: 3000px;
    margin: 0 auto;
}

footer {
    height: 250px;
}

/* header */

div#h_top {
    height: 47px;
    background-color: rgb(248, 248, 248);
}

div#h_bottom {
    width: 1400px;
    height: 100px;
    margin: 0 auto;
}

/* h_top */

div#h_top>#h_top_wrap {
    width: 1400px;
    margin: 0 auto;
}

div#h_top_wrap>nav.m_nav {
    float: left;
}

div#h_top_wrap>nav.m_nav>ul>li {
    float: left;
    height: 47px;
    line-height: 47px;
    margin: 0 0 0 20px;
    padding: 0 0 0 21px;
}

div#h_top_wrap>nav.m_nav>ul>li>a {
    text-decoration: none;
    font-size: 15px;
    color: #555;
}

div#h_top_wrap>nav.m_nav>ul>li>a>img {
    transform: translate(-50%, 25%);
}

div#h_top_wrap>nav.t_nav {
    float: right;
    color :#555;
}

div#h_top_wrap>nav.t_nav>ul>li {
    float: right;
    height: 47px;
    line-height: 47px;
    margin: 0 0 0 8px;
    padding: 0 0 0 9px;   
}

div#h_top_wrap>nav.t_nav>ul>li>a {
text-decoration: none;
color :#555;
font-size: 15px;
font-weight: bold;
}

div#h_top_wrap>nav.t_nav>ul>li>a.t_nav_c1 {
    color : black;
    font-weight: 100%;
}


/* h_botom */

/* 로고 */
div#h_bottom>h1 {
    float: left;
    background-image: url("../images/logo.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 107px;
    height: 72px;
    transform: translate(50%, 25%);
}

div#h_bottom>nav.h_bottom_wrap {
    float: left;
    height: 100px;
    line-height: 100px;
    margin-left: 140px;
}

div#h_bottom>nav.h_bottom_wrap>ul {
    float: left;
}

div#h_bottom>nav.h_bottom_wrap>ul>li {
    float: left;
    padding: 0 0 0 50px;
    text-align: center;
}

div#h_bottom>nav.h_bottom_wrap>ul>li>a {
    text-decoration: none;
    font-size: 18px;
    color: black;
    font-weight: bolder;
}

div#h_bottom>nav.h_right {
    float: right;
}

div#h_bottom>nav.h_right>li {
    float: right;
    margin-left: 30px;
    margin-top: 15px;
}

div#h_bottom>nav.h_right>li>a {
    text-decoration: none;
    content: '';
    display: block;
    clear: both;
    color: rgb(111, 35, 249);
}

div#h_bottom>nav.h_right>li>a>img {
    width: 28px;
    height: 28px;
    display: block;
    margin: auto;
    padding-bottom: 14px;
}

div#h_bottom>nav.h_right>li>a>span {
    margin: auto;
}







/* section */

section>#s_1 {
    width: 100%;
    height: 714px;
    margin: 0 auto;
}

section>#time, #s_2, #s_3, #s_4, #s_5, #s_6, #s_7,
#s_content5 {
    margin: 0 363px;
}

section>#time  {
    height: 81px;
}

section>#s_2 {
    height: 500px;
}

section>#s_3 {
    height: 56px;
}

section>#s_4 {
    height: 300px;
}

section #s_5 {
    height: 246px;
    width: 1170px;
}

section #s_content5 {
    height: 103px;
    width: 1170px;
}

section #s_6 {
    height: 246px;
    width: 1170px;
}

section #s_7 {
    width: 1170px;
    height: 56px;
    display: flex;
    justify-content: center;
}



/* 이미지슬라이더 */

#s_1>div.slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 714px;
    border: 1px solid;
    text-align: center;
} 

#s_1>div.slider>ul {
    width: 700%;
    height: 100%;
    transform: margin-left 1s;
}

#s_1>div.slider>ul>li {
    float: left;
    width: 14.28%;
    height: 100%;
} 

#s_1>div.slider input {
    display: none;
}

#s_1>div.slider p {
    text-align: center;
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
}

#s_1>div.slider li:nth-child(1) {
    /* background-color: rebeccapurple; */
    background-image: url("../images/202303021002369080.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#s_1>div.slider li:nth-child(2) {
    /* background-color: lavenderblush; */
    background-image: url("../images/202303021013297390.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#s_1>div.slider li:nth-child(3) {
    /* background-color: yellow; */
    background-image: url("../images/202302270511334840.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#s_1>div.slider li:nth-child(4) {
    /* background-color: brown; */
    background-image: url("../images/202302091133225690.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#s_1>div.slider li:nth-child(5) {
    /* background-color: aquamarine; */
    background-image: url("../images/202302271131448550.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#s_1>div.slider li:nth-child(6) {
    /* background-color: aquamarine; */
    background-image: url("../images/202302271132228400.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#s_1>div.slider li:nth-child(7) {
    /* background-color: aquamarine; */
    background-image: url("../images/202303020303355160.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}




#s_1>div.slider>p>label {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgb(111, 35, 249);
    background-color: white;
    cursor: pointer;
    transition: 0.5s;
}

#pto1:checked~ul {
    margin-left: 0;
}
#pto2:checked~ul {
    margin-left: -100%;
}
#pto3:checked~ul {
    margin-left: -200%;
}
#pto4:checked~ul {
    margin-left: -300%;
}
#pto5:checked~ul {
    margin-left: -400%;
}
#pto6:checked~ul {
    margin-left: -500%;
}
#pto7:checked~ul {
    margin-left: -600%;
}



/* time */

div#time {
    border-bottom: 1px solid #d5d4d4;
    text-align: center;
    font-weight: bolder;
    padding: 0;
    height: 81px;
    line-height: 81px;
}

div#time>a {
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    flex-direction: row;
    color: black;
}

div#time>a>p>img {
    transform: translate(-50%, 25%);
}




/* 혜택 */

div#s_2 {
    padding: 120px 0;
    text-align: center;
}

div#s_2>div.d_1 {
    font-size: 38px;
    margin: 30px 0 0;
    color: black;
}

div#s_2>div.d_2 {
    color: #555;
    margin: 30px 0 60px 0;
    font-size: 20px;
}

div#s_2>div.d_3 {
    width: 1170px;
    float: left;
    text-align: left;
}

div#s_2>div.d_3 div {
    float: left;
    width: 290px;
    height: 352px;
    border: 1px solid lightgray;
} 

div#s_2>div.d_3 div:nth-child(1) {
    background-image: url(../images/202302231056258250_231.jpg);
    background-size: contain;
    background-repeat: no-repeat;
   
}

div#s_2>div.d_3 div:nth-child(2) {
    background-image: url(../images/202302230134031050_231.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

div#s_2>div.d_3 div:nth-child(3) {
    background-image: url(../images/202302200537465640_231.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

div#s_2>div.d_3 div:nth-child(4) {
    background-image: url(../images/202302280347541030_231.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

div#s_2>div.d_3 div>span.z_1 {
    display: block;
    width: 240px;
    height: 100px;
    transform: translateY(250px);
    margin: 0 auto;
}

div#s_2>div.d_3 div>span.z_1>a.p_1 {
    color: rgb(111, 35, 249);
    font-size: 20px;
    font-weight: 340;
    letter-spacing: -2px;
}

div#s_2>div.d_3 div>span.z_1>a.n_1 {
    color: black;
    font-size: 20px;
    font-weight: bold;
}




div#s_3 {
    height: 56px;
    line-height: 56px;
    margin-bottom: 100px;
}

div#s_3>div {
    text-align: center;
    width: 220px;
    height: 56px;
    border: 1px solid rgb(111, 35, 249);
    background-color: rgb(111, 35, 249);
    border-radius: 50px;
    margin: 0 auto;
}

div#s_3>div>a {
    text-decoration: none;
    color: white;
    font-size: 20px;
}


/* 어트랙션 */

div.background {
    padding-top: 30px;
    background-image: url(../images/mainCon3_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 1903px;
    height: 1200px;
}

section>div#s_4> {
    height: 52px;
    padding: 120px 0;
} 

div#s_4>p {
    height: 52px;
    line-height: 52px;
    font-size: 40px;
    margin-top: 80px;
    margin-bottom: 40px;
    text-align: center;
    color: black;
} 

div#s_4>div.s_box1 {
    text-align: center; 
    width: 1170px; 
    display: flex; 
    justify-content: center;
    margin-bottom: 60px;
}

div#s_4>div.s_box1>div {
    float: left;
    height: 46px;
    line-height: 46px;
    border: 1px solid #555;
    border-radius: 50px;
    margin-left: 10px;
    padding: 0 19px;
}


div#s_4>div.s_box1>a {
    cursor: pointer;
}

div#s_4>div.s_box1>div a {
    text-decoration: none;
    color: #555;
} 

div#s_4>div.s_box1>div:hover {
    border: 2px solid rgb(111, 35, 249);
}
div#s_4>div.s_box1>div:hover a {
    color: rgb(111, 35, 249);
    font-weight: bolder;
}





/* section 5 */


div#s_5>div {
    float: left;
    margin-right: 15px;
    box-sizing: border-box;
}

div#s_5>div:nth-child(1) {
    width: 574px;
    height: 246px;
    background-image: url(../images/20180619062050445.jpg);
    background-size: contain;
}

div#s_5>div:nth-child(2) {
    width: 276px;
    height: 246px;
    background-image: url(../images/20180619062100417.jpg);
    background-size: contain;
}

div#s_5>div:nth-child(3) {
    width: 276px;
    height: 246px;
    background-image: url(../images/20180619062112176.jpg);
    background-size: contain;
    margin-right: 0;
}


/* box5 contents */

div#s_content5 {
    height: 103px;
}

div#s_content5>div {
    float: left;
    box-sizing: border-box;
    margin-right: 15px;
    margin-bottom: 15px;
}

div#s_content5>div:nth-child(1) {
    width: 574px;
    height: 103px;
    background-color: white;
}

div#s_content5>div:nth-child(2) {
    width: 276px;
    height: 103px;
    background-color: white;
}

div#s_content5>div:nth-child(3) {
    width: 276px;
    height: 103px;
    background-color: white;
    margin-right: 0 ;
}

div#s_content5>div>span.inbox>p.ib_1 {
    display: block;
    width: 514px;
    height: 22px;
    color: black;
    font-size: 22px;
    font-weight: bold;
    margin: 20px 30px 0 30px;
}

div#s_content5>div>span.inbox>p.ib_2 {
    display: block;
    width: 514px;
    height: 16px;
    color: #555;
    font-size: 16px;
    margin: 15px 30px 20px 30px;
}

div#s_content5>div>span.inbox>p.ib_3 {
    display: block;
    width: 216px;
    height: 22px;
    color: black;
    font-size: 22px;
    font-weight: bold;
    margin: 20px 30px 0 30px;
}

div#s_content5>div>span.inbox>p.ib_4 {
    display: block;
    width: 216px;
    height: 16px;
    color: #555;
    font-size: 16px;
    margin: 15px 30px 20px 30px;
}





/* section 6 */

div#s_6 {
    margin: 0 363px;
    float: left;

}

div#s_6>div {
    width: 1170px;
    float: left;
    box-sizing: border-box;
    margin-right: 15px;
}

div#s_6>div:nth-child(1) {
    width: 276px;
    height: 246px;
    background-image: url(../images/20180619062121981.jpg);
    background-size: contain;
}

div#s_6>div:nth-child(2) {
    width: 276px;
    height: 246px;
    background-image: url(../images/202205090153288960_275.jpg);
    background-size: contain;
}

div#s_6>div:nth-child(3) { 
    width: 574px;
    height: 246px;
    background-image: url(../images/202006241113232060.jpg);
    background-size: contain;
    margin-right: 0;
}


/* box6 contents */

div#s_content6 {
    height: 103px;
    float: left;
    margin: 0 363px;
}

div#s_content6>div {
    float: left;
    box-sizing: border-box;
    margin-right: 15px;
    margin-bottom: 15px;
}

div#s_content6>div:nth-child(1) {
    width: 276px;
    height: 103px;
    background-color: white;
}

div#s_content6>div:nth-child(2) {
    width: 276px;
    height: 103px;
    background-color: white;
}

div#s_content6>div:nth-child(3) {
    width: 574px;
    height: 103px;
    background-color: white;
    margin-right: 0 ;
    padding-right: 10px;
}

div#s_content6>div>span.inbox>p.ib_1 {
    display: block;
    width: 514px;
    height: 22px;
    color: black;
    font-size: 22px;
    font-weight: bold;
    margin: 20px 30px 0 30px;
}

div#s_content6>div>span.inbox>p.ib_2 {
    display: block;
    width: 514px;
    height: 16px;
    color: #555;
    font-size: 16px;
    margin: 15px 30px 20px 30px;
}

div#s_content6>div>span.inbox>p.ib_3 {
    display: block;
    width: 216px;
    height: 22px;
    color: black;
    font-size: 22px;
    font-weight: bold;
    margin: 20px 30px 0 30px;
}

div#s_content6>div>span.inbox>p.ib_4 {
    display: block;
    width: 216px;
    height: 16px;
    color: #555;
    font-size: 16px;
    margin: 15px 30px 20px 30px;
}

div#s_content6>div>span.inbox>p a {
    text-decoration: none;
    color:#555;
}

div#s_content6>div>span.inbox>p.ib_3>a {
    color:black;
}

div#s_content6>div>span.inbox>p.ib_4>a {
    color:#555;
}


div#s_content5>div>span.inbox p:hover {
    color : white;
}

div#s_content6>div>span.inbox>p:hover {
    color : white;
}

div#s_content6>div>span.inbox>p a:hover {
    color : white;
}

div#s_content5>div.bg:hover {
    background-color: rgb(111, 35, 249);
}

div#s_content6>div.bg:hover {
    background-color: rgb(111, 35, 249);
}


/* section s_7 */

div#s_7>div {
    height: 56px;
    line-height: 56px;
    margin-top: 60px;
}

div#s_7>div:first-child {
    text-align: center;
    width: 220px;
    height: 56px;
    border: 1px solid rgb(111, 35, 249);
    background-color: rgb(111, 35, 249);
    border-radius: 50px;
    margin-right: 25px;
}

div#s_7>div:last-child {
    text-align: center;
    width: 220px;
    height: 56px;
    border: 2px solid rgb(111, 35, 249);
    border-radius: 50px;
    margin-right: 0;
}

div#s_7>div>a.s_7_button1 {
    text-decoration: none;
    font-size: 18px;
    color: white;
}

div#s_7>div>a.s_7_button2 {
    text-decoration: none;
    font-size: 18px;
    color: rgb(111, 35, 249);
    font-weight: bold;
}
/* 
div#s_7>div>a:last-child {
    text-decoration: none;
    color: rgb(226, 202, 43);
    font-size: 18px;
} */



/* footer */

div#f_top {
    height: 45px;
    width: 1170px;
    border-bottom: 1px solid #555;
    margin: 0 363px;
}

div#f_bottom {
    height: 200px;
}

/*  f_top 의 내부 구성 요소 */

div#f_top>div#f_top_wrap {
    width: 1170px;
    height: 30px;
    line-height: 30px;
    margin-top: 60px;
}

div#f_top_wrap>nav.f_nav {
    width: 1170px;
    height: 30px;
    float: left;
    box-sizing: border-box;
    text-align: center;
    margin-left: 50px;
}

div#f_top_wrap>nav.f_nav>ul>li {
    float: left; 
    text-align: center;
    margin: 0 15px;
}

/*  f_bottom 의 내부 구성 요소 */

div#f_bottom {
    width: 1170px;
    margin: 20px auto;
    padding-top: 20px;
    box-sizing: border-box;
}

div#f_bottom>.f_logo {
    background-image: url("../images/footer_logo.png");
    background-repeat: no-repeat;
    width: 79px;
    height: 56px;
    float: left;
    margin-right: 20px;
}

div#f_bottom>div.f_left {
    float: left;
}

div#f_bottom>div.f_left>p {
    font-size: 15px;
    color: #555;
    font-family: 'NotoSans-Light', '맑은 고딕', 'Malgun Gothic', sans-serif;
}

div.f_right {
    float: right;
    width: 180px;
    height: 35px;
    margin-right: 198px;
}

div.f_right>div {
    float: right;
    margin-right: 25px;
}

div.f_right>div.r3 {
    width: 35px;
    height: 35px;
    background-image: url(../images/sns_btn1.png);
    background-repeat: no-repeat;
}
div.f_right>div.r2 {
    width: 35px;
    height: 35px;
    background-image: url(../images/sns_btn2.png);
    background-repeat: no-repeat;
}
div.f_right>div.r1 {
    width: 35px;
    height: 35px;
    background-image: url(../images/sns_btn3.png);
    background-repeat: no-repeat;
}

div#f_bottom>div.f_logo2 {
    float: right;
    width: 380px;
    height: 76px;
    background-image: url(../images/img_lotthotel_pc.jpg);
    background-repeat: no-repeat;
    margin-top: 20px;
}

---

내가 원하는 위치와 효과를 주기 위해서는 생각보다 엄청나게 많은 코드들이 필요하다는 것을 알게 되었다.

뒷부분으로 갈수록 윗 부분에서 만든 코드들이 영향을 주기 때문에 코드를 왜 쪼개서 만들어야 하는지 

서로 독립적인 코드가 왜 중요한지에 대해서 생각해 볼 수 있었다.

중간 중간 막힐 때에는 왜 그런지 한참을 혼자 고민했었는데 다양한 키워드로 내가 원하는 정보를 얻기 위해서는 검색이 필수라는 것을 깨닫게 되었다. 

다른 사람에게 코드를 공유할 때에는 내 컴퓨터에서만 뜨느 것이 아니라 다른 곳에서도 잘 뜰 수 있도록 확인 작업을 해야 한다는 것을 깨우칠 수 있었다. 

분명 배웠던 내용인데 적용되지 않을 때에는 왜 적용이 되지 않는지 생각해 보고 여태까지 배운 예제들을 실전에 적용할 수 있도록 매일 매일 연습해야 겠다.

다른 사이트들도 클린 코딩하는 연습을 해서 개발자도구에 익숙해져야 겠다.