HTML 기타 폼 요소와 레이아웃 기본 태그
이번 글은 Frontend / Markup structure 영역에서 자주 사용되지만 한 번에 정리하기 어려운 기타 입력 태그와 레이아웃 기본 태그들을 정리한다.
앞선 편에서 다룬 <input> 계열과 함께 사용되며,
폼 구성과 화면 구조를 이해하는 데 중요한 역할을 한다.
1. <textarea> 태그
<textarea> 태그는
여러 줄의 텍스트 입력이 필요한 경우 사용하는 태그다.
한 줄 입력만 가능한 input 태그와 달리, 텍스트 입력 영역이 여러 줄을 차지한다.
cols는 너비,
rows는 줄 수를 의미한다.
08_textareatag.html
textarea 태그
메시지를 입력하세요
textarea는 input의 여러 줄 버전이라고 생각하기 쉽다.
하지만 input은 value 속성으로 기본값을 지정하는 반면,
textarea는 여는 태그와 닫는 태그 사이에
기본값을 작성한다는 차이점이 있다.
2. <select> / <option> 태그
여러 개의 옵션 중 하나를 선택하도록 할 때 사용하는 태그다.
사용자에게 보이는 텍스트와
서버로 전송되는 값(value)이
다를 수 있다는 점이 중요하다.
09_optiontag.html
옵션들을 사용하는 태그
language
<option value="">-- 언어 선택 --</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="ts">TypeScript</option>
아무 것도 선택하지 않은 상태를 표현하기 위해
value=""를 사용하는 경우가 많다.
특정 옵션을 기본 선택으로 보여주고 싶다면
selected 속성을 사용할 수 있다.
multiple 속성을 사용하면 다중 선택도 가능하지만,
사용성이 좋지 않아 실무에서는 거의 사용하지 않는다.
3. <optgroup> 태그
option 태그들을 그룹화할 때 사용하는 태그다.
optgroup 자체는 선택할 수 없으며, 그 안에 포함된 option만 선택 가능하다.
사과 포도 당근 토마토4. <datalist> 태그
입력값을 직접 입력하되, 추천 목록을 함께 제공하고 싶을 때 사용하는 태그다.
겉보기에는 일반 input과 동일하지만, 자동완성 후보를 미리 제공한다.
중요한 연결 규칙은 두 가지다.
- label의 for 값 = input의 id 값
- input의 list 값 = datalist의 id 값
5. progress / meter 태그
진행 상태나 수치를 시각적으로 표현하는 태그다.
progress
진행 중인 상태를 표현할 때 사용한다.
value 값을 JavaScript로 변경하면 진행 바가 실시간으로 움직인다.
meter
고정된 수치 상태를 표현할 때 사용한다.
min, max,
low, high,
optimum 속성을 통해
수치의 상대적 상태를 표현할 수 있다.
다만 브라우저별 표현이 다르기 때문에 실무에서는 CSS로 커스텀하는 경우가 많다.
6. <iframe> 태그
외부 웹 페이지를 현재 페이지 안에 포함시키는 태그다.
iframe 사용 시 다음과 같은 문제가 있다.
- 보안 문제: clickjacking 공격에 취약
- 사용성 저하: 뒤로 가기 흐름이 자연스럽지 않음
- SEO에 불리함: 실제 콘텐츠가 포함되지 않음
- 성능 문제: 메모리 사용량 증가
특별한 경우가 아니라면 사용을 권장하지 않는다.
7. <div> 태그 vs <span> 태그
div와 span은 기능적으로는 아무 역할도 하지 않는 태그다.
하지만 CSS 적용 시 레이아웃을 구성하는 데 매우 중요한 차이를 가진다.
-
<div>: block 요소, 가로 전체 영역 차지 -
<span>: inline 요소, 내용만큼만 영역 차지
대부분의 HTML 태그는 기본적으로 inline 또는 block 성격을 가진다.
<b>태그: inline<p>태그: block
정리
- textarea는 여러 줄 텍스트 입력에 사용한다.
- select/option은 value와 화면 표시값의 차이를 이해해야 한다.
- datalist는 자동완성 형태의 입력을 제공한다.
- progress와 meter는 상태 표현용 태그다.
- iframe은 보안·SEO·성능 이슈로 주의가 필요하다.
- div와 span은 block / inline 차이가 핵심이다.
