HTML(div, img, form, table)
<div> 태그
- div태그는 division의 약자로 웹사이트의 레이아웃을 만들 때 사용한다.
- div태그로 각 영역을 만들고 거기에 css를 활용하여 스타일을 적용한다.
- 속성으로는(style, width, height, border, background-color, float, margin 등)
예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
border : solid 1px blue;
}
</style>
</head>
<body>
<div>
<a href = "https://naver.com">네이버</a>
</div>
</body>
</html>
|
cs |
결과)
일반적으로 div태그를 사용해 구역들을 여러개 만들고 각각 스타일을 적용해 꾸며준다.
<img> 태그
- img태그는 HTML문서에 이미지를 삽입하는 태그이다.
- src는 이미지의 경로, alt는 이미지를 출력할 수 없을때 출력할 내용
- width, height는 가로세로 크기를 나타낸다.
- loading = 'lazy'를 하면 보는사람의 이미지가 로드된다.
예)
|
1
|
<img width = "200px" src="apple.jpg" alt="hello">
|
cs |
결과)
apple.jpg이미지가 출력되고 이미지를 출력할 수 없으면 hello라는 메시지가 출력된다.
<form> 태그
- form태그는 입력양식 전체를 감싸는 태그로 내부에 속성과 input태그가 있고 input값을 속성에 정해놓은 대로 보내게 된다.
속성
name : form의 이름, 서버로 보내질 때 이름의 값으로 데이터가 전송
action : form의 전송되는 서버 url 또는 html링크
method : GET은 default, POST는 데이터를 url에 공개하지 않고 숨겨서 전송
autocomplete : 자동완성 on이면 폼 전체가 자동완성 허용
<input>값
type = "text" : text입력란
"password" : 비밀번호 입력란, 입력내용이 보이지 않는다.
"button" : 버튼
"submit" : 서버로 form에 입력한 데이터를 보내주는 버튼
"reset" : form에 입력한 모든 데이터 삭제
"radio" : 라디오 버튼
"checkbox" : 다중선택 체크박스
"file" : 파일업로드 컨트롤 -> method = "POST"일때만 사용가능
<TextArea> : 여러줄의 텍스트를 입력할 때 사용
<select> : 드롭다운 형식의 선택, 선택항목은 option 사용
예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<body>
<input type = "text">
<input type = "password">
<input type = "date">
<input type = "time">
<input type = "range">
<input type = "color">
<input type = "radio">
<input type = "checkbox">
<input type = "file">
<input type = "reset">
<textarea name="" id="" cols="30" rows="10">
</textarea>
</body>
|
cs |
결과)
<table> 태그
- table태그는 표를 만들때 사용하는 태그이다.
구성요소
- <table> : 테이블을 만드는 태그
- <th> : 테이블의 헤더를 만드는 태그, 중앙 정렬 되어 있다.
- <tr> : 테이블의 행을 만드는 태그
- <td> : 테이블의 열을 만드는 태그
테이블도 마찬가지로 css의 style을 이용해서 디자인을 꾸며 줄 수 있다.
rowspan : 행병합
colspan : 열병합
예)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<table>
<thead>
<tr>
<th>순번</th>
<th>이름</th>
<th>가격</th>
<th>판매량</th>
<th>판매액</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>사과</td>
<td>1000</td>
<td rowspan = "2">1000</td>
<td>1,000,000</td>
</tr>
<tr>
<td>2</td>
<td>배</td>
<td>2000</td>
<td>2,000,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan = "4">총액</td>
<td>3,000,000</td>
</tr>
</tfoot>
</table>
|
cs |
결과)
colspan으로 총액의 가로길이를 4칸으로 설정하고, rowspan으로 판매량의 세로길이를 2칸으로 설정함