[코드소스]
<html>
<head>
<title>HTML 연습</title>
</head>
<!-- head : HTML 문서에 대한 설명 -->
<body>
줄바꿈 태그 <br>
<!-- 1. BLCOK 태그 : 한줄 전체 공간 차지 -->
<hr> H TAG <hr>
<h1> 안녕 </h1>
<h2> 안녕 </h2>
<h3> 안녕 </h3>
<hr> DIV TAG <hr>
<div> 레이아웃(틀) 잡을때 사용 함 </div>
<div class="red"> 색깔 지정 </div>
<hr> LIST TAG (ordered list) <hr>
<br> 가고싶은 해외 여행지 TOP3
<ol>
<li> 뉴욕 </li>
<li> 프라하 </li>
<li> 취리히 </li>
</ol>
<hr> LIST TAG (unordered list) <hr>
<br> 가고싶은 국내 여행지 TOP3
<ul>
<li> 제주도 </li>
<li> 부산 </li>
<li> 울릉도 </li>
</ul>
<hr> P TAG <hr>
<p> 문단을 나타냄 </p>
참고! 하위태그로 p 태그 아니면 인라인태그만 올 수 있음.
<hr> TABLE TAG <hr>
Table 태그의 하위태그 : tr (줄) <br>
tr 의 하위태그 : th, td
<table border="1">
<tr>
<th colspan="6"> 주간 식단표 </th>
</tr>
<tr>
<th></th>
<th> MON </th>
<th> TUE </th>
<th> WED </th>
<th> THU </th>
<th> FRI </th>
</tr>
<tr>
<td> 조식 </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td rowspan="2">python</td>
</tr>
<tr>
<td> 중식 </td>
<td></td>
<td rowspan="3">django</td>
<td></td>
<td></td>
</tr>
</table>
<!-- 2. INLINE 태그 : 딱 그 내용만큼 공간차지 -->
<hr> IMAGE TAG <hr>
src라는 속성을 가지며 외부url과 내부파일 지정이 가능함.
<div>
<img width="200px" src="https://...image.jpg">
<img width="22%" src="image.jpg">
</div>
<hr> 경로 TAG <hr>
링크태그<br>
필수속성 href : 경로<br>
target : _self(현재창), _blank (새창)<br>
<a href="http://www.naver.com" target="_self"> 네이버 가기</a><br>
<a href="http://www.google.com" target="_blank">구글로 가기</a><br>
<a href="test2.html">들어가기</a>
<hr> BUTTON TAG <hr>
<a href="test2.html"><button>클릭</button></a>
<button onclick="hello()"> CLICK </button>
<script>
function hello(){
alert(1);
}
</script>
<hr> TEXTAREA TAG <hr>
긴글입력받을때 사용!!<br>
placeholder : 입력전 안내 텍스트 띄우기!!<br>
<textarea placeholder="글을 입력해 주세요" rows=30 cols=100 disabled>안녕하세요</textarea>
<hr> SELECT TAG <hr>
사용자한테 항목을 선택 option 이라는 필수 하위태그를 가짐<br>
<select>
<option>제목</option>
<option>글쓴이</option>
<option>내용</option>
</select>
<hr> SPAN TAG <hr>
영역을 표시, 레이아웃 지정!
<span class="blue">여기는 빨간색으로 칠함</span>
<span class="red">여기는 파란색으로 칠함</span>
<span>
<hr> VIDEO TAG <hr>
<video controls width="200px" src="..."></video>
<hr> INPUT TAG <hr>
type 속성!!<br>
<input type="text">
<input type="password">
<input type="file">
<input type="radio">
<input type="checkbox">
<input type="time">
<input type="url">
<input type="color">
<style>
.red {
color: red;
background-color: cyan;
font-size: 30px;
font-weight: bold;
}
.blue {
color: blue;
}
</style>
</body>
</html>
[결과출력]
H TAG
안녕
안녕
안녕
DIV TAG
레이아웃(틀) 잡을때 사용 함
색깔 지정
LIST TAG (ordered list)
가고싶은 해외 여행지 TOP3
- 뉴욕
- 프라하
- 취리히
LIST TAG (unordered list)
가고싶은 국내 여행지 TOP3
- 제주도
- 부산
- 울릉도
P TAG
문단을 나타냄
참고! 하위태그로 p 태그 아니면 인라인태그만 올 수 있음.TABLE TAG
Table 태그의 하위태그 : tr (줄)
tr 의 하위태그 : th, td
| 주간 식단표 | |||||
|---|---|---|---|---|---|
| MON | TUE | WED | THU | FRI | |
| 조식 | python | ||||
| 중식 | django | ||||
IMAGE TAG
src라는 속성을 가지며 외부url과 내부파일 지정이 가능함.
경로 TAG
링크태그
필수속성 href : 경로
target : _self(현재창), _blank (새창)
네이버 가기
구글로 가기
들어가기
BUTTON TAG
TEXTAREA TAG
긴글입력받을때 사용!!
placeholder : 입력전 안내 텍스트 띄우기!!
SELECT TAG
사용자한테 항목을 선택 option 이라는 필수 하위태그를 가짐
SPAN TAG
영역을 표시, 레이아웃 지정! 여기는 빨간색으로 칠함 여기는 파란색으로 칠함
VIDEO TAG
INPUT TAG
type 속성!!
'웹개발 > 장고 (Django)' 카테고리의 다른 글
| #6_Admin 사이트 테이블 등록, 관리자 계정 생성, HTML데이터 전달 (0) | 2022.06.25 |
|---|---|
| #5_Model(DB) (0) | 2022.06.25 |
| #3_Client에 응답 보내기 (feat. MTV분리) (0) | 2022.06.25 |
| #2_기본 구조 이해(URL, Path, View) (0) | 2022.06.24 |
| #1_가상환경 설치 및 서버 구동 (0) | 2022.06.20 |