Notice
Recent Posts
Recent Comments
Link
ยซ   2024/09   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
๊ด€๋ฆฌ ๋ฉ”๋‰ด

Tech Log ๐Ÿ› ๏ธ

[WEB] html,css ์ด์šฉํ•œ ํŽ˜์ด์ง€ ๊ตฌํ˜„ - 1 ๋ณธ๋ฌธ

WEB(html,css,js)

[WEB] html,css ์ด์šฉํ•œ ํŽ˜์ด์ง€ ๊ตฌํ˜„ - 1

sehaan 2023. 3. 30. 00:40

์ž„๋ฒ ๋””๋“œ IOT ์ˆ˜์—… ์ค‘ ์ง„ํ–‰ ๋œ ์‹ค์Šต ๋‚ด์šฉ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ œ์ž‘ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

(์ฐธ๊ณ ์ž๋ฃŒ : ๋ช…ํ’ˆ HTML5+CSS3+Javascript ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ, ์ƒ๋Šฅ์ถœํŒ์‚ฌ)

 

1. ๋ฒ„ํŠผ ํŽ˜์ด์ง€

์ฝ”๋“œ

๋”๋ณด๊ธฐ
<!DOCTYPE html>
<!-- HTML ์„ ์–ธ -->
<html>
<head>
<title>๋ฒ„ํŠผ์„ ๋งŒ๋“ค์ž</title>
<!-- ํŽ˜์ด์ง€ ํƒ€์ดํ‹€ ์„ ์–ธ -->
</head>
<body>
<h3>๋ฒ„ํŠผ์„ ๋งŒ๋“ค์ž</h3>
<hr>
<form>
<input type="button" value="1">
<!-- ๋ฒ„ํŠผ ์‚ฝ์ž… -->
&nbsp<input type="button" value="2">
<!-- ๊ณต๋ฐฑ ์ถ”๊ฐ€ ํ›„ ํ›„ ๋ฒ„ํŠผ ์‚ฝ์ž… -->
&nbsp<input type="button" value="3"><br>
<!-- ์ค„ ๋ฐ”๊ฟˆ ํ›„ ๋‹ค์‹œ ๋ฒ„ํŠผ ์‚ฝ์ž… -->
<!-- ์ดํ•˜ ๋™์ผํ•œ ๋ฐฉ์‹์œผ๋กœ ๋ฒ„ํŠผ ์‚ฝ์ž… -->
<input type="button" value="4">
&nbsp<input type="button" value="5">
&nbsp<input type="button" value="6"><br>
<input type="button" value="7">
&nbsp<input type="button" value="8">
&nbsp<input type="button" value="9">
</form>
</body>
</html>

 

 

2. ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ ๊ตฌ๋ถ„ ํŽ˜์ด์ง€

์ฝ”๋“œ

๋”๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head><title>HTML5 ๋ฌธ์„œ ๊ตฌ์กฐ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ ์‚ฌ์šฉ</title>
<style>
html, body { margin: 0; padding: 0; height: 100%; }
/* html , body ํƒœ๊ทธ์— ์†์„ฑ css ์†์„ฑ ์ ์šฉ
margin : 0 -> ํ…Œ๋‘๋ฆฌ์™€ ์š”์†Œ ์‚ฌ์ด ๊ฐ„๊ฒฉ ์„ค์ • , 0์ด๋ฏ€๋กœ ๊ฐ„๊ฒฉ ์—†์Œ
padding : 0 -> ํ…Œ๋‘๋ฆฌ์™€ ๋‚ด์šฉ ์‚ฌ์ด ๊ฐ„๊ฒฉ ์„ค์ •, 0์ด๋ฏ€๋กœ ๊ฐ„๊ฒฉ ์—†์Œ
heigh : 100% -> ์š”์†Œ์˜ ๋†’์ด๋ฅผ 100%๋กœ ์„ค์ •
*/

 

.header { width: 100%; height: 15%;
background: yellow; }
/*
ํ—ค๋” ํด๋ž˜์Šค width(ํญ) 100% ์„ค์ • , ๋†’์ด 15% ์„ค์ • , ์ƒ‰์ƒ ๋…ธ๋ž€์ƒ‰์œผ๋กœ ์ง€์ •
*/

 

.nav { width: 15%; height: 70%; float: left;
background: orange; }
/*
nav ํด๋ž˜์Šค width(ํญ) 15% ์„ค์ • , ๋†’์ด 70% ์„ค์ • , ์ƒ‰์ƒ ์ฃผํ™ฉ์ƒ‰์œผ๋กœ ์ง€์ •
float ์†์„ฑ์„ ํ†ตํ•ด ์š”์†Œ ์™ผ์ชฝ ์ •๋ ฌ
*/

 

.section { width: 70%; height: 70%; float: left;
background: olivedrab; }
/*
section ํด๋ž˜์Šค width(ํญ) 70% ์„ค์ • , ๋†’์ด 70% ์„ค์ • , ์ƒ‰์ƒ oliverab์œผ๋กœ ์ง€์ •
float ์†์„ฑ์„ ํ†ตํ•ด ์š”์†Œ ์™ผ์ชฝ ์ •๋ ฌ
*/

 

.aside { width: 15%; height: 70%; float: left;
background: orange; }
/*
aside ํด๋ž˜์Šค width(ํญ) 15% ์„ค์ • , ๋†’์ด 70% ์„ค์ • , ์ƒ‰์ƒ orange์œผ๋กœ ์ง€์ •
float ์†์„ฑ์„ ํ†ตํ•ด ์š”์†Œ ์™ผ์ชฝ ์ •๋ ฌ
*/

 

.footer { width: 100%; height: 15%; clear: both;
background: plum; }
/*
footer ํด๋ž˜์Šค width(ํญ) 100% ์„ค์ • , ๋†’์ด 15% ์„ค์ • , ์ƒ‰์ƒ plum์œผ๋กœ ์ง€์ •
*/
</style>
</head>
<!-- ์Šคํƒ€์ผ , ํ—ค๋“œ ํƒœ๊ทธ ์ข…๋ฃŒ-->
<body>
<header class="header">header</header>
<!-- ํ—ค๋” ํด๋ž˜์Šค ์ž…๋ ฅ -->
<nav class="nav">nav</nav>
<!-- nav ํด๋ž˜์Šค ์ž…๋ ฅ -->
<section class="section">section</section>
<!-- section ํด๋ž˜์Šค ์ž…๋ ฅ -->
<aside class="aside">aside</aside>
<!-- aside ํด๋ž˜์Šค ์ž…๋ ฅ -->
<footer class="footer">footer</footer>
<!-- footer ํด๋ž˜์Šค ์ž…๋ ฅ -->
</body>
</html>

 

3. ๋กœ๊ทธ์ธ ํผ ๊ตฌํ˜„

์ฝ”๋“œ

๋”๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋กœ๊ทธ์ธ ํผ ๋งŒ๋“ค๊ธฐ</title>
</head>
<!-- ํ—ค๋“œ ํƒœ๊ทธ ์ข…๋ฃŒ ๋ฐ ํƒ€์ดํ‹€ ์„ ์–ธ -->
<body>
<h3>๋กœ๊ทธ์ธ ํผ</h3>
<hr>
<form>
<!-- ์ž…๋ ฅํผ์„ ์ƒ์„ฑํ•œ๋‹ค. -->
<fieldset>
<!-- ์š”์†Œ๋ฅผ ๋ฌถ์–ด์ฃผ๊ณ  ๋ฐ•์Šค ํ…Œ๋‘๋ฆฌ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. -->
<legend> Login </legend>
<!-- ์บก์…˜์„ ์ •์˜ํ•œ๋‹ค. -->
<label>Username <input type="text" size="15"></label>&nbsp;
<!-- ์ž…๋ ฅ์ฐฝ์˜ ์บก์…˜์„ ๋ผ๋ฒจ ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ์ •์˜ํ•œ๋‹ค.
์ž…๋ ฅ๊ฐ’์˜ ์†์„ฑ์€ text์ด๊ณ  ์ตœ๋Œ€ ๊ธธ์ด๋Š” 15์ด๋‹ค.
-->
<label>Password <input type="password" size="15"></label>
<!-- ์ž…๋ ฅ์ฐฝ์˜ ์บก์…˜์„ ๋ผ๋ฒจ ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ์ •์˜ํ•œ๋‹ค.
์ž…๋ ฅ๊ฐ’์˜ ์†์„ฑ์€ ํŒจ์Šค์›Œ๋“œ์ด๊ณ  ์ตœ๋Œ€ ๊ธธ์ด๋Š” 15์ด๋‹ค.
-->
</fieldset>
</form>
<!-- ํผ์„ ๋‹ซ๋Š”๋‹ค. -->
</body>
</html>

 

4. details ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•œ ์ •๋ณด ํŽ˜์ด์ง€

์ฝ”๋“œ

๋”๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<title>์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐœ์š”</title></head>
<body>
<h1>์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐœ์š”</h1>
<hr>
<details>
<!-- detail : ์ƒ์„ธ ์ •๋ณด๋ฅผ ๋‹ด๋Š” ์‹œ๋งจํ‹ฑ ๋ธ”๋ก ํƒœ๊ทธ -->
<summary>์›น์˜ ๊ธฐ๋ณธ ๋ชฉ์ </summary>
<!-- summary : ๋ธ”๋ก์˜ ์ฒด๋ชฉ ํ‘œํ˜„ -->
<p>์›น์˜ ๊ธฐ๋ณธ ๋ชฉ์ ์€ ํ•œ ์ปดํ“จํ„ฐ์—์„œ ๋งŒ๋“  ๋ฌธ์„œ(document)๋ฅผ ๋‹ค๋ฅธ ์ปดํ“จํ„ฐ์—์„œ ์‰ฝ๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.</p>
<!-- ๋ฌธ๋‹จ ํƒœ๊ทธ ์ƒ์„ฑ -->
</details>
<details>
<!-- detail : ์ƒ์„ธ ์ •๋ณด๋ฅผ ๋‹ด๋Š” ์‹œ๋งจํ‹ฑ ๋ธ”๋ก ํƒœ๊ทธ -->
<summary>์™œ Web์ธ๊ฐ€?</summary>
<!-- summary : ๋ธ”๋ก์˜ ์ฒด๋ชฉ ํ‘œํ˜„ -->
<p>์ „ ์„ธ๊ณ„์˜ ์ปดํ“จํ„ฐ๋“ค์„ ์ธํ„ฐ๋„ท์œผ๋กœ ๊ฑฐ๋ฏธ์ค„์ฒ˜๋Ÿผ ์—ฐ๊ฒฐํ•˜๊ณ  ์›น ๋ฌธ์„œ๋ฅผ ์‰ฝ๊ฒŒ ์ฃผ๊ณ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ์‹œ์Šคํ…œ์„ ๋งŒ๋“ค๊ณ  WWW(World Wide Web) ๊ฐ„๋‹จํžˆ ์ค„์—ฌ ์›น(Web)์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.</p>
<!-- ๋ฌธ๋‹จ ํƒœ๊ทธ ์ƒ์„ฑ -->
</details>
 
<details>
<!-- detail : ์ƒ์„ธ ์ •๋ณด๋ฅผ ๋‹ด๋Š” ์‹œ๋งจํ‹ฑ ๋ธ”๋ก ํƒœ๊ทธ -->
<summary>์›น ํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” 3 ์š”์†Œ</summary>
<!-- summary : ๋ธ”๋ก์˜ ์ฒด๋ชฉ ํ‘œํ˜„ -->
<p>
<ul>
<li>HTML - ๋ฌธ์„œ์˜ ๊ตฌ์กฐ์™€ ๋‚ด์šฉ
<li>CSS(Cascading Style Sheet) - ๋ฌธ์„œ์˜ ๋ชจ์–‘
<li>Javascript - ํ–‰๋™ ๋ฐ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ
</ul>
</p>
<!-- ๋ฌธ๋‹จ ํƒœ๊ทธ๋ฅผ ์ƒ์„ฑ ํ•œ ๋’ค ์ˆœ์„œ ์—†๋Š” ๋ฆฌ์ŠคํŠธ๋ฅผ ์‚ฝ์ž…ํ•œ๋‹ค. -->
</details>
<!-- ๋””ํ…Œ์ผ ํƒœ๊ทธ๋ฅผ ๋‹ซ๋Š”๋‹ค. -->
</body>
</html>

 

5. ์ƒํ’ˆ ์ฃผ๋ฌธ ํผ

์ฝ”๋“œ

๋”๋ณด๊ธฐ
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>์ฃผ๋ฌธ์„œ ์ž‘์„ฑํ•˜๊ธฐ</title>
<style>
.container {
width:600px;
margin: 100px auto;
}
/*
์ปจํ…Œ์ด์„œ ํด๋ž˜์Šค css ์†์„ฑ ์„ค์ •
ํญ 600 px ,
marigin: 0 auto -> ์ค‘์•™ ์ •๋ ฌ
*/
ul {
list-style-type: none;
}
/*
์ˆœ์„œ์—†๋Š” ๋ฆฌ์ŠคํŠธ ์ถœ๋ ฅ ๋ฐฉ์‹ ์„ค์ •
: ๋ถˆ๋ › ์ถœ๋ ฅ ์•ˆํ•จ
*/
label.title {
font-weight: bold;
width: 80px;
float: left;
}
/*
๋ผ๋ฒจ ์†์„ฑ ์„ค์ • (๋ณผ๋“œ์ฒด , ํญ 80 , ์™ผ์ชฝ ์ •๋ ฌ)
*/
div.centered {
text-align: center;
}
/*
divํƒœ๊ทธ์˜ centered ํด๋ž˜์Šค css ์†์„ฑ ์ง€์ •
: ํ…์ŠคํŠธ ๊ฐ€์šด๋ฐ ์ง€์ •
*/
fieldset {
margin: 15px 20px;
}
/*
ํ•„๋“œ์…‹ ํƒœ๊ทธ ์†์ • ์ง€์ •
: ์ƒํ•˜ ๋งˆ์ง„ : 15px
: ์ขŒ์šฐ ๋งˆ์ง„ : 20px
*/
fieldset legend {
font-weight: bold;
font-size: 18px;
color: purple;
}
/*
ํ•„๋“œ์…‹์˜ ์บก์…˜(legend) ํƒœ๊ทธ css ์†์„ฑ ์„ค์ •(๋ณผ๋“œ์ฒด,ํฐํŠธ 18px ,์ƒ‰๊น” ๋ณด๋ผ์ƒ‰)
*/
ul li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<!--
ํด๋ž˜์Šค๋ฅผ "container"๋กœ ์ง€์ •
css ์†์„ฑ ์ ์šฉ
-->
<h1>์ƒํ’ˆ ์ฃผ๋ฌธ์„œ</h1>
<form>
<!-- ์ž…๋ ฅํผ ์‚ฝ์ž„ -->
<fieldset>
<!-- ์ž…๋ ฅํผ ์บก์…˜ ์‚ฝ์ž… -->
<legend>๊ฐœ์ธ ์ •๋ณด</legend>
<!-- ํ•„๋“œ์…‹ ์บก์…˜ ์‚ฝ์ž… -->
<ul>
<li>
<label for="uname" class="title">์ด๋ฆ„</label>
<input type="text" id="uname" placeholder="์—ฌ๋ฐฑ์—†์ด ์ž…๋ ฅ" required>
<!--
text ์†์„ฑ : ๊ธ€์ž
-->
</li>
<li>
<label for="tel1" class="title">์—ฐ๋ฝ์ฒ˜</label>
<input type="tel" id="tel1" placeholder="์—ฐ๋ฝ๊ฐ€๋Šฅํ•œ ๋ฒˆํ˜ธ">
<!--
tel ์†์„ฑ : ์ „ํ™”๋ฒˆํ˜ธ
-->
</li>
<!--
๋ฆฌ์ŠคํŠธ๋กœ ์ž…๋ ฅ ํผ ์‚ฝ์ž… ํ›„ ๋ผ๋ฒจ ์ง€์ •
placeholde๋กœ ๊ธฐ๋ณธ๊ฐ’ ์„ค์ •
-->
</ul>
</fieldset>
<fieldset>
<legend>๋ฐฐ์†ก์ง€ ์ •๋ณด</legend>
<ul>
<li>
<label for="addr" class="title">์ฃผ์†Œ</label>
<input type="text" size="40" id="addr" required>
</li>
<li>
<label for="tel2" class="title">์ „ํ™”๋ฒˆํ˜ธ</label>
<input type="tel" id="tel2" required>
</li>
<li>
<label for="comment" class="title">๋ฉ” ๋ชจ</label>
<textarea cols="40" rows="3" id="comment"></textarea>
</li>
<!--
๋ฆฌ์ŠคํŠธ๋กœ ์ž…๋ ฅ ํผ ์‚ฝ์ž… ํ›„ ๋ผ๋ฒจ ์ง€์ •
-->
</ul>
</fieldset>
<fieldset>
<legend>์ฃผ๋ฌธ ์ •๋ณด</legend>
<ul>
<li>
<label><input type="checkbox">๊ณผํ…Œ๋ง๋ผ ์•ˆํ‹ฐ๊ตฌ์•„ (100g) </label>
<label><input type="number" value="0" min="0" max="5">๊ฐœ </label>
</li>
<li>
<label><input type="checkbox">์ธ๋„๋„ค์‹œ์•„ ๋งŒ๋ธ๋ง (100g) </label>
<label><input type="number" value="0" min="0" max="5">๊ฐœ </label>
</li>
<li>
<label><input type="checkbox">ํƒ๋ผ๋Š”๋„๋‹ค(๋ธ”๋ Œ๋”ฉ) (100g) </label>
<label><input type="number" value="0" min="0" max="5">๊ฐœ </label>
</li>
<!--
๋ฆฌ์ŠคํŠธ๋กœ ์ž…๋ ฅ ํผ ์‚ฝ์ž… ํ›„ ๋ผ๋ฒจ ์ง€์ •
์ž…๋ ฅ๊ฐ’ ์ฒดํฌ๋ฐ•์Šค๋กœ ์„ค์ •
-->
</ul>
</fieldset>
<div class="centered">
<input type="submit" value="์ฃผ๋ฌธํ•˜๊ธฐ">
<input type="reset" value="๋‹ค์‹œ ์ž‘์„ฑ">
</div>
</form>
</div>
</body>
</html>

 

6.๋„ํ˜• ์„œ์‹ ํผ

์ฝ”๋“œ

๋”๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋„ํ˜• ์„œ์‹ ํผ ๋งŒ๋“ค๊ธฐ</title>
</head>
<body>
<h3>๋„ํ˜• ์„œ์‹ ํผ ๋งŒ๋“ค๊ธฐ</h3>
<hr>
<form>
<fieldset>
<legend>๋„ํ˜• ์„œ์‹ ์ž…๋ ฅ</legend>
<label>์„ ์ข…๋ฅ˜ <select size=3>
<option>์„ ์—†์Œ</option>
<option>์‹ค์„ </option>
<option>์ ์„ </option>
</select>
<!--
select ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ๋“œ๋กญ๋‹ค์šด ๋ฆฌ์ŠคํŠธ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
size ์†์„ฑ์„ ํ†ตํ•ด 3๊ฐœ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ด ๊ฐ’์€ option ํƒœ๊ทธ๋กœ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
-->
</label><br><br>
 
<label>์„ ๋‘๊ป˜ <input type="number" min="1" max="50" step="1"></label>
<!--
๋ผ๋ฒจ๊ฐ’์„ ์‚ฝ์ž…ํ•˜๊ณ  ์ž…๋ ฅ๊ฐ’ ํƒ€์ž…์„ ์ˆซ์ž๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
-->
 
<label>์„ ์ƒ‰ <input type="color" value="#00bfff"></label><br><br>
<!--
์ž…๋ ฅ๊ฐ’ ํƒ€์ž…์„ ์ƒ‰์ƒ์œผ๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ์ƒ‰์ƒ์€ #00bfff ๋กœ ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค.
-->
<label>ํˆฌ๋ช…๋„(0~100) : <input type="range" list="transparency" min="0" max="100">
<!--
์ž…๋ ฅ๊ฐ’์„ ๋ฒ”์œ„๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ์ตœ์†Œ๋Š” 0 , ์ตœ๋Œ€๋Š” 100
list์†์„ฑ์„ ํ†ตํ•ด ์˜ต์…˜๋“ค์„ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š” datalist ์š”์†Œ๋“ค์„ ๋ช…์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
-->
 
<datalist id="transparency">
<option value="0" label="ํˆฌ๋ช…">
<option value="50" label="์ค‘๊ฐ„">
<option value="100" label="๋ถˆํˆฌ๋ช…">
 
</datalist></label><br>
<!--
์˜ต์…˜๋“ค์„ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š” datalist ์˜ต์…˜๊ฐ’๋ฆฌ์ŠคํŠธ์ž…๋‹ˆ๋‹ค.
-->
</fieldset>
</form>
</body>
</html>

 

7. bgm ๋ฐ ๋งํฌ ์‚ฝ์ž… ํŽ˜์ด์ง€ ๊ตฌํ˜„

์ฝ”๋“œ - ๋ฉ”์ธ ํŽ˜์ด์ง€

๋”๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: square;
}
</style>
<audio src="media/music.mp3" autoplay loop></audio>
<!--
๋ฐฐ๊ฒฝ์Œ์•…์„ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.
-->
<title>์ปดํ“จํ„ฐ ๊ธฐ์ˆ  ์†Œ๊ฐœ</title>
</head>
<body>
<header>
<h2>์Šค๋งˆํŠธํฐ</h2>
์Šค๋งˆํŠธํฐ์€ ์ปดํ“จํ„ฐ๋ฅผ ๊ฒฐํ•ฉํ•œ ๋ฌด์„  ํœด๋Œ€์ „ํ™”๊ธฐ์ด๋‹ค. PC์—์„œ ์‹คํ–‰๋˜๋Š” ์šด์˜์ฒด์ œ๋ณด๋‹ค ์ž‘๊ฒŒ ๋งŒ๋“  ๋ชจ๋ฐ”์ผ ์šด์˜์ฒด์ œ๋ฅผ ํƒ‘์žฌํ•˜์—ฌ ์ธํ„ฐ๋„ท ๊ฒ€์ƒ‰, ์ „์ž์šฐํŽธ, ๊ฐ„๋‹จํ•œ ๋ฌธ์„œ ํŽธ์ง‘, ์นด๋ฉ”๋ผ, ์˜ค๋””์˜ค ๋ฐ ๋น„๋””์˜ค ์žฌ์ƒ ๋“ฑ PC์˜ ๊ธฐ๋Šฅ์„ ๊ฑฐ์˜ ๋ชจ๋‘ ๊ฐ–์ถ”๊ณ  ์žˆ๋‹ค.
</header>
<!--
ํ—ค๋” ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ ๋‚ด์— ๋จธ๋ฆฟ๋ง์„ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.
-->
<nav>
<h3>๋ชฉ์ฐจ</h3>
<ul>
<li><a href="#a">์—ญ์‚ฌ
<li><a href="#b">์•ˆ๋“œ๋กœ์ด๋“œํฐ
<li><a href="#c">์•„์ดํฐ
<li><a href="#d">์ƒ˜ํ”Œ
</ul>
<!--
navํƒœ๊ทธ ๋‚ด์— ๋งํฌ ๋ฆฌ์ŠคํŠธ๋“ค์„ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.
-->
</nav>
 
<section>
<article>
<h3 id="a"><a href="https://ko.wikipedia.org/wiki/%EC%8A%A4%EB%A7%88%ED%8A%B8%ED%8F%B0" target="_blank">์—ญ์‚ฌ</a></h3>
์ตœ์ดˆ์˜ ์Šค๋งˆํŠธํฐ์€ ์‚ฌ์ด๋จผ(Symon)์œผ๋กœ ์ถ”์ •๋œ๋‹ค. IBM์‚ฌ๊ฐ€ 1992๋…„์— ์„ค๊ณ„ํ•˜์—ฌ ๊ทธ ํ•ด์— ๋ฏธ๊ตญ ๋„ค๋ฐ”๋‹ค ์ฃผ์˜ ๋ผ์Šค๋ฒ ๊ฐ€์Šค์—์„œ
์—ด๋ฆฐ ์ปด๋Œ์Šค์—์„œ ์ปจ์…‰ ์ œํ’ˆ์œผ๋กœ ์ „์‹œ๋˜์—ˆ๋‹ค
</article>
<!--
๋ณธ๋ฌธ์„ ์‚ฝ์ž…ํ•˜๊ณ  href ์†์„ฑ์„ ํ†ตํ•ด ๋งํฌ๋ฅผ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.
target="_blank" ์†์„ฑ์€ ํ•ด๋‹น ๋งํฌ ํด๋ฆญ์‹œ ๊ณ„์™ํ•ด์„œ ์ƒˆ๋กœ์šด ์ฐฝ์ด ์—ด๋ฆฌ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.
-->
<article>
<h3 id="b"><a href="https://ko.wikipedia.org/wiki/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C_(%EC%9A%B4%EC%98%81_%EC%B2%B4%EC%A0%9C)" target="_blank">์•ˆ๋“œ๋กœ์ด๋“œ</a></h3>
์•ˆ๋“œ๋กœ์ด๋“œ(์˜์–ด: Android)๋Š” ํœด๋Œ€ ์ „ํ™”๋ฅผ ๋น„๋กฏํ•œ ํœด๋Œ€์šฉ ์žฅ์น˜๋ฅผ ์œ„ํ•œ ์šด์˜ ์ฒด์ œ์™€ ๋ฏธ๋“ค์›จ์–ด, ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๊ทธ๋ฆฌ๊ณ  ํ‘œ์ค€ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ(์›น ๋ธŒ๋ผ์šฐ์ €, ์ด๋ฉ”์ผ ํด๋ผ์ด์–ธํŠธ, ๋‹จ๋ฌธ ๋ฉ”์‹œ์ง€ ์„œ๋น„์Šค(SMS), ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ๋ฉ”์‹œ์ง€ ์„œ๋น„์Šค(MMS)๋“ฑ)์„ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š” ์†Œํ”„ํŠธ์›จ์–ด ์Šคํƒ์ด์ž ๋ชจ๋ฐ”์ผ ์šด์˜ ์ฒด์ œ์ด๋‹ค.
</article>
<article>
<h3 id="c"><a href="https://ko.wikipedia.org/wiki/%EC%95%84%EC%9D%B4%ED%8F%B0" target="_blank">์•„์ดํฐ</a></h3>
์•„์ดํฐ(์˜์–ด:iphone)์€ 2007๋…„ 1์›” 9์ผ, ์• ํ”Œ์ด ๋ฐœํ‘œํ•œ ํœด๋Œ€ ์ „ํ™” ์‹œ๋ฆฌ์ฆˆ์ด๋‹ค. ๋ฏธ๊ตญ ์ƒŒํ”„๋ž€์‹œ์Šค์ฝ”์—์„œ ์—ด๋ฆฐ ๋งฅ์›”๋“œ 2007์—์„œ ์• ํ”Œ์˜ ์ฐฝ์—…์ž ์ค‘ ํ•œ๋ช…์ธ ์Šคํ‹ฐ๋ธŒ ์žก์Šค๊ฐ€ ๋ฐœํ‘œํ–ˆ๋‹ค.
</article>
<article>
<h3 id="d">์ƒ˜ํ”Œ</h3>
<table>
<caption>์Šค๋งˆํŠธํฐ์ƒ˜ํ”Œ</caption>
<tbody>
<tr>
<td><img src="media/img1.jpg" width="200" height="200">
<td><img src="media/img2.jpeg">
<td><img src="media/img3.jpeg">
 
</tr>
</tbody>
</table>
</article>
 
</section>
<!--
์žฅ์„ ๊ตฌ์„ฑํ•˜๋Š” section ํƒœ๊ทธ ๋‚ด์— article ํƒœ๊ทธ๋ฅผ ์‚ฝ์ž…ํ•จ์œผ๋กœ์จ ๋ณธ๋ฌธ์„ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค.
-->
<footer>
<br>
<a href="hw007_1.html" target="_blank">์„ค๋ฌธ์กฐ์‚ฌ</a>
<br><br>
Copyright 2023 by OSH
</footer>
<!--
footer ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ๊ผฌ๋ฆฌ๋ง›์„ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.
-->
</body>
</html>

 

์ฝ”๋“œ- ์„ค๋ฌธ์กฐ์‚ฌ ํŽ˜์ด์ง€

๋”๋ณด๊ธฐ
<!DOCTYPE html>
<html>
<head>
<title>์„ค๋ฌธ์ง€</title>
</head>
<h1>์„ค๋ฌธ์ง€</h1>
<body>
์†Œํ”„ํŠธ์›จ์–ด ๊ธฐ์ˆ ์— ๋Œ€ํ•œ ์˜๊ฒฌ์„ ๋“ฃ์Šต๋‹ˆ๋‹ค. ๋งŽ์€ ์ฐธ์—ฌ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.
<br><br>
<hr>
<br>
<form>
ํ•™๋…„ <input type="radio" name="china" value="1" checked>1ํ•™๋…„
<input type="radio" name="china" value="2">2ํ•™๋…„
<input type="radio" name="china" value="3">3ํ•™๋…„
<input type="radio" name="china" value="4">4ํ•™๋…„
</form>
<!--
ํผ์„ ์‚ฝ์ž…ํ•˜๊ณ  ๊ทธ ์•ˆ์— ์ž…๋ ฅ๊ฐ’๋“ค์„ ๋„ฃ์Šต๋‹ˆ๋‹ค.
-->
<br>
 
์„ฑ๋ณ„
<input type="radio" name="" value="1">๋‚จ
<input type="radio" name="china" value="1">์—ฌ
<br><br>
<form>
๊ด€์‹ฌ ๋ถ„์•ผ <input type="text" name="country" list="countries"><br>
<datalist id="countries">
<option value="์ž„๋ฒ ๋””๋“œ">
<option value="๋ชจ๋ฐ”์ผ ์†Œํ”„ํŠธ์›จ์–ด">
<option value="์›น ์†Œํ”„ํŠธ์›จ์–ด">
</datalist><br>
<!--
list์†์„ฑ์„ ํ†ตํ•ด ์˜ต์…˜๋“ค์„ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š” datalist ์š”์†Œ๋“ค์„ ๋ช…์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ด ์ฝ”๋“œ์—์„œ๋Š” contries ๋ผ๋Š” ๋ฐ์ดํ„ฐ ๋ฆฌ์ŠคํŠธ ์š”์†Œ๋“ค์„ ๋ช…์‹œํ•ฉ๋‹ˆ๋‹ค.
-->
<form>์ง„๋กœ <input type="checkbox" value="1" checked>๊ฐœ๋ฐœ
<input type="checkbox" value="2">๊ธฐํš
<input type="checkbox" value="3">์˜์—…
<input type="checkbox" value="3">์ฐฝ์—…
</form><br>
 
๋‚จ๊ธฐ๊ณ  ์‹ถ์€ ๋ง<form><textarea cols="60" rows="10">๊ธ€์„ ๋‚จ๊ฒจ ์ฃผ์„ธ์š”.</textarea></form><br>
<!--
textarea ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ๊ธ€ ์ƒ์ž๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
-->
Copyright 2023 by OSH
</body>
</html>

 

์ €์ž‘์žํ‘œ์‹œ

'WEB(html,css,js)' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

html & css ๊ธฐ์ดˆ ๊ฐœ๋… ์ •๋ฆฌ  (2) 2023.04.23
[WEB] html,css ์ด์šฉํ•œ ํŽ˜์ด์ง€ ๊ตฌํ˜„ - 2  (0) 2023.04.08
'WEB(html,css,js)' Related Articles more