layout1

개요

<style type="text/css">
    #header {
        display: flex;
	justify-content: space-between;
    }
    #header ul{
        display: flex;
        list-style: none;
    }
    #header li{
        border-right : solid 1px gray; /* 오른쪽 경계선 : 실선 1px두깨 회색 */
        padding: 0px 10px; /* 내부여백 : 상하0px 좌우10px*/
        height: 20px;
    }
    #header li:last-child{
        border: none;
    }
</style>
<div id="header">
	<h1 id="logo"><a href="#"><img src="/kaywon/sub/img/layout_jpg/layout1_head_logo.jpg" /></a></h1>
	<ul>
		<li><a href="#">ABOUT</a></li>
		<li><a href="#">SERVICES</a></li>
		<li><a href="#">WORKS</a></li>
		<li><a href="#">BLOG</a></li>
		<li><a href="#">CONTACT US</a></li>
	</ul>
	<img id="zoom" src="/kaywon/sub/img/layout_jpg/layout1_head_zoom.jpg" />
</div>

content

	#content #container1{
		background-color: #98f;
	}
	#content #container2{
		background-color: #5d9;
	}
	#content #container3{
		background-color: #f76;
	}
	#content #container4{
		background-color: #ec5;

layout1

개요

header

content

footer