https://opentutorials.org/course/2039
HTML 수업 - 생활코딩
수업의 목적 본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다. 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리
opentutorials.org
위의 수업을 다 보고나서 전체적인 정리를 한 것이다.
HTML을 정보를 전달하는 관점에서 생각하자.
<!DOCTYPE html>
<html>
<head><!--본문의 내용이 아닌 경우 head에 넣는다-->
<meta charset ="utf-8"><!--인코딩 방식 설정-->
<title>title(제목)</title><!--탭의 제목 설정-->
</head>
<body>
<!--본문에 해당-->
<h3>헤딩</h3>
<!--heading3의 약자 - 제목-->
<ol>
<!--순서를 부여할려면 ol을 사용 - ordered list-->
<li>111</li>
<!--li 리스트로 표현 - list -->
<li>222</li>
<li>333</li>
<li>444</li>
</ol>
<ul>
<!--같은 항목은 ul로 묶어준다 순서가 없다 - unordered list-->
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<a href = "https://주소" target="_blank" title = "over">atag</a>
<!--<a></a> 링크 - anchor의 a, target="_blank" 새창, title = "오버" 마우스를 오버했을 때 내용이 보임-->
<p>단락</p>
<img src="image/galaxy.jpg" height="800" alt="우주 이미지" title="우주">
<!--img 태그는 닫는 태그가 없다, 이미지가 왜곡될수 있다, 높이나 폭 하나만 지정하면 상대적으로 이미지가 변동된다-->
<!--alt = alternative text 어떤 정보가 위치한지를 알 수 있다-->
<!--title을 사용해서 툴팁을 보여줄 수가 있다 마우스 오버-->
<table border="3">
<!--border = 테두리-->
<tr>
<!--tr = table row-->
<td>이름</td><td>성별</td><td>나이</td><td>회비</td>
</tr>
<tr>
<td>green</td><td>F</td><td rowspan="2">100</td><td>10000</td>
<!--rowspan 행병합-->
</tr>
<tr>
<td>red</td><td>M</td><td>10000</td>
</tr>
<tr>
<td colspan="3">합</td><td>20000</td>
<!--colspan 열병합-->
</tr>
</table>
<form action="http://localhost/login.php">
<!--어디로 전송할지 action을 이용-->
<p>아이디 : <input type="text" name="id"></p>
<!--각각의 이름을 설정-->
<p>비밀번호 : <input type="password" name="pwd"></p>
<!--비밀번호는 type을 password로 설정-->
<p>주소 : <input type="text" name="address"></p>
<input type="submit">
<!--제출-->
</form>
<form action="">
<p>text : <input type="text" name="id" value="default value"></p>
<!--value 기본값-->
<p>password : <input type="password" name="pwd" value="default value"></p>
<p>textarea : <textarea cols="100" rows="10">default value</textarea></p>
<!--textarea는 안에 기본값을 넣는다-->
</form>
<form action="http://localhost/color.php">
<h1>색상</h1>
<select name="color">
<!--서버에 보내기 위해 이름 설정-->
<option value="red">붉은색</option>
<!--다른 이름으로 전송하고 싶으면 value 사용-->
<option value="blue" selected>파랑색</option>
<option value="green">초록색</option>
</select>
<h1>색상2 다중선택</h1>
<select name="color2" multiple>
<!--서버에 보내기 위해 이름 설정-->
<option value="red">붉은색</option>
<!--다른 이름으로 전송하고 싶으면 value 사용-->
<option value="blue">파랑색</option>
<option value="green">초록색</option>
</select>
<input type="submit">
</form>
<form action="http://localhost/order.php">
<p>
<h1>색상 단일선택</h1>
붉은색 : <input type="radio" name="color" value="red">
<!--name을 같게 하면 하나만 선택된다-->
파랑색 : <input type="radio" name="color" value="blue" checked>
<!--기본값은 checked로 사용-->
초록색 : <input type="radio" name="color" value="green">
</p>
<p>
<h1>사이즈 다중선택</h1>
95 : <input type="checkbox" name="size" value="95">
<!--name을 같게 하면 하나만 선택된다-->
100 : <input type="checkbox" name="size" value="100" checked>
<!--기본값은 checked로 사용-->
105 : <input type="checkbox" name="size" value="105" checked>
</p>
<input type="submit">
</form>
<form action="http://localhost/form.php">
<input type="text">
<input type="submit" value="전송">
<!--submit 버튼명을 바꾸려면 value를 사용-->
<input type="button" value="버튼" onclick="alert('hello world')">
<!--버튼 혼자서는 html에서 의미가 없다-->
<input type="reset">
<!--form안에 있는 사용자가 입력한 정보가 리셋-->
</form>
</body>
</html>
'프로그래밍 > HTML' 카테고리의 다른 글
| div 태그와 span 태그 (0) | 2021.08.09 |
|---|---|
| HTML 기초 3 (0) | 2021.07.23 |
| HTML 기초 2 (0) | 2021.07.22 |