0827 이미지태그, 하이퍼링크, 아이프레임, 폼문

[삐돌이]

0827.zip

83.99KB

이미지 <img>

비트맵과 벡터이미지
비트맵은 각 픽셀이 모여 만들어진 정보의 집합으로 "레스터 이미지"라고도 부릅니다. 픽셀 단위로 화면에 렌더링합니다. 그림판, 포토샵등 툴로 편집할 수 있습니다.
벡터이미지는 수학적 정보의 형태들이 만들어내는 결과물입니다. 이미지가 가지고 있는 점, 선, 면의 위치, 색상등의 정보를 가지고 있으며 그를 화면에 렌더링합니다. 확대 및 축소를 해도 이미지가 깨지지 않습니다. 일러스트 같은 툴로 편집할 수 있습니다.

jpg(jepg)
압축률이 훌륭하여 사진이나 예술분야에 많이 사용됩니다.
- 손실 압축
- 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합
- 가장 널리 쓰이는 이미지 포멧

GIF
이미지 파일 내에 이미지 및 문자열 같은 정보등을 저장할 수 있습니다.
- 비손실 압축
- 8비트(256색상) 컬러만 지원
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)

PNG
GIF의 대체 포멧으로 개발되었습니다.
- 비손실 압축
- 8비트, 24비트 컬러 이미지 처리
- W3C 권장 포멧
- 알파 채널 지원(투명도)

WEBP
JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포멧입니다.
- 완벽한 손실 / 비손실 압축 지원
- GIF 같은 애니메이션 지원
- 알파 채널 지원(손실, 비손실 모두)
- 완벽한 포멧

이미지 태그
<img src="이미지가 위치하는 주소 또는 파일경로(파일명)" alt="이미지를 대체할 문자">

1. 절대 경로
고유한 경로입니다. http:// https://
D:\Ryuzy\HTML\Day3\cat1.png (file 경로는 사용하지 않음)

2. 상대 경로
이미지를 삽입할 HTML 문서를 기준으로 경로를 사용합니다.
1. 이미지가 HTML 문서와 같은 폴더에 있는 경우 -> 파일명 또는 ./파일명
2. 이미지가 images 하위폴더에 있는 경우 -> images/파일명 또는 ./images/파일명
3. 이미지가 상위폴더에 있는 경우 -> ../파일명
4. 이미지가 상위폴더 images에 있는 경우 -> ../images/파일명

-----------------------------------------------------------------------------------

하이퍼 링크 <a>
하이퍼 링크란 다른 페이지나 사이트로 연결하는 링크(문자 또는 이미지)를 말합니다.

<a href="사이트 또는 이동할 문서의 위치">링크에 사용될 문자 또는 이미지</a>
예)
<a href="https://www.naver.com">네이버</a>

책갈피 (내부링크)
<a> 태그의 name 속성 또는 특정 태그의 id 속성을 이용하면 책갈피 기능을 만들 수 있습니다.

<a href="a 태그의 href 속성의 #값 또는 특정 태그의 id 속성의 값">링크에 사용될 문자 또는 이미지</a>

<a href="#book">도착지로 이동</a>
...
...
...
...
...
...
...
<a name="book">도착</a>
또는
<p id="book">도착</p>

-----------------------------------------------------------------------------------

폼 <form> 
웹 페이지내에서 사용자로부터 입력을 받을 때 사용하는 태그입니다. 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용합니다.

<form method="서버로 전송할 데이터 방식" action="서버로 데이터를 전달하기 위한 페이지">
    입력 요소
    .....
</form>


입력 상자 <input>
사용자로부터 데이터를 입력받기 위해 사용하는 글상자 요소입니다.

type 속성
text : 사용자로부터 문자를 입력받는 글상자입니다.
password : 사용자로부터 비밀번호를 입력받는 글상자입니다.
submit : 사용자로부터 입력받은 데이터를 서버에 제출하는 버튼입니다.
reset : 사용자로부터 입력받은 데이터를 초기화하는 버튼입니다.
button : 아무런 이벤트가 없는 버튼입니다.
radio : 사용자로부터 여러개의 옵션 중에서 단 하나의 옵션만을 입력받을 수 있도록 하는 버튼입니다.
* radio는 그룹을 맺기 위해 name 속성의 값이 동일해야 합니다.
checkbox : 사용자로부터 여러개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼입니다.
* checkbox는 그룹을 맺기 위해 name 속성의 값이 동일해야 합니다.
file : 사용자로부터 원하는 파일을 서버로 전송하기 위한 글상자입니다.



size 속성
크기를 설정하는 속성입니다.

maxlength 속성
값의 최대 길이를 설정하는 속성입니다.

placeholder 속성
사용자가 입력전에 특정 데이터를 입력하도록 안내해주는 값을 설정합니다.

name 속성
요소의 이름을 설정하며, 서버에서 요소의 값을 읽을 수 있는 키 역할을 합니다.

checked 속성
여러개의 라디오 또는 체크박스 중에서 미리 선택하는 옵션을 설정합니다.


라벨 <label>
폼 양식에 이름을 붙이는 요소입니다. label 요소와 다른 요소를 연결하면 해당 영역이 넓어집니다.

<label>남자<input type="radio" name="gender" value="남자"></label>
또는
<label for="man">남자</label> <input type="radio" id="man" name="gender" value="남자">


선택상자 <select>
여러개의 옵션이 드롭다운 리스트로 되어 있으며 그 중에서 단 하나의 옵션만을 입력받을 수 있습니다. <option> 요소를 통해 선택할 수 있는 옵션을 설정합니다.

여러줄 글입력 상자 <textarea>
사용자로부터 여러줄의 텍스트를 입력받는 글상자입니다.

<textarea cols="가로 글자수" rows="세로 글자수"></textarea>