[html] 마우스를 올리면 나오는 설명글 title

---

안녕하세요. 개자이너 씸플레이입니다.

 

마우스 오버시 이미지

오늘은 마우스를 올렸을 때 특정 문구가 나타나는 방법을 알아보겠습니다.

---

1. html

<div>
  여기는 그냥 보이는 글
</div>

 

① html 코드 짜기

 

• 일단 기본 html 구조를 만들어줍니다.
• 간단하게 <div>만 만들어보겠습니다.

div{
  background:darkred;
  width:400px; height:400px;
  line-height:400px;
  text-align:center;
  color:#fff;
  font-size:20px;
  margin:0 auto;
}

 

② css 코드 짜기

 

• 하지만 오늘은 css는 별로 중요하지 않습니다.
• 보기 이쁘라고 짠 것이니 한번 봐주고 넘어가 주세요.
• html은 했는데 css는 너무 어렵다? 그냥 안 하셔도 됩니다.

320x100

---

2. title 속성 넣기

<div title="여기는 마우스를 올리면 보이는 글">
  여기는 그냥 보이는 글
</div>

 

① title 속성 넣기

 

• 속성은 태그 안쪽에 넣어주는 것입니다.
• 예를 들어 <img> 태그에 alt 속성이 있죠. 
• 잘 모르겠어요 - <>이런 꺽쇠 안쪽에 있는 것 중에 맨 앞에 있는 태그 이름을 제외하고는 다 속성입니다.

② title 속성이란?

 

• 말 그대로 제목 속성인데 마우스를 올리면 속성 값을 보여줍니다.
• '클릭하면 창이 닫힙니다' 같은 안내 문구를 위해서도 사용합니다.

마우스 오버 시 title문구

③ 화면 확인

 

• <div>에 속성을 넣어주었기 때문에 태그 영역 내 어디에 마우스를 올리든 title 문구가 나옵니다.

---

3. 코드펜으로 확인하기

 

 

① 코드펜으로 확인하기

 

• 코드펜에서 코드와 화면을 확인해봅시다.

 

[같이 보면 좋은 글]

[coding/html + css] - [html] html을 대충 이해해보자

[coding/editor] - [codepen] 코드펜을 티스토리에 불러와보자

---

2020년 마지막 포스팅이네요. 한 해 마무리 잘하시고 모두 새해 복 많이 받으세요~

그럼 이만.

총총.