HTML web2 04일차 - cursor,iframe,form태그

cursor

마우스 커서를 바꿔주는 CSS속성

1. cursor:pointer

대상위에 마우스를 올리면 대상을 클릭 할 수 있는것 처럼 마우스 커서를 변경해주는 속성

2. cursor:move

대상위에 마우스를 올리면 이동 할 수 있는것 처럼 마우스커서를 변경해주는 속성

3. cursor:text

대상위에 마우스를 올리면 글자를 입력할 수 있는것처럼 마우스커서를 변경해주는 속성

4. cursor:wait

대상위에 마우스를 올리면 로딩을 기다리는 것처럼 마우스커서를 변경해주는 속성

 

대상위에 마우스커서 모양을 바꿔주거나 사이트 전체에서 마우스 커서를 바꿀 수 있는데

cursor:url(파일이름)을 사용하여 마우스커서의 모양을 바꿔 줄 수 있다.

 

 

iframe

원하는 웹상의 동영상이나 유튜브 영상을 가져 올때 사용하는 속성

1.display:inline-block속성이다.

2. 옵션으로는 autoplay=1 동영상 자동재생, mute=1 동영상 음소거 둘은 함께사용한다.

control=0 기본값이 1이고 사용시 control=0을 추가하여 사용한다 사용시 컨트롤 바가 사라진다.

loop=1 동영상 반복재생 사용시 playlist="유튜브 동영상코드" 를 함께 입력하여 사용한다.

각각의 옵션추가시 유튜브에서 가져온 소스코드에서 동영상 코드 끝에 ?를 넣고 옵션&옵션과 같은방식으로 옵션을 추가한다.

ex) src="https://www.youtube.com/embed/B8Cv4h_bt0l?autoplay=1&mute=1&loop=1&playlist=B8Cv4h_bt0l"

 

 

form태그

ul태그와 비슷한 개념 입력양식 태그들을 작성하기 전 기본적으로 작성하는 태그

 

1. input type="text"

글자를 입력 받을 수 있는 가로 박스를 만들어주는 속성

2. password

글자를 입력할 경우 특수문자로 표기되는 가로박스를 만들어주는 속성 예) 비밀번호 , 카드번호 일부 등

3. search

검색창을 만들어주는 태그 오른쪽에 X표시가 생긴다.

4.url

웹사이트 주소를 입력받는 공간을 만들어주는 속성

5. email

웹사이트 상에서 이메일주소를 입력받는 전용공간을 만들어주는 속성

6. tel

전화번호를 입력받는 전용 공간을 만들어주는 속성

작성후 스마트폰에서 확인시 글자패드가아닌 숫자패드가 나온다.

7. number

<input type="number" min="5" max="100" step="5" value=5> 기본값 5부터 시작되어 5씩 증가되고 100까지 올라가는 숫자 선택 창을 만든다.

대표사진 삭제

 

사진 설명을 입력하세요.

8. radio

선택하여 체크 할 수 있는 동그라미가 생기며 name 옵션과 반드시 같이 사용하여야 한다.

동그라미를 체크하여 정보를 입력받고 전송하는 방식

<form>
<p>취미생활이 무엇인가요?<p>
<input type="radio" name="a">탁구
<input type="radio" name="a">농구
<input type="radio" name="a" checkde>배구
<input type="radio" name="a">축구
</form>

 

checked를 작성해주면 해당 항목에 체크가 되어진채로 출력된다.

대표사진 삭제

사진 설명을 입력하세요.

9.rage

막대바가 생성되며 이 막대바를 움직여 number태그처럼 범위내의 값을 입력 받을때 사용한다.

<input type="rage" min="1" max="20" value="1"> 와같이 사용한다.

10. chechbox

웹사이트 상에서 내용을 동의하거나 기타 여러가지 사항에 체트를 해야하는 상황에 사용하는 체크 태그로 radio와 다르게 중복 체크가 가능하다.

radio와 같이 checked를 사용하면 체크가 되어 출력됨

11. color

웹사이트 상에서 색상값을 입력 받을때 사용

12. date

연도 / 월 / 일 날짜정보를 입력받는 양식을 만들어주는 태그 달력모양 아이콘을 눌러 달력의 날짜를 볼 수 있다.

13. week

연도와 그연도에 몇번째 주인지 날짜 정보를 두단위로 입력받을 수 있는 양식을 만들어주는 태그

14. datetime-local

date태그에서 시간(오전,오후)정보가 추가된 입력양식 태그

15. file

파일을 업로드 할 수 있는 양식을 만들어주는 태그 "파일선택"이라는 버튼을 반들어 주고 클릭하여 원하는 파일을 찾고 업로드 가능하게하는 태그

16. label

input태그와 연동하여 input태그의 속성을 그대로 이어받아 그태그의 기능을 대신 작동하게 해주는 태그

input태그가 css속성을 사영하여 바꿔줄 수 있는 부분이 제한적이기 때문에 제한이 없는 label(display:inline-block)태그를 사용하는것

<input type="file" id="a">
<label for="a"></label>

 

label 이 id a인 input태그의 속성을 이어받아 파일업로드를 할 수 있는 태그가 되었다.

 

17. select / option

select = ul

option=li

클릭하면 option에 적어둔 갯수만큼 선택지가 나오는 태그 (옷이나 신발 사이즈 선택 후 입력받을때 사용하는 태그)

 

18.textarea

input type="text"와 비슷 하지만 오른쪽 하단에 마우스를 올리면 길이를 조절 할 수있는형태로 마우스커서가 변경되어 글자입력 공간의 크기를 변경 할 수 있다.