๐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><span>๋ฅผ 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><div>๋ฅผ 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><span>๋ฅผ 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 |
๋๊ธ