HTML 다시 배우기 - 4. hyperlink / list / 멀티미디어 태그 / form

1. hyperlink

사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link) 라 한다.

 

href 어트리뷰트

href 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다.

 

href 어트리뷰트에 사용 가능한 값

절대 URL: 웹사이트 URL (href=”http://www.example.com/default.html”)
상대 URL: 자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”)
fragment identifier: 페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”)
메일 작성 링크: "mailto:someone@example.com?Subject=Hello again"
script: href=”javascript:alert(‘Hello’);”

target 어트리뷰트

_self: 링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈한다 (기본값)
_blank: 링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈한다

 

주의사항

target="_blank"를 사용해 외부 페이지를 오픈하는 경우, 이동한 외부 페이지에서 자바스크립트 코드를 사용해 악의적인 페이지로 리다이렉트할 수 있는 보안 취약점(Tabnabbing 피싱 공격)이 있다. 따라서 rel="noopener noreferrer"를 추가해 대비할 것을 권장하고 있다.

2. 목록 (List)

순서있는 목록 (Ordered List)

 

type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있다

 

“1”: 숫자 (기본값)
“A”: 대문자 알파벳
“a”: 소문자 알파벳
“I”: 대문자 로마숫자
“i”: 소문자 로마숫자

<ol type="a">
  <li value="2">Coffee</li>
  <li value="4">Tea</li>
  <li>Milk</li>
</ol>

// result
b.  offee
d.  Tea
e.  Milk

start 어트리뷰트로 리스트의 시작값을 지정

 

<ol start="3">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

// result
3.  offee
4.  Tea
5.  Milk

 

reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현할 수 있다.

3. 미디어

 

3.1 audio

src: 음악 파일 경로
preload: 재생 전에 음악 파일을 모두 불러올 것인지 지정
autoplay: 음악 파일을 자동의 재생 개시할 것인지 지정
loop: 음악을 반복할 것인지 지정
controls: 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.

 

※ 웹브라우저 별로 지원하는 음악 파일 형식이 다르다. 파일 형식에 따라 재생되지 않는 브라우저가 존재한다. source 태그를 사용하여 파일 형식의 차이 문제를 해결 할 수 있다. type 어트리뷰트는 생략 가능하다.

 

<audio controls>
  <source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
  <source src="assets/audio/Kalimba.ogg" type="audio/ogg">
</audio>

 

3.2 비디오

src: 음악 파일 경로
preload: 재생 전에 음악 파일을 모두 불러올 것인지 지정
autoplay: 음악 파일을 자동의 재생 개시할 것인지 지정
loop: 음악을 반복할 것인지 지정
controls: 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.
width: 동영상의 너비를 지정
height: 동영상의 높이를 지정

 

※ audio 태그와 마찬가지로 파일 형식의 차이 문제가 발생할 수 있다. source 태그를 사용하여 형식 차이 문제를 해결가능 하다. type 어트리뷰트는 생략 가능하다.

 

<video width="640" height="360" controls>
  <source src="assets/video/wildlife.mp4" type="video/mp4">
  <source src="assets/video/wildlife.webm" type="video/webm">
</video>

4. form

form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식 태그를 포함할 수 있다.

 

4.1 select

복수개의 리스트에서 복수개의 아이템을 선택할 때 사용한다.

 

서버에 전송되는 데이터는 select 요소의 name 어트리뷰트를 키로, option 요소의 value 어트리뷰트를 값으로하여 key=value의 형태로 전송된다.

tag	Description
select	select form 생성
option	option 생성
optgroup	option을 그룹화한다

 

<select name="cars3">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars" disabled>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

 

4.2 fieldset / legend

fieldset 태그는 관련된 입력 양식들을 그룹화할 때 사용한다. legend 태그는 fieldset 태그 내에서 사용되야 하며 그룹화된 fieldset의 제목을 정의한다.

<fieldset>
  <legend>Login</legend>
  Username <input type="text" name="username">
  Password <input type="text" name="password">
</fieldset>