HTML

HTML 기초

byeol_dev 2023. 2. 7. 14:16

λ©”λͺ¨μž₯(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>