간단하게 HTML 정말 기초부분만 간단히 언급하고 지나갈 예정입니다.
- list 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
</head>
<body>
<h1>I love HTML5</h1>
<p>because it is cool!</p>
<em>This is a Heading emaaa</em>
<ul>
<li>first=1</li>
<li>second</li>
<li>third</li>
</ul>
<ol>
<li>first=1</li>
<li>second</li>
<li>third</li>
</ol>
</body>
</html>
결과 화면
- div, span 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIV SPAN</title>
</head>
<body>
<div style="color:red">
<p>sentence one</p>
<p>sentence tow</p>
</div>
<div>
<p>sentence<span style="color:blue"> three</span></p>
<p>sentence<span style="color:red"> four 4</span></p>
</div>
</body>
</html>
결과화면
sentence one
sentence tow
sentence three
sentence four 4
- image, anchor 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Anchor</title>
</head>
<body>
<div style="color:red">
<p>sentence one</p>
<p>sentence tow</p>
</div>
<div>
<p>sentence<span style="color:blue"> three</span></p>
<p>sentence<span style="color:red"> four 4</span></p>
</div>
<img src="django-logo.png" alt="pic not found", width="300">
<h1>Example HTML</h1>
<a href="other.html">Click Here</a>
<br><br>
<a href="https://www.google.com">Click Here</a>
</body>
</html>
결과화면
- table 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Anchor</title>
</head>
<body>
<table border="2">
<thead>
<th>COL1</th>
<th>COL2</th>
<th>COL3</th>
</thead>
<tbody>
<tr>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
<tr>
<td>O</td>
<td>X</td>
<td>O</td>
</tr>
<tr>
<td>O</td>
<td>O</td>
<td>X</td>
</tr>
</tbody>
</table>
</body>
</html>
결과화면
- form 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form part1</title>
</head>
<body>
<form action="other.html">
<p>
<label for="fname">1.First Name :</label>
<input type="text" id="fname" name="fname">
<br><br>
<label for="lname">2.Last Name :</label>
<input type="text" id="lname" name="lname">
<br><br>
<label for="address">3.Address :</label>
<input type="text" id="address" name="address">
<br><br>
<label for="email">4 Email :</label>
<input type="email" id="email" name="email" placeholder="input your email">
<br><br>
<br><br>
<label for="coupon">5. <span style="color:red">Coupon :</span></label>
<input type="text" id="coupon" name="coupon">
<br><br>
<input type="submit" value="입력 필드 제출">
</p>
</form>
</body>
</html>
결과화면 - 이메일은 자동 검증 기능이 있
- form 예시 - 라디오버튼, 드롭다운버튼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hotel Feedback</title>
</head>
<body>
<h1>Hotel Feedback</h1>
<form action="other.html">
<label for="fname">1.First Name :</label>
<input type="text" id="fname" name="fname">
<br>
<label for="lname">2.Last Name :</label>
<input type="text" id="lname" name="lname">
<br>
<label for="address">3.Address :</label>
<input type="text" id="address" name="address">
<br>
<label for="email">4.Email :</label>
<input type="email" id="email" name="email">
<br>
<label for="coupon">5.Coupon :</span></label>
<input type="text" id="coupon" name="coupon">
<br>
<p>Create account?</p>
<label for="yes">Yes</label>
<input type="radio" id="yes" name="account" value="yes">
<br>
<label for="no">No</label>
<input type="radio" id="no" name="account" value="no">
<br>
<p>How was your service?</p>
<select name="stars" id="stars">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
<p>Any other comments?</p>
<textarea name="comments" id="" cols="30" rows="5"></textarea>
<br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
결과화면
'Python > Django' 카테고리의 다른 글
| [Django] Django - (맛보기)동적인 View (0) | 2022.10.19 |
|---|---|
| [Django] Django - (맛보기)Function 기반 View (0) | 2022.10.18 |
| [Django] Django - (맛보기 url 연결)프로젝트 생성 및 장고앱 추가 (0) | 2022.10.17 |
| [Django] Bootstrap 기초 (0) | 2022.10.06 |
| [Django] CSS 기초 (0) | 2022.10.05 |
