HTML ๊ธฐ์ดˆ

2023. 2. 7. 14:16ใ†HTML

๋ฉ”๋ชจ์žฅ(ctrl + r > memopad )์— ์•„๋ž˜ ์ฒ˜๋Ÿผ ์ž…๋ ฅ

<html>
<head>
<title>์ฒซ ํŽ˜์ด์ง€</title>
</head>
<body>
์•ˆ๋…•ํ•˜์„ธ์š”.
</body>
</html>

 

๋‹ค๋ฅธ์ด๋ฆ„์œผ๋กœ .html๋กœ ์ €์žฅ ํ˜•์‹ ๋ชจ๋“  ํŒŒ์ผ๋กœ ์ €์žฅ ํ›„ ์—ด๋ฉด

์•„๋ž˜์™€ ๊ฐ™์ด ๋งŒ๋“ค์–ด์ง„๋‹ค.

html ํŒŒ์ผ์ƒ์„ฑ ์œ„์น˜

webapp ํด๋”์— html ํŒŒ์ผ ์ƒ์„ฑ

ํŒŒ์ผ๋ช… ๋ชจ๋‘ ์†Œ๋ฌธ์ž๋กœ !

-

html์€ ํƒœ๊ทธ๋กœ ์ฝ”๋“œ๊ฐ€ ๊ตฌ์„ฑ

ํƒœ๊ทธ : <>๋กœ ์ž‘์„ฑ๋œ ๋ชจ๋“  ๊ธ€์ž.

         ๋Œ€๋ถ€๋ถ„ ์—ฌ๋Š” ํƒœ๊ทธ์™€ ๋‹ซ๋Š” ํƒœ๊ทธ๋กœ ์ง์„ ์ด๋ฃธ.

 <title>Insert title here</title>

์—ฌ๋Š” ํƒœ๊ทธ                  ๋‹ซ๋Š” ํƒœ๊ทธ

html ์ฝ”๋“œ๋Š” <html> ํƒœ๊ทธ ์•ˆ์— ์ž‘์„ฑ.

 

<html>

์—ฌ๊ธฐ์— ๋‚ด์šฉ ์ž‘์„ฑํ•ด์•ผ ํ•จ.

   <head> ํ—ค๋“œ ์˜์—ญ

           ํ†ต์ƒ์ ์ธ ์„ค์ • ๋ฐ ์ œ๋ชฉ ์ž‘์„ฑ

   </head> 

   <body> ๋ฐ”๋”” ์˜์—ญ

           ํ™”๋ฉด์— ๋ณด์ด๋Š” ์ฝ”๋“œ ์ž‘์„ฑ

   </body> 

</html>

 

html ์ฃผ์„ ๋ฌธ๋ฒ•

ctrl + shift + /

-

<!--์—ฌ๊ธฐ๊ฐ€ ์ฃผ์„์ž…๋‹ˆ๋‹ค. -->

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

์•ˆ๋…•ํ•˜์„ธ์š”. ๋ฐ˜๊ฐ‘์Šต๋‹ˆ๋‹ค.

๋˜ ๋งŒ๋‚˜์š”.

</body>

</html>

์‹คํ–‰ ๊ฒฐ๊ณผ

-
html์€ ๊ณต๋ฐฑ์„ ์•„๋ฌด๋ฆฌ ๋งŽ์ด ๋„ฃ์–ด๋„ ํ•˜๋‚˜๋งŒ ์ธ์‹

๊ฐœํ–‰์„ ํ•ด์„œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋„ ๊ฒฐ๊ณผ๋ฌผ์— ๊ฐœํ–‰์ด ๋ฐ˜์˜๋˜์ง€ ์•Š๋Š”๋‹ค.

<br> ํƒœ๊ทธ ์“ฐ๋ฉด ๊ฐœํ–‰ ๊ฐ€๋Šฅ

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

์•ˆ๋…•ํ•˜์„ธ์š”. ๋ฐ˜๊ฐ‘์Šต๋‹ˆ๋‹ค.

๋˜ ๋งŒ๋‚˜์š”.

<br> <!--br ํƒœ๊ทธ๋Š” ์ค„ ๋ฐ”๊ฟˆ ํƒœ๊ทธ, ์—ฌ๋Š” ํƒœ๊ทธ๋งŒ ์กด์žฌ. -->

๋‹ค์‹œ ๋งŒ๋‚˜์š”.<br>

<h1>์ œ๋ชฉ1</h1> <!--h1~6 ํƒœ๊ทธ๋Š” ์ œ๋ชฉ ์ž‘์„ฑ ํƒœ๊ทธ, ์ค„ ๋ฐ”๊ฟˆ ๋‚ด์šฉ๋„ ์ž๋™ ํฌํ•จ -->

<h2>์ œ๋ชฉ2</h2>

<h6>์ œ๋ชฉ6</h6>

</body>

</html>

-

์‹คํ–‰๊ฒฐ๊ณผ

-

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

์•ˆ๋…•ํ•˜์„ธ์š”. ๋ฐ˜๊ฐ‘์Šต๋‹ˆ๋‹ค.

๋˜ ๋งŒ๋‚˜์š”.

<br> <!--br ํƒœ๊ทธ๋Š” ์ค„ ๋ฐ”๊ฟˆ ํƒœ๊ทธ, ์—ฌ๋Š” ํƒœ๊ทธ๋งŒ ์กด์žฌ. -->

๋‹ค์‹œ ๋งŒ๋‚˜์š”.<br>

<h1>์ œ๋ชฉ1</h1> <!--h1~6 ํƒœ๊ทธ๋Š” ์ œ๋ชฉ ์ž‘์„ฑ ํƒœ๊ทธ, ์ค„ ๋ฐ”๊ฟˆ ๋‚ด์šฉ๋„ ์ž๋™ ํฌํ•จ -->

<h2>์ œ๋ชฉ2</h2>

<h6>์ œ๋ชฉ6</h6>

<p> pํƒœ๊ทธ๋Š” ๋ฌธ๋‹จ์„ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. </p> <!--์ค„ ๋ฐ”๊ฟˆ๋„ ์ž๋™ ํฌํ•จ -->

<p> pํƒœ๊ทธ๋Š” ๋ฌธ๋‹จ์„ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. </p>

</body>

</html>

์‹คํ–‰ ๊ฒฐ๊ณผ

-

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<!--aํƒœ๊ทธ๋กœ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ์˜ ๋งํฌ๋ฅผ ๊ฑธ ์ˆ˜ ์žˆ๋‹ค.-->

<!--aํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์ง„ ๊ธ€์ž ํด๋ฆญ ์‹œ ํŽ˜์ด์ง€ ์ด๋™ -->

<!--href์†์„ฑ์— ์ž‘์„ฑ๋œ ๊ณณ์œผ๋กœ ์ด๋™. -->

<!--์†์„ฑ ์ž‘์„ฑ๋ฒ• : ์†์„ฑ๋ช…="์†์„ฑ๊ฐ’"-->

<a href="https://www.naver.com">www.naver.com</a>

</body>

</html>

์‹คํ–‰๊ฒฐ๊ณผ - ๋งํฌ ๋ˆ„๋ฅด๋ฉด ์‚ฌ์ดํŠธ๋กœ ์ด๋™ ๊ฐ€๋Šฅ

-

html์€ ๋Œ€์†Œ๋ฌธ์ž ๊ตฌ๋ถ„ ์—†์Œ!

<A href="https://www.naver.com">www.naver.com</A> ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

 

-

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<!--aํƒœ๊ทธ๋กœ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ์˜ ๋งํฌ๋ฅผ ๊ฑธ ์ˆ˜ ์žˆ๋‹ค.-->

<!--aํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์ง„ ๊ธ€์ž ํด๋ฆญ ์‹œ ํŽ˜์ด์ง€ ์ด๋™ -->

<!--href์†์„ฑ์— ์ž‘์„ฑ๋œ ๊ณณ์œผ๋กœ ์ด๋™. -->

<!--์†์„ฑ ์ž‘์„ฑ๋ฒ• : ์†์„ฑ๋ช…="์†์„ฑ๊ฐ’"-->

<a href="https://www.naver.com">www.naver.com</a><br>

<a href="https://www.naver.com" target="_blank">www.naver.com</a><br>

<a href="html01.html">htm101.html ํŒŒ์ผ๋กœ ์ด๋™</a> <!--ํŒŒ์ผ๋ช… ๋„ฃ์–ด์„œ ์ด๋™ ๊ฐ€๋Šฅ-->

</body>

</html>

href์†์„ฑ์€ ๊ทธ ํƒญ์—์„œ ๋งํฌ๊ฐ€ ๋ฐ”๋กœ ์—ด๋ฆผ

taget ์†์„ฑ์„ ์ถ”๊ฐ€ํ•˜๋ฉด ์ƒˆ ํƒญ์—์„œ ๋งํฌ ์—ด๋ฆผ

 

-

์ด๋ฏธ์ง€ ๋„ฃ๊ธฐ

 

์ด๋ฏธ์ง€ ํƒœ๊ทธ์—์„œ src ์†์„ฑ์€ ํ•„์ˆ˜!

src="์ด๋ฏธ์ง€ํŒŒ์ผ๋ช….ํ™•์žฅ์ž" โ˜…ํ™•์žฅ์ž ๋ช…๊นŒ์ง€ ๋Œ€์†Œ๋ฌธ์ž ๋˜‘๊ฐ™์ด ์จ์•ผ ํ•จ.width="์ด๋ฏธ์ง€ํฌ๊ธฐ ex)300px"

<img src="dog01.jpg" width="300px">

-

ํ‘œ ๋„ฃ๊ธฐ

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<!-- ํ‘œ ๋งŒ๋“ค๊ธฐ -->

<table border="1"> <!-- ๊ธฐ๋ณธ์€ ํ…Œ๋‘๋ฆฌ๊ฐ€ ์—†์Œ -->

<tr>

<td>1</td> <!-- td : ์—ด ๋งŒ๋“œ๋Š” ํƒœ๊ทธ -->

<td>2</td>

<td>3</td>

 

</tr> <!-- tr : table row : ํ–‰ ๋งŒ๋“œ๋Š” ํƒœ๊ทธ-->

<tr>

<td>4</td>

<td>5</td>

<td>6</td>

</tr>

</table>

</body>

</html>

-

ํ–‰์„ ๋จผ์ € ๋งŒ๋“ค๊ณ  ํ–‰ ์•ˆ์— ์—ด์„ ๋งŒ๋“ค์–ด์•ผ ํ•จ!

ํ–‰,์—ด ํ‹€๋ถ€ํ„ฐ ๋งŒ๋“ค๊ณ  ๋‚ด์šฉ ๋„ฃ์–ด์ฃผ๊ธฐ.

๋ชจ๋“  ํ–‰์— ์—ด ๊ฐฏ์ˆ˜๋ฅผ ๋งž์ถ”๋Š” ๊ฒŒ ์ข‹์Œ

 

<tr> ํ–‰ ๋งŒ๋“œ๋Š” ํƒœ๊ทธ

<td> ์—ด ๋งŒ๋“œ๋Š” ํƒœ๊ทธ

 

table์€ ๊ธฐ๋ณธ ํ…Œ๋‘๋ฆฌ๊ฐ€ ์—†์–ด์„œ

border="1"๋กœ ๊ธฐ๋ณธ ํ…Œ๋‘๋ฆฌ ๋งŒ๋“ค์–ด ์ค„ ์ˆ˜ ์žˆ์Œ

 

-

ํ…Œ์ด๋ธ” ๋งŒ๋“ค๊ธฐ ์—ฐ์Šต1.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<table border="1">

<tr>

<td>๊น€์ž๋ฐ”</td>

<td>์ด์ž๋ฐ”</td>

<td>๋ฐ•์ž๋ฐ”</td>

</tr>

<tr>

<td>์ตœ์ž๋ฐ”</td>

<td>์ž„์ž๋ฐ”</td>

<td>์ •์ž๋ฐ”</td>

</tr>

<tr>

<td>์œค์ž๋ฐ”</td>

<td>์žฅ์ž๋ฐ”</td>

<td>๋ฐฉ์ž๋ฐ”</td>

</tr>

</table>

</body>

</html>

-

ํ…Œ์ด๋ธ” ๋ณ‘ํ•ฉ

์ฒซ๋ฒˆ์งธ ํ–‰์˜ 2์—ด๊ณผ 3์—ด์„ ๋ณ‘ํ•ฉํ•˜๊ณ  2์—ด์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋‚จ๊ธฐ๊ธฐ.

 

์—ด ๋ณ‘ํ•ฉ : colspan="๋ณ‘ํ•ฉํ•  ์ˆซ์ž ๊ฐฏ์ˆ˜"

-

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<table border="1">

<tr>

<td>๊น€์ž๋ฐ”</td>

<td colspan="2">์ด์ž๋ฐ”</td>

</tr>

<tr>

<td>์ตœ์ž๋ฐ”</td>

<td>์ž„์ž๋ฐ”</td>

<td>์ •์ž๋ฐ”</td>

</tr>

<tr>

<td colspan="3">์œค์ž๋ฐ”</td>

</tr>

</table>

</body>

</html>

๐Ÿ”ด ๋ณ‘ํ•ฉ๋˜๋Š” ์—ด์˜ ํƒœ๊ทธ๋ฅผ ์ง€์›Œ์ค˜์•ผ ํ•จ.

-

ํ–‰ ๋ณ‘ํ•ฉ : rowspan="๋ณ‘ํ•ฉํ•  ์ˆซ์ž ๊ฐฏ์ˆ˜"

์œ„ ํ…Œ์ด๋ธ”์—์„œ ๊น€์ž๋ฐ”์™€ ์ตœ์ž๋ฐ” ๋ณ‘ํ•ฉ, ์ •์ž๋ฐ” ๋ฐฉ์ž๋ฐ” ๋ณ‘ํ•ฉ

-

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<table border="1">

<tr>

<td rowspan="2">๊น€์ž๋ฐ”</td>

<td>์ด์ž๋ฐ”</td>

<td>๋ฐ•์ž๋ฐ”</td>

</tr>

<tr>

<td>์ž„์ž๋ฐ”</td>

<td rowspan="2">์ •์ž๋ฐ”</td>

</tr>

<tr>

<td>์œค์ž๋ฐ”</td>

<td>์žฅ์ž๋ฐ”</td>

</tr>

 

</table>

</body>

</html>

-

ํ…Œ์ด๋ธ” ํ–‰, ์—ด ๋ณ‘ํ•ฉ ์—ฐ์Šต

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<table border="1">

<tr>

<td rowspan="2">1</td>

<td colspan="2">2</td>

</tr>

<tr>

<td>3</td>

<td rowspan="2">5</td>

</tr>

<tr>

<td colspan="2">4</td>

</tr>

</table>

</body>

</html>

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

input  (0) 2023.02.08
โ˜…โ˜…div์™€ span  (0) 2023.02.08
list  (0) 2023.02.08
table  (0) 2023.02.08

๊ด€๋ จ๊ธ€

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