레이아웃 기초 1

HTML Mark up은 아래 코드를 참고 한다.

 

---

HTML5 시멘틱 태그로 구조를 정리하고,

문서 전체에 가로축 반복 배경이미지는 body에 넣을 예정이라, 태그를 별도로 넣지 않았다.

---

    <div id="wrap">
        <header>
            <h1 id="logo"><img src="img/logo.jpg" alt="logo"></h1>
            <div id="topmenu"><img src="img/menubar.jpg" alt="menu"></div>
        </header>
        <figure>
            <img src="img/img01.jpg" alt="company info">
        </figure>
        <nav>
            <ul id="sidebar">
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
                <li>menu</li>
            </ul>
        </nav>
        <section id="contents">
            <h2 id="title"><img src="img/title.jpg" alt="회사소개"></h2>
            <div id="img02"><img src="img/img02.jpg" alt="회사소개소개이미지"></div>
            <article id="txt">
                <h4>첨단기술과 새로운 솔루션으로 고객의 기대를 앞서가는 기업</h4>
                <p>
                    끊임없는 혁식을 통해 경쟁기업보다 첨단기술과 소재를 개발 제공합니다. 제품개발과 판매 뿐만 아니라 개별 고객이 필요로 하는 것을 찾아 문제를 해결해 주는 적극적인 가치를 창출하고 제공합니다.
                </p><br>
                <h4>경영에서 신뢰 받는 기업</h4>
                <p>
                    열린경영을 통해 고객, 주주, 구성원의 소리를 경청하고 정직과 신의로 대응하여 Win Win 하는 동반자 관계를 구축한다. 구성원 개개인을 존중하여 성장기회를 부여하는 신바람 나는 직장을 만들어 나갑니다.
                </p>
            </article>
        </section>
        <footer>
            For Question and Comments, Send E-mail to Webmaster <br>
            Copyright(c) Company. All rights reserved.
        </footer>
    </div>

 

---

 

CSS 스타일은 아래 코드를 참고 한다.

body 안에 배경을 넣을 때는 repeat-x 로 가로축으로만 반복이 되도록 만든다.

header안의 로고와 topmenu는 각각 좌, 우에 배치하기 위해 첫번째 배운 float을 활용하였다.

!!주의 : float은 전체 구조를 잡는 header, figure, aside, section, footer 에 모두 적용하여

각 블록속성의 요소들이 다른 요소와 겹치지 않도록 해야 한다.

예를 들어 모두 float을 사용하고, footer에 넣지 않으면, footer는 위로 올라가게 된다.

 

*{margin: 0;padding: 0;}
        body{
            background: url(img/background.jpg) repeat-x;
            font-size: 12px;
            color: #999;
            line-height: 1.5em;
        }
        #wrap{
            width: 800px;
            float: left;
        }
        header{
            width: 800px;height: 92px;float: left;
        }
        #logo{
            width: 200px;height: 92px;float: left;
        }
        #topmenu{
            width: 290px;height: 34px;float: right;
            margin-top: 58px;
        }
        figure{
            width: 800px;
            height: 189px;
            text-align: right;
            float: left;
        }
        nav, #sidebar{
            width: 160px;
            float: left;
        }
        #sidebar li{
            width: 160px;
            background: #777;
            color: #fff;
            padding: 10px;
            margin-bottom: 5px;
            text-align: center;
        }
        #contents{
            width: 600px;float: right;
        }
        #img02{float: left;margin-right: 20px;}
        footer{
            width: 800px;float: left;
            padding: 15px;
            background: #777;
            color: #fff;
            text-align: center;
            font-weight: bold;
            margin-top: 40px;
        }

 

 

---