FEDAY04
책갈피(bookmark)
a태그의 name속성 또는 특정 태그의 id 속성을 이용하여
책갈피 기능을 활용할 수 있다.
<a href="#test">출발</a>
...
<a name="test">도착</a>
또는
<p id="test">도착</p>
아이프레임
inline frame의 약자
iframe을 이용하면 웹페이지 안에 또 다른 웹페이지를 삽입할 수 있음
<iframe src="삽입할 페이지의 주소 또는 문서위치" style="CSS 스타일코드"></iframe>
a태그의 target속성
페이지 이동이 일어날 곳을 설정할 수 있음
_blank : 링크로 연결된 문서를 새 탭에서 열어준다.
정해놓은 이름 : 해당하는 이름을 가진 탭 혹은 iframe에서 페이지 이동이 일어난다.
폼(form)
웹 페이지에서 사용자로부터 입력을 받아서 처리쪽으로 (하나의 세트로) 보내줄 때 사용하는 태그
사용자가 입력한 데이터를 서버쪽으로 보낼 때 form 요소를 사용
action 속성은 서버로 데이터를 전송할 때 "목적지" 역할
method 속성은 데이터의 "전송 방법" 설정 역할(get,post)
<form action="데이터를 보낼 목적지" method="데이터 전송 방식">
여러 입력, 여러 내용들
</form>
method 방식
get : url에 데이터를 저장하여 전송하는 방식
post : body에 데이터를 저장하여 전송하는 방식
입력상자(input)
<input type="입력형식">
type 속성
text 문자열을 입력받는 글상자
password 비밀번호를 입력받는 글상자(텍스트 내용이 표기되지 않음)
radio 여러개의 옵션 중에서 단 하나의 옵션만을 선택받을 수 있는 동그란 버튼
그룹을 맺기 위해서는 name속성의 값이 동일해야 한다.
checkbox 여러개의 옵션 중에서 다수의 옵션을 선택받을 수 있도록 하는 네모난 버튼
file 원하는 파일을 서버로 전송하기 위한 입력상자
email 이메일을 입력받는 글상자(@ 필요)
url 웹사이트를 입력받는 글상자(http부터 시작된 url)
tel 전화번호를 입력받는 글상자
date 원하는 날짜를 입력받는 글상자
number 원하는 숫자를 입력받는 글상자
color 원하는 색상을 입력받는 요소
선택한 색상은 16진수 RGB컬러 값으로 전달
16진수 : 0 1 2 3 4 5 6 7 8 9 A B C D E F
Red Green Blue
FF FF FF --> 흰색
00 00 00 --> 검정색
FF 00 00 --> 빨간색
search 검색어를 입력받는 글상자
range 일정 범위안의 값들만 입력받는 글상자
button 이벤트가 없는 일반 버튼
submit 입력받은 데이터를 서버에 제출하는 버튼
속해있는 form의 action 속성에 설정한 곳으로 데이터를 전송
reset 입력받은 데이터들을 초기화 하는 버튼
그룹(fieldset)
폼의 입력 요소를 그룹으로 묶을 때 사용
<fieldset>
그룹으로 묶을 input들
</fieldset>
그룹 제목(legend)
fieldset의 제목을 만들 때 사용
<fieldset>
<legend>그룹제목</legend>
입력들
...
</fieldset>
라벨
input에 이름을 붙이는 태그
label 요소와 다른 input 요소를 연결하면 그 input의 영역이 넓어짐
radio, checkbox의 스타일을 설정
<label>텍스트 <input></label>
선택상자
여러개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단 하나의
옵션만을 입력받을 수 있다. <option> 요소를 통해 선택할 수 있는 아이템을 설정
<select name="">
<option value="실제값1">내용1</option>
<option value="실제값2">내용2</option>
...
</select>
데이터 목록
미리 지정된 옵션 목록을 보여줌
특정 글자를 입력하면 해당하는 지정된 글자를 미리 보여줄 때 사용
<datalist id="리스트의이름">
<option value="실제값1">내용1</option>
<option value="실제값2" label="내용2"></option>
</datalist>
여러줄 글상자
여러줄의 텍스트를 입력받는 글상자
<textarea cols="가로글자수" rows="세로글자수"></textarea>
<input> 의 속성들
size
박스의 크기를 설정하는 속성
maxlength
값의 최대 길이를 설정하는 속성
placeholder
입력 전 특정 데이터를 입력하도록 유도(안내)하는 문자열을 설정하는 속성
checked
여러개의 라디오 또는 체크박스 중에서 미리 선택되어 있는 옵션을 설정하는 속성
readonly
데이터를 볼 수 있으나 수정할 수는 없게 설정하는 속성
disabled
입력필드 자체를 아예 사용할 수 없게 설정하는 속성
required
데이터를 필수로 입력하도록 지정하는 속성
id
요소의 유일한 구분자를 설정
HTML 문서에서 해당 요소의 스타일을 주거나 동적인 동작을 하게 할 때 사용
name
요소의 이름을 설정
서버에서 전달되는 값을 받을 때 찾기 위한 키(Key)로 사용
파비콘(Favicon) 만들기
Favorites Icon 의 줄임말
웹 브라우저 타이틀 옆에 작은 아이콘으로 표기
16*16픽셀이 기본 규격
<head>
<link rel="icon" href="파일경로">
</head>
* png파일을 icon 파일로 변환
https://convertico.com
HTML의 디스플레이 속성
inline 태그
content 크기 만큼 자리를 차지하는 요소
문자(텍스트)의 특징
span, img, ...
block 태그
라인을 모두 차지하는 요소
박스(면)의 특징
div, ul, li, h, ...
