💡 학습목표
1. 심볼즈(Symbols)에 대해 알아 보자
2. 자바 스크립트로 토글 기능 만들어 보기
3. transition과 transform 속성에 대해 알아 보자 1. 심볼즈(Symbols)에 대해 알아 보자
심볼즈(Symbols)"는 문자나 기호를 의미합니다. 웹 페이지에서 사용할 수 있는 다양한 문자나 기호가 있고, 이러한 문자나 기호는 특정 코드를 사용하여 웹 페이지에 표시할 수 있습니다.
2. 자바 스크립트로 토글 기능 만들어 보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
body {
display: flex;
justify-content: center;
}
.like-heart {
font-size: 40px;
color: gray;
cursor: pointer;
}
.like-heart.liked {
color: red;
}
</style>
</head>
<body>
<span class="like-heart" onclick="likeToggle()">❤</span>
<script>
// https://www.htmlsymbols.xyz/heart-symbols
function likeToggle() {
let likeHeart = document.querySelector(".like-heart");
likeHeart.style.fontSize = "40px";
likeHeart.classList.toggle("liked");
}
</script>
</body>
</html>3. transition 속성애 대해 알아 보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toggle Like</title>
<style>
.container {
display: flex;
justify-content: center;
margin: 40px;
}
span {
margin-right: 10px;
}
.like-heart {
font-size: 24px;
color: gray;
cursor: pointer;
/* 단일 속성에 전환 적용 */
/* transition: color 0.5s ease; */
/* 2개 속성에 전환 적용 */
transition: color 1s ease, transform 1s ease;
}
.like-heart.liked {
color: red;
transform: scale(1.5); /* 클릭 시 아이콘의 크기를 증가시킵니다. */
}
</style>
</head>
<body>
<div class="container">
<span class="like-heart" onclick="likeToggle(this)">❤</span>
<span class="like-heart" onclick="likeToggle(this)">❤</span>
<span class="like-heart" onclick="likeToggle(this)">❤</span>
</div>
<script>
function likeToggle(element) {
element.classList.toggle("liked");
}
</script>
</body>
</html>transition 속성
transition 속성은 CSS 속성의 변화를 시간에 따라 부드럽게 표현하게 해줍니다. 예를 들어, 색상이나 크기 등이 바뀔 때, 그 변화를 애니메이션 효과로 보여줍니다.
transform 속성
transform 속성은 요소를 회전, 확대/축소, 기울이기, 이동 등 다양한 방법으로 변형할 수 있게 해줍니다.
transition: [property] [duration] [timing-function];
transition: [property] [duration] [timing-function], [duration] [timing-function];-
property
애니메이션을 적용할 CSS 속성의 이름입니다.
all을 사용하면 모든 속성에 대해 애니메이션을 적용할 수 있습니다. -
duration
애니메이션의 지속 시간입니다.
일반적으로 초(s) 또는 밀리초(ms) 단위로 지정합니다. -
timing-function
애니메이션의 속도 곡선을 지정합니다.
예: linear, ease, ease-in, ease-out, ease-in-out
cubic-bezier 함수를 사용하여 곡선을 자세히 조절할 수도 있습니다.
좋아요 버튼을 구현하면서 이 글에서처럼 하트 이미지를 토글하고, ❤ 같은 코드로 심볼을 쓰는 패턴을 참고하다가, 예전에는 이모지가 macOS에서는 깨끗하게 보이는데 몇몇 구형 Windows나 안드로이드 환경에서는 네모 박스(토푸 문자)로 나오면서 UI가 완전히 깨져 버리는 문제를 겪은 적이 있습니다. 이 문제를 해결하기 위해 먼저 UI에서 꼭 필요한 이모지는 지원 범위가 확실한 코드 포인트로만 제한했고, font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;처럼 이모지 지원이 좋은 폰트 스택을 명시했으며, 반응 아이콘처럼 픽셀이 중요한 부분은 아예 유니코드 이모지 대신 인라인 SVG나 웹폰트 아이콘으로 교체해서 모든 플랫폼에서 동일하게 보이도록 처리했습니다. 그리고 하트 계열 이모지의 코드 포인트를 빠르게 찾아보거나, 엔티티로 쓸지 에셋으로 뽑을지 결정할 때는 https://heart-emoji.org 같은 참고 사이트를 자주 활용해 프로덕션 UI에 안전하게 쓸 수 있는 심볼을 고르고 있습니다.