[jQuery || JavaScript] title 속성 다루기 정리 및 버그 해결

개념

---

title 속성이란?

a, link, img, blockquote 4가지 태그에서 많이 쓰이고, 앞에 태그에 따라 용도와 기능이 조금 달라집니다.

title 속성의 값은 [툴팁]으로 표시할 때 가장 많이 쓰입니다.

 

예시

<p id="p_tag" title="로그인 정보">환영합니다 ${sessionScope.loginInfo.nickname }님 
<a href="/jquery/logout">로그아웃</a></p>

이와 같이 마우스를 p 태그에 갖다대면 툴팁 같은 정보가 나온다. 

이것이 바로 title 속성입니다.

(심지어 속성이름이 title이 아니라 tooltip으로 알고 계시는 분들도 있다.)

 

문법

---

<태그 title="들어갈 내용"></태그>

 

공통 예제 JavaScript 함수

function dynamictitleChange(index) {

		if (index == 1) {

			var titleValue = $("#titleValue").val();

			$("#p_tag").attr("title", titleValue);
			$("#titleValue").val('');

		} else if (index == 2) {

			$("#p_tag").attr("title", "대한민국만세");

		} else if (index == 3) {
			var msg = "dynamic? wow!";
			var html = '';

			html += '<p title='+day+'>move!</p>';

			$("#dynamic_tag").append(html);

		}

	}

공통 예제 HTML

<div id="dynamic_tag"></div>
<p id="p_tag" title="로그인 정보">환영합니다 ${sessionScope.loginInfo.nickname }님 
<a href="/jquery/logout">로그아웃</a></p>

 

상황 1.input 창에 내용을 title 속성으로 적용하기

소스

<input type="text" id="titleValue">
<button onclick="dynamictitleChange(1)">title input 값으로 변경하기</button>

결과

 

 

상황 2.title 속성의 값을 대한민국만세로 변경하기

소스

<button onclick="dynamictitleChange(2)">title 값을 '대한민국만세'로 바꾸기</button>

결과

 

 

상황 3.동적으로 title 속성이 담긴 태그 생성하기

<button onclick="dynamictitleChange(3)">동적 title 속성이 담긴 태그 생성하기</button>

결과

 

끝! 이 아니다. 상황 3의 결과가 조금 이상합니다. 저는 분명히 "dynamic? wow!"라고 했는데

띄어쓰기(공백) 부분부터는 잘려서 나오질 않습니다.

 

해결

---

쌍 따옴표(더블 쿼테이션 Double quotation)를 넣어줘야 합니다.

html += '<p title='+day+'>move!</p>'; (X)

//쌍 따옴표(더블 쿼테이션 Double quotation)를 넣어줘야 합니다.
html += '<p title="'+day+'">move!</p>'; (O)

 결과