CSS3 07

2017. 2. 24. 20:19Work/CSS

728x90
반응형

웹 페이지 레이아웃

- 일반적인 웹 페이지 구성 요소

-- Header : 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 링크) 등으로 구성

-- Navigation : 링크 중에서 중요도가 높은 링클르 체계적으로 구성해 놓은 것, 링크를 별도로 모아둔 영역

-- Aside : 배너, 용어 설명, 관련 상품등 관련성이 적거나 없는 내용으로 구성

-- Section : 관련있는 내용을 요소별로 묶어 표시, 섹션마다 나름의 제목 체계를 가질 수 있다. 

-- Footer : 바닥 영역 또는 꼬리말, 저작권, 연락정보 등 본문과 관련성 있지만 본문에 담기 어려운 내용

 Header

 Navigation

 Aside

Section 

 Footer

- 레이아웃 구분

1. 웹페이질르 구상

2. 웹페이지의 구성 영역을 분리

3. 구성 영역을 행 단위로 분리

4. 나누어진 행의 내부 요소를 분리


- 초기화 코드 구성

    <style>

        *{margin: 0; padding: 0;}

        body{font-family: 'Times New Roman',serif;}

        li{list-style: none;}

        a{text-decoration: none;}

        img{border: 0;}

    </style>

-> 초기화 사이트 : Eric Meyer's Reset CSS http://meyerweb.com/eric/tools/css/reset/

  HTML5 Doctor Reset stylesheet http://html5doctor.com/html-5-reset-stylesheet/

        YUI 3 CSS Reset http://developer.yahoo.com/yui/3/cssreset/


- 폰트 

구글 폰트(http://www.google.com/fonts)

<link href="https://fonts.googleapis.com/css?family=Mr+Dafoe" rel="stylesheet" type="text/css">

<style>

        #title{

            font-family: 'Mr Dafoe', cursive;

        }

    </style>

-> 현재에서는 SELECT THIS FONT 에서 Fast 쪽에서 사용


- 메뉴

<!--    메뉴(1)-->

    <style>

        #main_gnb > ul {overflow: hidden;}

        #main_gnb > ul > li {float: left;}

        #main_gnb > ul > li > a{

            display: block;

            padding: 2px 10px;

            border: 1px solid black;

        }

        #main_gnb > ul > li > a:hover{

            background: black;

            color: white;

        }

        #main_gnb > ul > li:first-child > a{

            border-radius: 10px 0 0 10px;

        }

        #main_gnb > ul > li:last-child > a{

            border-radius: 0 10px 10px 0;

        }

    </style>

<!--    메뉴(2)-->

    <style>

        #main_lnb > ul {overflow: hidden;}

        #main_lnb > ul > li {float: left;}

        #main_lnb > ul > li > a{

            display: block;

            padding: 10px 20px;

            border: 1px solid black;

        }

        #main_lnb > ul > li > a:hover{

            background: black;

            color: white;

        }

        #main_lnb > ul > li:first-child > a{

            border-radius: 10px 0 0 10px;

        }

        #main_lnb > ul > li:last-child > a{

            border-radius: 0 10px 10px 0;

        }

    </style>

-> a 영역을 넓혀서 선택 범위를 늘렸다.


- 콘텐츠

<!--    콘텐츠-->

    <style>

        #content{

/*            중앙 정렬*/

            width: 960px; margin: 0 auto;

/*            수평 레이아웃 구성*/

            overflow: hidden;

        }

        #content > #main_section{

            width: 750px; float: left;

        }

        #content > #main_aside{

            width: 200px; float: right;

        }

<section id="main_section">

            <h1>Main Section</h1>

</section>

<aside id="main_aside">

            <h1>Main Aside</h1>

</aside>

728x90
반응형

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

CSS3 09  (0) 2017.02.27
CSS3 08  (0) 2017.02.25
CSS3 06  (0) 2017.02.23
CSS3 05  (0) 2017.02.23
CSS3 04  (0) 2017.02.22