1. 포맷팅 요소
포맷팅 요소에는 화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것이 있다.
예를 들면 <b>와 <string>은 모두 텍스트를 굵게 표현하지만, <string>요소는 텍스트를 강조
- <addr> : 생략된 약어 표시, Title 속성을 함께 사용
- <address> : 연락처 정보 표시.
- <blcokquote> : 긴 인용문구 표시, 좌우로 들여쓰기가 됨.
- <q> : 짧은 인용문구 표시, 좌우 따옴표가 붙음.
- <cite> : 공백, 줄바꿈 등 입력된 그대로 화면에 표시
- <code> : 컴퓨터 인식을 위한 소스코드
- <mark> : 특정 문자열을 강조, 화면에는 하이라이팅 됨.
- <hr> : 구분선
- <b>, <string> : 굵은 글씨로 표시, 특정 문자열 강조
- <i>, <em> : 이텔릭 표시, 특정 문자열을 강조
- <big>, <small> : 큰 글자, 작은 글자로 표시
- <sup>, <sub> : 위 첨자, 아래 첨자로 표시
- <s>, <u> : 취소선, 밑줄
2. 목록형 요소
목록 tag는 하나 이상의 하의 tag를 포함.
목록 tag는 각 항목을 들여쓰기를 표현
번호 또는 심볼을 이용해서 목록을 표현
- <ul> : 번호 없는 목록을 표시. 항목 앞에 심볼을 표시.
- <ol> : 번호 있는 목록을 표시. 숫자, 알파벳, 로마숫자 등으로 표시
- <li> : 목록 항목 <ul>이나 <ol>tag 하위에서 사용.
- <dl> : 용어 정의와 설명에 대한 내용을 목록화해서 표시.
- <dt> : 용어 목록의 정의 부분을 나타냄.
- <dd> : 용어 목록의 설명 부분을 나타냄.
3. table
HTML table 모델
HTML table 모델은 데이터를 행과 열의 셀에 표시
행 그룹요소인 <thead>, <tbody>, <tfoot> 요소를 사용하여 행들을 그룹화
<colgroup>과 <col> 요소는 열 그룹을 위한 추가적인 구조정보를 제공
table의 셀은 머리글<th>나 데이터<td>를 가질 수 있음
table 스타일
<table> <tr> <td> tag에는 table에 스타일을 적용하는 다양한 속성들이 있다.
frame 속성은 table의 특정 선을 보여줄지를 결정하며, rules 속성은 셀과 셀사이의 줄이 나타날 것인가를 지정.
table 정렬을 위한 align속성, background, bgcolor, border 속성 등이 있음.
HTML5부터는 이러한 속성들을 더 이상 지원하지 않는다. 스타일은 CSS를 사용하여 적용
table 제목
<caption> tag는 table 제목을 정의하기 위해 사용하며 <table> strat tag 바로 뒤에 위치.
<caption> tag는 table 당 하나만 사용.
table 제목은 기본적으로 가운데 정렬, 정렬 방식 변경은 CSS사용.
행 그룹 요소
table 행 그룹 요소는 table의 행들을 머리글, 바닥글, 하나 이상의 본체 항목으로 그룹핑.
행 그룹 요소에는 머리글<thead>, 본체항목<tbody>, 바닥글<tfoot> 요소가 있다.
각 행 그룹은 최소 하나 이사의 <tr>을 가져야 함.
열 그룹 요소
table 열 그룹 요소는 table 내에서 구조적인 분리를 가능케함
<colgroup> 요소는 명시적인 열 그룹을 만들며, <col> 요소는 열을 묶어 그룹핑 함
<colgroup> 요소의 span 속성은 열 그룹에서 열의 개수를 정의.
<col> 요소의 span 속성은 <col>에 의해 묶여진 열의 열의 개수를 말함.
테두리
cellspacing은 table Cell과 Cell 사이의 공간을 의미
cellspacing은 Cell 외곽과 Cell 컨텐츠 사이 공간을 의미
HTML5 부터는 테두리 스타일 관련 속성을 지원하지 않고 CSS를 사용
셀 병합
HTML table의 <td>요소에는 셀을 병합하기 위한 두 개의 속성이 있음.
colspan 속성은 두 개 이상의 열을 하나로 합치기 위해 사용
rowspan 속성은 두 개 이상의 행을 하나로 합치기 위해 사용
4. 이미지 요소
img
<img> tag를 사용하여 이미지를 삽입하기 위해 사용.
src 속성은 이미지 경로를 지정하기 위해 사용 (상대경로, URL모두 가능)
height, width 속성은 이미지 사이즈를 지정하기 위해 사용
alt 속성은 이미지를 표시할 수 없을 때 화면에 대신하여 보여질 텍스트 지정.
<figure>는 설명 글을 붙여야 할 대상을 지정
<figcaption> : 설명글이 필요한 대상은 <figure> 태그로 묶고 설명글은 <figcaption> 태그로 묶는다.
설명글을 붙일 수 있는 대상은 이미지나 오디오, 비디오 같은 미디어파일이나 텍스트 단락이나 표.
5. 링크 요소
Anchor
<a> tag를 사용하며, 하나의 문서에서 다른 문서로 연결하기 위해 사용.
tag를 서로 중첩해서 사용할 수 없다.
href 속성은 하이퍼링크를 클릭했을 때 이동할 문서의 URL이나 문서의 책갈피를 지정.
target 속성은 하이퍼링크를 클릭했을 때 현재 윈도우 또는 새로운 윈도우에서 이동할지를 지정.
target
- _blank : 링크 내용이 새 창이나 새 탭에서 열린다.
- _self : target 속성의 기본 값으로 링크가 있는 화면에서 열린다.
- _parent : 프레임을 사용했을 때 링크 내용을 부모 프레임에 표시
- _top : 프레임을 사용했을 때 프레임에서 벗어나 링크 내용을 전체 화면으로 표시
#anchor
같은 페이지 안에서 특정 요소를 클릭 시 그 위치로 한 번에 이동시킨다.
<tag id = "anchor name"> text or image </tag>
<a href = "#anchor name"> text or image<a>
map
하나의 이미지에 여러개의 link
<map name="map name"><area><area>...</map>
이미지에 영역을 표시 할 때 <area> 사용
area의 속성은 href(링크 경로), target(링크표시대상), shape(링크로 사용할 영역의 형태) 등.
shape의 값으로는 default, rect, circle, poly가 있다.
link
link tag를 사용하며 문서와 외부 자원을 연결하기 위해 사용.
<head> 위치에 정의하며 여러 자원을 연결할 수 있다.
rel 속성은 현재 문서와 연결된 문서 사이의 연관관계를 지정하기 위해 사용
href 속성은 연결된 문서의 위치를 지정하기 위해 사용
6. 프레임 요소
iframe
화면의 일부분에 다른 문서를 포함.
src 속성은 포함시킬 외부 문서의 경로를 지정(상대경로, URL모두가능)
height, width 속성은 프레임 사이즈를 지정.
name 속성은 프레임의 이름을 지정
7. form control 요소
개요
사용자로부터 데이터를 입력 받아 서버에서 처리하기 위한 용도로 사용
사용자의 요청에 따라 서버는 HTML form을 전달
사용자는 HTML form에 적절한 데이터를 입력한 후 서버로 전송. 이를 submit이라 함.
서버는 사용자의 요청을 분석한 후 데이터를 등록하거나, 원하는 데이터를 조회하여 결과를 다시 반환
사용자가 입력하기 위한 control 요소들은 모두 <form> tag 하위에 위치해야 서버로 전송됨.
각 control 요소마다 텍스트 입력, 버튼 클릭 등 다양한 형식으로 입력을 받는다.
- <form> : 사용자에게 입력 받을 항목을 정의. form tag 내부에 여러 개의 control 요소를 포함.
- <input> : 텍스트 box, 체크 box, 라디오 버튼 등 사용자가 데이터를 입력할 수 있도록 함.
- <textarea> : 여러 줄의 문자를 입력할 수 있도록 함
- <button> : 버튼을 표시
- <select> : select box를 표시
- <optgroup> : select box의 각 항목들을 정의 함.
- <option> : select box의 각 항목들을 정의 함.
- <label> : 마우스를 이용하여 <input> 항목을 선택시 편리함을 제공, for
- <fieldset> : form 요소를 그룹으로 묶음.
8. 사용자 입력을 위한 input
개요
<input> tag는 type 속성에 따라 여러 가지 형태로 화면에 표시
<input type = "유형" [속성 = "속성값"]>
id 속성은 여러 번 사용된 폼 요소를 구분하기 위해 사용
id 속성 값은 최소한 한 개 이상의 문제여야 하며 공백은 허용 X.
같은 html document에서 id는 하나의 값만 가능하고, name은 중복이 허용된다.
type 속성
- text : 한 줄의 텍스트를 입력할 수 있는 텍스트 상자.
- password : 비밀번호를 입력할 수 있는 필드.
- search : 검색 상자.
- tel : 전화번호를 입력할 수 있는 필드.
- url : URL 주소를 입력할 수 있는 필드.
- email : 메일 주소를 입력할 수 있는 필드.
- datatime : 국제 표준시(UTC)로 설정된 시간(년, 월 일, 시)
- datatime-local : 사용자 지역을 기준으로 날짜와 시간
- data : 사용자 지역을 기준으로 날짜 (년, 월, 일)
- month : 사용자 지역을 기준으로 날짜 (년, 월)
- week : 사용자 지역을 기준으로 날짜 (년, 주)
- time : 사용자 지역을 기준으로 시간(시, 분, 초)
- number : 숫자를 조절할 수 있는 화살표
- range : 숫자를 조절할 수 있는 슬라이드 막대
- color : 색상 표
- checkbox : 주어진 항목에서 2개 이상 선택 가능한 체크박스
- radio : 주어진 항목에서 1개만 선택할 수 있는 라디오 버튼
- file : 파일은 첨부할 수 있는 버튼
- submit : 서버 전송 버튼
- image : submit + image
- reset : 리셋 버튼
- button : 기능이 없는 버튼
- hidden : 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 설정
속성
- autofocus : 페이지를 불러 오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시.
- placeholder : 텍스트를 입력할 때 도움이 되도록 입력란에 적당한 힌트 내용을 표시.
- readonly : 입력란에 텍스트를 사용자가 직접 입력하지 못하게 읽기 전용으로 지정
- required : form에 data를 입력한 후 submit 클릭 시 data를 서버로 전송하기전 필수 입력 항목을 체크
- min, max, step : 해당 필드의 최대, 최소 값 지정 step은 일정 간격 지정
- size, minlength, maxlength : 텍스트 입력시 최대, 최소 길이 지정, size는 화면에 보여지는 글자의 길이 지정.
- height, width : type="image"일 때 이미지의 너비와 높이를 지정
- list : <datalist>에 미리 정의해 놓은 옵션 값을 input 안에 나열해 보여줌.
- multiple : 이메일이나 파일일 때 두 개 이상의 값을 입력,
9. 여러 data 나열
dropdown
<select> tag는 select box를 표시
<option> tag는 항목을 정의
selected 속성은 여러 개의 항목중 선택된 항목을 표시
<optgroup> : dropdown 목록에서 여러 항목들을 몇 가지 그룹으로 묶을 경우
label 속성을 이용하여 그룹의 제목을 지정
datalist
<input>과 함께 사용하며 텍스트필드에 직접 값을 입력하는 것이 아니라 datalist의 선택 값이 텍스트 필드에 입력됨.
10. 여러 줄 입력
textarea
<textarea> tag는 여러 줄을 입력할 수 있는 box를 표시
cols와 rows 속성은 text box의 크기를 지정
<textarea></textarea> tag 사이의 문자열은 text box에 표시
disabled 속성은 화면에 표시는 하되 데이터를 수정할 수 없도록 비활성화 상태로 표시.
11. 기타 form control
button
<button> 태그의 type 속성은 버튼이 활성화 되었을 때 어떤 동작을 할지 지정. 기본은 submit
input 과의 차이점은 contents를 포함할 수 있기 때문에 아이콘을 추가 할 수 있고 CSS를 이용하여 원하는 형태로 꾸밀 수 있다.
progerss
작업의 진행 상태를 표시
작업의 시작을 0, 최종 완료를 최대값으로 설정
meter
값이 차지하는 크기 표시
<progress> 와 결과 화면은 비슷하지만 progress는 진행 상황을 나타내는 반면 meter는 전체 크기 중 얼마나 차지하는 지를 표현
12. 공간 분할 태그
div & span
- div : block 형식으로 공간을 분할. 웹사이트의 레이아웃을 만들 때 사용, 각각의 블록을 알맞게 배치하고 CSS를 활용하여 스타일을 적용
- span : inline 형식으로 공간을 분할, <div> , <p>태그와 함께 웹페이지의 일부분에 스타일을 적용시키기 위해 사용. margin 사용 시 양옆으로만 적용
block & inline
- block : <div> , <h1>~<h6>, <p>, 목록 태그, <table>, <form>
- inline : <span>, <a>, <input>, 글자 형식 태그