웹서핑중 위와 같은 타이머 기능을 구현한 웹사이트를 발견하였습니다.
위의 타이머 기능은 강의 마감, 세일 마감 등을 표시할때 유용한 위젯입니다.
그러나 아임웹에서는 이것을 기본으로 제공하지 않는 위젯이었기에
코드를 통해 아임웹의 한계를 극복해 보기로 하였습니다.
/
2. 1단계입니다. 스크린샷 파일을 통해 GPT에게 보여주고 이해했는지를 물어봅니다.
그 다음 이것을 코드로 구현해 달라고 합니다.
GPT는 아임웹을 알고 있습니다. 따라서 아임웹에 넣는다고 이야기해도 인식을 잘 합니다.
코드를 짜주는 모습입니다.
그러나 HTML, CSS코드 두개로 나누어서 알려주는데요.
아임웹에 바로 붙여넣기해서 쓸수 있도록 이것을 합쳐서 하나의 코드로 만들어 달라고 합니다.
코드를 복사해서 붙여넣어 봅니다.
오. 꽤 괜찮은 결과가 나옵니다.
그러나 아직 다듬을 부분이 많아 보입니다.
GPT를 통해 수정을 요청합니다.
이제부터가 가장 중요한 부분인데요.
수정할때 가능한 디테일하게 요청해야 합니다.
그래야 이 과정에서 시간을 많이 줄일수 있습니다.
코드가 꽤 길어지며, 이를 GPT가 너무 길면 생략하는 경우가 발생합니다.
따라서 일단 프로토로 만든다음 부분 부분 수정요청을 통해 반영하며 코드를 완성시켜 나갑니다.
코드가 길어지면 가끔 GPT가 먹통이 되서 regenerate를 해야 하는데, 이게 다시 처음부터 코드를 만드는거라 재먹통이 되기도 합니다.
하지만 이 수정과정을 하시다보면 GPT를 통해 어떻게 수정해야하는지를 점차 익히실수 있습니다. 그리고 해보게 되면 더 디테일한 요구들을 할수 있게 됩니다.
GPT와 함께 만든 최종 코드와 적용사진을 첨부하며 오늘 사례발표를 마치겠습니다. ^^
코드는 마음껏 가져가서 사용하셔도 됩니다.
시간이 흐르지 않아 GPT에게 질문하였습니다.
코드 중간에 타이머종료시간 (2024-01-01)로 되어있었는데 이부분을 수정하니까
정상작동하는것을 확인했습니다.
function startTimer() {
const eventTime = new Date('2024-02-07T00:00:00'); // 타이머 종료 시간 설정
New-date 옆에 날짜에 내가 원하는 디데이 날짜를 설정하면 그 날짜에 맞춰 디데이 타이머가 동작하는것을 확인하실수 있습니다. ^^
</html> / / / <!DOCTYPE html> <!-- 웹 문서의 HTML5 문서 유형 선언 -->
<html lang="ko"> <!-- 문서의 기본 언어를 한국어로 설정 -->
<head>
<meta charset="UTF-8"> <!-- 문자 인코딩을 UTF-8로 설정 -->
<title>카운트다운 타이머</title> <!-- 웹 페이지의 제목 설정 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet"> <!-- Noto Sans KR 폰트를 웹페이지에 포함 -->
<style>
#timer-container {
position: fixed; /* 타이머를 화면 하단에 고정 */
bottom: 0.5cm; /* 하단에서 0.5cm 위로 띄움 */
left: 50%; /* 화면의 가운데로 정렬 */
transform: translateX(-50%); /* 정확하게 중앙에 위치하도록 설정 */
display: flex; /* flexbox 레이아웃 사용 */
align-items: center; /* 수직 방향 가운데 정렬 */
justify-content: space-between; /* 내부 항목 사이에 균등한 간격을 두고 정렬 */
background-color: #333; /* 배경 색상 설정 */
border-radius: 10px; /* 모서리 둥글기 설정 */
padding: 10px; /* 내부 여백 설정 */
color: white; /* 글자 색상 설정 */
font-family: 'Noto Sans KR', sans-serif; /* 글꼴 설정 */
width: 1000px; /* 너비 설정 */
box-sizing: border-box; /* 너비 계산 방식 설정 */
z-index: 1000; /* 다른 요소들보다 위에 표시되도록 z-index 값 설정 */
}
.timer-part {
background-color: #000; /* 배경 색상 설정 */
border: 1px solid #fff; /* 테두리 색상 및 두께 설정 */
padding: 10px 20px; /* 패딩 설정 */
margin: 0 5px; /* 마진 설정 */
border-radius: 3px; /* 모서리 둥글기 설정 */
display: inline-block; /* 인라인 블록 요소로 표시 */
min-width: 40px; /* 최소 너비 설정 */
text-align: center; /* 텍스트 가운데 정렬 */
font-weight: bold; /* 글자 굵기 설정 */
background-image: linear-gradient(to bottom, #333, #555, #333); /* 위에서 아래로, 중간이 가장 어둡게 */
font-size: 16px; /* 텍스트 크기를 16px로 설정 */
}
.time-label {
font-size: 16px; /* 글씨 크기를 16px로 설정 */
margin-left: 4px; /* 숫자와의 간격 조정 */
color: #fff; /* 텍스트 색상 설정 */
font-weight: bold; /* 글자 굵기 설정 */
font-family: 'Noto Sans KR', sans-serif; /* 글꼴 설정 */
}
#service-text {
margin-right: 10px; /* 오른쪽 여백 설정으로 공간 확보 */
font-weight: bold; /* 글자 굵기 설정 */
font-size: 16px; /* 글씨 크기를 14px로 설정 */
font-family: 'Noto Sans KR', sans-serif; /* 글꼴 설정 */
}
#start-btn {
background-color: #4CAF50; /* 배경 색상 설정 */
border: none; /* 테두리 없음 */
color: white; /* 글자 색상 설정 */
padding: 10px 20px; /* 패딩 설정 */
text-align: center; /* 텍스트 가운데 정렬 */
text-decoration: none; /* 텍스트 장식 없음 */
display: inline-block; /* 인라인 블록 요소로 표시 */
font-size: 16px; /* 글자 크기 설정 */
margin: 4px 2px; /* 마진 설정 */
cursor: pointer; /* 마우스 커서를 포인터 모양으로 설정 */
border-radius: 10px; /* 모서리 둥글기 설정 */
font-weight: bold; /* 글자 굵기 설정 */
}
#start-btn:hover {
background-color: #45a049; /* 마우스 호버 시 배경 색상 변경 */
}
@media screen and (max-width: 600px) { /* 화면 너비가 600px 이하일 경우의 스타일 */
#timer-container {
width: 100%; /* 너비를 100%로 설정 */
left: 0; /* 왼쪽 정렬 */
transform: translateX(0); /* 중앙 정렬 해제 */
padding: 5px; /* 패딩 설정 */
flex-direction: column; /* 요소를 세로로 쌓음 */
}
#service-text {
margin-bottom: 10px; /* 아래쪽 여백 설정 */
}
.timer-part {
margin: 5px 5px; /* 마진 설정 */
}
font-size: 16px; /* 글자 크기 설정 */
}
</style>
</head>
<body>
<div id="timer-container"> <!-- 타이머 컨테이너 -->
<div id="service-text"> 1호 웹서비스 오픈전까지</div> <!-- 서비스 텍스트 -->
<div> <!-- 타이머 숫자 표시 -->
<div class="timer-part" id="days">00</div><span class="time-label">일</span>
<div class="timer-part" id="hours">00</div><span class="time-label">시</span>
<div class="timer-part" id="minutes">00</div><span class="time-label">분</span>
<div class="timer-part" id="seconds">00</div><span class="time-label">초</span>
</div>
<button id="start-btn" onclick="startTimer()">연습으로 만들어봄</button> <!-- 시작 버튼 -->
</div>
<script>
let timer; // 타이머 변수 선언
function startTimer() {
const eventTime = new Date('2024-01-01T00:00:00+09:00'); // 타이머 종료 시간 설정
timer = setInterval(function() { // 일정 시간마다 함수 실행
let now = new Date(); // 현재 시간
let timeLeft = eventTime - now; // 남은 시간 계산
let days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); // 남은 일수
let hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 남은 시간
let minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); // 남은 분
let seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); // 남은 초
// 각 타이머 부분에 남은 시간 표시
document.getElementById('days').textContent = days < 10 ? '0' + days : days;
document.getElementById('hours').textContent = hours < 10 ? '0' + hours : hours;
document.getElementById('minutes').textContent = minutes < 10 ? '0' + minutes : minutes;
document.getElementById('seconds').textContent = seconds < 10 ? '0' + seconds : seconds;
if (timeLeft < 0) { // 시간이 다 되면 타이머 종료
clearInterval(timer);
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
}
}, 1000);
}
window.onload = startTimer; // 페이지가 로드될 때 타이머 시작
</script>
</body>
</html><!DOCTYPE html> <!-- 웹 문서의 HTML5 문서 유형 선언 -->
<html lang="ko"> <!-- 문서의 기본 언어를 한국어로 설정 -->
<head>
<meta charset="UTF-8"> <!-- 문자 인코딩을 UTF-8로 설정 -->
<title>카운트다운 타이머</title> <!-- 웹 페이지의 제목 설정 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet"> <!-- Noto Sans KR 폰트를 웹페이지에 포함 -->
<style>
#timer-container {
position: fixed; /* 타이머를 화면 하단에 고정 */
bottom: 0.5cm; /* 하단에서 0.5cm 위로 띄움 */
left: 50%; /* 화면의 가운데로 정렬 */
transform: translateX(-50%); /* 정확하게 중앙에 위치하도록 설정 */
display: flex; /* flexbox 레이아웃 사용 */
align-items: center; /* 수직 방향 가운데 정렬 */
justify-content: space-between; /* 내부 항목 사이에 균등한 간격을 두고 정렬 */
background-color: #333; /* 배경 색상 설정 */
border-radius: 10px; /* 모서리 둥글기 설정 */
padding: 10px; /* 내부 여백 설정 */
color: white; /* 글자 색상 설정 */
font-family: 'Noto Sans KR', sans-serif; /* 글꼴 설정 */
width: 1000px; /* 너비 설정 */
box-sizing: border-box; /* 너비 계산 방식 설정 */
z-index: 1000; /* 다른 요소들보다 위에 표시되도록 z-index 값 설정 */
}
.timer-part {
background-color: #000; /* 배경 색상 설정 */
border: 1px solid #fff; /* 테두리 색상 및 두께 설정 */
padding: 10px 20px; /* 패딩 설정 */
margin: 0 5px; /* 마진 설정 */
border-radius: 3px; /* 모서리 둥글기 설정 */
display: inline-block; /* 인라인 블록 요소로 표시 */
min-width: 40px; /* 최소 너비 설정 */
text-align: center; /* 텍스트 가운데 정렬 */
font-weight: bold; /* 글자 굵기 설정 */
background-image: linear-gradient(to bottom, #333, #555, #333); /* 위에서 아래로, 중간이 가장 어둡게 */
font-size: 16px; /* 텍스트 크기를 16px로 설정 */
}
.time-label {
font-size: 16px; /* 글씨 크기를 16px로 설정 */
margin-left: 4px; /* 숫자와의 간격 조정 */
color: #fff; /* 텍스트 색상 설정 */
font-weight: bold; /* 글자 굵기 설정 */
font-family: 'Noto Sans KR', sans-serif; /* 글꼴 설정 */
}
#service-text {
margin-right: 10px; /* 오른쪽 여백 설정으로 공간 확보 */
font-weight: bold; /* 글자 굵기 설정 */
font-size: 16px; /* 글씨 크기를 14px로 설정 */
font-family: 'Noto Sans KR', sans-serif; /* 글꼴 설정 */
}
#start-btn {
background-color: #4CAF50; /* 배경 색상 설정 */
border: none; /* 테두리 없음 */
color: white; /* 글자 색상 설정 */
padding: 10px 20px; /* 패딩 설정 */
text-align: center; /* 텍스트 가운데 정렬 */
text-decoration: none; /* 텍스트 장식 없음 */
display: inline-block; /* 인라인 블록 요소로 표시 */
font-size: 16px; /* 글자 크기 설정 */
margin: 4px 2px; /* 마진 설정 */
cursor: pointer; /* 마우스 커서를 포인터 모양으로 설정 */
border-radius: 10px; /* 모서리 둥글기 설정 */
font-weight: bold; /* 글자 굵기 설정 */
}
#start-btn:hover {
background-color: #45a049; /* 마우스 호버 시 배경 색상 변경 */
}
@media screen and (max-width: 600px) { /* 화면 너비가 600px 이하일 경우의 스타일 */
#timer-container {
width: 100%; /* 너비를 100%로 설정 */
left: 0; /* 왼쪽 정렬 */
transform: translateX(0); /* 중앙 정렬 해제 */
padding: 5px; /* 패딩 설정 */
flex-direction: column; /* 요소를 세로로 쌓음 */
}
#service-text {
margin-bottom: 10px; /* 아래쪽 여백 설정 */
}
.timer-part {
margin: 5px 5px; /* 마진 설정 */
}
font-size: 16px; /* 글자 크기 설정 */
}
</style>
</head>
<body>
<div id="timer-container"> <!-- 타이머 컨테이너 -->
<div id="service-text"> 1호 웹서비스 오픈전까지</div> <!-- 서비스 텍스트 -->
<div> <!-- 타이머 숫자 표시 -->
<div class="timer-part" id="days">00</div><span class="time-label">일</span>
<div class="timer-part" id="hours">00</div><span class="time-label">시</span>
<div class="timer-part" id="minutes">00</div><span class="time-label">분</span>
<div class="timer-part" id="seconds">00</div><span class="time-label">초</span>
</div>
<button id="start-btn" onclick="startTimer()">연습으로 만들어봄</button> <!-- 시작 버튼 -->
</div>
<script>
let timer; // 타이머 변수 선언
function startTimer() {
const eventTime = new Date('2024-02-10T00:00:00'); // 타이머 종료 시간 설정
timer = setInterval(function() { // 일정 시간마다 함수 실행
let now = new Date(); // 현재 시간
let timeLeft = eventTime - now; // 남은 시간 계산
let days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); // 남은 일수
let hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 남은 시간
let minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); // 남은 분
let seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); // 남은 초
// 각 타이머 부분에 남은 시간 표시
document.getElementById('days').textContent = days < 10 ? '0' + days : days;
document.getElementById('hours').textContent = hours < 10 ? '0' + hours : hours;
document.getElementById('minutes').textContent = minutes < 10 ? '0' + minutes : minutes;
document.getElementById('seconds').textContent = seconds < 10 ? '0' + seconds : seconds;
if (timeLeft < 0) { // 시간이 다 되면 타이머 종료
clearInterval(timer);
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
}
}, 1000);
}
window.onload = startTimer; // 페이지가 로드될 때 타이머 시작
</script>
</body>
</html>