๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
IT/HTML

[33์ผ์ฐจ] 5์žฅ CSS3 ๊ณ ๊ธ‰ ํ™œ์šฉ

by GWLEE 2022. 8. 4.

๐ŸŸ2022-08-04๐ŸŸ

 

ex5-01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display ํ”„๋กœํผํ‹ฐ</title>
<style>
div {
	border : 2px solid yellowgreen;
	color : blue;
	background : aliceblue;
}
span {
	border : 3px dotted red;
	background : yellow;
}
</style>
</head>
<body>
<h3>์ธ๋ผ์ธ, ์ธ๋ผ์ธ ๋ธ”๋ก, ๋ธ”๋ก</h3>
<hr>
๋‚˜๋Š” <div style="display:none">
		div(none)</div>์ž…๋‹ˆ๋‹ค.<br><br>
๋‚˜๋Š” <div style="display:inline">
		div(inline)</div> ์ž…๋‹ˆ๋‹ค.<br><br>
๋‚˜๋Š” <div style="display:inline-block; height:50px">
		div(inline-block)</div> ์ž…๋‹ˆ๋‹ค.<br><br>
๋‚˜๋Š” <div>div<span style="display:block">
		span(block)</span> ์ž…๋‹ˆ๋‹ค.
	</div>
</body>
</html>

 

ex5-02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative ๋ฐฐ์น˜</title>
<style>
div {
	display : inline-block;
	height : 50px;
	width : 50px;
	border : 1px solid lightgray;
	text-align : center;
	color : white;
	background : red;
}
#down:hover {
	position : relative;
	left : 20px;
	top : 20px;
	background : green;
}
#up:hover {
	position : relative;
	right : 20px;
	bottom : 20px;
	background : green;
}
</style>
</head>
<body>
<h3>์ƒ๋Œ€ ๋ฐฐ์น˜, relative</h3>
<hr>
	<div>T</div>
	<div id="down">h</div>
	<div >a</div>
	<div>n</div>
	<div id="up">k</div>
	<div>s</div>
</body>
</html>

 

ex5-03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ ˆ๋Œ€ ๋ฐฐ์น˜</title>
<style>
div {
	display : inline-block;
	position : absolute; /* ์ ˆ๋Œ€ ๋ฐฐ์น˜ */
	border : 1px solid lightgray;
}
div > p { /* div์˜ ์ž์‹ p */
	display : inline-block;
	position : absolute; /* ์ ˆ๋Œ€ ๋ฐฐ์น˜ */
	height : 20px;
	width : 15px;
	background : lightgray;
}
</style>
</head>
<body>
<h3>Merry Christmas!</h3>
<hr>
<p>์˜ˆ์ˆ˜๋‹˜์ด ํƒ„์ƒํ•˜์…จ์Šต๋‹ˆ๋‹ค.</p>
<div>
	<img src="media/christmastree.png"
			width="200" height="200" alt="ํฌ๋ฆฌ์Šค๋งˆ์Šค ํŠธ๋ฆฌ">
	<p style="left:50px; top:30px">M</p>
	<p style="left:100px; top:0px">E</p>
	<p style="left:100px; top:80px">R</p>
	<p style="left:150px; top:110px">R</p>
	<p style="left:30px; top:130px">Y</p>
</div>
</body>
</html>

 

ex5-04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๊ณ ์ • ๋ฐฐ์น˜</title>
<style>
#fixed {
	position : fixed;
	bottom : 10px;
	right : 10px;
	width : 100px;
	padding : 5px;
	background : red;
	color : white;
}
</style>
</head>
<body>
<h3>Merry Christmas!</h3>
<hr>
<img src="media/christmastree.png"
	width="300" height="300"
	alt="ํฌ๋ฆฌ์Šค๋งˆ์Šค ํŠธ๋ฆฌ">
<div id="fixed">์˜ˆ์ˆ˜๋‹˜์ด ํƒ„์ƒํ•˜์…จ์Šต๋‹ˆ๋‹ค.
</div>
</body>
</html>

 

ex5-05.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float ๋ฐฐ์น˜</title>
<style>
#float {
	float : right; /* ๋ทฐํฌํŠธ์˜ ์˜ค๋ฅธ์ชฝ์— ๋ถ™์—ฌ */
	border : 1px dotted black;
	width : 7em; /* 7๊ฐœ์˜ ๊ธ€์ž ํฌ๊ธฐ */
	padding : 0.25em;
	margin : 1em;
}
</style></head>
<body>
<h3>ํ•™๊ธฐ๋ง ๊ณต์ง€</h3>
<hr>
<div>
<p id="float">
 24์ผ์€ ํ”ผ์•„๋‹ˆ์ŠคํŠธ ์กฐ์„ฑ์ง„์˜ ํฌ๋ฆฌ์Šค๋งˆ์Šค ํŠน๋ณ„
  ์—ฐ์ฃผ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.</p>
<p>
  ์ด์ œ ๊ณง ๊ฒจ์šธ ๋ฐฉํ•™์ด ์‹œ์ž‘๋ฉ๋‹ˆ๋‹ค. ํ•™๊ธฐ ์ค‘ ๋ชป๋‹คํ•œ
  Java, C++ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์—ด์‹ฌํžˆ ํ•˜๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.
   ์ธํ„ด์„ ์ค€๋น„ํ•˜๋Š” ํ•™์ƒ๋“ค์€ ํ”„๋กœ์ ํŠธ ๊ฐœ๋ฐœ์—
   ๋”์šฑ ํž˜์“ฐ์„ธ์š”. ๊ทธ๋Ÿผ ๋‹ค์Œ ํ•™๊ธฐ์— ๋งŒ๋‚˜์š”.</p>
</div>
</body>
</html>


ex5-06.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index ํ”„๋กœํผํ‹ฐ</title>
<style>
div { position : absolute; }
img { position : absolute; }
#spadeA { z-index :-3; left : 10px; top : 20px; }
#spade2 { z-index : -5; left : 40px; top : 30px; }
#spade3 { z-index : -10; left : 80px; top : 40px; }
#spade7 { z-index : 10; left : 120px; top : 50px; }
</style></head>
<body>
<h3>z-index ํ”„๋กœํผํ‹ฐ</h3>
<hr>
<div>
	<img id="spadeA" src="media/spade-A.png"
		width="100" height="140" alt="์ŠคํŽ˜์ด๋“œA">
	<img id="spade2" src="media/spade-2.png"
		width="100" height="140" alt="์ŠคํŽ˜์ด๋“œ2">
	<img id="spade3" src="media/spade-3.png"
		width="100" height="140" alt="์ŠคํŽ˜์ด๋“œ3">
	<img id="spade7" src="media/spade-7.png"
		width="100" height="140" alt="์ŠคํŽ˜์ด๋“œ7">
</div>
</body>
</html>

 

ex5-07.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>visibility ํ”„๋กœํผํ‹ฐ</title>
<style>
span {
	/* visibility:hidden; */
	display: none; /* ๊ณต๊ฐ„ ์ž์ฒด๊ฐ€ ์—†์Œ */
}
</style>
</head>
<body>
<h3>๋‹ค์Œ ๋นˆ ๊ณณ์— ์ˆจ์€ ๋‹จ์–ด?</h3>
<hr>
<ul>
	<li>I (<span>love</span>) you.
	<li>CSS is Cascading
		 (<span>Style</span>) Sheet.
	<li>์‘๋‹ตํ•˜๋ผ (<span>1988</span>).
</ul>
</body>
</html>

 

ex5-08.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow ํ”„๋กœํผํ‹ฐ</title>
<style>
p {
	width : 15em;
	height : 3em;
	border : 1px solid lightgray;
}
.hidden { overflow : hidden; }
.visible { overflow : visible; }
.scroll { overflow : scroll; }
</style>
</head>
<body>
<h3>overflow ํ”„๋กœํผํ‹ฐ</h3>
<hr>
<p class="hidden">overflow์— hidden ๊ฐ’์„ ์ ์šฉํ•˜๋ฉด
	๋ฐ•์Šค๋ฅผ ๋„˜์–ด๊ฐ€๋Š” ๋‚ด์šฉ์ด ์ž˜๋ ค ๋ณด์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.</p><br>
<p class="visible">overflow์— visible ๊ฐ’์„ ์ ์šฉํ•˜๋ฉด
	์ฝ˜ํ…ํŠธ๊ฐ€ ๋ฐ•์Šค๋ฅผ ๋„˜์–ด๊ฐ€์„œ๋„ ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค	</p><br>
<p class="scroll">overflow์— scroll ๊ฐ’์„ ์ ์šฉํ•˜๋ฉด
	๋ฐ•์Šค์— ์Šคํฌ๋กค๋ฐ”๋ฅผ ๋ถ™์—ฌ ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค.</p>
</body>
</html>

 

ex5-09.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋ฆฌ์ŠคํŠธ๋กœ ๋ฉ”๋‰ด ๋งŒ๋“ค๊ธฐ</title>
<style>
#menubar {
	background : olive;
}
#menubar ul { /* ์—ฌ๋ฐฑ๊ณผ ํŒจ๋”ฉ ๋ชจ๋‘ 0 */
	 margin : 0;
	padding : 0;
	width : 567px; /* ๋ชจ๋“  ์•„์ดํ…œ(<li>)์„ ํ•œ ์ค„์— ํ’ˆ์„ ์ˆ˜ ์žˆ๋Š” ํญ */
}
#menubar ul li {
	display : inline-block; /* ์ƒˆ ์ค„๋กœ ๋„˜์–ด๊ฐ€์ง€ ์•Š๊ฒŒ
	list-style-type : decimal; /* ๋งˆ์ปค ์‚ญ์ œ */
	padding : 0px 15px; /* top=bottom=0, left=right=15px */
}
#menubar ul li a {
	color : white;
  	text-decoration : none; /* ๋งํฌ ๋ณด์ด์ง€ ์•Š๊ฒŒ */
}
#menubar ul li a:hover {
 	color : violet;  /* ๋งˆ์šฐ์Šค ์˜ฌ๋ผ ๊ฐˆ ๋•Œ ์ƒ‰ */
}
</style>
</head>
<body>
<nav id="menubar">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Espresso</a></li>
		<li><a href="#">Cappuccino</a></li>
		<li><a href="#">Cafe Latte</a></li>
		<li><a href="#">F.A.Q</a></li>
	</ul>
</nav>
</body>
</html>

 

ex5-10.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํ‘œ ์‘์šฉ</title>
<style>
table { /* ์ด์ค‘ ํ…Œ๋‘๋ฆฌ ์ œ๊ฑฐ */
	border-collapse : collapse;
}
td, th { /* ๋ชจ๋“  ์…€์— ์ ์šฉ */
	text-align : left;
	padding : 5px;
	height : 15px;
	width : 100px;
}
thead, tfoot { /* <thead>์˜ ๋ชจ๋“  ์…€์— ์ ์šฉ */
	background : darkgray;
	color : yellow;
}
tbody tr:nth-child(even) { /* ์ง์ˆ˜ <tr>์— ์ ์šฉ*/
	background : #6699ff;
}
tbody tr:hover { /* ๋งˆ์šฐ์Šค๊ฐ€ ์˜ฌ๋ผ์˜ค๋ฉด pink ๋ฐฐ๊ฒฝ */
	background : blue;
}
</style></head>
<body>
<h3>1ํ•™๊ธฐ ์„ฑ์ </h3>
<hr>
<table>
	<thead>
		<tr><th>์ด๋ฆ„</th><th>HTML</th><th>CSS</th></tr>
	</thead>
	<tfoot>
		<tr><th>ํ•ฉ</th><th>310</th><th>249</th></tr>
	</tfoot>
	<tbody>
		<tr><td>ํ™ฉ๊ธฐํƒœ</td><td>80</td><td>70</td></tr>
		<tr><td>์ด์žฌ๋ฌธ</td><td>95</td><td>99</td></tr>
		<tr><td>์ด๋ณ‘์€</td><td>85</td><td>90</td></tr>
		<tr><td>๊น€๋‚จ์œค</td><td>50</td><td>40</td></tr>
	</tbody>
</table>
</body></html>

 

ex5-11.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํผ ์Šคํƒ€์ผ ์ฃผ๊ธฐ</title>
<style>
input[type=text] { /* text ์ฐฝ์—๋งŒ ์ ์šฉ */
	color : pink;
}
input:hover, textarea:hover { /* ๋งˆ์šฐ์Šค ์˜ฌ๋ผ ์˜ฌ ๋•Œ */
	background : #6699ff;
}
input[type=text]:focus, input[type=email]:focus { /* ํฌ์ปค์Šค ๋ฐ›์„ ๋•Œ */
	font-size : 120%;
}
label {
	display : block; /* ์ƒˆ ๋ผ์ธ์—์„œ ์‹œ์ž‘ */
	padding : 5px;
}
label span {
	display : inline-block;
	width : 90px;
	text-align : right;
	padding : 10px;
}
</style>
</head>
<body>
<h3>CONTACT US</h3>
<hr>
<form>
	<label>
		<span>Name</span><input type="text" placeholder="Elvis">
	</label>
	<label>
		<span>Email</span><input type="email" placeholder="elvis@graceland.com">
	</label>
	<label>
		<span>Comment</span><textarea placeholder="๋ฉ”์‹œ์ง€๋ฅผ ๋‚จ๊ฒจ์ฃผ์„ธ์š”"></textarea>
	</label>
	<label>
		<span></span><input type="submit" value="submit">
	</label>
</form>
</body>
</html>

 

ex5-12.html

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์• ๋‹ˆ๋ฉ”์ด์…˜</title>
<style>
@keyframes bomb {
  from { font-size : 500%;}
  to { font-size : 100%;}
}
h3 {
	animation-name : bomb;
	animation-duration : 3s;
	animation-iteration-count : infinite;
}
</style></head>
<body>
<h3>๊ฝ!</h3>
<hr>
<p>๊ฝ! ๊ธ€์ž๊ฐ€ 3์ดˆ๋™์•ˆ 500%์—์„œ
์‹œ์ž‘ํ•˜์—ฌ 100%๋กœ ๋ฐ”๋€Œ๋Š”
์• ๋‹ˆ๋ฉ”์ด์…˜์ž…๋‹ˆ๋‹ค. ๋ฌดํ•œ ๋ฐ˜๋ณตํ•ฉ๋‹ˆ๋‹ค.</p>
</body>
</html>

 

ex5-13.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ „ํ™˜</title>
<style>
span {
	transition: font-size 5s;
}
span:hover {
	/* 5์ดˆ์— ๊ฑธ์ณ 500%๊นŒ์ง€ ๊ธ€์ž ํ‚ค์šฐ๋Š” ์ „ํ™˜ ํšจ๊ณผ ์‹œ์ž‘ */
	font-size : 500%;
}
</style>
</head>
<body>
<h3>font-size์— ๋Œ€ํ•œ ์ „ํ™˜</h3>
<hr>
<p><span>๊ฝ!</span> ๊ธ€์ž์—
 ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ ค๋ณด์„ธ์š”.</p>
</body>
</html>

 

ex5-14.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋‹ค์–‘ํ•œ ๋ณ€ํ™˜ ์‚ฌ๋ก€</title>
<style>
div {
	display : inline-block;
	padding : 5px;
	color : white;
	background : olivedrab;
}

/* ๋ณ€ํ™˜ */
div#rotate { transform : rotate(20deg); }
div#skew { transform : skew(0deg,-20deg); }
div#translate { transform : translateY(100px); }
div#scale { transform : scale(3,1); }

/* ๋งˆ์šฐ์Šค ์˜ฌ๋ฆด ๋•Œ ์ถ”๊ฐ€ ๋ณ€ํ™˜ */
div#rotate:hover { transform : rotate(80deg);}
div#skew:hover { transform : skew(0deg, -60deg); }
div#translate:hover { transform : translate(50px, 100px); }
div#scale:hover { transform : scale(4,2); }

/* ๋งˆ์šฐ์Šค ๋ˆ„๋ฅผ ๋•Œ ์ถ”๊ฐ€ ๋ณ€ํ™˜ */
div#scale:active { transform : scale(1,5); }
</style>
</head>
<body>
<h3>๋‹ค์–‘ํ•œ Transform</h3>
์•„๋ž˜๋Š” ํšŒ์ „(rotate), ๊ธฐ์šธ์ž„(skew), ์ด๋™(translate),
ํ™•๋Œ€/์ถ•์†Œ(scale)๊ฐ€ ์ ์šฉ๋œ ์‚ฌ๋ก€์ด๋‹ค.
๋˜ํ•œ ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ฆฌ๋ฉด ์ถ”๊ฐ€์  ๋ณ€ํ™˜์ด ์ผ์–ด๋‚œ๋‹ค.
<hr>
<div id="rotate">rotate(20deg)</div>
<div id="skew">skew(0,-20deg)</div>
<div id="translate">translateY(100px)</div>
<div id="scale">scale(3,1)</div>
</body></html>

 

fig5-01a.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>block</title>
<style>
div {
	border: 2px solid yellowgreen;
	color: blue;
	background : aliceblue;
}
</style>
</head>
<body>
<h3>DIV๋Š” ๋ธ”๋ก ๋ฐ•์Šค</h3>
<hr>
<div>DIV</div>
<div>DIV</div>
<div>DIV</div>
</body>
</html>

 

fig5-01b.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>block</title>
<style>
div {
	border: 2px solid yellowgreen;
	color: blue;
	background : aliceblue;
}
span {
	border: 2px solid yellowgreen;
	color: blue;
	background : pink;
}
</style>
</head>
<body>
<h3>SPAN์€ ์ธ๋ผ์ธ ๋ฐ•์Šค</h3>
<hr>
<div>DIV ๋‚ด <span>span</span>๊ณผ<span>span</span>์ž…๋‹ˆ๋‹ค</div>
<div>DIV ๋‚ด <span>span</span>๊ณผ<span>span</span>์ž…๋‹ˆ๋‹ค</div>
<div>DIV ๋‚ด <span>span</span>๊ณผ<span>span</span>์ž…๋‹ˆ๋‹ค</div>
</body>
</html>

 

fig5-03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>block</title>
<style>
div {
	border : 1px solid yellowgreen;
}
span {
	display : block;
	background : powderblue;
	border : 1px dotted orangered ;
	width : 100px; height : 40px;
}
</style></head>
<body>
<h3>&lt;span&gt;๋ฅผ display:block์œผ๋กœ</h3>
<hr>
<div><span>block span</span>๊ณผ<span>block span</span>์ž…๋‹ˆ๋‹ค.
</div>
</body>
</html>

 

fig5-04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>inline</title>
<style>
div div {
	display : inline;
	border : 2px dotted orangered ;
	background : powderblue;
}
</style></head>
<body>
<h3>&lt;div&gt;๋ฅผ display:inline์œผ๋กœ</h3>
<hr>
<div style="background : orange;">
	<div>inline DIV</div>
	<div>inline DIV</div>
	<div>inline DIV</div>
	<div>inline DIV</div>
</div>
</body>
</html>

 

fig5-05.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>inline-block</title>
<style>
div div {
	display : inline-block;
	border : 2px dotted orangered;
	background : powderblue;
	margin : 10px;
	width : 60px; height : 80px;
}
</style></head>
<body>
<h3>&lt;span&gt;๋ฅผ display:block์œผ๋กœ</h3>
<hr>
<div style="background : orange">
	<div>inline-block DIV</div>
	<div>inline-block DIV</div>
	<div>inline-block DIV</div>
</div>
</body>
</html>

 

 

fig5-09.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋ฆฌ์ŠคํŠธ ๋ฐฐ๊ฒฝ</title>
<style>
ul {
	background: goldenrod;
	padding: 10px 10px 10px 50px
	list-style-position:inside;
}
ul li { /* <ul>ํƒœ๊ทธ์— ํฌํ•จ๋œ <li> */
	background: greenyellow;
	margin-bottom: 5px
}
</style>
</head>
<body>
<h3>์ปคํ”ผ ๋ฉ”๋‰ด</h3>
<hr>
<ul>
	<li>Espresso</li>
	<li>Cappuccino</li>
	<li>Cafe Latte</li>
</ul>
</body>
</html>

 

fig5-11.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋งˆ์ปค ์ข…๋ฅ˜</title>
<style>
ul {
	width : 140px;
	background : gold;
	padding : 10px 10px 10px 50px;

	/* list-style-type : circle;
	list-style-type : square;
	list-style-type : none;
	list-style-type : upper-roman;
	list-style-type : lower-alpha; */

	list-style-type: decimal;
}
ul li { /* <ul>ํƒœ๊ทธ์— ํฌํ•จ๋œ <li> */
	background : aliceblue;
	margin-bottom : 5px
}
</style>
</head>
<body>
<h3>์ปคํ”ผ ๋ฉ”๋‰ด</h3>
<hr>
<ul>
	<li>Espresso</li>
	<li>Cappuccino</li>
	<li>Cafe Latte</li>
</ul>
</body>
</html>

 

fig5-12.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ด๋ฏธ์ง€ ๋งˆ์ปค</title>
<style>
ul {
	background : goldenrod;
	padding : 10px 10px 10px 50px;
	list-style-image : url("media/marker.png");
}
ul li {
	background : greenyellow;
	margin-bottom : 5px;
}
</style>
</head>
<body>
<h3>์ปคํ”ผ ๋ฉ”๋‰ด</h3>
<hr>
<ul>
	<li>Espresso</li>
	<li>Cappuccino</li>
	<li>Cafe Latte</li>
</ul>
</body>
</html>

 

fig5-13.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๊ธฐ๋ณธ ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง„ ํ‘œ ๋งŒ๋“ค๊ธฐ</title></head>
<body>
<h3>1ํ•™๊ธฐ ์„ฑ์ </h3>
<hr>
<table>
	<thead>
		<tr><th>์ด๋ฆ„</th><th>HTML</th><th>CSS</th></tr>
	</thead>
	<tfoot>
		<tr><th>ํ•ฉ</th><th>175</th><th>169</th></tr>
	</tfoot>
	<tbody>
		<tr><td>ํ™ฉ๊ธฐํƒœ</td><td>80</td><td>70</td></tr>
		<tr><td>์ด์žฌ๋ฌธ</td><td>95</td><td>99</td></tr>
	</tbody>
</table>
</body>
</html>

 

fig5-14.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํ‘œ ํ…Œ๋‘๋ฆฌ</title>
<style>
table {
	border: 1px solid blue
}
td, th {
	border: 1px dotted green
}
</style>
</head>
<body>
<h3>1ํ•™๊ธฐ ์„ฑ์ </h3>
<hr>
<table>
	<thead>
		<tr><th>์ด๋ฆ„</th><th>HTML</th><th>CSS</th></tr>
	</thead>
	<tfoot>
		<tr><th>ํ•ฉ</th><th>175</th><th>169</th></tr>
	</tfoot>
	<tbody>
		<tr><td>ํ™ฉ๊ธฐํƒœ</td><td>80</td><td>70</td></tr>
		<tr><td>์ด์žฌ๋ฌธ</td><td>95</td><td>99</td></tr>
	<tbody>
</table>
</body>
</html>

 

fig5-15.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํ‘œ ํ…Œ๋‘๋ฆฌ</title>
<style>
table {
	border: 1px solid blue;
	border-collapse: collapse; /* ํ…Œ๋‘๋ฆฌ ํ•ฉ์น˜๊ธฐ */
}
td, th {
	border: 1px dotted green
}
</style>
</head>
<body>
<h3>1ํ•™๊ธฐ ์„ฑ์ </h3>
<hr>
<table>
	<thead>
		<tr><th>์ด๋ฆ„</th><th>HTML</th><th>CSS</th></tr>
	</thead>
	<tfoot>
		<tr><th>ํ•ฉ</th><th>175</th><th>169</th></tr>
	</tfoot>
	<tbody>
		<tr><td>ํ™ฉ๊ธฐํƒœ</td><td>80</td><td>70</td></tr>
		<tr><td>์ด์žฌ๋ฌธ</td><td>95</td><td>99</td></tr>
	</tbody>
</table>
</body>
</html>

 

fig5-16.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํ‘œ ํ…Œ๋‘๋ฆฌ</title>
<style>
th {
	height: 40px;
	width: 100px;
}
td {
	height: 20px;
	width: 100px;
}
table {
	border: 1px solid blue;
}
td, th {
	border: 1px dotted green
}
</style>
</head>
<body>
<h3>1ํ•™๊ธฐ ์„ฑ์ </h3>
<hr>
<table>
	<thead>
		<tr><th>์ด๋ฆ„</th><th>HTML</th><th>CSS</th></tr>
	</thead>
	<tfoot>
		<tr><th>ํ•ฉ</th><th>175</th><th>169</th></tr>
	</tfoot>
	<tbody>
		<tr><td>ํ™ฉ๊ธฐํƒœ</td><td>80</td><td>70</td></tr>
		<tr><td>์ด์žฌ๋ฌธ</td><td>95</td><td>99</td></tr>
	</tbody>
</table>
</body>
</html>

 

fig5-17.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํ‘œ ํ…Œ๋‘๋ฆฌ</title>
<style>
thead th {
	height: 40px;
	width: 100px;
}
td, th {
	height: 20px;
	width: 100px;
}
table {
	border: 1px solid blue;
}
td, th {
	border: 1px dotted green
}
</style>
</head>
<body>
<h3>1ํ•™๊ธฐ ์„ฑ์ </h3>
<hr>
<table>
	<thead>
		<tr><th>์ด๋ฆ„</th><th>HTML</th><th>CSS</th></tr>
	</thead>
	<tfoot>
		<tr><th>ํ•ฉ</th><th>175</th><th>169</th></tr>
	</tfoot>
	<tbody>
		<tr><td>ํ™ฉ๊ธฐํƒœ</td><td>80</td><td>70</td></tr>
		<tr><td>์ด์žฌ๋ฌธ</td><td>95</td><td>99</td></tr>
	</tbody>
</table>
</body>
</html>

 

fig5-18.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํ‘œ</title>
<style>
table {
	border: 1px solid blue;
}
td, th {
	border: 1px dotted green;
	height: 20px; width: 100px;
	padding: 10px;
	text-align: right
}
</style>
</head>
<body>
<h3>1ํ•™๊ธฐ ์„ฑ์ </h3>
<hr>
<table>
	<thead>
		<tr><th>์ด๋ฆ„</th><th>HTML</th><th>CSS</th></tr>
	</thead>
	<tfoot>
		<tr><th>ํ•ฉ</th><th>175</th><th>169</th></tr>
	</tfoot>
	<tbody>
		<tr><td>ํ™ฉ๊ธฐํƒœ</td><td>80</td><td>70</td></tr>
		<tr><td>์ด์žฌ๋ฌธ</td><td>95</td><td>99</td></tr>
	</tbody>
</table>
</body>
</html>

 

fig5-19.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํ‘œ</title>
<style>
table { /* ์ด์ค‘ ํ…Œ๋‘๋ฆฌ ์ œ๊ฑฐ */
	border-collapse: collapse;
}
td, th { /* ๋ชจ๋“  ์…€์— ์ ์šฉ */
	text-align : left;
	padding: 10px;
	height: 20px;
	width: 100px;
}
thead { /* <thead>์˜ ๋ชจ๋“  ์…€์— ์ ์šฉ */
	background : darkgray;
	color : yellow;
}
td, tfoot th { /* ์•„๋ž˜์ชฝ ํ…Œ๋‘๋ฆฌ๋งŒ ํšŒ์ƒ‰์œผ๋กœ */
	border-bottom: 1px solid gray;
}
</style>
</head>
<body>
<h3>1ํ•™๊ธฐ ์„ฑ์ </h3>
<hr>
<table>
	<thead>
		<tr><th>์ด๋ฆ„</th><th>HTML</th><th>CSS</th></tr>
	</thead>
	<tfoot>
		<tr><th>ํ•ฉ</th><th>175</th><th>169</th></tr>
	</tfoot>
	<tbody>
		<tr><td>ํ™ฉ๊ธฐํƒœ</td><td>80</td><td>70</td></tr>
		<tr><td>์ด์žฌ๋ฌธ</td><td>95</td><td>99</td></tr>
	</tbody>
</table>
</body>
</html>

 

fig5-20.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํ‘œ</title>
<style>
table { /* ์ด์ค‘ ํ…Œ๋‘๋ฆฌ ์ œ๊ฑฐ */
	border-collapse: collapse;
}
td, th { /* ๋ชจ๋“  ์…€์— ์ ์šฉ */
	text-align : left;
	padding: 5px;
	height: 15px; width: 100px;
}

thead, tfoot { /* <thead>์˜ ๋ชจ๋“  ์…€์— ์ ์šฉ */
	background : darkgray;
	color : yellow;
}
tbody tr:nth-child(odd) { /* ์ง์ˆ˜ <tr>์— ์ ์šฉ odd ํ™€์ˆ˜๋„ ์ ์šฉ๊ฐ€๋Šฅ*/
	background: #6699ff;
}
</style>
</head>
<body>
<h3>1ํ•™๊ธฐ ์„ฑ์ </h3>
<hr>
<table>
	<thead>
		<tr><th>์ด๋ฆ„</th><th>HTML</th><th>CSS</th></tr>
	</thead>
	<tfoot>
		<tr><th>ํ•ฉ</th><th>310</th><th>249</th></tr>
	</tfoot>
	<tbody>
		<tr><td>ํ™ฉ๊ธฐํƒœ</td><td>80</td><td>70</td></tr>
		<tr><td>์ด์žฌ๋ฌธ</td><td>95</td><td>99</td></tr>
		<tr><td>์ด๋ณ‘์€</td><td>85</td><td>90</td></tr>
		<tr><td>๊น€๋‚จ์œค</td><td>50</td><td>40</td></tr>
	</tbody>
</table>
</body>
</html>

 

fig5-25.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์• ๋‹ˆ๋ฉ”์ด์…˜</title>
<style>
@keyframes textColorAnimation {
	0% {  color : blue;}
	30% {  color : green;}
	100% { color : red;}
}
span {
	font-family : "arial black";
	animation-name: textColorAnimation;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}
</style>
</head>
<body>
<!--  <h3>ํ…์ŠคํŠธ ์ƒ‰ ์• ๋‹ˆ๋ฉ”์ด์…˜</h3>
<hr> -->
<p><span>span</span> ํ…์ŠคํŠธ๋ฅผ
5์ดˆ์— blue, green, red๋กœ
๋ฌดํ•œ ๋ฐ˜๋ณตํ•ฉ๋‹ˆ๋‹ค.</p>
</body>
</html>

'IT > HTML' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[33์ผ์ฐจ] js01  (0) 2022.08.04
[33์ผ์ฐจ] 6์žฅ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด  (0) 2022.08.04
[33์ผ์ฐจ] HTML  (0) 2022.08.04
[32์ผ์ฐจ] 4์žฅ CSS3๋กœ ์›น ํŽ˜์ด์ง€ ๊พธ๋ฏธ๊ธฐ  (0) 2022.08.03
[32์ผ์ฐจ] 3๊ฐ• HTML5 ๋ฌธ์„œ ๊ตฌ์กฐํ™”์™€ ์›น ํผ  (0) 2022.08.03

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”