<map> 태그란?

하나의 이미지에서 특정 영역을 클릭 가능하도록 설정하는 기능이다. 사용자는 이미지의 특정 위치를 클릭하면 해당 영역에 연결된 링크로 이동할 수 있다.

예를 들어, 이케아, 오늘의 집 같은 온라인 쇼핑몰에서는 제품이 배치된 이미지에 <map> 태그를 활용해서 각 상품을 클릭하면 해당 상품의 상세 페이지로 이동할 수 있도록 만들 수 있다.

<img src="./img/ikea.png" usemap="#image-map">

    <map name="image-map">
        <area target="_blank" alt="" title="" href="https://www.ikea.com/kr/ko/p/mulig-clothes-bar-white-10179436/" coords="429,213,24" shape="circle">
        <area target="_blank" alt="" title="" href="https://www.ikea.com/kr/ko/p/malm-bed-frame-high-w-2-storage-boxes-white-s39199212/" coords="398,582,25" shape="circle">
        <area target="_blank" alt="" title="" href="https://www.ikea.com/kr/ko/p/malm-chest-of-6-drawers-white-70354644/" coords="597,696,23" shape="circle">
        <area target="_blank" alt="" title="" href="https://www.ikea.com/kr/ko/p/malm-chest-of-6-drawers-white-40354645/" coords="757,595,24" shape="circle">
    </map>

 

<map> 태그 사용 방법

1. 이미지와 맵 연결하기

• <img> 태그에 usemap 속성을 추가하고, # 기호와 함께 <map>의 name 속성값을 지정해야 한다.

2. 맵과 클릭할 영역 설정하기

• <map> 태그를 생성하고, name 속성을 usemap과 동일하게 설정하면 된다.

• <area> 태그를 이용해서 클릭 가능한 영역을 지정하고, coords 속성을 사용해 좌표를 입력한다.

• shape 속성을 이용해 영역의 형태를 정할 수 있다. (rect, circle, poly).

• href 속성으로 클릭하면 이동할 링크를 설정하면 된다.

 

Tip! 이미지 맵 쉽게 만들기 (https://www.image-map.net/)

손으로 좌표를 입력하는 건 번거로울 수 있으므로 https://www.image-map.net/ 같은 사이트를 이용하면 편리하다.

1. 원하는 이미지를 업로드하고, 클릭할 위치를 마우스로 지정한다.

2. 사이트에서 자동으로 <area> 태그 코드가 생성된다.

3. 해당 코드를 복사해서 HTML 파일에 붙여넣으면 바로 적용 가능하다.

map 코드 활용 예시

  • 온라인 쇼핑몰: 제품이 포함된 이미지를 클릭하면 해당 상품 페이지로 이동하도록 설정 가능.
  • 관광 지도: 지도에서 특정 지역을 클릭하면 장소에 대한 정보를 제공할 수 있음.
  • 인터랙티브 인포그래픽: 특정 영역을 클릭하면 추가 정보를 보여주는 방식으로 활용 가능.

 

<map> 태그는 이미지에서 특정 영역을 클릭할 수 있도록 설정하는 기능

쇼핑몰, 지도, 인포그래픽 등 다양한 분야에서 활용된다!!

'개발 개념 정리 > html, css' 카테고리의 다른 글

[ CSS ] 복합 선택자 쉽게 이해하기! (하위, 자식, 형제 선택자)  (2) 2025.03.17
[ HTML ] 시맨틱(semantic) 태그란? HTML 코드의 가독성 높이기!  (0) 2025.03.15
[ HTML ] 비디오 & 오디오 속성  (0) 2025.03.14
[ HTML ] iframe이란 무엇인가?  (1) 2025.03.14
[ HTML ] action, method, target, novalidate <form> 태그 속성  (0) 2025.03.14

<video> 태그 속성

1. 기본적인 속성

  • controls: 비디오 재생, 멈춤, 음소거 등의 UI 버튼 제공
  • autoplay: 페이지가 로드될 때 자동으로 재생
  • muted: 음소거 상태로 시작
  • loop: 영상이 끝나면 다시 처음부터 반복 재생
  • poster: 영상이 실행되기 전에 보이는 썸네일 이미지

 

2. preload 속성 (비디오를 미리 로드하는 방식)

  • auto: 사용자가 볼지 말지 관계없이 영상을 미리 다운로드, 중요한 영상일 경우 사용
  • metadata: 영상 데이터를 다운로드하지 않고, 길이 등의 메타 정보만 가져옴
  • none: 영상 데이터를 미리 다운로드하지 않음 (트래픽 절약)
<video src="video.mp4" controls autoplay loop muted poster="thumbnail.jpg" preload="auto"></video>

 

<track> 태그 (비디오 자막 추가)

1. 자막 관련 속성

  • srclang: 자막의 언어 (ex. ko → 한국어, en → 영어)
  • label: 사용자가 자막을 선택할 때 보이는 이름

2. 예제 코드

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitle_ko.vtt" kind="subtitles" srclang="ko" label="한국어 자막" default>
    <track src="subtitle_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

 

<audio> 태그 속성 정리

1. 기본적인 속성

  • controls: 오디오 재생, 멈춤 등의 UI 버튼 제공
  • autoplay: 페이지가 로드될 때 자동 재생
  •  loop: 끝까지 재생되면 다시 처음부터 반복
  •  muted: 음소거 상태로 시작
  • preload: 비디오와 동일하게 작동

2. 예제 코드

<audio src="audio.mp3" controls autoplay loop muted preload="metadata"></audio>

 

 

'개발 개념 정리 > html, css' 카테고리의 다른 글

[ HTML ] 시맨틱(semantic) 태그란? HTML 코드의 가독성 높이기!  (0) 2025.03.15
[ HTML ] map 태그를 알아보자!  (0) 2025.03.14
[ HTML ] iframe이란 무엇인가?  (1) 2025.03.14
[ HTML ] action, method, target, novalidate <form> 태그 속성  (0) 2025.03.14
[ HTML ] select, option, textarea, datalist... 다양한 폼 요소  (1) 2025.03.13

웹 개발에서 iframe을 사용하면 하나의 페이지 내에서 다른 HTML 페이지를 불러올 수 있다. 이 기술은 특히 중복되는 코드를 방지하고, 컨텐츠를 동적으로 변경할 때 유용하다. 하지만 최근에는 iframe을 사용하지 않는 경우가 많다.

 

1. iframe이란?

iframe은 Inline Frame의 줄임말로, HTML 문서 내에 다른 HTML 문서를 삽입할 때 사용하는 태그이다. 쉽게 말하자면 iframe 태그는 “프레임”이라고 생각하면 쉽다. 그 “프레임” 안에 다른 HTML 페이지를 띄워놓는 것이다.

 

2. 왜 iframe을 사용할까?

웹 페이지를 만들 때, 여러 페이지에서 동일한 메뉴를 사용해야 하는 경우가 있다. 예를 들어, 상단에 있는 메뉴가 5개이고, 각 메뉴를 클릭할 때마다 다른 페이지를 보여줘야 한다고 가정해 보자. 이때 각 페이지마다 동일한 메뉴 코드를 넣는다면, 메뉴가 늘어날 수록 코드가 길어지고 복잡해진다. 메뉴를 수정하려면 모든 HTML 파일을 수정해야 하는데, 매우 비효율적이다.

이럴 때 iframe을 사용하면, 메뉴는 한 번만 작성하고, 페이지 내에서 다른 내용을 동적으로 바꿀 수 있어서 코드가 훨씬 간단해진다.

 

3. iframe을 어떻게 사용하나?

- iframe 기본 구조 -

<iframe src="불러올_페이지_경로" frameborder="0"></iframe>

src 속성에는 불러오고 싶은 다른 HTML 페이지의 경로를 넣어주면 된다.

예를 들어,

<iframe src="./content.html" frameborder="0"></iframe>

이렇게 하면, 페이지가 로드될 때 ./content.html 파일이 iframe 안에 표시된다.

 

4. iframe을 활용한 메뉴와 콘텐츠 바꾸기

웹 페이지에 메뉴를 추가하고, 메뉴를 클릭할 때마다 iframe 안에 다른 콘텐츠를 보여주고 싶다면 아래의 코드처럼 상단에 메뉴를 만들고 각 메뉴를 클릭하면 그에 맞는 콘텐츠를 iframe 안에 표시되게 할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Example</title>
</head>
<body>
    <div>
        <a href="javascript:changeContent('./content1.html')">menu1</a>
        <a href="javascript:changeContent('./content2.html')">menu2</a>
        <a href="javascript:changeContent('./content3.html')">menu3</a>
    </div>
    <iframe src="./content1.html" id="iframeContent" frameborder="0"></iframe>

    <script>
        function changeContent(path) {
            document.getElementById("iframeContent").src = path;
        }
    </script>
</body>
</html>

 

< 어떻게 작동이 되나? >

1. 메뉴 만들기: 상단에 메뉴를 만들고 각 메뉴를 클릭하면 iframe 안에 다른 HTML 페이지를 불러오는 방식이다.

2. iframe에 콘텐츠 불러오기: 메뉴를 클릭하면, changeContent() 함수가 실행되는데 이 함수는 클릭한 메뉴에 해당하는 HTML 페이지의 경로를 iframe의 src 속성에 넣어서 iframe 안에 새로운 콘텐츠가 보이도록 한다.

3. 처음 로드된 페이지: 페이지가 처음 로드될 때는 iframe 안에 ./content1.html 파일이 표시된다.

 

위의 방식으로 메뉴를 클릭할 때마다 상단 메뉴는 그대로 유지되면서, 하단의 iframe 안에만 콘텐츠가 변경된다.

 

5. iframe의 단점

 그러나 iframe은 최근에는 많이 사용되지 않는 기술이다.

  • 보안 문제: iframe 안에서 다른 웹사이트를 불러올 때 보안상의 이유로 제약이 있을 수 있다.
  • 모바일 반응형 디자인: iframe을 사용하면 화면 크기에 맞춰 콘텐츠가 잘 보이지 않는 경우가 많다. 특히 모바일에서는 문제가 될 수 있다.
  • 최근 개발 추세: React, Angular, Vue와 같은 현대적인 웹 프레임워크에서는 iframe 대신 컴포넌트 기반의 동적 렌더링 방식을 사용하고 있다.

'개발 개념 정리 > html, css' 카테고리의 다른 글

[ HTML ] map 태그를 알아보자!  (0) 2025.03.14
[ HTML ] 비디오 & 오디오 속성  (0) 2025.03.14
[ HTML ] action, method, target, novalidate <form> 태그 속성  (0) 2025.03.14
[ HTML ] select, option, textarea, datalist... 다양한 폼 요소  (1) 2025.03.13
[ HTML ] 브라우저 자동 완성 기능의 표준 name 값 정리  (0) 2025.03.12

  < 목차 >

action 속성 폼 데이터를 전송할 서버 주소 설정
method 속성 데이터를 전송하는 방식 (get과 post)
get 방식 URL에 데이터가 포함되어 전송되며, 보안에 취약하고 데이터 크기 제한이 있음
post 방식 데이터가 URL에 포함되지 않고 본문(body)에 담겨 전송되며, 보안성이 높고 데이터 크기 제한이 없음
target 속성 데이터를 전송할 창 지정 (_self, _blank, _parent, _top)
formnovalidate 속성 입력 값의 정합성(유효성) 검사를 생략하는 속성
novalidate 속성 form 태그에 추가하면 폼 전체의 유효성 검사를 하지 않음

 

 <form> 태그와 action 속성

  • <form> 태그는 사용자가 입력한 데이터를 서버로 전송하는 역할을 함
  • action : 데이터를 전송할 서버 주소를 지정
  • <button type="submit"> : 버튼을 클릭하면, 해당 <form> 태그 내의 입력값이 지정된 action 주소로 전송
<form action="전송할 서버 주소" method="get">
    ...
</form>

 

method 속성 (데이터 전송 방식) - get, post

    < get >

  • get : 전송하는 데이터가 URL에 노출됨
  • 보안에 취약하지만, 페이지 주소를 공유할 때 유용함
  • URL에 데이터를 포함해 전송하기 때문에 전송 가능한 데이터 크기에 제한이 있음
  • 데이터가 url에 붙어서 복잡하게 생김.
https://example.com?name=홍길동&email=test@example.com

 

    < post >

  • 전송하는 데이터가 URL에 노출되지 않음
  • 보안적으로 더 안전함
  • 전송할 수 있는 데이터 크기에 제한이 없음
  • 하지만 개발자 도구에서는 확인할 수 있음
  • 따라서, 중요한 정보(비밀번호, 개인 정보)는 반드시 post 방식을 사용하고, 암호화하여 전송하는 것이 좋음
https://example.com/login

 

target 속성 (데이터 전송할 창 지정)

  • _self (기본값): 현재 창에서 전송
  • _blank: 새 창(새 탭)에서 전송
  • _parent: 부모 프레임에서 전송
  • _top: 최상위 프레임에서 전송
<form action="서버주소" method="get" target="_blank">

 

novalidate 속성 (입력값 검증 비활성화)

  • 기본적으로 <input> 필드는 HTML5에서 유효성 검사를 수행함
  • formnovalidate를 버튼에 추가하면 해당 버튼을 클릭해도 유효성 검사를 하지 않음
  • <form> 태그 자체에 novalidate 속성을 추가하면 모든 입력값 검사를 비활성화할 수 있음
<form action="서버주소" method="post" novalidate>
    <button type="submit">검사 수행</button>
    <button type="submit" formnovalidate>검사 안 함</button>
</form>

 

보안 관련 추가 정보

  • HTTPS (https://): HTTP에 Secure(S) 기능이 추가된 것. 데이터를 자동으로 암호화하여 전송함
  • 개발자 도구 (DevTools): 브라우저에서 F12를 누르면 확인 가능
  • 전송되는 데이터, 네트워크 요청 등을 확인할 수 있음
  • post 방식이라도 개발자 도구에서는 확인할 수 있으므로 민감한 데이터는 반드시 암호화해야 함

'개발 개념 정리 > html, css' 카테고리의 다른 글

[ HTML ] 비디오 & 오디오 속성  (0) 2025.03.14
[ HTML ] iframe이란 무엇인가?  (1) 2025.03.14
[ HTML ] select, option, textarea, datalist... 다양한 폼 요소  (1) 2025.03.13
[ HTML ] 브라우저 자동 완성 기능의 표준 name 값 정리  (0) 2025.03.12
[ HTML ] input 속성 value, readonly, disabled...  (1) 2025.03.12

< 목차 >

select & option 여러 개의 옵션 중 하나 또는 여러 개 선택 가능
multiple 속성 select 태그에서 다중 선택을 가능하게 함
textarea 여러 줄의 텍스트 입력을 받을 때 사용
fieldset & legend 관련된 입력 요소를 그룹화하고 그룹명을 설정
datalist 사용자가 입력을 하면서 선택할 수 있도록 제안 목록 제공
input + datalist 입력과 자동완성 기능을 동시에 제공

 

<select> 태그와 <option> 태그

  • 여러 개의 옵션 중에서 하나 또는 여러 개를 선택할 수 있도록 하는 태그
  • 기본적으로 하나만 선택 가능하지만, multiple 속성을 사용하면 다중 선택이 가능함
  • 다중 선택(multiple)은 Ctrl(Windows) 또는 Command(Mac) 키를 눌러야 선택할 수 있어 사용자 경험(UX)이 좋지 않아 실제로는 거의 사용되지 않음

     - 장점 -

  • 옵션이 많을 때 유용함 (ex. 국가 선택)
  • 라디오 버튼이나 체크박스보다 공간을 적게 차지함

     - 단점 -

  • 옵션 개수가 적을 때는 라디오 버튼이나 체크박스가 더 직관적임
<label for="region">살고 있는 지역은?</label>
<select id="region">
    <option value="02">서울</option>
    <option value="051">부산</option>
    <option value="064">제주</option>
</select>

 

select 태그

<label for="">살고 있는 지역은?</label>
<select id="multi-region" multiple>
    <option value="02">서울</option>
    <option value="051">부산</option>
    <option value="064">제주</option>
</select>

select-multiple 태그

<textarea> 태그

  • 여러 줄의 텍스트를 입력할 수 있는 입력 필드
  • cols(열)와 rows(행)를 설정할 수 있지만, 이는 화면에서 보이는 크기일 뿐 입력 가능한 텍스트의 제한은 아님
  • style="width: 100%;"을 사용하여 가변적인 너비를 줄 수 있음
<div>
    <textarea name="" id="" style="width: 100%;" rows="10"></textarea>
</div>

textarea 태그

<fieldset> & <legend> 태그

  • 관련된 입력 필드를 그룹화할 때 사용됨
  • fieldset은 여러 개의 입력 요소를 묶어주는 역할
  • legend는 그룹을 대표하는 제목 역할을 함
<fieldset>
        <legend>개인정보</legend>
        <div>
            <label for="name">이름</label>
            <input type="text" name="" id="name">
        </div>
        <div>
            <label for="tel">전화번호</label>
            <input type="tel" name="" id="tel">
        </div>
</fieldset>

fieldset & legend 태그

<datalist> 태그

  • <select>와 유사하지만, 사용자가 직접 입력도 가능한 태그
  • 문자를 입력받을 수 있는 인풋 박스인데 <select>의 기능이 같이 복합적으로 들어가 있음
  • <input>과 함께 사용되며, 입력 시 관련 옵션이 자동 완성 형태로 나타남

    - 장점 -

  • 입력을 도우면서도 직접 입력할 수도 있음
  • 대량의 옵션 중 원하는 값을 빠르게 찾을 수 있음
  • 하나의 <datalist>를 여러 <input>에서 재사용할 수 있음
  • 한 화면에 여러군데 옵션 정보를 줘야할때 유용

  - 단점 -

  • 사용자가 실수로 다른 문자를 입력하거나 원래있던 문자를 지울 수 있음
  • 데이터 저장 시 JavaScript로 검증이 필요함
<div>
    <input list="browsers" id="browsers1">
    <datalist id="browsers">
        <option value="safari">safari</option>
        <option value="chrome">chrome</option>
        <option value="firefox">firefox</option>
        <option value="explorer">explorer</option>
    </datalist>
</div>

datalist 태그

'개발 개념 정리 > html, css' 카테고리의 다른 글

[ HTML ] iframe이란 무엇인가?  (1) 2025.03.14
[ HTML ] action, method, target, novalidate <form> 태그 속성  (0) 2025.03.14
[ HTML ] 브라우저 자동 완성 기능의 표준 name 값 정리  (0) 2025.03.12
[ HTML ] input 속성 value, readonly, disabled...  (1) 2025.03.12
[ HTML ] HTML form 과 다양한 입력 필드 타입 정리  (0) 2025.03.12

< 대표적인 표준 name 값 (autocomplete을 위한 표준 값) >

이름 name 사용자의 이름을 입력 받는 필드
성 honorific-prefix 사용자의 성(이름 앞에 오는 존칭) 입력 받는 필드
성/이름(전체) given-name 사용자의 성과 이름을 받는 필드
성(일반 이름) family-name 사용자의 성을 받는 필드
이메일 주소 email 사용자의 이메일 주소를 받는 필드
전화번호 tel 사용자의 전화번호를 받는 필드
주소(전체) address 사용자의 전체 주소를 받는 필드
집 주소(스트리트) street-address 사용자의 집 주소(거리 주소)를 받는 필드
도시 address-level2 사용자의 도시를 받는 필드
주/도/구 address-level1 사용자의 주/도/구를 받는 필드
우편번호 postal-code 사용자의 우편번호를 받는 필드
국가 country 사용자의 국가를 받는 필드
생일 bday 사용자의 생일을 받는 필드
성별 gender 사용자의 성별을 받는 필드
직업 organization 사용자의 직업을 받는 필드
사용자 이름 username 사용자의 아이디 또는 사용자명을 받는 필드
비밀번호 password 사용자의 비밀번호를 받는 필드
새 비밀번호 new-password 사용자의 새 비밀번호를 받는 필드
확인 비밀번호 current-password 사용자의 현재 비밀번호를 받는 필드
신용카드 번호 cc-number 사용자의 신용카드 번호를 받는 필드
카드 만료일 cc-exp 신용카드 만료일을 받는 필드
카드 보안 코드 cc-csc 신용카드 보안 코드를 받는 필드

 

자동완성관련 중요한 사항

1. 브라우저 저장 범위

브라우저는 사이트 전체(도메인 기준)에서 사용자가 입력한 데이터를 저장하고, 자동 완성 데이터를 제공. 즉, 같은 도메인 내에서 여러 페이지에서 입력된 값들이 공유됨

 

2. name 속성 공유

name 속성이 같으면, 다른 HTML 파일에 있어도 자동 완성 데이터가 공유됨. 예를 들어, 첫 번째 HTML 파일에서 name="email"을 설정하고, 두 번째 HTML 파일에서 같은 name="email"을 설정하면, 첫 번째 파일에서 입력한 이메일 값이 자동으로 제시

 

3. autocomplete=“on” 속성

autocomplete="on" 속성을 사용하면, 사용자가 입력한 값들이 브라우저 캐시에 저장되고, 이후 같은 도메인 내에서 자동 완성 데이터를 제공. 이는 브라우저가 데이터를 기억하여 다시 입력할 필요 없이 자동으로 값을 제시해줌

 

4. name 속성의 중요성

name 속성이 동일하면 자동 완성 데이터를 공유할 수 있기 때문에, 입력 필드의 name 값은 매우 중요. 만약 자동 완성을 활용하려면, 정확한 name 속성을 설정해야 함.

 

5. type 속성 관계

type 속성이 달라도 name 값이 같으면 자동 완성 데이터가 공유됨. 예를 들어, type="text"와 type="email"이 다르더라도, 브라우저는 name 속성을 기준으로 데이터를 저장하므로 같은 name 값을 가진 필드는 자동 완성 기능을 공유함.

 

 

자동 완성은 autocomplete="on" 속성을 사용하여 활성화

사용자가 사이트를 방문할 때마다 입력한 데이터가 저장되어 나중에 다시 사용할 수 있게 됨

name 속성의 표준 값은 브라우저에서 자동 완성 기능을 제대로 동작시키기 위한 중요한 기준!!

'개발 개념 정리 > html, css' 카테고리의 다른 글

[ HTML ] action, method, target, novalidate <form> 태그 속성  (0) 2025.03.14
[ HTML ] select, option, textarea, datalist... 다양한 폼 요소  (1) 2025.03.13
[ HTML ] input 속성 value, readonly, disabled...  (1) 2025.03.12
[ HTML ] HTML form 과 다양한 입력 필드 타입 정리  (0) 2025.03.12
[ HTML ] 목록 태그  (1) 2025.03.11

+ Recent posts

티스토리툴바