안녕하세요. 혀코입니다.
리스트 텍스트 앞에 이모티콘을 사용하는 방법이 있나 고민하던 차에 방법을 알아냈습니다.
그래서 이번 시간에는 ::marker를 사용해서 <li> 태그에 이모티콘을 추가하는 방법에 대해서 알아보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to add emoticon in front of the list of text</title>
<style>
li::marker {
content: '👉';
}
</style>
</head>
<body>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</body>
</html>
HTML5 기본 구조를 짜고, li 를 잡고 ::marker를 사용하고 content: ' ' 안에 원하는 이모티콘을 넣어주시면 됩니다.
그러면 아래와 같이 브라우저에서 보여지게 됩니다.
::before 를 사용할떄는 list에 list-style-type: none 속성이 있어야만 bullet 표시가 안나는 데 ::marker를 사용할 때는 <li> 태그에 list-style-type: none 속성이 없어도 bullet 표시가 안되는 점 참고 하시면 될 것 같습니다.
매우 간단하죠?
참고로 이모티콘은 아래 링크에서 얻을 수 있습니다.
웹사이트 바로가기: https://www.emojiall.com/ko
이렇게 ::marker를 사용해서 <li> 태그에 이모티콘을 추가하는 방법에 대해서 알아봤습니다.
해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글