5월 12일

7-1

CSS3 박스 모델은 content, padding, border, margin으로 구성되어 있다.

박스 모델의 padding, border, margin 속성의 기본 값은 0이며, 상하좌우 네 가지 방향을 top, bottom, left, right를 이용하여 지정할 수 있습니다.

7-2


<!DOCTYPE html>
<html>
<head>
	<style>
	    p {
		    background-color: yellow; 
            color: red;
		    font-weight: bold; 
            font-size: 16pt;
	    }
	    p.c1 {
		    width: 700px; 
            height: 80px; 
            color: green;
	    }
	    p.c2 {
		    width: 50%; 
            height: 150%; 
            color: purple;
	    }
	    p.c3 {
		    width: 10cm; 
            height: 3cm; 
            color: blue;
	    }
	</style>
</head>
<body>
	<p>박스 모델의 내용 영역 크기 지정</p>
	<p class="c1">(1) 박스 모델의 크기를 픽셀(px) 단위로 지정</p>
	<p class="c2">(2) 박스 모델의 크기를 퍼센트(%) 단위로 지정</p>
	<p class="c3">(3) 박스 모델의 크기를 센티미터(cm) 단위로 지정</p>
</body>
</html>

7-3


<!DOCTYPE html>
<html>
<head>
	<style>
	    p {
		    background-color: yellow; 
            color: red;
		    font-weight: bold; 
            font-size: 16pt;
	    }
        p.pad {
		    color: purple; 
            padding: 20px;
        }
	    p.mar {
		    color: green; 
            margin: 30px;
	    }
	    p.mp {
		    color: blue; 
            padding: 5%; 
            margin: 5%;
        }
    </style>
</head>
<body>
	<p>박스의 안쪽 여백과 바깥쪽 여백 지정</p>
	<p class="pad">(1) 안쪽 여백 지정 - padding 20px</p>
    <p class="mar">(2) 바깥쪽 여백 지정 - margin 30px</p>
	<p class="mp">(3) 안쪽, 바깥쪽 여백 지정 - padding 5%, margin 5%</p>
</body>
</html>

7-4


<!DOCTYPE html>
<html>
<head>
    <style>
        body { 
            font-weight: bold; 
            font-size: 16pt;
        }
        .mp1 {
            background-color: aqua; 
            color: red;
            margin-bottom: 40px; 
            padding-left: 50px;
        }
        .mp2 {
            background-color: silver; 
            color: green;
            margin: 20px;   
            padding: 10px, 20px;   
        }
        .mp3 {
            background-color: gray; 
            color: purple;
            margin: 50px, 15px, 20px;    
            padding: 20px;   
        }
    </style>
</head>
<body style="background-color: lightyellow;">
	<p>박스 모델의 네 방향 여백 지정</p>
	<p class="mp1">mp1</p>
	<p class="mp2">mp2</p>
	<p class="mp3">mp3</p>
</body>
</html>

7-5


<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: consolas; }
        h3.none { border-style: none; }
        h3.hidden { border-style: hidden; }
        h3.dotted { border-style: dotted; }
        h3.dashed { border-style: dashed; }
        h3.solid { border-style: solid; }
        h3.double { border-style: double; }
        h3.groove { border-style: groove; }
        h3.ridge { border-style: ridge; }
        h3.inset { border-style: inset; }
        h3.outset { border-style: outset; }
	    h3.mix { border-style: dotted dashed solid double; }
    </style>
</head>
<body>
    <h3 class="none">no border</h3>
    <h3 class="hidden">hidden border</h3>
    <h3 class="dotted">dotted border</h3>
    <h3 class="dashed">dashed border</h3>
    <h3 class="solid">solid border</h3>
    <h3 class="double">double border</h3>
    <h3 class="groove">groove border</h3>
    <h3 class="ridge">ridge border</h3>
    <h3 class="inset">inset border</h3>
    <h3 class="outset">outset border</h3>
	<h3 class="mix">mix border</h3>
</body>
</html>

7-6


<!DOCTYPE html>
<html>
<head>
    <style>
	    body {
	        font-weight: bold; 
            font-size: 12pt; 
            font-family: consolas;
	    }
	    .bt1 {
	        background-color: aqua; 
            color: red;
	        margin-bottom: 15px; 
            padding-left: 50px;
	        border-style: dotted; 
            border-width: thick;
	        border-color: green;
	    }
	    .bt2 {
	        background-color: silver; 
            color: green;
	        margin: 20px; 
            padding: 5px 10px;
	        border-style: solid; 
            border-width: 1px 3px 5px 3px;
	        border-color: navy red fuchsia black;
	    }
	    .bt3 {
	        background-color: gray; 
            color: purple;
	        margin: 50px 15px 20px;
	        padding: 20px;
	        border-style: dashed double; 
            border-width: 5px 0px;
	        border-color: red;
	    }
	    .bt4 {
	        border-top: 5px solid red;
	        border-bottom: 5px solid red;
	    }
	</style>
</head>
<body>
    <p class="bt1">박스 테두리 지정 - 1</p>
	<p class="bt2">박스 테두리 지정 - 2</p>
	<p class="bt3">박스 테두리 지정 - 3</p>
	<p class="bt4">박스의 상하좌우 테두리는 border-top, border-right, border-bottom, border-left라는 속성을 이용해 지정할 수 있습니다.</p>
</body>
</html>

7-7


<!DOCTYPE html>
<html>
<head>
    <style>
	    body {
	        font-weight: bold; 
            font-size: 12pt;
	    }
	    .br1 {
	        background-color: lime; 
            color: red;
	        border-style: solid; 
            border-width: thick; 
            border-color: green;
	        border-radius: 30%;
	    }
	    .br2 {
	        background-color: maroon; 
            color: yellow;
	        border-style: dotted; 
            border-width: 2px; 
            border-color: white;
	        border-radius: 15px 35px;
	    }
	    .br3 {
	        background-color: teal; 
            color: aqua;
	        border-style: dashed; 
            border-width: 5px; 
            border-color: red;
	        border-radius: 5px 15px 25px 35px;
	    }
	    .br4 {
	        border: 3px solid red;
	        border-top-left-radius: 30px;
	    }
    </style>
</head>
<body>
    <h1 class="br1">둥근 모서리 스타일링 예제 1</h1>
    <h1 class="br2">둥근 모서리 스타일링 예제 2</h1>
    <h1 class="br3">둥근 모서리 스타일링 예제 3</h1>
    <h1 class="br4">둥근 모서리 스타일링 예제 4</h1>
</body>
</html>

7-8 1


<!DOCTYPE html>
<html>
<head>
    <style>
	    body {
	        font-weight: bold; 
            font-size: 12pt;
	    }
	    .boxshadow1 {
	        background-color: yellow;
	        border: 5px solid blue;
	        box-shadow: 10px 10px 0px teal;
	    }
	    .boxshadow2 {
	        background-color: orange;
	        border: 5px solid red;
	        box-shadow: 20px 20px 50px red;
	    }
	    .boxshadow3 {
	        background-color: silver;
	        border: 5px solid black;
	        box-shadow: 20px 20px 30px -20px maroon;
	    }
	    .boxshadow4 {
	        background-color: lime;
	        border: 5px solid olive;
	        box-shadow: 10px 10px 0px 10px fuchsia inset;
	    }
    </style>
</head>
<body>
    <h1 class="boxshadow1">박스 그림자 스타일링 예제 1</h1>
    <h1 class="boxshadow2">박스 그림자 스타일링 예제 2</h1>
    <h1 class="boxshadow3">박스 그림자 스타일링 예제 3</h1>
    <h1 class="boxshadow4">박스 그림자 스타일링 예제 4</h1>
</body>
</html>

7-8 2


<!DOCTYPE html>
<html>
<head>
    <style>
	    div { 
            width: 200px; 
            height: 50px; 
            padding: 10px; 
            margin: 30px; 
	    }
        #bs1 {
            border: 1px solid rgba(102,186,255,0.4);
            box-shadow: 0px 0px 20px 10px rgba(102,186,255,0.4);
        }
	    #bs2 { 
            border: 1px solid black;
	        box-shadow: 10px 10px #BCE55C, 20px 20px #CEF279, 30px 30px #E4F7BA;
        }
    </style>
</head>
<body>
	<div id="bs1">
		<h3>박스 그림자 특수 효과1</h3>
	</div>
	<div id="bs2">
		<h3>박스 그림자 특수 효과2</h3>
	</div>
</body>
</html>

7-8 3


<!DOCTYPE html>
<html>
<head>
    <style>
	    img { 
            padding: 20px; 
            margin: 20px; 
        }
        .shadow1 {    /* Bottom right coner */
            box-shadow: 5px 5px 10px #000;
        }
        .shadow2 {    /* Up right coner */
            box-shadow: 5px -5px 10px #000;
        }
    </style>
</head>
<body>
	<img src="pic1.jpg" class="shadow1">
	<img src="pic2.jpg" class="shadow2">
</body>
</html>

7-9


<!DOCTYPE html>
<html>
<head>
    <style>
	    body {
	        font-weight: bold; 
            font-size: 12pt;
	    }
	    .sp1 {
	        position: static;
	        top: 100px;    /* 적용되지 않음 */
	        background-color: cyan;
	        width: 400px; 
            height: 50px;
	    }
	    .sp2 {
	        position: static;
	        left: 30px;    /* 적용되지 않음 */
	        background-color: orange;
	        width: 400px; 
            height: 50px;
	    }
	    .sp3 {
	        background-color: lightgreen;
	        width: 400px; 
            height: 50px;
	    }
    </style>
</head>
<body>
    <h1>positioning style1</h1> 
    <p class="sp1">정적 위치 설정 적용1</p>
    <div class="sp2">정적 위치 설정 적용2</div>
    <p class="sp3">기본 위치 설정</p>
</body>
</html>

7-10


<!DOCTYPE html>
<html>
<head>
    <style>
	    body {
	        font-weight: bold; 
            font-size: 12pt;
	    }
	    .sp {
	        position: static;
	        left: 30px;    /* 적용되지 않음 */
	        background-color: cyan;
	        width: 400px; 
            height: 50px;
	    }
	    .rp1 {
	        position: relative;
	        left: 30px;
	        top: -10px;
	        background-color: orange;
	        width: 400px; 
            height: 50px;
	    }
	    .rp2 {
	        position: relative;
	        left: 60px;
	        top: 20px;
	        background-color: lightgreen;
	        width: 400px; 
            height: 50px;
	    }
    </style>
</head>
<body>
    <h1>positioning style2</h1> 
    <p class="sp">정적 위치 설정 적용</p>
    <div class="rp1">상대 위치 설정 적용 - left 30px, top -10px</div>
    <p class="rp2">상대 위치 설정 적용 - left 60px, top 20px</p>
</body>
</html>

7-11


<!DOCTYPE html>
<html>
<head>
    <style>
	    body {
	        font-weight: bold; 
            font-size: 12pt;
	    }
	    .ap1 {
	        position : absolute;
	        left: 30px;
	        top: 70px;
	        background-color: yellow;
	        width: 400px; 
            height: 50px;
	    }
	    .ap2 {
	        position: absolute;
	        left: 40px;
	        top: 90px;
	        background-color: lightgreen;
	        width: 400px; 
            height: 50px;
	    }
	    .rp {
	        position: relative;
	        left: 50px;
	        top: 80px;
	        background-color: cyan;
	        width: 400px; 
            height: 50px;
	    }
    </style>
</head>
<body>
    <h1>positioning style3</h1> 
    <div class="ap1">절대 위치 설정 적용 - left 30px, top 70px</div>
    <div class="ap2">절대 위치 설정 적용 - left 40px, top 90px</div>
    <div class="rp">상대 위치 설정 적용 - left 50px, top 80px</div>
</body>
</html>

7-12


<!DOCTYPE html>
<html>
<head>
    <style>
	    body {
	        font-weight: bold; 
            font-size: 12pt;
	    }
	    .p {
	        background-color: yellow;
	        width: 300px; 
            height: 50px;
	    }
	    .fp {
	        position: fixed;
	        right: 5px;
	        top: 5px;
	        background-color: lightgreen;
	        width: 300px; 
            height: 50px;
	    }
    </style>
</head>
<body>
    <h1>positioning style4</h1> 
    <p class="p">기본 위치 설정 박스1</p>
    <p class="p">기본 위치 설정 박스2</p>
    <p class="p">기본 위치 설정 박스3</p>
    <p class="p">기본 위치 설정 박스4</p>
    <p class="p">기본 위치 설정 박스5</p>
    <p class="fp">고정 위치 설정 박스 : 오른쪽 스크롤 위아래로 이동해보기</p>
</body>
</html>

7-13


<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            float: right;
            margin: 0 0 10px 10px;
        }
    </style>
</head>
<body>
    <p>float 속성은 웹 문서의 레이아웃을 설계하는 과정에서 많이 사용하는 속성입니다.</p>
    <p><img src="pic1.jpg" alt="image" width="140" height="140">
    float 속성은 특정 요소를 떠 있게 해줍니다. 여기서 '떠 있다'라는 말의 의미는 특정 요소가 기본 레이아웃에서 벗어나 웹 문서의 왼쪽이나 오른쪽에 이동하는 것을 말합니다. float 속성은 복잡한 형태의 레이아웃을 구성하는 데 필요한 핵심 속성으로, 특정 요소가 주변 요소와 자연스럽게 어울리도록 해줍니다. 주의할 점은 float 속성을 사용할 때 요소의 위치가 고정되면 안 되기 때문에 position 속성의 absolute를 사용하면 안 됩니다.</p>
</body>
</html>

7-14


<!DOCTYPE html>
<html>
<head>
    <style>
        .div1 {
            float: left;
            width: 100px;
            height: 50px;
            margin: 10px;
            border: 3px solid #73AD21;
        }
        .div2 {
            border: 1px solid red;
        }
        .div3 {
            float: left;
            width: 100px;
            height: 50px;
            margin: 10px;
            border: 3px solid #73AD21;
        }
        .div4 {
            border: 1px solid red;
            clear: left;
        }
    </style>
</head>
<body>
    <h2>float 속성 사용</h2>
    <div class="div1">div1</div>
    <div class="div2">div2 - float 속성을 사용하여 대상 요소를 웹 문서에 배치하면 그 다음 요소에도 똑같은 속성이 적용됩니다. 하지만 float 속성이 사용되는 것을 원하지 않을 때도 있습니다. 이때 clear 속성을 사용합니다. 다양한 레이아웃 설계할 때에는 float 속성과 clear 속성을 적절히 잘 사용해야 합니다.</div>
    <h2>clear 속성 사용</h2>
    <div class="div3">div3</div>
    <div class="div4">div4 - clear 속성은 float 속성이 적용되는 것을 원하지 않는 요소에 사용하여 float 속성을 초기화시킵니다. float: left;를 사용했다면 clear: left;로, float: right;를 사용했다면 clear: right;로 초기화합니다. float 속성 값이 left 인지 right 인지 상관없이 무조건 초기화하고 싶다면 clear: both;를 사용합니다. 보통 clear: both;를 많이 사용합니다.</div>
</body>
</html>

7-15


<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 3px solid #73AD21;
        }
        .img1 {
            float: right;
        }
        .fix {
            overflow: auto;
        }
        .img2 {
            float: right;
        }
    </style>
</head>
<body>
    <p>이미지가 박스 영역을 벗어남</p>
    <div><img class="img1" src="pic2.jpg" alt="image" width="140" height="140">
    이미지가 오른쪽 정렬로 되어 있는데, 박스 영역을 벗어났습니다.</div>
    <p style="clear:right">overflow: auto; 속성을 사용하여 해결</p>
    <div class="fix"><img class="img2" src="pic2.jpg" alt="img" width="140" height="140">
    이미지가 박스 영역을 벗어날 경우에는 overflow 속성을 auto로 설정하여 해결합니다.</div>
</body>
</html>

7-16


<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 3px solid blue;
	    }
        .fix {
            overflow: auto;
	    }
        nav {
            float: left;
            width: 200px;
            border: 3px solid #73AD21;
	    }
        section {
            margin-left: 206px;
            border: 3px solid red;
	    }
    </style>
</head>
<body>
    <div class="fix">
        <nav>
            <span>목차</span>
            <ul>
                <li><a target="_blank" href="http://www.google.com">Google</a></li>
                <li><a target="_blank" href="http://www.apple.com">Apple</a></li>
                <li><a target="_blank" href="http://www.w3.org">W3C</a></li>
                <li><a target="_blank" href="http://www.oracle.com">Oracle</a></li>
	            <li><a target="_blank" href="http://www.adobe.com">Adobe</a></li>
	            <li><a target="_blank" href="http://www.amazon.com">Amazon</a></li>
	            <li><a target="_blank" href="http://www.Mysql.com">Mysql</a></li>
            </ul>
        </nav>
        <section>
            <span>section 1</span>
            <p>float 속성은 시맨틱 문서 구조에 유용하게 사용할 수 있습니다. 예를 들면 nav나 aside에 float 속성을 추가하면 떠다니는 내비게이션 또는 사이드 바를 만들 수 있습니다.</p>
        </section>
        <section>
            <span>section 2</span>
            <p>시맨틱 문서 구조에 float 속성을 적용할 때는 footer 부분에 적용되지 않도록 해야 합니다.</p>
        </section>
    </div>
</body>
</html>

7-17


<!DOCTYPE html>
<html>
<head>
    <style>
        #box1 {
            position: absolute;
            top: 0px; 
            left: 0px;
            width: 100px; 
            height: 100px;
            background: blue;
            z-index: 3;
        }
        #box2 {
            position: absolute;
            top: 30px; 
            left: 30px;
            width: 100px; 
            height: 100px;
            background: yellow;
            z-index: 2;
        }
        #box3 {
            position: absolute;
            top: 60px; 
            left: 60px;
            width: 100px; 
            height: 100px;
            background: green;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div id="box1">box #1</div>
    <div id="box2">box #2</div>
    <div id="box3">box #3</div>
</body>
</html>

7-18


<!DOCTYPE html>
<html>
<head>
    <style>
        td, th {
            border: 1px solid black;
        }
        #tb1 {
            border: 2px solid red;
            table-layout: auto;
        }
        #tb2 {
            border: 3px dotted teal;
            background-color: yellow;
            table-layout: fixed;
        }
    </style>
</head>
<body>
    <h2>table layout auto 예제</h2> 
    <table id="tb1">
        <tr>
            <th>table layout auto</th>
            <td>내용 분량에 따라서 자동으로 조절</td>
        </tr>
    </table>
    <h2>table layout fixed 예제</h2>
    <table id="tb2" width="250px">
        <tr>
            <th>table layout fixed</th>
            <td>내용 분량과 상관 없이 고정</td>
        </tr>
    </table>
</body>
</html>

7-19


<!DOCTYPE html>
<html>
<head>
    <style>
        td, th {
            border: 2px solid black;
        }
        #tb1 {
            border: 3px solid red;
            background-color: yellow;
            border-collapse: separate;  
            table-layout: auto;
        }
        #tb2 {
            border: 3px solid red;
            background-color: yellow;
            border-collapse: collapse;  
            table-layout: auto;
        }
    </style>
</head>
<body>
    <table style id="tb1" width="350px">
        <tr>
            <th>table border-collapse</th> 
            <td>separate 적용</td>
        </tr>
    </table>
    <p></p>
    <table style id="tb2" width="350px">
        <tr>
            <th>table border-collapse</th> 
            <td>collapse 적용</td>
        </tr>
    </table>    
</body>
</html>

7-20


<!DOCTYPE html>
<html>
<head>
    <style>
        td, th {
            border: 1px solid red;
        }
        #tb1 {
            border: 2px solid green;
            border-spacing: 10px;    /* 상하좌우 */
        }
        #tb2 {
            border: 3px solid maroon;
            background-color: aqua;
            border-spacing: 20px 40px;    /* 첫번째 값: 좌우, 두번째 값: 상하 */
        }
    </style>
</head>
<body>
    <table style id="tb1" width="350px">
        <tr>
            <th>table border-spacing</th> 
            <td>10px</td>
        </tr>
    </table>
    <p></p>
    <table style id="tb2" width="350px">
        <tr>
            <th>table border-spacing</th> 
            <td>20px 40px</td>
        </tr>
    </table>
</body>
</html>

7-21


<!DOCTYPE html>
<html>
<head>
    <style>
        td, th {
            border: 1px solid blue;
        }
        #tb1 {
            border-collapse: separate;
            empty-cells: hide;
        }
        #tb2 {
            border-collapse: separate;
            empty-cells: show;
        }
    </style>
</head>
<body>
    <table id="tb1" border="1" width="300px">
        <tr>
            <td>국어</td>
            <td>영어</td>
	        <td></td>
        </tr>
        <tr>
            <td>수학</td>
            <td></td>
        </tr>
    </table>
    <p></p>
    <table id="tb2" border="1" width="300px">
        <tr>
            <td>국어</td>
            <td>영어</td>
	        <td></td>
        </tr>
        <tr>
            <td>수학</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

7-22


<!DOCTYPE html>
<html>
<head>
    <style>
        td, th {
            border: 2px solid black;
        }
        #c1 {
            border: 3px solid blue;
            caption-side: top;
	        border-collapse: collapse;  
        }
        #c2 {
            border: 3px solid red;
            caption-side: bottom;
	        border-collapse: collapse;  
        }
    </style>
</head>
<body>
    <table id="c1" border="1" width="300px">
        <caption>[table 1-1] Korea University</caption>
        <tr>
            <th>University</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>서울대학교</td>
            <td>홍현성</td>
            <td>KOREA</td>
        </tr>
    </table>
    <p></P>
    <table id="c2" border="1" width="300px">
        <caption>[table 1-2] USA University</caption>
        <tr>
            <th>University</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>Havard</td>
            <td>Jackie</td>
            <td>USA</td>
        </tr>
    </table>
</body>
</html>