★ 테이블 태그
- 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 작성
- <table>로 시작하고 </table> 끝냄
- <tr></tr>로 행을 생성, <td></td>로 셀을 생성
- <th></th>은 셀의 제목, 제목을 가운데 정렬, 굵은 글씨
<table>
<tr>
<th>셀1</th><td>셀2</td><td>셀3</td>
</tr>
</table>
colspan 속성
- 셀을 가로로 합침
<td colspan='합칠 열의 개수'>
rowspan 속성
- 셀을 세로로 합침
<td rowspan='합칠 행의 개수'>
colgroup 태그
colgroup 태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있도록 함
<table>
<colgroup>
<col style='css문법1'>
<col style='css문법2'>
<col style='css문법3'>
</colgroup>
<tr>
<td>1</td> <!-- css문법1 적용 -->
<td>2</td> <!-- css문법2 적용 -->
<td>3</td> <!-- css문법3 적용 -->
</tr>
<tr>
<td>4</td> <!-- css문법1 적용 -->
<td>5</td> <!-- css문법2 적용 -->
<td>6</td> <!-- css문법3 적용 -->
</tr>
</table>
caption 태그
- 표에 제목을 붙일 때 사용
- 기본 위치는 표의 상단 중앙
아이프레임 태그
- inline frame의 약자
- 웹사이트 안에 또 다른 웹사이트를 삽입
<iframe src='삽입할 페이지의 주소 또는 문서위치' style='크기를 설정할 css코드'></iframe>
폼 태그
- 웹페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 모음
- 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용
✓ 서버에 데이터를 전송하는 방법
get : url에 데이터를 포함하여 서버로 전달하는 방법
post : body에 데이터를 포함해서 서버로 전달하는 방법
<form method='전송방법' action='서버에게 전달할 파일 위치'>
form 태그 안에 form 요소를 통해 데이터를 서버로 전달
...
</form>
input 태그
type속성
text : 문자를 입력받는 글상자
passsword : 비밀번호를 입력받는 글상자
radio : 여러개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버튼
(설문조사라고 보면됨, 그룹을 맺기 위해 name속성의 값을 동일하게 함)
checkbox : 여러개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼
(그룹을 맺기 위해 name 속성의 값을 동일하게 함)
file : 원하는 파일을 서버로 전송하기 위한 글상자
botton : 이벤트가 없는 일반버튼
reset : 입력받은 데이터를 초기화 하는 버튼
submit : 입력받은 데이터를 서버에 제출하는 버튼
hidden : 보이지는 않으나 서버에 값을 전달하고 싶을 때 사용하는 글상자
email : 이메일을 입력받는 글상자(@ 필요)
url : 웹사이트를 입력받는 글상자(http 필요)
tel : 전화번호를 입력받는 글상자(모바일에서 숫자 키패드를 사용)
date : 원하는 날짜를 입력받는 글상자
number : 원하는 숫자를 입력받는 글상자
<input type='number' min='최소값' max='최대값' step='증가값'>
search : 검색어를 입력받는 글상자
color : 원하는 색상을 입력받는 요소(선택한 색상은 16진수 RGB 컬러값으로 서버에 전달)
range : 일정 범위안에 값만을 입력하는 조절바
<input type='range' min='최소값' max='최대값' value='현재값'>
속성
maxlength : 값의 최대 길이를 설정
placeholder : 입력 전 특정 데이터를 입력하도록 안내하는 값을 설정
중요한 속성
name : 요소의 이름을 설정. 서버에서 값을 전달 받을 때 key로 사용
id : 요소의 유일한 이름을 설정.
HTML문서에서 해당 요소의 스타일을 주거나 동적인 프로그래밍을 할 때 사용
(HTML 문서내에서 다른 요소와 같은 id를 가질 수 없음)
value : 서버로 전달할 입력양식의 값을 설정(비밀번호 자동저장 기능이랑 비슷함)
checked : 라이오 또는 체크박스 중에서 미리 선택하는 값을 설정
readonly : 데이터를 볼 수 있으나 수정할 수 없게 설정(서버로 데이터가 전달됨)
disabled : 입력필드를 사용할 수 없게 설정(서버로 데이터가 전달되지 않음)
required : 데이터를 submit할 때 데이터를 필수로 입력하도록 강제함
라벨 태그
- 폼 양식에 이름을 붙이는 요소
- 다른 요소를 연결하면 해당 영역이 넓어짐
- radio, checkbox의 스타일을 설정시 많이 사용됨
<label for='요소의 아이디값'> 텍스트 또는 이미지</label>
버튼 태그
- <botton></botton>
- value 속성이 없기 때문에 태그 사이에 제목을 설정
<botton>클릭하세요</botton>
- 기본 속성이 submit
<botton type='botton'>클릭하세요</botton>
<botton type='reset'>클릭하세요</botton>
<botton type='submit'>클릭하세요</botton>
선택 상자 태그
여러개의 옵션이 드롭다운 리스틀고 되어있으며 그 중에서 단 하나의 옵션만을 선택
<select name='name'>
<option value='kim'>김사과</option>
<option value='ban'>반하나</option>
<option value='oh'>오렌지</option>
</select>
여러줄 글상자
여러줄의 텍스트를 입력받는 글상자
<textarea cols='가로글자수' rows='세로 줄 수'>value 설정값</textarea>
HTML의 디스플레이
1. inline
- content의 크기 만큼만 자리를 차지하는 요소
- 텍스트, img, span ...
- 텍스트의 특징을 가지고 있음
2. block
- 라인을 모두 차지하는 요소
- p, h, ul, li, div ...
- 면의 특징을 가지고 있음
span 태그
- inline 특징을 가지고 있음
- 글자 단위로 영역이 설정
div 태그
- block 특징을 가지고 있음
- 면 단위로 영역이 설정
시맨틱(Semantic) 태그
- Semantic : 의미가 있는, 의미론적인
시맨틱 태그의 장점
- 검색엔진 최적화
- 스크린 리더를 사용하여 페이지를 탐색할 때 도움
- div > div > div > div > ... 끝없는 div를 탐색하는 것보다 효율적
- 개발자에게 명확한 의미를 전달
<header></header>
- 페이지의 제목과 같은 소개, 내용을 포함
- heading 태그나 로고, 검색양식, 작성자 이름등을 포함
<nav></nav>
- 메뉴, 목차등에 사용
<main></main>
- 지배적인 컨텐츠 영역을 나타내는 태그
<section></section>
- 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄
- 항상 제목이 있는것이 일반적
<article></article>
- 자체로 의미가 있는 웹페이지 부분이며, 독립적으로 배포 또는 재사용되도록 의도된 문서
- 블로그, 게시물, 신문기사
<footer></footer>
- 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크, 카피라이트 등을 포함
<aside></aside>
- 간접적으로 문서와 관련된 내용 또는 관련 없는 사이드바
