1. 뉴스레터에 들어갈 이미지 파일 업로드

이미지를 티스토리 블로그에 업로드했다면 이미지 우클릭 -> 이미지 주소 복사

(뉴스레터에 넣을 이미지 수만큼 업로드)

 

2. 이미지 세부 영역에 하이퍼링크 추가를 해야 한다면 세부 영역 좌표 확인

https://www.maschek.hu/imagemap/ 접속 후 OR from the Internet: 부분에 1번 과정을 통해 얻은 이미지 주소를 넣은 후

accept -> 이미지가 나타나면 마우스 클릭으로 세부 영역 설정 -> 좌표 값 복사

 

3. 뉴스레터용 HTML 기본 양식 준비

1번 과정을 통해 얻은 이미지 주소를 img src 값에 넣고, 2번 과정을 통해 얻은 세부 영역 좌표를 coords 값에 넣는다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>1차 ○○○ 5월 뉴스레터</title>
</head>

<body leftmargin="0" topmargin="0">
	<div style="width:800px; margin: 0 auto;">
    
	<!-- img src 값에 뉴스레터1, 2 이미지 전체 경로 넣기 -->
	<img src="http://test.co.kr/uploads/2025/05/뉴스레터1.jpg" usemap="#001" border="0" alt="1차 ○○○ 5월 뉴스레터1" style="width: 100%; border: 0px; vertical-align: top;">   
	<img src="http://test.co.kr/uploads/2025/05/뉴스레터2.jpg" usemap="#002" border="0" alt="1차 ○○○ 5월 뉴스레터2" style="width: 100%; border: 0px; vertical-align: top;">
		
		<!-- 뉴스레터1 이미지 세부 영역에 하이퍼링크 추가 -->
		<map name="001">
			<!-- coords 값에 뉴스레터1 이미지 세부 영역 좌(x1), 상(y1), 우(x2), 하(y2) 좌표 넣기, href 값에 하이퍼링크 연결할 주소 넣기 -->
			<area shape="rect" coords="10,10,110,110" href="https://www.testpage1.co.kr/" alt="1차 ○○○ 5월 뉴스레터1 영역1" target="_blank" border="0" style="border: none;"/>
 			<area shape="rect" coords="20,20,120,120" href="https://www.testpage2.co.kr/" alt="1차 ○○○ 5월 뉴스레터1 영역2" target="_blank" border="0" style="border: none;"/>
		</map>
      
		<!-- 뉴스레터2 이미지 세부 영역에 하이퍼링크 추가 -->
		<map name="002">
			<!-- coords 값에 뉴스레터2 이미지 세부 영역 좌(x1), 상(y1), 우(x2), 하(y2) 좌표 넣기, href 값에 하이퍼링크 연결할 주소 넣기 -->
 			<area shape="rect" coords="30,30,130,130" href="https://www.testpage3.co.kr/" alt="1차 ○○○ 5월 뉴스레터2 영역1" target="_blank" border="0" style="border: none;"/>
			<area shape="rect" coords="40,40,140,140" href="https://www.testpage4.co.kr/" alt="1차 ○○○ 5월 뉴스레터2 영역2" target="_blank" border="0" style="border: none;"/>
			<area shape="rect" coords="50,50,150,150" href="https://www.testpage5.co.kr/" alt="1차 ○○○ 5월 뉴스레터2 영역3" target="_blank" border="0" style="border: none;"/>
			<area shape="rect" coords="60,60,160,160" href="https://www.testpage6.co.kr/" alt="1차 ○○○ 5월 뉴스레터2 영역4" target="_blank" border="0" style="border: none;"/>
		</map>
	</div>
</body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'HTML > 참고자료' 카테고리의 다른 글

[HTML] 상대 경로 & 절대 경로  (0) 2025.02.23
[HTML] 태그 종류  (1) 2024.12.25
[HTML] form 태그 속성  (0) 2024.12.12

상대 경로 & 절대 경로를 사용할 수 있는 HTML 태그들은 다른 리소스를 불러오거나 참조하는 태그들이다.

페이지 이동 : <a>, <link>, <iframe>
멀티미디어 : <img>, <audio>, <video>, <source>
스크립트 관련 : <script>
폼 관련 : <form>, <input>


필요할 때마다 상대 경로와 절대 경로를 잘 활용하면 된다.

 

상대 경로 (Relative URL)

href="www.naver.com"처럼 scheme(프로토콜, 예 : https://)이 없는 URL을 작성하면, 브라우저는 해당 URL을 현재 문서의 경로를 기준으로 해석한다.
예를 들어, 현재 페이지가 https://www.example.com/page.html이라면,
href="www.naver.com" -> https://www.example.com/www.naver.com 처럼 변환되어 엉뚱한 주소로 이동한다.

 

절대 경로 (Absolute URL)

href="https://www.naver.com"처럼 http:// 또는 https://를 포함한 주소는 절대 경로이다.
절대 경로는 현재 문서의 위치와 관계없이 항상 지정된 주소로 이동한다.
그래서 href="https://www.naver.com"으로 변경했을 때, 정상적으로 네이버 홈페이지가 열리는 것이다.

 

추가 설명 : //만 사용하는 경우

href="//www.naver.com"처럼 앞에 //만 붙이면, 현재 페이지의 프로토콜(http 또는 https)을 따라간다.
예 : 현재 페이지가 https://www.example.com/page.html이라면, href="//www.naver.com" -> https://www.naver.com
예 :  현재 페이지가 http://www.example.com/page.html이라면, href="//www.naver.com" -> http://www.naver.com
주로 프로토콜을 자동으로 맞추고 싶을 때 사용한다.

 

결론

href="이 부분에"

www.naver.com만 쓰면 상대 경로로 처리돼서 엉뚱한 경로가 나온다.
https://www.naver.com처럼 프로토콜을 포함하면 절대 경로가 되어 정확한 사이트로 이동한다.
//www.naver.com은 현재 페이지의 프로토콜을 따라가는 절대 경로 방식이다. 

 

https:// 또는 http://를 명시하는 것이 더 명확하고 안전한 방법이다.

저작자표시 비영리 변경금지 (새창열림)

'HTML > 참고자료' 카테고리의 다른 글

[HTML] 뉴스레터 제작  (1) 2025.05.02
[HTML] 태그 종류  (1) 2024.12.25
[HTML] form 태그 속성  (0) 2024.12.12

1. 기본 구조 태그
· <html> : 문서의 최상위 요소
· <head> : 메타데이터, 스타일, 스크립트 등을 포함
· <body> : 실제 화면에 표시되는 콘텐츠를 포함

2. 문서 구조 태그
· <header> : 헤더 영역(로고, 내비게이션 포함)
· <nav> : 내비게이션 링크를 그룹화
· <main> : 문서의 주요 콘텐츠를 포함
· <section> : 문서의 구획을 나누는 데 사용
· <article> : 독립적인 콘텐츠(예 : 블로그 글, 뉴스 기사)
· <aside> : 부가 정보(예 : 사이드바)
· <footer> : 문서나 섹션의 하단 영역

3. 텍스트 콘텐츠 태그
· <h1> ~ <h6> : 제목 태그 <h1>이 가장 크고 중요
· <p> : 단락
· <span> : 인라인 요소로 텍스트를 그룹화
· <strong> : 굵게 표시(중요성을 나타냄)
· <em> : 기울임꼴(강조를 나타냄)
· <a> : 하이퍼링크 생성

4. 리스트 태그
· <ul> : 순서 없는 리스트(점)
      · <li> : 리스트 항목
· <ol> : 순서 있는 리스트(숫자)
      · <li> : 리스트 항목
· <dl> : 정의 리스트
      · <dt> : 정의 제목
      · <dd> : 정의 내용

5. 테이블 태그
· <table> : 테이블 생성
      · <tr> : 행
      · <th> : 헤더 셀
      · <td> : 데이터 셀
      · <thead> : 테이블의 헤더 그룹
      · <tbody> : 테이블의 본문 그룹
      · <tfoot> : 테이블의 하단 그룹

6. 폼 태그
· <form> : 사용자 입력을 서버에 제출
· <input> : 다양한 입력 필드(텍스트, 라디오, 체크박스 등)
· <textarea> : 여러 줄 텍스트 입력
· <button> : 버튼 생성
· <select> : 드롭다운 리스트
      · <option> : 선택 항목
· <label> : 폼 요소의 레이블

7. 멀티미디어 태그
· <img> : 이미지 삽입
· <video> : 동영상 삽입
· <audio> : 오디오 삽입
· <source> : 멀티미디어 소스 지정
· <figure> : 이미지와 캡션 그룹화
      · <figcaption> : 이미지 캡션

8. 시맨틱 및 메타 태그
· <meta> : 문서의 메타정보 제공
· <link> : 외부 리소스 연결(예 : CSS 파일)
· <script> : JavaScript 코드 삽입
· <style> : 인라인 CSS 스타일 정의

9. 기타 태그
· <div> : 블록 요소로 콘텐츠를 그룹화
· <iframe> : 다른 HTML 페이지를 삽입
· <br> : 줄바꿈
· <hr> : 수평선

주요 태그 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 태그 정리</title>
</head>
<body>
    <header>
        <h1>HTML 태그의 종류</h1>
    </header>
    <main>
        <section>
            <h2>리스트 예제</h2>
            <ul>
                <li>순서 없는 리스트 항목</li>
                <li>또 다른 항목</li>
            </ul>
        </section>
        <article>
            <h2>테이블 예제</h2>
            <table border="1">
                <thead>
                    <tr>
                        <th>제목 1</th>
                        <th>제목 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>내용 1</td>
                        <td>내용 2</td>
                    </tr>
                </tbody>
            </table>
        </article>
    </main>
    <footer>
        <p>HTML 태그 예제</p>
    </footer>
</body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'HTML > 참고자료' 카테고리의 다른 글

[HTML] 뉴스레터 제작  (1) 2025.05.02
[HTML] 상대 경로 & 절대 경로  (0) 2025.02.23
[HTML] form 태그 속성  (0) 2024.12.12

1. action : form 내부 입력 값들을 받을 서버 측 url을 지정

 

2. name : form의 이름

 

3. accept-charset : form 전송에 사용할 문자 인코딩 지정

 

4. target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

 

5. method (기본 값 get) : 서버로 데이터를 전송하는 방식(get or post)

 

6. enctype : 인코딩 타입 지정, 아래 세 가지 중 하나 지정

    1) enctype="application/x-www-form-urlencoded"

       서버에 보내기 전 모든 문자를 인코딩하는 방식, form에 텍스트 데이터를 포함 시 지정(기본값)

    2) enctype="multipart/form-data"

       파일 업로드처럼 문자가 아닌 파일을 전송할 때 사용

    3) enctype="text/plain"

       일반 텍스트로 인코딩

 

7. novalidate : HTML5에 새롭게 추가된 속성, 유효성 미확인을 지정

저작자표시 비영리 변경금지 (새창열림)

'HTML > 참고자료' 카테고리의 다른 글

[HTML] 뉴스레터 제작  (1) 2025.05.02
[HTML] 상대 경로 & 절대 경로  (0) 2025.02.23
[HTML] 태그 종류  (1) 2024.12.25

+ Recent posts

티스토리툴바