나만의 스티커를 만들기 위해 HTML5 <canvas> 요소를 사용하는 예제를 제공하겠습니다. 이 예제를 따라하면 초보자도 이해할 수 있을 것입니다.
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>
<canvas id="stickerCanvas" width="400" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>
CSS 스타일링 (styles.css 파일):
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
canvas {
border: 1px solid #000;
}
JavaScript 코드 (script.js 파일):
// script.js
const canvas = document.getElementById("stickerCanvas");
const ctx = canvas.getContext("2d");
// 스티커 그리기
ctx.fillStyle = "#FF5733"; // 스티커 색상 설정
ctx.fillRect(50, 50, 300, 300); // 스티커 크기 및 위치 설정
// 텍스트 추가
ctx.fillStyle = "#FFF"; // 텍스트 색상 설정
ctx.font = "24px Arial"; // 텍스트 폰트 및 크기 설정
ctx.fillText("나만의 스티커", 90, 250); // 텍스트 내용과 위치 설정
위 코드에서는 HTML5 <canvas> 요소를 사용하여 스티커를 그리고 텍스트를 추가했습니다.
HTML, CSS, JavaScript 파일을 생성하고 코드를 복사하여 각 파일에 붙여넣은 후 웹 브라우저에서 실행합니다. 화면에 나만의 스티커가 그려질 것입니다.
'HTML 예제' 카테고리의 다른 글
| 404 오류 페이지: 404 오류 페이지를 유쾌하게 디자인 (0) | 2023.12.06 |
|---|---|
| 날씨 앱 디자인: 실제 날씨 정보를 가져와 표시하는 날씨 앱 스타일 페이지 (0) | 2023.12.06 |
| 3D 회전 메뉴: CSS 3D 변환으로 메뉴 항목 회전 효과 (0) | 2023.12.06 |
| 트위터 피드 스타일링: 트위터 피드를 모바일 앱처럼 스타일링 (0) | 2023.12.06 |
| 동적 테이블 정렬: JavaScript를 사용하여 동적으로 테이블 열 정렬 (0) | 2023.12.06 |
