주요내용 : HTML(W3School)
<!DOCTYPE html> -- html 버전이 무엇인지 표현해줌.
<html> -- 열고 닫는 구조로 되어 있음.
<head> -- html 설명해주는 부분. css
<title>Page Title</title>
</head>
<body> - body 필수, 컨텐츠 들어감.
<h2>My First Heading</h2> -- 제목태그 - 숫자가 작아지면 크기도 작아짐.
<p>My first paragraph.</p> -- 본문태그
<br>태그 - 줄바꿈
<a href="https://maeryo88.tistory.com/">매료매료</a> -- 페이지 이동시킬 때 사용
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333"> -- alt : 이미지가 없을때 대체 텍스트나오는 부분.
<button>Click me</button> -- 버튼
<ul> -- 리스트(순서없는 것)
<ol> -- 리스트(순서있는 것)
<pre> - 입력한대로 display 되는 태그
<h1 style="border: 2px solid white;">Hello World</h1> - 테두리 색 지정
<h1 style="background-color:rgba(255, 99, 71, 0.1);">rgba(255, 99, 71, 0.5)</h1> -- 0.1은 투명도
<!-- 주석내용 --> : 주석처리방법
<h2>Basic HTML Table</h2> -- 많이 쓰이는 태그
<table style="width:100%">
<tr> -- row 구성
<th>Firstname</th> -- clolumn header
<th>Lastname</th>
<th>Age</th>
<th>Company</th>
</tr>
<tr>
<td>Jill</td> -- 속성값.
<td>Smith</td>
<td>50</td>
<td>삼성</td>
th {
text-align: left; -- 왼쪽 정렬
}
<!-- column merge--!>
<th colspan="2">Telephone</th> -- 2개의 header를 merge(병합)시킴.
<!-- row merge--!>
<th rowspan="3">Name:</th> -- row를 3개 병합
<caption>Monthly savings</caption> - table에 대한 설명을 달아줌.
★★★ Layout -- 중요 ★★★
<header> - Defines a header for a document or a section
<nav> - Defines a container for navigation links
<section> - Defines a section in a document -- 컨텐츠
<article> - Defines an independent self-contained article
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section -- 바닥부분 ex. 협력사 링크...
<details> - Defines additional details
<summary> - Defines a heading for the <details> element
-- 대부분의 웹은 이 틀(구조)안에서 움직인다.
Form - 서버와의 통신시 사용.
<input type="text" name="lastname">
<input type="submit" value="제출"> -- value값으로 버튼이 생김.
</form>
<input type="radio" name="gender" value="male" checked> Male<br> - radio버튼
★★★ method Attrubute -- 중요 ★★★
겟 메소드 이용
<form action="/action_page.php" target="_blank" method="GET">
First name:<br>
<input type="text" name="firstname" value="Mickey">
Select Method -- 드랍다운 리스트
<form action="/action_page.php">
<select name="cars" size="2"> 2개까지 미리 보여줘라.
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
submiteted from data - ctrl 누르고 동시제출가능
Textarea - 입력값 제출
datalist Element - list 연결할수있게 연결 + 뿌려줌.(HTML5 새로 나온것)
Input Type Radio - 유일한 선택값
<form action="/action_page.php">
Username: <input type="text" name="usrname" required> - 필수값 메소드
</body>
</html>
'Bitcamp > BITCAMP - Servlet & JSP' 카테고리의 다른 글
| 4일차 (0) | 2019.08.05 |
|---|---|
| 3일차 (0) | 2019.08.02 |
| JSP(Java Server Page) (0) | 2019.08.02 |
| 2일차 - 서블릿 (0) | 2019.08.01 |
| 1일차 (0) | 2019.07.31 |
