CSS3 08

2017. 2. 25. 18:56Work/CSS

728x90

웹 페이지 레이아웃

- 본문 구성

 #main_section > article.main_article{

            margin-bottom: 10px; padding: 20px;

            border: 1px solid black;

        }

<section id="main_section">

            <article class="main_article">

                <h1>Main Section</h1>

</article>

</section>

- 사이드 탭바 구성

/*        첫번째 탭*/

        input:nth-of-type(1) {display: none;}    // input 태그는 보이지 않게 만든다.

        input:nth-of-type(1) ~ div:nth-of-type(1){display: none;}     // input 태그가 체크되어 있을 경우에는 뒤에 위치하는 div 태그를 보이게 만듭니다.

        input:nth-of-type(1):checked ~ div:nth-of-type(1){display: block;}    // input 태그가 체크되어 있지 않을 경우에는 뒤에 위치하는 div 태그를 보이지 않게 만듭니다.

/*        두번째 탭*/

        input:nth-of-type(2) {display: none;}

        input:nth-of-type(2) ~ div:nth-of-type(2){display: none;}

        input:nth-of-type(2):checked ~ div:nth-of-type(2){display: block;}

/*        탭 모양 구성*/

        section.buttons{ overflow: hidden;}

        section.buttons > label {

/*            수평정렬*/

            display: block; float: left;

/*            크기 및 글자 위치 지정*/

            width: 100px; height: 30px;

            line-height: 30px;

            text-align: center;

/*            테두리 지정*/

            box-sizing: border-box;

            border: 1px solid black;

/*            색상 지정*/

            background: cyan;

            color:#000aff;

        }

/*        선택시 색 변경*/

        input:nth-of-type(1):checked ~ section.buttons > label:nth-of-type(1){

            background: white;

            color:black;

        }

        input:nth-of-type(2):checked ~ section.buttons > label:nth-of-type(2){

            background: white;

            color:black;

        }

<input id="first" type="radio" name="tab" checked="checked"/>

            <input id="second" type="radio" name="tab"/>

            <section class="buttons">

                <label for="first">First</label>

                <label for="second">Second</label>

            </section>

            <div class="tab_item">

                <ul>

                    <li><a href="#">HTML5 Canvas</a></li>

                    <li><a href="#">HTML5 Audio</a></li>

                    <li><a href="#">HTML5 Video</a></li>

                    <li><a href="#">HTML5 Semantic Web</a></li>

                </ul>

            </div>

            <div class="tab_item">

                <ul>

                    <li><a href="#">CSS3 Transition</a></li>

                    <li><a href="#">CSS3 Animation</a></li>

                    <li><a href="#">CSS3 Border</a></li>

                    <li><a href="#">CSS3 Box</a></li>

                </ul>

            </div>

- 목록 구성

 .item{

            overflow: hidden;

            padding: 10px;

            border: 1px solid black;

            border-top: none;

        }

        .thumbnail {

            float: left;

        }

        .description{

            float: left;

            margin-left: 10px;

        }

        .description > strong{

            display: block;

            width: 120px;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }

<div class="tab_item">

                <ul>

                    <li class="item"><a href="#">

                        <div class="thumbnail">

                            <img src="http://placehold.it/45x45"/>

                        </div>

                        <div class="description">

                            <strong>HTML5 Canvas</strong>

                            <p>2017-02-25</p>

                        </div>

                    </a></li>

                    <li class="item"><a href="#">

                        <div class="thumbnail">

                            <img src="http://placehold.it/45x45"/>

                        </div>

                        <div class="description">

                            <strong>HTML5 Audio</strong>

                            <p>2017-02-25</p>

                        </div>

                    </a></li>

                    <li class="item"><a href="#">

                        <div class="thumbnail">

                            <img src="http://placehold.it/45x45"/>

                        </div>

                        <div class="description">

                            <strong>HTML5 Video</strong>

                            <p>2017-02-25</p>

                        </div>

                    </a></li>

                    <li class="item"><a href="#">

                        <div class="thumbnail">

                            <img src="http://placehold.it/45x45"/>

                        </div>

                        <div class="description">

                            <strong>HTML5 Semantic Over String</strong>

                            <p>2017-02-25</p>

                        </div>

                    </a></li>

                </ul>

            </div>

- 푸터 구성

 #main_footer{

/*        중앙 정렬*/

            width: 960px; margin: 0 auto;

            margin-bottom: 10px;

/*            테두리*/

            box-sizing: border-box;

            padding: 10px;

            border: 1px solid black;

/*            글자 정렬*/

            text-align: center;

        }

<footer id="main_footer">

        <h3>HTML5 + CSS3 Basic</h3>

        <address>Website Layout Basic</address>

    </footer>


- 정리

1. 레이아웃을 행 단위로 생각

2. 초기화 코드 작성

3. width 속성과 margin 속성을 사용한 중앙 정렬

4. overflow 속성과 float 속성을 사용해서 레이아웃 나누는 방법

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