CSS3 10

2017. 2. 27. 17:46Work/CSS

728x90

모바일 웹 페이지

- wrap 태그

<div id="wrap"></div>

-> body 태그에 스타일을 적용하는 것이 위험할 지도 모른다는 개발자 혹은, 서버와 관련된 내용 중 레이아웃 페이지 또는 마스터 페이지를 사용할 때 코드 정리하고자 사용, 스마트폰 웹 브라우저는 ~ 선택자를 사용할 수 없기 때문에 #wrap 태그 만들고 선택자 사용

- 스프라이트 이미지

http://csssprites.com/ CSS의 Sprites 제작 사이트

#main_header > a.left{

            background: url('sprites.png');

            background-position: 0px 0px;

            text-indent: -99999px;

            width: 62px;

            left: 5px; top: 7px;

        }

-> 이미지를 1개의 파일에 뭉쳐놓으면서 웹 페이지 요청 시간을 줄이고 쉽게 관리할 수 있습니다.

- 토글 목록 구성

#toggle_gnb > ul {overflow: hidden;}

        #toggle_gnb > ul > li {

            width: 60px; float: left;

        }

<div id="toggle_gnb_wrap">

           <div id="toggle_gnb">

              <ul>

                   <li><a href="#">버튼</a></li>

                   <li><a href="#">버튼</a></li>

                   <li><a href="#">버튼</a></li>

                   <li><a href="#">버튼</a></li>

                   <li><a href="#">버튼</a></li>

                   <li><a href="#">버튼</a></li>

                   <li><a href="#">버튼</a></li>

                   <li><a href="#">버튼</a></li>

               </ul>

           </div>

       </div>

- 네비게이션(1)

1. overflow 속성과 float 속성 사용

#top_gnb{

            overflow: hidden;

            border-bottom: 1px solid black;

            background: #B42111;

        }

        #top_gnb > div > a{

/*            수평 정렬*/

            float: left;

            width: 25%;

/*            크기 및 색상, 정렬*/

            height: 35px;

            line-height: 35px;

            text-align: center;

            color: white;

        }

2. display 속성에 table 키워드 적용

 #bottom_gnb{

/*            table 태그와 같은 레이아웃을 갖습니다.*/

            display: table;

            width: 100%;

            border-bottom: 1px solid black;

        }

        #bottom_gnb > div{

/*            td 태그와 같은 레이아웃을 갖습니다.*/

            display: table-cell;

            position: relative;

        }

        #bottom_gnb > div > a{

            display: block;

            height: 35px;

            line-height: 35px;

            text-align: center;

        }

        #bottom_gnb > div > a::before{

            display: block;

            position: absolute;

            top: 9px; left: -1px;

            width: 1px; height: 15px;

            border-left: 1px solid black;

            content: '';

        }

-- ::before 선택자를 사용한 수직선 생성

3. table 태그 사용

/*            table 태그와 같은 레이아웃을 갖습니다.*/

            display: table;

/*            td 태그와 같은 레이아웃을 갖습니다.*/

            display: table-cell;

- 목록 개수와 너비 비율의 관계

-- 2개 : 50%

-- 3개 : 33.33%

-- 4개 : 25%;

-- 5개 : 20%

-- 6개 : 16.66%

-> 100 / 계수 = %

- 본문 구성

#section_header {padding: 20px;}

      #section_article{padding: 10px;}

- 푸터 구성

 #main_footer{

            padding: 10px;

            border-top: 3px solid black;

            text-align: center;

            }

728x90

'Work > CSS' 카테고리의 다른 글

CSS3 10  (0) 2017.02.27
CSS3 09  (0) 2017.02.27
CSS3 08  (0) 2017.02.25
CSS3 07  (0) 2017.02.24
CSS3 06  (0) 2017.02.23
CSS3 05  (0) 2017.02.23