2022.4.28.(목)
HTML 입문
1. HTML
- 데브옵스 : 풀스택 + 배포
- HT - HyperText : 문서와 문서가 링크로 연결되어 있다.
- M - Markup : 태그로 이루어져 있다
- L - Language : 언어
-> 웹사이트의 틀을 만들어 주는 마크업 언어
- CTRL + SHIFT + C : 주석처리
< FrontEnd와 BackEnd >
< 네이버로 테스트 >
<h2>오늘의 테스트는</h2>
테스트 <strong> 페이지 </strong>
(<a href="http://www.naver.com"
target="_blank" title="네이버에 접속해보자" > 네이버 접속 </a>)< 리스트로 나누기 >
<ol>
<li>기술소개 </li>
<li>기본문법 </li>
<li>하이퍼텍스트와 속성 </li>
<li>리스트와 태그의 중첩 </li>
</ol>
<ul>
<li>JAVA </li>
<li>DBMS </li>
<li>Git&Github </li>
<li>HTML </li>
</ul>< 링크 적용 예제 >
<!DOCTYPE html>
<html>
<head>
<title> HTML - 수업 </title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html"> HTML </a></h1>
<ol>
<li><a href="1.html"> 기술소개 </a></li>
<li><a href="2.html"> 기본문법 </a></li>
<li><a href="3.html"> 하이퍼텍스트와 속성 </a></li>
<li><a href="4.html"> 리스트와 태그 중첩 </a></li>
</ol>
<h2> HTML 수업 </h2>
HTML 수업에 오신 것을 환영합니다.
수업에 대한 내용은 링크를 통해 접근하실 수 있습니다.
</body>< table 만들기 >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!--
<thead></thead> : head 부분을 의미
<tbody></tbody> : 테이블에서 본문을 의미
<th></th> : 제목
<tfoot><tfoot> : 표상에서 가장 아래쪽
-> thead, tbody, tfoot 각각의 위치가 바뀌어도
head, body, foot에 맞춰 테이블이 그려진다.
-->
<body>
<img src="KakaoTalk_20220428_142828149.jpg" width="300" height="200">
<!-- <tr> 행 </tr> -->
<!-- <td> 열 </td> -->
<table border="2">
<thead>
<tr align = "center">
<th>이름</th>
<th>성별</th>
<th>주소</th>
<th>나이</th>
<th>회비</th>
</tr>
</thead>
<tbody>
<tr align = "center">
<td>유섭</td>
<td>남자</td>
<td rowspan="3">춘천</td>
<td>25</td>
<td>50,000</td>
</tr>
<tr align = "center">
<td>광정</td>
<td>남자</td>
<td>27</td>
<td>100,000</td>
</tr>
<tr align = "center">
<td>수연</td>
<td>여자</td>
<td>28</td>
<td>30,000</td>
</tr>
</tbody>
<tfoot>
<tr align = "center">
<td colspan="4">합계</td>
<td>180,000</td>
</tr>
</tfoot>
</table>
</body>
</html>< form 태그와 서버 전송 >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!--
form : 서버 전송 태그
-->
<body>
<form action="http://localhost/login.jsp">
<p>아이디 : <input type="text" name="id"></p>
<p>패스워드 : <input type="password" name="pwd"></p>
<p>주소 : <input type="text" name="addr"></p>
<input type="submit">
</form>
</body>
</html>
도비는 자유에요!😝