21-12-13일 클론 코딩

HTML 코드 

            <section class="main_third">

                <nav class="main_thrid_nav">

                    <ul class="main_third_ul">

                        <li class="main_third_ul_li"><button>

                            << << </button>

                        </li>

                        <li class="main_third_ul_li"><button>

                            << </button>

                        </li>

                        <li class="main_third_ul_li"><button>1</button></li>

                        <li class="main_third_ul_li"><button>2</button></li>

                        <li class="main_third_ul_li"><button>3</button></li>

                        <li class="main_third_ul_li"><button>14</button></li>

                        <li class="main_third_ul_li"><button>>></button></li>

                        <li class="main_third_ul_li"><button>>> >></button></li>

                    </ul>

                </nav>

            </section>

   

        </article>

    </main>

    <footer>

        <small>

            Powered by <a href="">Hugo</a>. Copyright (c) 2021, <a href="">Integerous DevLog</a>

        </small>

    </footer>

 

오늘은 main > article > 마지막 section을 작업했다. 

button에 글을 넣어줬고, 페이지로 이동해야 하기 때문에 nav 속성에 ul > li 를 썻다. 

.

.

 

CSS 코드

.main_second .main_second_sns .git {

    display: inline-block;

    /* background:url(../img/sprite.png) no-repeat -10px -99px; */

    width: 30px;

    height: 30px;

    background-color: black;

}

.main_second .main_second_sns .git:hover {

    width: 30px;

    background-color: gray;

}

.main_second .main_second_sns .line {

    display: inline-block;

    width: 30px;

    height: 30px;

    background-color: black;

     /* background: url(../img/sprite_2.png) no-repeat 50px -100px; */

}

.main_second .main_second_sns .line:hover {

    display: inline-block;

    width: 30px;

    height: 30px;

    background-color: gray;

    /* background: url(../img/sprite.png) no-repeat -188px -99px;

 */

}

.main_second .main_second_sns .inst {

    display: inline-block;

    width: 30px;

    height: 30px;

    background-color: black;

    /* background: url(../img/sprite.png) no-repeat -188px -10px; */

}

.main_second .main_second_sns .inst:hover {

    display: inline-block;

    width: 30px;

    height: 30px;

    background-color: gray;

    /* background: url(../img/sprite.png) no-repeat -188px -99px; */

}

.main_second .main_second_sns .twit {

    display: inline-block;

    width: 30px;

    height: 30px;

    background-color: black;

}

.main_second .main_second_sns .twit:hover {

    width: 30px;

    height: 30px;

    background-color: gray;

}

.main_second .main_second_sns .face {

    display: inline-block;

    width: 30px;

    height: 30px;

    background-color: black;

}

.main_second .main_second_sns .face:hover {

    width: 30px;

    height: 30px;

    background-color: gray;

}

 

CSS 변경된 점으로는 첫번째. 

아직 스프라이트 이미지를 해결하지 못했다. 이미지가 너무 커서 position을 맞춰도 온전히 

어플처럼 이미지가 보이지 않기에... 이미지를 넣지 않고, 오버했을 때 색상이 변하는 정도만

표현했다. 

.

.

 

.main_third {

    width: 100%;

    display: block;

    text-align: center;

    overflow: hidden;

    clear: both;

}

.main_third_nav {

    width: 100%;

    display: inline-block;

    overflow: hidden;

    clear: both;

}

.main_third_ul {

    overflow: hidden;

    clear: both;

    margin: 50px 0 0 20px

}

/* float 을 사용했을 때 부모태그들이 자식태그는 인식 하였으나,

위에 있는 태그들을 인식하지 못함. 각각 부모태그에 전부 overflow를

줘야하는 사태가 발생. 차후 가상요소로도 작업을 해봐야 겠다. */

.main_third_ul_li {

    float: left;

    margin-left: 10px;

}

.main_third_ul_li button {

    font-size: 10px;

}

/* 선택하고 있을 때 박스가 커져있는 상태를 만들려고 했는데,

보여주기 식으로 커져있는 것 보다는 자바스크립트쪽으로 구현하는게

더 맞다고 생각이 들어서 별도로 지정해서 height 값을 지정하지

않았다.  */

.main_third_ul_li button:hover {

    height: 50px;

    color: #747474;

}

 

마지막 section 부분 코드이다. 

li 태그에 float를 쓰니 자꾸만 부모태그가 자식을 인식못하는 상황이 생겨버렸다. 

overfolw:hidden 속성을 자식에서 부모태그로 차근차근 올라가면서 줬는데

결국 모든 부모에 overflow를 줘야만 했고, 나중에 가상요소로도 시도해 볼 생각이다. 

 

footer {

    margin-top: 100px;

    background-color: rgb(233, 233, 233);

    padding: 30px 0 0 17%;

}

footer small {

    font-size:12px;

}

footer small a {

    color:black;

}

코드의 제일 마지막이 될 footer 이다. 

배경색을 어디로 줘야 할지 조금 고민했지만 

small에 주기엔 width 값과 height 값을 지정해 줘야 할것 같아서 footer에 줬다. 

마진 탑으로 article과 거리를 벌리고 padding으로 높이를 지정하지 않고 박스를 만들었다. 

padding-left 는 17%인데 이는 article의 padding-left 값과 같다. 

.

.

 

이제 background-image 만 하면 거의 완성단계 인것같다. 

그 외 a 태그가 바라보는 위치(주소) 나 target:_blank 로 지정 등등 조금 디테일을 다음으면 

될것같다. 거의 다했다! 마지막까지 화이팅!!