2021_09_24_TIL

header {
            
        }
        header .gnb {
            width:100%; background-color:#353535;
        }

        header .gnb ul {
            overflow:hidden; width:1000px; height:30px; line-height:30px; margin:0 auto;
        }            /* line-height 같이 지정해야 수직 가운데로 정렬 된다! */

        header li{
            float:left; list-style:none; margin-left:50px; font-size:.9em;
        }

 

float 속성이 너무 어렵다고 생각 되었는데 오늘 어디서 주워듣기론 새로운 기술인 flex 속성을 사용하면 더 편하게 사용할 수 있다고 한다. 순간 급 의욕이 떨어졌다....

 

그래도 다음 사이트를 소스 검사 해보니 float 속성이 많이 사용되긴 하였다. 알아두긴 해야할 속성인가... 생각하고 마저 소스 코드를 짜보기로 하였다.

 

 

 

 

float 속성과 overflow 속성 관계 다시 알아보기!

-> float 속성은 떠있는 것이다. 이때 부모 요소 크기에 상관없이 떠있게 되는 것인데, 그럼 float 된 자식은 넘쳐 있게 될 수도 있다. 그때 overflow: hidden 을 써주게 되면 자식 요소의 크기만큼 부모 요소의 크기도 같이 늘어나게 된다! overflow: scroll 도 마찬가지다. 자식 요소의 크기만큼 나타나게 되며, 부모 요소의 크기가 작을 경우 스크롤을 할 수 있다.

 

 

 

유튜브에 있는 설명 영상을 보고 이제 좀 이해가 되어 코드를 짜는데 아까보단 좀 나아졌다는 생각이 들었다. 완성이 덜 되었긴 한데 다른 과제를 수행해야 될 것이 있어 이쯤에서 마무리 하기로 하였다.

 

 

 

#content .section2 {
                    margin-top: 10px;
                    width: 1000px;
                }
                #content .hit_product ul {
                    overflow: hidden;
                    border: 1px solid #cccccc;
                    box-sizing: border-box;
                }
                #content .hit_product ul li {
                    float: left;
                    width: 200px; height: 300px;
                    border: 1px solid #cccccc;
                    list-style:none;
                }

 

 

 

• 중요한거: a 태그에 display: block 타입을 선언하고 padding 값을 넣으면 사용자가 쉽게 클릭할 수 있어서 좋다
• border-box 가 있는 이유... 보더 값을 주면 길이를 딱 맞추기 힘들기 때문