html 기본 문서 만들기 3 - title 속성으로 툴팁 달기
네 안녕하세요, 이번 포스팅에서는 툴팁을 다는 것을 한 번 해보도록 하겠습니다.
툴팁은 아주 중요한 요소들은 아니지만,
여러분이 만드는 웹사이트가 백과사전 관련이나,
무언가를 설명해야 하는 사이트라면 반드시 필요한 요소가 됩니다.
그래서 뺄 수는 없는 요소라서 알려드리고자 합니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 툴팁 달기 : title 속성 이용
툴팁은 쉽게 말해서 설명문입니다.
우리가 마우스 커서를 특정 글이나 사진 등에 올렸을 때 작은 창이 하나 뜨면서 어떤 문구가 적혀있는 걸 본 적이 있죠?
그게 바로 툴팁입니다.
주로 나무위키 같은 백과사전처럼 설명을 하는 사이트들에 많이 있습니다.
그리고 이 툴팁은 title 속성을 이용하여 달 수 있습니다.
이 속성은 태그와는 조금 다릅니다.
태그는 이런 겁니다.
'내가 이걸 써서 이 부분을 구성을 할게.'
이런 식으로 전반적인 형태나 뼈대를 제작하는 것이 태그이고,
속성의 경우는 요런 태그 안에 들어가는 요소인데,
태그 내에서 태그가 가지는 기능적인 부분들을 구현하는 요소입니다.
그래서 태그가 만든 뼈대를 더 견고히 만드는 역할을 한다고 보시면 됩니다.
그럼 간단한 예제 코드를 통해서 같이 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>툴팁 달기</title>
</head>
<body>
<h1 title="h1태그로 작성하였습니다.">1장 홈페이지</h1>
<h2 title="h2태그로 작성하였습니다.">1절 HTML 언어</h2>
</body>
</html>여기 보시면 h태그 옆에 title이라고 적었죠?
이게 바로 속성을 사용하는 방법이에요.
title 속성 말고도 여러 가지 속성이 존재하는데, 다른 속성들도 똑같이 사용을 하면 된답니다.
그래서 이 title 속성에 대응되는 문구가 있죠?
"h1태그로 작성하였습니다.", "h2태그로 작성하였습니다." 이렇게 두 개가 있습니다.
이 두 문구가 바로 툴팁에 뜰 문구입니다.
그럼 결과 화면을 보도록 하겠습니다.
 |
 |
이런 식으로 '1장 홈페이지'에 커서를 올리면 "h1 태그로 작성하였습니다."라는 툴팁이 뜨고,
'1절 HTML 언어'에 커서를 올리면 "h2태그로 작성하였습니다."라는 툴팁이 뜨는 것을 볼 수 있습니다.
그래서 툴팁은 어떤 것을 부차적으로 설명을 하고자 할 때 저렇게 팝업 형식으로 띄워서
설명을 할 수 있게 해줍니다.
여기까지 툴팁을 다는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 문단을 나누는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html 기본 문서 만들기 5 - hr 태그로 수평선 긋기 (0) | 2023.03.01 |
|---|---|
| html 기본 문서 만들기 4 - p 태그로 문단 나누기 (0) | 2023.02.28 |
| html 기본 문서 만들기 2 - h 태그로 문단의 제목(장, 절, 소제목, etc...) 달기 (0) | 2023.02.28 |
| html 기본 문서 만들기 1 - title 태그로 페이지 타이틀 만들기 (0) | 2023.02.28 |
| html의 기본 개념 알아보기 (0) | 2023.02.28 |
댓글