모던웹사이트 디자인의 정석

[r00t]

1. 네비게이션 만들기

.menu ul {

       margin: 0;

       padding: 0;

      list-style: none;

} 

.menu li a {

     display: block;

     padding: 5px;

     color: #000000;

     font-size: 14px;

     text-decoration: none;

}  

.menu li a:hover {background-color: #eeeeee}

.menu ul: after {                 # ul 다음에 float속성 영향안받도록 after가상 요소를주어 float를 해제합니다.

          content: "";

          display: block;

          clear: both;   

     }

.menu li {

         float: left;

         width: auto;

 }

2. 박스를 벗어나지 않게 박스의 크기에 맞춰 크기를 설정하고, 그림아래 여분을 없엔다

.tomimg {

     /* width: 100%; */  => 그림보다 창이 커서 박스가 커지면 그림도 커짐(확대 되기 싫으면 그림을 큰 그림으로 바꿈)

     max-width: 100%;

     height: auto;

     vertical-align: bottom;

}

3. 공지사항 list css 먹이기

.news ul {

     margin: 0;

     padding: 0;

     list-style: none;  =>  쩜 없에기

}

.news li a {

     display: block;

     padding: 5px;

     color: #000000;

     font-size: 14px;

     text-decoration: none;  => 청색 하늘색 라인 없에기

}

.new li a:hover {

      background-color: #eeeeee;   => 마우스 가져가면 회색으로 바뀜

}

4. 토글버튼 글자 날리기

<button type="button" id="menubtn">

    <i class="fa fa-bars"></i><span>MENU</span>

</button>

#menubtn {

     padding: 6px 12px;

     border: solid 1px  #aaaaaa;

     border-radius: 5px;

     background-color: #ffffff;

}

#menubtn i {

   color: #888888;

   font-size: 18px;

}

#menubtn span{

     display: inline-block;

     text-indent: -9999px;

}