고정 헤더 영역
상세 컨텐츠
본문
728x90
<HTML>
비주얼 스튜디오를 사용
html 템플릿 자동 완성 : !+Enter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comlatible" content="IE=edge">
<meta name="viewport" content="Width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<h1>홍길동</h1>
<h2>010-1111-2222</h2>
<h2>서울특별시</h2>
<img src="kitty.webp">
<img src="kitty2.jpg" Width="1000px">
</body>
</html><결과물>
홍길동
010-1111-2222
서울특별시
<윗첨자 & 아래첨자>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comlatible" content="IE=edge">
<meta name="viewport" content="Width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<p>2<sup>3</sup>=8</p>
<p>ax<sup>2</sup>+bx+c=0</p>
<p>x<sub>1</sub>=</p>
<p>x<sub>2</sub>=</p>
<p>log<sub>10</sub>3=3000</p>
</body>
</html><결과물>
<dl 실행>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comlatible" content="IE=edge">
<meta name="viewport" content="Width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<dl>
<dt>WWW</dt><!--Data Title-->
<dd>World Wide Web</dd><!--Data Definition-->
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>HTTP</dt>
<dd>Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html><결과물>
<ol&ul 실행>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comlatible" content="IE=edge">
<meta name="viewport" content="Width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<ol start="10">
<li>월요일</li>
<ul>
<li>오전</li>
<ul>
<li>1시</li>
<li>2시</li>
</ul>
<li>오후</li>
<ul>
<li>3시</li>
<li>4시</li>
</ul>
</ul>
<li>화요일</li>
<li>수요일</li>
<li>목요일</li>
<li>금요일</li>
<li>토요일</li>
<li>일요일</li>
</ol>
</body>
</html><결과물>
<이미지>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comlatible" content="IE=edge">
<meta name="viewport" content="Width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<img src="javalogo.png" width="200px"><hr>
<img src="tux.jpg"><hr>
<img src="anthon.png"><hr>
<img src="girl-walking.gif">
</body>
</html><결과물>
| Ctrl+/ : <!-- --> 형태로 나타남 | comment(실행되지 않게) | |
| <br> | linebreak(줄바꿈) | |
| <hr> | HRizon(지평선/수평선 = 선긋기) 안에 줄바꿈도 포함 | |
| <p></p> | paragraph(문단, 글 단락) | |
| <b></b> | Bold(강조) | 고기 |
| <u></u> | Underline(밑줄) | 그는 멕시코 만에서 조각배를 타고 고기잡이를 하는 노인이었다. |
| <s></s> | Strike(줄 관통) | |
| <i></i> | Italic(눕히기) | 돌아올 시간만 되면 바닷가에 나와기다렸다가 |
| <sup></sup> <p>2<sup>3</sup>=8</p>
|
윗첨자 |  |
| <sub></sub> <p>log<sub>10</sub>3=3000</p>
|
아래첨자 |  |
| <ul></ul> <li></li> |
Unordered List |  |
| <ol></ol> <li></li> |
Ordered List |  |
| <dl></dl> <dt></dt> = Data Title <dd></dd> = Data Definition |
Definition List |  |
| <li></li> | ul&ol에서만 사용 가능하다 |
<table>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comlatible" content="IE=edge">
<meta name="viewport" content="Width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<table border="1">
<thead>
<tr><th>Name</th><th>Gender</th><th>Age</th><th>Moblie</th></tr>
</thead>
<tbody>
<tr><td>John</td><td>Male</td><td>27</td><td>44445555</td></tr>
<tr><td>Jane</td><td>Female</td><td>25</td><td>77778888</td></tr>
<tr><td>황다연</td><td>Female</td><td>28</td><td>20190760</td></tr>
</tbody>
</table>
</body>
</html><결과물>
<table rowspan병합>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comlatible" content="IE=edge">
<meta name="viewport" content="Width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<table border="1">
<thead>
<tr><th>Name</th><th>Gender</th><th>Age</th><th>Moblie</th></tr>
</thead>
<tbody>
<tr><td>John</td><td>Male</td><td>27</td><td>44445555</td></tr>
<tr><td>Jane</td><td rowspan="2">Female</td><td rowspan="2">25</td><td>77778888</td></tr>
<tr><td>황다연</td><td>20190760</td></tr>
</tbody>
</table>
</body>
</html>rowspan="2" : 2가 들어간 이유는 2개를 병합하기 때문이다.
셀 병합 = column 병합 colspan 좌우 병합
row 병합 rowspan 위아래 병합
<결과물>
==========================================
<tag> ... </tag> => 닫는 태그
<img src="..."> => [ img : tag name ] [ src : 속성명(property/attribute) ]
[ "..." : ...안에 들어가는 속성데이터 "파일명.jpg"등 특수기호가 들어가면 묶어(" ")줘야한다. ]
728x90
'HTML' 카테고리의 다른 글
| 2023.01.16 호텔 객실/예약 관리 코드 (0) | 2023.01.16 |
|---|---|
| 2023.01.13 (0) | 2023.01.13 |
| 2023.01.12 (0) | 2023.01.12 |
