1.
자유로운 웹사이트 코드펜 작업링크
-클릭하면 아무 지식이나 용어 등을 랜덤으로 간단하게 한 두 줄 알려주는 웹사이트를 제작했다
-단점: 몇 개의 입력된 값들만 반복해서 나오는 것 같다
사용자가 버튼을 클릭할 때마다 랜덤으로 용어나 지식을 새로 검색해서 결과값을 보여주는 코딩을 짜면 될 거 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>랜덤 지식 뽑기</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background-color: #f4f4f9;
}
#factDisplay {
margin-top: 30px;
padding: 20px;
min-height: 50px;
border: 2px solid #ccc;
border-radius: 10px;
background-color: #fff;
font-size: 1.2em;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>✨ 오늘의 랜덤 지식</h1>
<button onclick="displayRandomFact()">새로운 지식 얻기</button>
<div id="factDisplay">
버튼을 클릭하여 랜덤 지식을 얻으세요!
</div>
<script>
// 여기에 한 두 줄짜리 랜덤 지식을 추가하세요!
const facts = [
"빛의 속도는 초당 약 299,792,458m입니다.",
"지구에서 가장 높은 산은 에베레스트 산이지만, 중심에서 가장 먼 산은 침보라소 산입니다.",
"타조의 눈은 뇌보다 크며, 지름이 약 5cm에 달합니다.",
"벌집의 각 방은 완벽한 육각형 모양으로 이루어져 있습니다.",
"금붕어는 약 3초간의 기억력만 가지고 있다고 알려져 있지만, 사실은 더 오래 기억합니다.",
"인간의 DNA는 침팬지와 약 98% 일치합니다.",
"달은 매년 지구로부터 약 3.8cm씩 멀어지고 있습니다.",
"커피는 전 세계에서 가장 많이 거래되는 상품 중 하나입니다.",
"플라밍고는 선천적으로 흰색이지만 먹는 새우 때문에 분홍색을 뜁니다.",
"코끼리는 점프를 할 수 없는 유일한 포유류입니다."
];
/**
* 랜덤으로 지식을 선택하여 화면에 표시하는 함수
*/
function displayRandomFact() {
// 1. 배열의 길이(개수)를 이용해 0부터 '길이-1' 사이의 랜덤 정수(인덱스)를 계산합니다.
const randomIndex = Math.floor(Math.random() * facts.length);
// 2. 랜덤 인덱스에 해당하는 지식을 가져옵니다.
const randomFact = facts[randomIndex];
// 3. HTML 요소에 지식을 표시합니다.
document.getElementById('factDisplay').innerHTML = randomFact;
}
// 페이지 로드 시 첫 번째 지식을 자동으로 표시하려면 이 줄의 주석을 해제하세요.
// window.onload = displayRandomFact;
</script>
</body>
</html>
JavaScript
복사
2.
ai를 활용한 인식관련된 웹사이트 제작
-미디어파이프 손 인식을 활용해서 손가락 갯수를 카운팅하여 손가락 갯수를 숫자로 출력하는 ( 예: 손가락 1개=1, 손가락 2개=2) 사이트 제작하기
단점: 손을 정확히 카메라 정면에 놓아야지만 제대로 인식한다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>🖐️ 손가락 갯수 카운터</title>
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
background-color: #f0f4f8;
padding: 20px;
}
h1 {
color: #333;
}
#container {
position: relative;
width: 640px;
height: 480px;
margin: 20px auto;
border: 4px solid #333;
border-radius: 10px;
background-color: #000;
}
#outputCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#webcamVideo {
display: none;
}
#countDisplay {
margin-top: 20px;
font-size: 4em;
font-weight: bold;
color: #007bff;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
</head>
<body>
<h1>🖐️ 손가락 갯수 카운터</h1>
<div id="container">
<canvas id="outputCanvas"></canvas>
<video id="webcamVideo" autoplay playsinline></video>
</div>
<div id="countDisplay">0</div>
<script>
const videoElement = document.getElementById('webcamVideo');
const canvasElement = document.getElementById('outputCanvas');
const canvasCtx = canvasElement.getContext('2d');
const countDisplay = document.getElementById('countDisplay');
function countFingers(landmarks) {
let count = 0;
// 엄지손가락: 손바닥 기준 오른쪽에 있으면 펴진 것으로 간주
const thumb_tip = landmarks[4];
const thumb_ip = landmarks[3];
const thumb_mcp = landmarks[2];
const wrist = landmarks[0];
const isThumbOpen = thumb_tip.x < thumb_ip.x && thumb_ip.x < thumb_mcp.x;
if (isThumbOpen) count++;
// 나머지 손가락: 팁이 PIP보다 위에 있으면 펴진 것
const fingers = [
{ tip: 8, pip: 6 }, // 검지
{ tip: 12, pip: 10 }, // 중지
{ tip: 16, pip: 14 }, // 약지
{ tip: 20, pip: 18 } // 새끼
];
fingers.forEach(finger => {
const tipY = landmarks[finger.tip].y;
const pipY = landmarks[finger.pip].y;
if (tipY < pipY) count++;
});
return count;
}
const hands = new Hands({
locateFile: file => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`
});
hands.setOptions({
maxNumHands: 1,
modelComplexity: 1,
minDetectionConfidence: 0.7,
minTrackingConfidence: 0.5
});
hands.onResults(results => {
canvasCtx.save();
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
const landmarks = results.multiHandLandmarks[0];
const count = countFingers(landmarks);
countDisplay.textContent = count.toString();
} else {
countDisplay.textContent = "0";
}
canvasCtx.restore();
});
const camera = new Camera(videoElement, {
onFrame: async () => {
await hands.send({ image: videoElement });
},
width: 640,
height: 480
});
camera.start();
</script>
</body>
</html>
JavaScript
복사