Programming Language/HTML ,CSS

[HTML5] a 태그, testarea, select

Sergemeow 2022. 10. 25. 22:37

1. a 태그

 

a 태그를 통해 다른 페이지로 이동하게 하거나 다운로드도 가능하다.

- href 속성

이동할 url, 값이 없다면 현재 페이지로 새로고침

속성값에 //, http:// 이 있으면 url로 인식, 없으면 파일로 인식

값에 tel: 이 나오면 핸드폰으로 연결. 주로 모바일에서 사용

값에 mailto: 가 나오면 이메일로 연결

 

- target 속성

_self: 기본값, 현재 화면에서 링크를 새로 연다.

_blank: 새창에서 열어서 링크 연결

_parent: 부모창에서 링크 연결

결제창처럼 팝업창(자식창)이 뜨고 팝업창의 값을 반영하여 본래의 창(부모창)이 변경되어야 할 경우.

_top: 최고조상에서 링크를 연결. 부모가 없으면 _self와 동일. 다중 팝업창이 뜨는 경우.

 

- download 속성

download 속성을 추가하면 해당 파일을 다운로드함

href의 속성이 파일로 입력되어야 함

 

활용 예시

 

2. testarea

일반적으로 input text 속성은 한 줄 문자열만 입력 받을 수 있지만 textarea는 여러줄의 문자열을 입력 받을 수 있음

- 속성

cols: 열 수. 한 행에 들어갈 수 있는 글자 수. cols+1까지 가능

rows: 행 수

minlength: 최소글자수

maxlength: 최대글자수, 속성이 없으면 제한 없음

간단한 글 - 댓글 등에 사용

게시판처럼 복잡한 서식이 있는 경우 플러그인 사용이 일반적

 

이런 식으로 활용이 가능하다

3. select

select 태그는 드롭다운 박스에서 제시된 항목 중 하나를 선택할 수 있게 해주는 태그이다.

option 태그를 넣어서 목록을 구성한다.

option value : 해당 option 태그가 선택되어있을 때 전송하는 값

없으면 태그 안의 문자열 값을 전송한다.

활용 예시

'Programming Language > HTML ,CSS' 카테고리의 다른 글

[HTML5] Table 활용  (0) 2022.10.26
[HTML5] pre, div, img  (0) 2022.10.26
[HTML5] a 태그 - 앵커, 리스트  (0) 2022.10.25
[HTML5] Input에 대해 알아보자  (0) 2022.10.25
[HTML5] 기초 태그 개념 및 활용  (0) 2022.10.25