HTML과 CSS를 사용하여 텍스트를 숨기고 호버(hover) 시에 나타나게 하는 비밀 메시지를 만들어보겠습니다. 이렇게 하면 텍스트가 보이지 않다가 마우스를 호버할 때만 나타날 것입니다.
1. HTML 파일 생성하기
먼저 텍스트 에디터(예: 메모장, Visual Studio Code, Sublime Text 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>비밀 메시지</title>
</head>
<body>
<p class="hidden-text">이 텍스트는 숨겨져 있습니다.</p>
</body>
</html>
2. CSS 스타일 시트 생성하기
다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 이 스타일 시트에서는 텍스트를 숨기고 호버 시 나타나게 하는 스타일을 정의합니다.
/* styles.css */
.hidden-text {
opacity: 0; /* 텍스트를 처음에 숨김 */
transition: opacity 0.3s; /* 부드러운 나타남 효과를 위한 트랜지션 설정 */
}
.hidden-text:hover {
opacity: 1; /* 호버 시 텍스트를 나타냄 */
}
3. 텍스트 숨기고 호버 시 나타나게 만들기
위의 코드를 작성하면 "이 텍스트는 숨겨져 있습니다."라는 문장이 포함된 웹 페이지가 생성됩니다. 이 텍스트는 처음에는 보이지 않고, 호버(마우스를 올렸을 때)하면 나타납니다
4. 결과
마우스를 이 위치에 올려 놓아야 글씨가 보입니다.
'HTML 예제' 카테고리의 다른 글
| 반짝이는 배경: CSS 애니메이션으로 배경 색상을 반짝이게 만들기 (0) | 2023.12.05 |
|---|---|
| 타자 효과: 글자 한 글자씩 나타나는 타자 효과 (0) | 2023.12.05 |
| 블링크 텍스트 만들기 (0) | 2023.12.05 |
| CSS로 멋진 버튼 스타일링 (0) | 2023.12.05 |
| 텍스트 그림 그리기 (0) | 2023.12.05 |
