๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
HTML5 & CSS3

[HTML5 & CSS3] CSS ํฌ์ง€์…”๋‹๊ณผ ์ฃผ์š” ์†์„ฑ๋“ค

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2021. 2. 13.
๋ฐ˜์‘ํ˜•

โ–ถ CSS ํฌ์ง€์…”๋‹์ด๋ž€ ?

float ์†์„ฑ๊ณผ position ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด ์•ˆ์— ๋ฐ•์Šค ํ˜•ํƒœ์˜ ๊ฐ ์ฝ˜ํ…์ธ ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๊ฒƒ

 

 

 

*box-sizing ์†์„ฑ - ๋ฐ•์Šค ๋„ˆ๋น„ ๊ธฐ์ค€ ์ •ํ•˜๊ธฐ

CSS์˜ width ์†์„ฑ์€ ์ฝ˜ํ…์ธ  ์˜์—ญ์˜ ๋„ˆ๋น„๋ฅผ ๋‚˜ํƒ€๋‚ด๊ธฐ ๋•Œ๋ฌธ์— ํ•ด๋‹น ์š”์†Œ์— ์ ์šฉํ•œ ํŒจ๋”ฉ์ด๋‚˜ ํ…Œ๋‘๋ฆฌ ํฌ๊ธฐ๋Š” ๋”ฐ๋กœ ๊ณ„์‚ฐํ•ด์„œ ๋ฐฐ์น˜ํ•ด์•ผ ํ•œ๋‹ค.

box-sizing ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ˜ํ…์ธ  ์˜์—ญ์˜ ๋„ˆ๋น„์— ํŒจ๋”ฉ๊ณผ ํ…Œ๋‘๋ฆฌ ํฌ๊ธฐ๊นŒ์ง€ ํ•ฉ์ณ์„œ width ์†์„ฑ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

๊ธฐ๋ณธํ˜•)

box-sizing: content-box | border-box

์†์„ฑ ๊ฐ’

์„ค๋ช…

content-box

width ์†์„ฑ ๊ฐ’์„ ์ฝ˜ํ…์ธ  ์˜์—ญ ๋„ˆ๋น„ ๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.

border-box

width ์†์„ฑ ๊ฐ’์„ ์ฝ˜ํ…์ธ  ์˜์—ญ์— ํ…Œ๋‘๋ฆฌ๊นŒ์ง€ ํฌํ•จํ•œ ๋ฐ•์Šค ๋ชจ๋ธ ์ „์ฒด ๋„ˆ๋น„ ๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.

 

๋ฐ•์Šค ๋ชจ๋ธ์˜ ๋„ˆ๋น„ ๊ฒฐ์ •ํ•˜๊ธฐ

<style>
	.box1 {
		box-sizing:content-box; /* ์ฝ˜ํ…์ธ  ์˜์—ญ ๊ธฐ์ค€ */
		width: 300px; /* ์ฝ˜ํ…์ธ  ์˜์—ญ ๋„ˆ๋น„ 300px */
		height: 150px; /* ๋†’์ด */
		margin: 10px; /* ๋งˆ์ง„ */
		padding: 30px; /* ํŒจ๋”ฉ */
		border:2px solid red; /* ํ…Œ๋‘๋ฆฌ */
	}
	.box2 {
		box-sizing:border-box;  /* ํ…Œ๋‘๋ฆฌ๊นŒ์ง€(๋ฐ•์Šค ์ „์ฒด) ๊ธฐ์ค€*/
		width: 300px; /* ๋ฐ•์Šค ๋ชจ๋ธ ์ „์ฒด ๋„ˆ๋น„ */
		height: 150px; /* ๋ฐ•์Šค ๋†’์ด */
		margin: 10px; /* ๋งˆ์ง„ */
		padding: 30px; /* ํŒจ๋”ฉ */
		border: 2px solid red; /* ํ…Œ๋‘๋ฆฌ */
	}
</style>

 

 

 

*float ์†์„ฑ - ์™ผ์ชฝ์ด๋‚˜ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ๋ฐฐ์น˜ํ•˜๊ธฐ

float ์†์„ฑ์€ ์›น ์š”์†Œ๋ฅผ ๋ฌธ์„œ ์œ„์— ๋–  ์žˆ๊ฒŒ ๋งŒ๋“ ๋‹ค. 

 

๊ธฐ๋ณธํ˜•)

float: left | right | none

์†์„ฑ ๊ฐ’

์„ค๋ช…

left

ํ•ด๋‹น ์š”์†Œ๋ฅผ ๋ฌธ์„œ์˜ ์™ผ์ชฝ์œผ๋กœ ๋ฐฐ์น˜ํ•œ๋‹ค.

right

ํ•ด๋‹น ์š”์†Œ๋ฅผ ๋ฌธ์„œ์˜ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ๋ฐฐ์น˜ํ•œ๋‹ค.

none

์ขŒ์šฐ ์–ด๋Š ์ชฝ์œผ๋กœ๋„ ๋ฐฐ์น˜ํ•˜์ง€ ์•Š๋Š”๋‹ค.

 

์ด๋ฏธ์ง€ ์˜ค๋ฅธ์ชฝ์— ํ…์ŠคํŠธ ๋ฐฐ์น˜ํ•˜๊ธฐ

<style>
    .left-img {
		float:left;
		margin-right:25px;
    }
    p {
   		line-height:30px;
    }
</style>

 

 

์—ฌ๋Ÿฌ ์š”์†Œ๋ฅผ ๊ฐ€๋กœ๋กœ ๋ฐฐ์น˜ํ•˜๊ธฐ

<style>
	.box1{
		padding:20px;
		margin-right:10px;
		background:#ffd800;
		float:left;
	}
	.box2 {
		background: #0094ff;
		padding:20px;
		margin-right:10px;
		float:left;
	}
	.box3 {
		background: #00ff21;
		padding:20px;
		float:left;
	}
	.box4 {
		background:#ffffff;
		padding:20px;
		float:right;
		border:1px solid black;
	}
</style>

 

 

 

*clear ์†์„ฑ - float ์†์„ฑ ํ•ด์ œํ•˜๊ธฐ

float ์†์„ฑ์„ ์ด์šฉํ•ด ์›น ํŽ˜์ด์ง€ ์š”์†Œ๋ฅผ ์™ผ์ชฝ์ด๋‚˜ ์˜ค๋ฅธ์ชฝ์— ๋ฐฐ์น˜ํ•˜๋ฉด ๊ทธ ๋‹ค์Œ์— ๋„ฃ๋Š” ๋‹ค๋ฅธ ์š”์†Œ๋“ค์—๋„ ๋˜‘๊ฐ™์€ ์†์„ฑ์ด ์ „๋‹ฌ๋œ๋‹ค. ๋”ฐ๋ผ์„œ float ์†์„ฑ์ด ๋” ์ด์ƒ ์œ ์šฉํ•˜์ง€ ์•Š๋‹ค๊ณ  ์•Œ๋ ค ์ฃผ๋Š” ์†์„ฑ์ด ํ•„์š”ํ•œ๋ฐ ๊ทธ๊ฒƒ์ด ๋ฐ”๋กœ clear ์†์„ฑ์ด๋‹ค.

 

๊ธฐ๋ณธํ˜•)

clear: none | left | right | both

 

float ์†์„ฑ ํ•ด์ œํ•˜๊ธฐ

<style>
	.box1{
		background:#ffd800;
		float:left;
	}
	.box2 {
		background: #0094ff;
		float:left;
	}
	.box3 {
		background: #00ff21;
	}
	.box4 {
		background:#a874ff;
		clear:both;
	}
</style>

 

 

 

์ง์ ‘ ํ•ด๋ณด์„ธ์š”! ) 2๋‹จ ๋ ˆ์ด์•„์›ƒ ๋งŒ๋“ค๊ธฐ 1- ๊ตฌ์กฐ ๋งˆํฌ์—…ํ•˜๊ธฐ

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2๋‹จ ๋ ˆ์ด์•„์›ƒ</title>
</head>
<body>
    <div id="container">
        <div id="header">
			<h1>์‚ฌ์ดํŠธ ์ œ๋ชฉ</h1>
		</div>
		<div id="sidebar">
			<h2>์‚ฌ์ด๋“œ ๋ฐ”</h2>
            <ul>
                <li>๋ชจ๋“  ๊ตญ๋ฏผ์€ ๊ทผ๋กœ์˜ ์˜๋ฌด๋ฅผ ์ง„๋‹ค. ๊ตญ๊ฐ€๋Š” ๊ทผ๋กœ์˜ ์˜๋ฌด์˜ ๋‚ด์šฉ๊ณผ ์กฐ๊ฑด์„ ๋ฏผ์ฃผ์ฃผ์˜์›์น™์— ๋”ฐ๋ผ ๋ฒ•๋ฅ ๋กœ ์ •ํ•œ๋‹ค.</li>

            </ul>
		</div>
		<div id="contents">
			<h2>๋ณธ๋ฌธ</h2>
            <p>์žฌ์‚ฐ๊ถŒ์˜ ํ–‰์‚ฌ๋Š” ๊ณต๊ณต๋ณต๋ฆฌ์— ์ ํ•ฉํ•˜๋„๋ก ํ•˜์—ฌ์•ผ ํ•œ๋‹ค. ์ •๋ถ€๋Š” ํšŒ๊ณ„์—ฐ๋„๋งˆ๋‹ค ์˜ˆ์‚ฐ์•ˆ์„ ํŽธ์„ฑํ•˜์—ฌ ํšŒ๊ณ„์—ฐ๋„ ๊ฐœ์‹œ 90์ผ์ „๊นŒ์ง€ ๊ตญํšŒ์— ์ œ์ถœํ•˜๊ณ , ๊ตญํšŒ๋Š” ํšŒ๊ณ„์—ฐ๋„ ๊ฐœ์‹œ 30์ผ์ „๊นŒ์ง€ ์ด๋ฅผ ์˜๊ฒฐํ•˜์—ฌ์•ผ ํ•œ๋‹ค.</p>

            <p>๋Œ€ํ†ต๋ น์˜ ์ž„๊ธฐ๊ฐ€ ๋งŒ๋ฃŒ๋˜๋Š” ๋•Œ์—๋Š” ์ž„๊ธฐ๋งŒ๋ฃŒ 70์ผ ๋‚ด์ง€ 40์ผ์ „์— ํ›„์ž„์ž๋ฅผ ์„ ๊ฑฐํ•œ๋‹ค. ์ œ2ํ•ญ๊ณผ ์ œ3ํ•ญ์˜ ์ฒ˜๋ถ„์— ๋Œ€ํ•˜์—ฌ๋Š” ๋ฒ•์›์— ์ œ์†Œํ•  ์ˆ˜ ์—†๋‹ค. ์–ธ๋ก ·์ถœํŒ์— ๋Œ€ํ•œ ํ—ˆ๊ฐ€๋‚˜ ๊ฒ€์—ด๊ณผ ์ง‘ํšŒ·๊ฒฐ์‚ฌ์— ๋Œ€ํ•œ ํ—ˆ๊ฐ€๋Š” ์ธ์ •๋˜์ง€ ์•„๋‹ˆํ•œ๋‹ค.</p>
		</div>
		<div id="footer">
			<h2>ํ‘ธํ„ฐ</h2>
            <p>์ด ํ—Œ๋ฒ•์‹œํ–‰ ๋‹น์‹œ์˜ ๋ฒ•๋ น๊ณผ ์กฐ์•ฝ์€ ์ด ํ—Œ๋ฒ•์— ์œ„๋ฐฐ๋˜์ง€ ์•„๋‹ˆํ•˜๋Š” ํ•œ ๊ทธ ํšจ๋ ฅ์„ ์ง€์†ํ•œ๋‹ค.</p>
		</div>
    </div>
</body>
</html>

 

 

 

์ง์ ‘ ํ•ด๋ณด์„ธ์š”! ) 2๋‹จ ๋ ˆ์ด์•„์›ƒ ๋งŒ๋“ค๊ธฐ 2 - CSS ์ž‘์„ฑํ•˜๊ธฐ

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2๋‹จ ๋ ˆ์ด์•„์›ƒ</title>
<style>
	div {
		border: 1px solid #ccc; /* ๋ชจ๋“  ์˜์—ญ์— ํ…Œ๋‘๋ฆฌ ํ‘œ์‹œ */
	}
	#container {
		width:960px; /* ์ปจํ…Œ์ด๋„ˆ ๋„ˆ๋น„ */
		padding:20px; /* ํŒจ๋”ฉ */			
		margin:0 auto;  /* ํ™”๋ฉด ์ค‘์•™์— ๋ฐฐ์น˜ */
	}
	#header {
		padding:20px;  /* ํŒจ๋”ฉ */
		margin-bottom:20px;  /* ์•„๋ž˜ ์š”์†Œ๋“ค๊ณผ์˜ ๊ฐ„๊ฒฉ(๋งˆ์ง„) */
	}
	#contents {
		width: 620px;  /* ๋„ˆ๋น„ */
		padding: 20px;  /* ํŒจ๋”ฉ */
		float: left;  /* ์™ผ์ชฝ์œผ๋กœ ํ”Œ๋กœํŒ… */
		margin-bottom: 20px;  /* ์•„๋ž˜ ์š”์†Œ์™€์˜ ๊ฐ„๊ฒฉ */
	}
	#sidebar {
		width: 220px;  /* ๋„ˆ๋น„ */
		padding: 20px;  /* ํŒจ๋”ฉ */
		float: right;  /* ์˜ค๋ฅธ์ชฝ์œผ๋กœ ํ”Œ๋กœํŒ… */
		margin-bottom: 20px;  /* ์•„๋ž˜ ์š”์†Œ์™€์˜ ๊ฐ„๊ฒฉ */
		background:#eee;
	}
	#footer {
		clear:both;  /* ์–‘์ชฝ ํ”Œ๋กœํŒ… ํ•ด์ œ */
		padding:20px;  /* ํŒจ๋”ฉ */
	}
</style>
</head>
<body>
    <div id="container">
        <div id="header">
			<h1>์‚ฌ์ดํŠธ ์ œ๋ชฉ</h1>
		</div>
		<div id="sidebar">
			<h2>์‚ฌ์ด๋“œ ๋ฐ”</h2>
            <ul>
                <li>๋ชจ๋“  ๊ตญ๋ฏผ์€ ๊ทผ๋กœ์˜ ์˜๋ฌด๋ฅผ ์ง„๋‹ค. ๊ตญ๊ฐ€๋Š” ๊ทผ๋กœ์˜ ์˜๋ฌด์˜ ๋‚ด์šฉ๊ณผ ์กฐ๊ฑด์„ ๋ฏผ์ฃผ์ฃผ์˜์›์น™์— ๋”ฐ๋ผ ๋ฒ•๋ฅ ๋กœ ์ •ํ•œ๋‹ค.</li>

            </ul>
		</div>
		<div id="contents">
			<h2>๋ณธ๋ฌธ</h2>
            <p>์žฌ์‚ฐ๊ถŒ์˜ ํ–‰์‚ฌ๋Š” ๊ณต๊ณต๋ณต๋ฆฌ์— ์ ํ•ฉํ•˜๋„๋ก ํ•˜์—ฌ์•ผ ํ•œ๋‹ค. ์ •๋ถ€๋Š” ํšŒ๊ณ„์—ฐ๋„๋งˆ๋‹ค ์˜ˆ์‚ฐ์•ˆ์„ ํŽธ์„ฑํ•˜์—ฌ ํšŒ๊ณ„์—ฐ๋„ ๊ฐœ์‹œ 90์ผ์ „๊นŒ์ง€ ๊ตญํšŒ์— ์ œ์ถœํ•˜๊ณ , ๊ตญํšŒ๋Š” ํšŒ๊ณ„์—ฐ๋„ ๊ฐœ์‹œ 30์ผ์ „๊นŒ์ง€ ์ด๋ฅผ ์˜๊ฒฐํ•˜์—ฌ์•ผ ํ•œ๋‹ค.</p>

            <p>๋Œ€ํ†ต๋ น์˜ ์ž„๊ธฐ๊ฐ€ ๋งŒ๋ฃŒ๋˜๋Š” ๋•Œ์—๋Š” ์ž„๊ธฐ๋งŒ๋ฃŒ 70์ผ ๋‚ด์ง€ 40์ผ์ „์— ํ›„์ž„์ž๋ฅผ ์„ ๊ฑฐํ•œ๋‹ค. ์ œ2ํ•ญ๊ณผ ์ œ3ํ•ญ์˜ ์ฒ˜๋ถ„์— ๋Œ€ํ•˜์—ฌ๋Š” ๋ฒ•์›์— ์ œ์†Œํ•  ์ˆ˜ ์—†๋‹ค. ์–ธ๋ก ·์ถœํŒ์— ๋Œ€ํ•œ ํ—ˆ๊ฐ€๋‚˜ ๊ฒ€์—ด๊ณผ ์ง‘ํšŒ·๊ฒฐ์‚ฌ์— ๋Œ€ํ•œ ํ—ˆ๊ฐ€๋Š” ์ธ์ •๋˜์ง€ ์•„๋‹ˆํ•œ๋‹ค.</p>
		</div>
		<div id="footer">
			<h2>ํ‘ธํ„ฐ</h2>
            <p>์ด ํ—Œ๋ฒ•์‹œํ–‰ ๋‹น์‹œ์˜ ๋ฒ•๋ น๊ณผ ์กฐ์•ฝ์€ ์ด ํ—Œ๋ฒ•์— ์œ„๋ฐฐ๋˜์ง€ ์•„๋‹ˆํ•˜๋Š” ํ•œ ๊ทธ ํšจ๋ ฅ์„ ์ง€์†ํ•œ๋‹ค.</p>
		</div>
    </div>
</body>
</html>

 

 

 

*position ์†์„ฑ - ๋ฐฐ์น˜ ๋ฐฉ๋ฒ• ์ง€์ •ํ•˜๊ธฐ

position ์†์„ฑ์€ ์›น ๋ฌธ์„œ ์•ˆ์˜ ์š”์†Œ๋“ค์„ ์ž์œ ์ž์žฌ๋กœ ๋ฐฐ์น˜ํ•ด ์ฃผ๋Š” ์†์„ฑ์œผ๋กœ HTML๊ณผ CSS๋ฅผ ์ด์šฉํ•ด ์›น ๋ฌธ์„œ๋ฅผ ๋งŒ๋“ค ๋•Œ ์ค‘์š”ํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ์†์„ฑ ์ค‘ ํ•˜๋‚˜์ด๋‹ค.

 

๊ธฐ๋ณธํ˜•)

position : static | relative | absolute | fixed

์†์„ฑ ๊ฐ’

์„ค๋ช…

static

์š”์†Œ๋ฅผ ๋ฌธ์„œ์˜ ํ๋ฆ„์— ๋งž์ถ”์–ด ๋ฐฐ์น˜ํ•œ๋‹ค.

relative

์ด์ „ ์š”์†Œ์— ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์—ฐ๊ฒฐํ•ด ๋ฐฐ์น˜ํ•˜๋˜ ์œ„์น˜๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

absolute

์›ํ•˜๋Š” ์œ„์น˜๋ฅผ ์ง€์ •ํ•ด ๋ฐฐ์น˜ํ•œ๋‹ค.

fixed

์ง€์ •ํ•œ ์œ„์น˜์— ๊ณ ์ •ํ•ด ๋ฐฐ์น˜ํ•œ๋‹ค. ํ™”๋ฉด์—์„œ ์š”์†Œ๊ฐ€ ์ž˜๋ฆด ์ˆ˜๋„ ์žˆ๋‹ค.

 

 

-relative ์†์„ฑ ๊ฐ’ - ๋ฌธ์„œ ํ๋ฆ„ ๋”ฐ๋ผ ์œ„์น˜ ์ง€์ •ํ•˜๊ธฐ

relative ๊ฐ’์œผ๋กœ ์š”์†Œ ๋ฐฐ์น˜ํ•˜๊ธฐ

	.box2 {
		position:relative;
		left:-50px;
		top:30px;

 

 

-absolute ์†์„ฑ ๊ฐ’ - ์›ํ•˜๋Š” ์œ„์น˜์— ๋ฐฐ์น˜ํ•˜๊ธฐ

absolute ๊ฐ’์œผ๋กœ ์š”์†Œ ๋ฐฐ์น˜ํ•˜๊ธฐ

<style>
	#wrap{
		position:relative;
		width:300px;
		height:300px;
		border:1px solid #ccc;
	}
	.box{
		position:absolute;
		width:50px;
		height:50px;
		background:#0094ff;
	}
	#crd1{ top:0; left:0; }
	#crd2{ top:0; right:0; }
	#crd3{ bottom:0; left:0; }
	#crd4{ bottom:0; right:0; }
	#crd5{ top:100px; left:100px; }
</style>

 

 

-fixed ์†์„ฑ ๊ฐ’ - ๋ธŒ๋ผ์šฐ์ € ์ฐฝ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜ํ•˜๊ธฐ

fixed ๊ฐ’์œผ๋กœ ์š”์†Œ ๋ฐฐ์น˜ํ•˜๊ธฐ

<style>
	#fx{
		position:fixed;
		top:5px;
		right:5px;
		width:50px;
		height:50px;
		background:#ff6a00;
	}
</style>

 

 

 

*visibility ์†์„ฑ - ์š”์†Œ๋ฅผ ๋ณด์ด๊ฒŒ ํ•˜๊ฑฐ๋‚˜ ๋ณด์ด์ง€ ์•Š๊ฒŒ ํ•˜๊ธฐ

 

๊ธฐ๋ณธํ˜•)

visibility: visible | hidden | collapse

์†์„ฑ ๊ฐ’

์„ค๋ช…

visible

ํ™”๋ฉด์— ์š”์†Œ๋ฅผ ํ‘œ์‹œํ•œ๋‹ค.

hidden

ํ™”๋ฉด์—์„œ ์š”์†Œ๋ฅผ ๊ฐ์ถ˜๋‹ค. ํ•˜์ง€๋งŒ ํฌ๊ธฐ๋Š” ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐฐ์น˜์— ์˜ํ–ฅ์„ ๋ฏธ์นœ๋‹ค.

collapse

ํ‘œ์˜ ํ–‰, ์—ด, ํ–‰ ๊ทธ๋ฃน, ์—ด ๊ทธ๋ฃน ๋“ฑ์—์„œ ์ง€์ •ํ•˜๋ฉด ์„œ๋กœ ๊ฒน์น˜๋„๋ก ์กฐ์ ˆํ•œ๋‹ค. ๊ทธ ์™ธ์˜ ์˜์—ญ์—์„œ ์‚ฌ์šฉํ•˜๋ฉด 'hidden'์ฒ˜๋Ÿผ ์ฒ˜๋ฆฌํ•œ๋‹ค.

 

ํŠน์ • ์š”์†Œ ํ™”๋ฉด์—์„œ ๊ฐ์ถ”๊ธฐ

<style>
	.invisible {
		visibility:hidden;
	}
</style>

 

 

 

*z-index ์†์„ฑ - ์š”์†Œ ์Œ“๋Š” ์ˆœ์„œ ์ •ํ•˜๊ธฐ

 

๊ธฐ๋ณธํ˜•)

z-index: <์ˆซ์ž>

์—ฌ๋Ÿฌ ์š”์†Œ์˜ ์Œ“๋Š” ์ˆœ์„œ ์กฐ์ ˆํ•˜๊ธฐ

<style>
	#b1 {				
		z-index:1;
	}
	#b2 {				
		z-index:3;
	}
	#b3 {
		z-index:1;
	}
</style>
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€