abbr Custom
기존의 <abbr>태그를 사용하면 도움말(약어=Abbreviation)의 기능을 이용할수 있었다.
이 기능을 이용하여 업그레이드된 미리보기/도움말을 사용해보자
최종적으로는
abbr <- 마우스를 갖다대세요
위와 같이 만들 것이다
기존
기존에 abbr태그 사용시 도움말이 보이기까지 오래걸리는 단점이 있다
대략 1-2초가 걸리는 것 같다.
도움말이 보이기까지 오래걸린다는 단점이 있다
코드
1
| <abbr title="HyperText">HTML</abbr>
|
업그레이드1
간단하게 업그레이드하는 방법
바로 도움말이 나타나지만 디자인이 이쁘지않다는 단점
코드
html
1
| <abbr title="HyperText">HTML</abbr>
|
css
assets/css/에서 main.csss 에 아래코드를 추가한다
1
2
3
4
5
6
7
8
9
10
11
| abbr[title]:hover::after {
content: ' (' attr(title) ') ';
position: absolute;
top: 100%; //입맛에 맞게 커스텀
left: 50%;
width: 500px;
}
abbr{
position: relative;
}
|
- 쉽고 간편하지만 이쁘지가 않다
- 물론 css를 이용하여 간단하게 꾸밀수는 있다
업그레이드 2
CSS의 Before의 기능을 이용하여 말풍선으로 꾸며준다
말풍선 효과까지 추가
코드
HTML
- 위에 html코드와는 다르다
- id클래스 이름이 도움말 내용이다
1
| <abbr title="" id="HyperText">HTML</abbr>
|
CSS
assets/css/에서 main.csss 에 아래코드를 추가한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| abbr{
position: relative;
}
.abbr_contents.hidden{
opacity: 0;
display: block;
}
abbr .abbr_contents{
opacity: 0.8;
position: absolute;
left: -10px;
top: 30px;
background-color: #000;
color: white;
border-radius: 10px 10px 10px 10px;
margin:0px;
font-size: 0.75em;
z-index: 1;
padding: 8px;
transition: all 0.2s ease-in-out;
}
abbr:before {
content: "";
position: absolute;
top: 20px;
left: 0px;
width: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: #000000 transparent;
display: block;
z-index: 1;
opacity: 0.8;
transition: all 0.2s ease-in-out;
}
abbr.hidden_before:before {
content: "";
position: absolute;
top: 20px;
left: 0px;
width: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: #000000 transparent;
display: block;
z-index: 0;
opacity: 0;
transition: all 0.2s ease-in-out;
}
|
javascript
- 기존에 관리하던 Javscript파일에 아래 코드를 추가
- 없다면
assets/js/에서 custom.js 추가하고 _include/head/custom.html에 <script src="/assets/js/custom.js" defer></script>를 추가하여 등록시켜준다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| const abbrBtns = document.querySelectorAll("abbr");
abbrBtns.forEach((abbrBtn, index) => {
var abbrContents = document.createElement('span');
abbrContents.classList.add("hidden");
abbrContents.classList.add("abbr_contents");
abbrBtn.classList.add("hidden_before");
var addrText = document.createTextNode( abbrBtn.id );
abbrContents.appendChild(addrText);
abbrBtn.appendChild(abbrContents);
abbrBtn.addEventListener('mouseover', () => {
childabbr = abbrBtn.children[0];
childabbr.classList.remove("hidden");
abbrBtn.classList.remove("hidden_before");
});
abbrBtn.addEventListener('mouseout', () => {
childabbr = abbrBtn.children[0];
childabbr.classList.add("hidden");
abbrBtn.classList.add("hidden_before");
});
});
|
댓글 쓰기