diff --git a/img/dog.png b/img/dog.png new file mode 100644 index 0000000..c934e35 Binary files /dev/null and b/img/dog.png differ diff --git a/img/dragon.png b/img/dragon.png new file mode 100644 index 0000000..bc5a687 Binary files /dev/null and b/img/dragon.png differ diff --git a/img/fortune.png b/img/fortune.png new file mode 100644 index 0000000..0bccbaf Binary files /dev/null and b/img/fortune.png differ diff --git a/img/horse.png b/img/horse.png new file mode 100644 index 0000000..4080343 Binary files /dev/null and b/img/horse.png differ diff --git a/img/monkey.png b/img/monkey.png new file mode 100644 index 0000000..6383fd4 Binary files /dev/null and b/img/monkey.png differ diff --git a/img/mouse.png b/img/mouse.png new file mode 100644 index 0000000..a40780f Binary files /dev/null and b/img/mouse.png differ diff --git a/img/ox.png b/img/ox.png new file mode 100644 index 0000000..cd3194c Binary files /dev/null and b/img/ox.png differ diff --git a/img/pig.png b/img/pig.png new file mode 100644 index 0000000..044d4ca Binary files /dev/null and b/img/pig.png differ diff --git a/img/rabbit.png b/img/rabbit.png new file mode 100644 index 0000000..67bd228 Binary files /dev/null and b/img/rabbit.png differ diff --git a/img/rooster.png b/img/rooster.png new file mode 100644 index 0000000..e341cdb Binary files /dev/null and b/img/rooster.png differ diff --git a/img/sheep.png b/img/sheep.png new file mode 100644 index 0000000..fce1383 Binary files /dev/null and b/img/sheep.png differ diff --git a/img/snake.png b/img/snake.png new file mode 100644 index 0000000..8d89866 Binary files /dev/null and b/img/snake.png differ diff --git a/img/tiger.png b/img/tiger.png new file mode 100644 index 0000000..fbca91f Binary files /dev/null and b/img/tiger.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..880d14e --- /dev/null +++ b/index.html @@ -0,0 +1,79 @@ + + + + + + 2025년 신년운세 + + + + +
+
+

2025년 신년운세

+
+ 점술가 +
+
+
+ + +
+
+ + + + + + +
+ + + + + + + + +
+ + + +
+ + + + + + + + +
+ + + +
+
+ + diff --git a/result.html b/result.html new file mode 100644 index 0000000..1ba767e --- /dev/null +++ b/result.html @@ -0,0 +1,79 @@ + + + + + + 2025년 신년운세 결과 + + + + +
+
+

2025년 신년운세

+
+ 십이지신 이미지 +
+
+
+ + +
+ +
+

+

+
+ +
+ + +
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..fe7037a --- /dev/null +++ b/script.js @@ -0,0 +1,26 @@ +document.getElementById('zodiac-form').addEventListener('submit', function (e) { + e.preventDefault(); + + const year = parseInt(document.getElementById('birth-year').value); + const zodiacs = [ + { name: "쥐", image: "rat.jpg" }, + { name: "소", image: "ox.jpg" }, + { name: "호랑이", image: "tiger.jpg" }, + { name: "토끼", image: "rabbit.jpg" }, + { name: "용", image: "dragon.jpg" }, + { name: "뱀", image: "snake.jpg" }, + { name: "말", image: "horse.jpg" }, + { name: "양", image: "goat.jpg" }, + { name: "원숭이", image: "monkey.jpg" }, + { name: "닭", image: "rooster.jpg" }, + { name: "개", image: "dog.jpg" }, + { name: "돼지", image: "pig.jpg" } + ]; + + const zodiacIndex = (year - 4) % 12; + const zodiac = zodiacs[zodiacIndex]; + + document.getElementById('zodiac-image').src = zodiac.image; + document.getElementById('zodiac-image').alt = zodiac.name; + document.getElementById('result').textContent = `당신의 십이지간은 ${zodiac.name}입니다!`; +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..63b91ff --- /dev/null +++ b/styles.css @@ -0,0 +1,175 @@ +/* 기본 스타일 초기화 */ +body { + margin: 0; + background: linear-gradient(to bottom, #d4c5e6, rgba(247, 224, 213, 0.7), rgba(247, 224, 213, 0)); + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + min-height: 100vh; + padding: 0; } + +/* 헤더 CSS */ +/* 컨테이너 전체 스타일 */ +.container_header { + text-align: center; + padding: 30px 0; + width: 100%; +} + +/* 2025년 신년운세 */ +.container_header h1 { + font-size: 2rem; + font-weight: bold; + color: #ffffff; + margin: 0; +} + +/* 점술가 이미지 */ +.fortune-teller img { + width: 300px; + height: auto; + margin-top: 10px; +} + + +/* 본문 */ +/* 컨테이너 전체 스타일 */ +.container_body { + background: #ffffff; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + width: 100%; + max-width: 800px; +} + +form { + display: flex; + flex-direction: column; +} + +/* 이름, 음/양력, 생년월일 */ +label { + font-size: 1rem; + font-weight: bold; + margin-bottom: 16px; + color: #111827; +} + +/* 이름 input 박스 CSS */ +input[type="text"] { + border: 1px solid #F3F4F6; + background-color: #F3F4F6; + border-radius: 5px; + padding: 10px; + font-size: 1rem; + margin-bottom: 60px; + width: 100%; + box-sizing: border-box; +} + +/* 음/양력 선택을 3칸으로 나누기 */ +.calendar-selection { + display: flex; + gap: 10px; + margin-bottom: 60px; +} + +/* 음/양력 라디오 버튼 스타일 CSS */ +.calendar-selection input[type="radio"] { + display: none; /* 기본 라디오 버튼 숨김 */ +} + +.calendar-selection label { + display: block; + padding: 10px 20px; + background-color: #F3F4F6; + color: #111827; + border-radius: 5px; + font-size: 1rem; + text-align: center; + cursor: pointer; + transition: background 0.3s; + flex: 1; +} + +.calendar-selection input[type="radio"]:checked + label { + background-color: #9177c5; /* 선택된 버튼 색상 */ + color : white; +} + +.calendar-selection input[type="radio"]:hover + label { + opacity: 0.9; /* 호버 시 버튼 효과 */ +} + +/* 생년월일 섹션 */ +.birth-date { + display: flex; + gap: 10px; + margin-bottom: 60px; +} + +.birth-date select { + flex: 1; + padding: 10px; + font-size: 1rem; + border: 1px solid #ccc; + border-radius: 5px; + background: #ffffff; +} + +/* 제출 버튼 */ +button.submit { + background: #9177c5; + color: #ffffff; + border: none; + border-radius: 5px; + padding: 15px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: background 0.3s; +} + +button.submit:hover { + background: #5e47a2; +} + +/* result.html CSS */ +/* 공유 버튼 CSS */ +/* 링크 복사 버튼 스타일 */ +button { + background: #9177c5; /* 기존 제출 버튼 색상 */ + color: #ffffff; + border: none; + border-radius: 5px; + padding: 15px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: background 0.3s; + margin-top: 20px; /* 버튼 사이의 간격 */ + width : 100%; +} + +/* 버튼 호버 효과 */ +button:hover { + background: #5e47a2; /* 호버 시 색상 변화 */ +/* 반응형 디자인 */ +@media (max-width: 768px) { + .container h1 { + font-size: 1.5rem; + } + + .fortune-teller img { + width: 120px; + } + + .section { + padding: 15px; + } + + button.submit { + font-size: 0.9rem; + } \ No newline at end of file