| 목차 | |
| 1. | 소스 코드 |
| 2. | 실행 결과 |
| 3. | 참고 자료 |
1. 소스 코드
◈ 파일 구조
WebMiddleAssignment/
├── html/
├── css/
├── js/
├── img/
└── audio/
◈ html
▣ home,html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>2025 MY MINI HOMEPAGE</title>
<link rel="stylesheet" href="../CSS/layout.css" />
<link rel="stylesheet" href="../CSS/font.css" />
<link rel="stylesheet" href="../CSS/home.css" />
<link rel="stylesheet" href="../CSS/cursor.css" />
</head>
<body>
<div class="bookcover">
<div class="bookdot">
<div class="page">
<div class="profile-container">
<div class="header profile-title font-neo">
TODAY <span id="today-date" class="violet"></span> | TOTAL 234918
</div>
<div class="box profile-box">
<div class="profile-image">
<img
class="profile-image-img"
src="../img/me.jpg"
alt="프로필 이미지"
/>
</div>
<div class="profile-text font-kyobohand">
ㄴr는.. 오늘도.. 눈물을.. 흘린ㄷr..★
</div>
<div class="profile-subtext font-kyobohand red">
21살
</div>
<div class="profile-subtext font-kyobohand blue">
남자
</div>
<div class="profile-subtext font-kyobohand">
박건희
</div>
<div class="profile-subtext font-kyobohand">
인하공전 다니는 중..★
</div>
<div class="profile-username font-kyobohand">
<span style="color: #0f1b5c">거니</span> (♪♬)
</div>
<div class="profile-dropdown">
<div class="dropdown-button">
<div class="dropdown-title">더 알아보기</div>
<div class="triangle-down"></div>
</div>
<div class="dropdown-content">
<a href="https://awspspgh.tistory.com/" target="_blank">블로그 바로가기</a>
<a href="https://github.com/Zi90" target="_blank">깃허브 바로가기</a>
<a href="https://www.instagram.com/zi90.322?igsh=MWJzOWpxYzRuNWh6NA==" target="_blank">인스타그램 바로가기</a>
</div>
</div>
</div>
</div>
<div class="content-container">
<div class="header content-title">
<div class="content-title-name">
<span class="wave">거</span>
<span class="wave">니</span>
<span class="wave">의</span>
<span class="wave"> </span>
<span class="wave">추</span>
<span class="wave">억</span>
<span class="wave"> </span>
<span class="wave">상</span>
<span class="wave">ㅈ</span>
<span class="wave">r</span>
<span class="wave">.</span>
<span class="wave">.</span>
<span class="wave">.</span>
<span class="wave"> </span>
<span class="wave">(</span>
<span class="wave">*</span>
<span class="wave">ˊ</span>
<span class="wave">ᵕ</span>
<span class="wave">ˋ</span>
<span class="wave">o</span>
<span class="wave">💐</span>
<span class="wave">o</span>
</div>
<div class="content-title-url">현재 상태:
<span class="online">
<span class="wave2">수</span>
<span class="wave2">업</span>
<span class="wave2">중</span>
<span class="wave2">♥</span>
</span>
</div>
</div>
<iframe id="main-frame" src="my.html" width="100%" height="600px" style="border: none;" title="Updated News and Miniroom"></iframe>
</div>
<div class="menu-container">
<div class="menu-button">
<a href="#" onclick="loadPage('my.html')"><button>홈</button></a>
<a href="#" onclick="loadPage('diary.html')"><button>여행</button></a>
<a href="#" onclick="loadPage('picture.html')"><button>일상</button></a>
<a href="#" onclick="loadPage('music.html')"><button>노래</button></a>
<a href="#" onclick="loadPage('guestbook.html')"><button>방명록</button></a>
</div>
</div>
</div>
</div>
</div>
<img src="../img/rainbow.png" alt="무지개" class="fixed-img rainbow wiggle1" />
<img src="../img/heart.png" alt="하트" class="fixed-img heart wiggle2" />
<img src="../img/star.png" alt="별" class="fixed-img star wiggle3" />
<img src="../img/cloud.png" alt="구름" class="fixed-img cloud wiggle4" />
<script src="../JS/loadPage.js"></script>
<script src="../JS/today.js"></script>
</body>
</html>
▣ my.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../CSS/box.css" />
<link rel="stylesheet" href="../CSS/font.css" />
<link rel="stylesheet" href="../CSS/home.css" />
<link rel="stylesheet" href="../CSS/cursor.css" />
</head>
<body>
<!-- content-box.html -->
<div class="box content-box">
<div class="box-title">Updated news</div>
<div class="news-flex-box">
<div class="news-box">
<div class="news-row">
<div class="news-category category-post">관심</div>
<div class="news-title"><a href="my.html">자기소개...♥</a></div>
</div>
<div class="news-row">
<div class="news-category category-pic">핫</div>
<div class="news-title"><a href="diary.html">여행...♥</a></div>
</div>
<div class="news-row">
<div class="news-category category-pic">핫</div>
<div class="news-title"><a href="picture.html">일상...♥</a></div>
</div>
<div class="news-row">
<div class="news-category category-pic">핫</div>
<div class="news-title"><a href="music.html">내 노래...♥</a></div>
</div>
<div class="news-row">
<div class="news-category category-post">관심</div>
<div class="news-title"><a href="guestbook.html">방명록...♥</a></div>
</div>
</div>
<div class="update-box">
<div class="menu-row">
<div class="menu-item">인기<span class="menu-num">23/25</span></div>
<div class="menu-item">매력<span class="menu-num">25/25</span></div>
</div>
<div class="menu-row">
<div class="menu-item">성실<span class="menu-num">24/25</span></div>
<div class="menu-item">감성<span class="menu-num">100/25</span></div>
</div>
</div>
</div>
<div class="miniroom">
<div class="box-title">Miniroom</div>
<div class="miniroom-gif-box">
<img src="../img/myroom.jpg" alt="거니의 미니룸" />
</div>
</div>
</div>
</body>
</html>
▣ diary.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>2025 MY MINI HOMEPAGE</title>
<link rel="stylesheet" href="../CSS/box.css" />
<link rel="stylesheet" href="../CSS/font.css" />
<link rel="stylesheet" href="../CSS/diary.css" />
<link rel="stylesheet" href="../CSS/cursor.css" />
</head>
<body>
<div class="box content-box">
<div class="calendar">
<div class="date-today">02.28<br/>FRI</div>
<div class="date-list">
<div class="date"><span class="blue">1</span></div>
<div class="date"><span class="red">2</span></div>
<div class="date">3</div>
<div class="date">4</div>
<div class="date">5</div>
<div class="date">6</div>
<div class="date">7</div>
<div class="date"><span class="blue">8</span></div>
<div class="date"><span class="red">9</span></div>
<div class="date">10</div>
<div class="date">11</div>
<div class="date">12</div>
<div class="date">13</div>
<div class="date">14</div>
<div class="date"><span class="blue">15</span></div>
<div class="date"><span class="red">16</span></div>
<div class="date">17</div>
<div class="date">18</div>
<div class="date">19</div>
<div class="date">20</div>
<div class="date"><span class="violet">21</span></div>
<div class="date"><span class="violet">22</span></div>
<div class="date"><span class="violet">23</span></div>
<div class="date"><span class="violet">24</span></div>
<div class="date"><span class="violet">25</span></div>
<div class="date">26</div>
<div class="date">27</div>
<div class="date">28</div>
</div>
</div>
<div class="diary-scrollbox">
<div class="diary">
<div class="diary-date">2025.02.21. 금 08:51</div>
<img class="photo" src="../img/diary1.jpg" alt="사진첩 이미지"/>
<div class="diary-contents">
<p><br>Łй 인생 첫 일본 øㅕ행! <br>ㅇr침 6んı? <br>㉥ㅣ행ブl를 ㅌŀブl 우ιぁĦnㅓ <br>전날 막ㅊr ズl㈛철을 ㅌŀヱ <br>노숙 했ㄸr...</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.21. 금 12:08</div>
<img class="photo" src="../img/diary2.jpg" alt="사진첩 이미지"/>
<div class="diary-contents">
<p><br>오バrㅋΓøłl 있는 んıㅈБøłlnㅓ ㄹΓ멘을 먹つㅓl 되는더l!!<br> パㅔバ6øłl 맛있는 つㅓ임!!<br> 국은 걸쭉㈛ヱ ㄹΓ면으l 굵ブl오ŀ 식감○l 적ㄷб㈛ヱ<br>
위으l バr진과 같○l 口ざ원 정도으l ㄱr격으로<br> ヱブl 3덩○lㄱr 있으며 ㅂĿ숙 계란 1개ㄱr<br> ㅇr주 ○F무ズlつㅓl 조己lㄱr 된 つㅓ임!!!<br>
또ㅎŁ 같○l 있는 갈릭 건て┤ブl?己б 같○l 먹는더l<br> 갈릭을 좋ㅇr㈛는 ㄴr으l 갠취 저격을 ぁĦ버림.... <br>
먹ㅈΓㅁトㅈΓ øㅕブlㄱr 일본○l구ㄴr...<br> ㄹΓヱ ㅁト음○l 외침;; </p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.21. 금 19:49</div>
<img class="photo" src="../img/diary3.jpg" alt="사진첩 이미지"/>
<div class="diary-contents">
<p><br>오バrㅋΓøłl 있는 숙소로 ㄱrブl 우ιぁĦnㅓ<br> ズl㈛철을 탔는더l ㅎŁ국 ズl㈛철과는 ⊂ト른 점○l 확실ぁı 보였음.<br>
ㅂΓ로 안전문으l 높○lㄱr 낮つㅓㄴr 없⊂ト는 점!!<br> ュ己lヱ ズl㈛철○l ㅎŁ국과는 ⊂ト르つㅓl<br>
개인 회バr로 각ㅈΓ ⊂ト르つㅓl 운영○l 되ヱ 있øłnㅓ<br> 교통㉥ㅣㄱr ㉥ㅣᄊトヱ 환승○l 복잡㈛つㅓl<br> ○l루øł진 곳○l 있ブl도 했음.</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.22. 토 10:05</div>
<img class="photo" src="../img/diary4.jpg" alt="사진첩 이미지"/>
<div class="diary-contents">
<p><br>감성 100%</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.22. 토 10:47</div>
<img class="photo" src="../img/diary5.jpg" alt="사진첩 이미지"/>
<div class="diary-contents">
<p><br>ㅇr름답⊂ト</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.22. 토 15:00</div>
<img class="photo" src="../img/diary6.jpg" alt="사진첩 이미지"/>
<div class="diary-contents">
<p><br>Łй 인생도 초코 ㄹΓ떼ㅊł럼 달았으면..</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.22. 토 17:07</div>
<img class="photo" src="../img/diary7.jpg" alt="사진첩 이미지"/>
<div class="diary-contents">
<p><br>오늘도 Łй 인생으l ㅎŁ 페○lズl를 적었⊂ト..</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.23. 일 09:17</div>
<img class="photo" src="../img/diary8.jpg" alt="사진첩 이미지"/>
<div class="diary-contents">
<p><br>○l곳○l 재팬으l 유LI버셜?!?!</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.24. 월 15:33</div>
<img class="photo" src="../img/diary9.jpg" alt="사진첩 이미지"/>
<div class="diary-contents">
<p><br>ㅋΓ츠 맛있땅</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.24. 월 22:06</div>
<img class="photo" src="../img/diary10.jpg" alt="사진첩 이미지"/>
<div class="diary-contents">
<p><br>Łй 첫 일본 노천탕.. 좋았⊂ト</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.25. 화 13:43</div>
<img class="photo" src="../img/diary11.jpg" alt="사진첩 이미지"/>
<div class="diary-contents">
<p><br>규ㅋΓ츠 ㉥ㅣᄊトズl口ざ <br>○l 맛을 우ιぁĦnㅓ는<br> 돈을 ㅂΓ칠 수 있⊂トㅠ</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.26. 수 17:52</div>
<img class="photo" src="../img/diary12.jpg" alt="사진첩 이미지"/>
<div class="diary-contents">
<p><br>난..ㄱr끔.. 눈물을 흘린 ㄷㅏ.. <br>ㄱㅏ끔은 눈물을 참을 수 없는 ㄴㅐ가 별루ㄷㅏ..<br>소ㄹㅣ치며.. 울 수 있ㄷㅏ는건...<br>좋은ㄱㅓ..ㅇㅑ..</p>
</div>
</div>
</div>
</div>
</body>
</html>
▣ pricture.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>다이어리</title>
<link rel="stylesheet" href="../CSS/box.css" />
<link rel="stylesheet" href="../CSS/font.css" />
<link rel="stylesheet" href="../CSS/picture.css" />
<link rel="stylesheet" href="../CSS/cursor.css" />
</head>
<body>
<div class="box content-box">
<div class="content-photo">
<div class="photo-title font-neo">교수님이.. 너무.. 벅차ㄷr..</div>
<div class="photo-image">
<img
class="photo-image-img"
src="../img/pic1.jpg"
alt="사진첩 이미지"
/>
</div>
<div class="photo-title font-neo">나의.. 이zㅅro..★☆</div>
<div class="photo-image">
<img
class="photo-image-img"
src="../img/pic2.jpg"
alt="사진첩 이미지"
/>
</div>
<div class="photo-title font-neo">양ㅍr같은 남ㅈr..</div>
<div class="photo-image">
<img
class="photo-image-img"
src="../img/pic3.jpg"
alt="사진첩 이미지"
/>
</div>
</div>
</div>
</body>
</html>
▣ music.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>2025 MY MINI HOMEPAGE</title>
<link rel="stylesheet" href="../CSS/box.css" />
<link rel="stylesheet" href="../CSS/font.css" />
<link rel="stylesheet" href="../CSS/diary.css" />
<link rel="stylesheet" href="../CSS/cursor.css" />
</head>
<body>
<div class="box content-box">
<div class="diary-scrollbox">
<div class="diary">
<div class="diary-date">2025.02.22. 토 10:06</div>
<div class="diary-contents">
<img class="music" src="../img/Love119.jpg" alt="사진첩 이미지"/>
<audio
controls
src="../audio/RIIZE (라이즈) 'Love 119' Lyrics (Color Coded Lyrics).mp3"
type="audio/mpeg">
브라우저가 audio 태그를 지원하지 않을 때 표시되는 문장
</audio>
<p><br>뺏긴 My ħёarŧ ŧħaŧ girl's a killёr<br> ŁØvё sØ gØØđ fёёls likё a ŧħrillёr<br> んı작됐ズl ○l건 ёmёrgёncy<br>-라이즈, LOVE 119</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.23. 일 09:18</div>
<div class="diary-contents">
<img class="music" src="../img/Magnetic.jpg" alt="사진첩 이미지"/>
<audio
controls
src="../audio/ILLIT 'Magnetic' Lyrics (아일릿 Magnetic 가사) (Color Coded Lyrics).mp3"
type="audio/mpeg">
브라우저가 audio 태그를 지원하지 않을 때 표시되는 문장
</audio>
<p><br>Шaiŧ a minцŧё, ○lつㅓl 뭐ズl?<br> Łй 심ㅈБ○l lØvё-đцb ㅈΓ꾸口ざ 뛰øł<br> 저 멀己lnㅓ도 Øħ my gØsħ 끌øł댱겨<br> yØц'rё my crцsħ 초능력ㅊł럼<br>-아일릿, Magnetic</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.24. 월 15:34</div>
<div class="diary-contents">
<img class="music" src="../img/LoveAttack.jpg" alt="사진첩 이미지"/>
<audio
controls
src="../audio/[UPDATED] RESCENE LOVE ATTACK Lyrics (Color Coded Lyrics).mp3"
type="audio/mpeg">
브라우저가 audio 태그를 지원하지 않을 때 표시되는 문장
</audio>
<p><br>ㅎŁ 번도 빛난 적 없었던 ㅁıズl으l 향으로<br> 온 パㅔバ6을 물들øㅕ<br> 새로워진 ㅈБ면øłl 두 눈앞은 황홀ぁĦ<br> 너으l 손을 잡을 땐 너오ŀ øł우러질 땐<br>-리센느, Love Attack</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.25. 화 13:44</div>
<div class="diary-contents">
<img class="music" src="../img/Sign.png" alt="사진첩 이미지"/>
<audio
controls
src="../audio/izna (이즈나) 'Sign' (Color Coded Lyrics).mp3"
type="audio/mpeg">
브라우저가 audio 태그를 지원하지 않을 때 표시되는 문장
</audio>
<p><br>Sŧarligħŧ ㅇr㉣łı ㄴr란ぁı 앉ㅇrnㅓ 두근두근 얘ブl할 ㄸĦ<br> MØØnligħŧ 우ιøłlnㅓ 너오ŀ 춤을 추듯<br> yØц anđ i arё цp in ŧħё sky<br>-이즈나, Sign</p>
</div>
</div>
<div class="diary">
<div class="diary-date">2025.02.26. 수 17:53</div>
<div class="diary-contents">
<img class="music" src="../img/airplane.jpg" alt="사진첩 이미지"/>
<audio
controls
src="../audio/Airplane.mp3"
type="audio/mpeg">
브라우저가 audio 태그를 지원하지 않을 때 표시되는 문장
</audio>
<p><br>ㅇrㅊr, 겁○l 났었øł 날ㅇr오르는 つㅓl<br> ズl금 우릴 실은 バr己б○lㄹΓ는 planё<br> ○lㅁı 알ヱ 있øł, 머잖ㅇr 추락㈛己l란 걸<br>
감춰ズlズl 않ㅇr 떠오르는 □占<br> 멈출 수도 없øł øł디까질까?<br> Łйㄱr 알 수 있는 전부란 너오ŀ ㅎ古께란 것<br>-에프엑스, airplane</p>
</div>
</div>
</div>
</div>
</body>
</html>▣ guestbook.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>2025 MY MINI HOMEPAGE</title>
<link rel="stylesheet" href="../CSS/box.css" />
<link rel="stylesheet" href="../CSS/font.css" />
<link rel="stylesheet" href="../CSS/guestbook.css" />
<link rel="stylesheet" href="../CSS/cursor.css" />
</head>
<body>
<div class="box content-box">
<div class="guestbook-scrollbox">
<div class="guestbook-box">
<div class="guestbook-title">No. 258
<span style = "color :#5c3ccf"> ღ별빛에_묻은_예빈ღ </span>
<i class="fas fa-home"></i>
<div class="guestbook-date">(2025.02.21 01:31)</div>
</div>
<div class="guestbook-contents">
<div class="guestbook-image background-1">
<img src="../img/human1.jpg" alt="프로필 사진" />
</div>
<div class="guestbook-text">
<p>오빠으l バr진 속 ㅁı소ㄱr<br> 진ㅉr 행복○l었으면 좋겠⊂ト<br><br><br> ㅇr, ュ己lヱ Łйㄱr 빌려줬던<br> 도토己l 돌려줘○F 해</p>
</div>
</div>
</div>
<div class="guestbook-box">
<div class="guestbook-title">No. 8282
<span style = "color : #5c3ccf"> 인천 지존얼짱 ㅎr은 </span>
<i class="fas fa-home"></i>
<div class="guestbook-date">(2025.02.22. 16:05)</div>
</div>
<div class="guestbook-contents">
<div class="guestbook-image background-2">
<img src="../img/human2.jpg" alt="프로필 사진" />
</div>
<div class="guestbook-text">
<p>이런 웹사이트라니 폭풍 눈물..☆<br>뽀대간지 박건희 폼 미쳤ㄷr…</p>
</div>
</div>
</div>
<div class="guestbook-box">
<div class="guestbook-title">No. 5899
<span style = "color :#5c3ccf"> (재윤ゝ∀･)☆ </span>
<i class="fas fa-home"></i>
<div class="guestbook-date">(2025.02.23. 10:24)</div>
</div>
<div class="guestbook-contents">
<div class="guestbook-image background-3">
<img src="../img/human3.jpg" alt="프로필 사진" />
</div>
<div class="guestbook-text">
<p>(재윤ゝ∀･)☆ 출동~ 거니 (♪♬)<br>감성 스팟øłl 댓글 남긴⊂ト</p>
</div>
</div>
</div>
<div class="guestbook-box">
<div class="guestbook-title">No. 7753
<span style = "color :#5c3ccf"> 『달빛 조각사 오주녀기』 </span>
<i class="fas fa-home"></i>
<div class="guestbook-date">(2025.02.24. 23:47)</div>
</div>
<div class="guestbook-contents">
<div class="guestbook-image background-4">
<img src="../img/human4.jpg" alt="프로필 사진" />
</div>
<div class="guestbook-text">
<p>집øłl...<br> ㄱrヱ 싶⊂ト...ㅜ</p>
</div>
</div>
</div>
<div class="guestbook-box">
<div class="guestbook-title">No. 9941
<span style = "color :#5c3ccf"> 서희곤듀♥ </span>
<i class="fas fa-home"></i>
<div class="guestbook-date">(2025.02.25. 15:31)</div>
</div>
<div class="guestbook-contents">
<div class="guestbook-image background-4">
<img src="../img/human5.jpg" alt="프로필 사진" />
</div>
<div class="guestbook-text">
<p>ㅇr~~ 연0H ㈛ヱ 싶⊂ト...<br><br><br> つㅓLI○F 좋은 남ㅈΓ 소개んı켜주ㄹΓ</p>
</div>
</div>
</div>
<div class="guestbook-box">
<div class="guestbook-title">No. 1270
<span style = "color :#5c3ccf"> 조랭ㅇiS2쥰 </span>
<i class="fas fa-home"></i>
<div class="guestbook-date">(2025.02.26. 15:21)</div>
</div>
<div class="guestbook-contents">
<div class="guestbook-image background-4">
<img src="../img/human6.jpg" alt="프로필 사진" />
</div>
<div class="guestbook-text">
<p>Łй일 ㅁトㄹΓ탕?</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
◈ css
▣ layout.css
body {
background-color: #a3a3a3;
background-image: url("../img/pattern.png");
background-size: 100px;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
font-size: 16px;
/** 기본 폰트 설정 */
font-family: "Noto Sans KR", sans-serif;
}
.bookcover {
background-color: #c3b4da;
border-radius: 9px;
border: 1px solid #738186;
width: 960px;
height: 660px;
margin: 100px auto;
position: relative;
}
.bookdot {
border-radius: 9px;
border: 2px dashed #ffffff;
padding: 15px;
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
}
.page {
background-color: #eeeeee;
border-radius: 9px;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
display: flex;
padding: 15px;
}
.profile-container {
flex: 0.4;
margin-right: 1.5rem;
display: flex;
flex-direction: column;
}
.content-container {
flex: 1;
display: flex;
flex-direction: column;
}
.menu-container {
flex: 0.15;
}
.header {
flex: 0.1;
}
.box {
background-color: white;
flex: 3;
border-radius: 10px;
border: 1px solid #cdcdcd;
}
.content-title {
display: flex;
align-items: center;
}
.content-title-name {
flex: 1;
}
.content-title-url {
flex: 1;
font-size: 0.8rem; /* 적용한 폰트 특성 상 사이즈가 커서 font-size 조정 */
text-align: end; /* 텍스트 우측 정렬 */
}
.profile-title {
font-size: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
}
.profile-box {
display: flex;
flex-direction: column;
padding: 2rem;
}
.profile-image {
flex: none;
}
.profile-image-img {
width: 100%;
height: 100%;
}
.profile-text {
margin-top: 1.5rem;
font-size: 0.75rem;
line-height: 1.7;
flex: 1;
font-size: 12x;
}
.profile-subtext {
margin-top: 0.3rem;
font-size: 0.75rem;
line-height: 1.7;
flex: 1;
font-size: 12x;
}
.profile-username {
flex: 0;
}
.content-box{
display: flex;
flex-direction: column;
padding: 1rem;
overflow: auto;
}
.menu-button button{
width: 80px;
text-align: left;
margin-bottom: 0.9rem;
font-size: 1rem;
font-family: "NeoDunggeunmo";
padding: 0.4rem;
background-color: #3B87AB;
color: white;
border-radius: 0 5px 5px 0;
border: 1px solid grey;
cursor: pointer;
}
.menu-button:first-child{
margin-top: 3rem;
}
a button:hover {
background-color: #6B66FF;
color: white;
}
.profile-dropdown{
flex: 0;
border: 1px solid #c9d4da;
padding: 5px;
margin-top: 10px;
font-size: 0.8rem;
position: relative;
}
.triangle-down{
width: 0;
height: 0;
border-left: 4.5px solid transparent;
border-right: 4.5px solid transparent;
border-top: 5px solid #838383;
}
.dropdown-button{
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown-content{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.profile-dropdown:hover > .dropdown-content{
display: block;
}
.dropdown-content > a{
display: block;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
width: 100%;
padding: 6px;
color: black;
text-decoration: none;
}
.dropdown-content > a:hover{
background-color: #f1f1f1;
}
.red{
color: red;
}
.blue{
color: blue;
}
.violet{
color: #af1cd4;
}
▣ font.css
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap");
@font-face {
font-family: "NeoDunggeunmo";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.3/NeoDunggeunmo.woff")
format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "KOTRA_BOLD-Bold";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.1/KOTRA_BOLD-Bold.woff")
format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "KyoboHand";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff")
format("woff");
font-weight: normal;
font-style: normal;
}
.font-kotra {
font-family: "KOTRA_BOLD-Bold";
}
.font-kyobohand {
font-family: "KyoboHand";
}
.font-neo {
font-family: "NeoDunggeunmo";
}
▣ home.css
.news-flex-box {
flex: 0 0 auto;
margin-bottom: 2rem;
display: flex;
font-size: 0.8rem;
}
.news-box {
flex: 1;
}
.update-box {
flex: 1;
}
.miniroom {
flex: 1;
display: flex;
flex-direction: column;
}
.box-title {
font-family: "KOTRA_BOLD-Bold";
border-bottom: 1px solid grey;
color: #c3b4da;
}
.news-row {
display: flex;
font-size: 0.85rem;
margin: 3px 0;
}
.news-category {
padding: 0 6px;
margin-right: 6px;
color: white;
border-radius: 3px;
}
.category-pic {
background-color: #f15f5f;
}
.category-post {
background-color: #617dc1;
}
.menu-row {
display: flex;
border-bottom: 1px dashed grey;
margin: 3px 0;
}
.menu-item {
flex: 1;
}
.menu-num {
font-family: "NeoDunggeunmo";
padding-left: 6px;
color: #003399;
}
.miniroom-gif-box {
border: 1px solid #808080;
flex: 1;
display: flex;
}
.miniroom-gif-box img{
width: 514px;
}
.online{
color: rgb(29, 190, 29);
font-weight: 700;
}
.content-title-name {
display: flex;
gap: 0.1rem;
font-family: "NeoDunggeunmo", sans-serif;
}
.wave {
display: inline-block;
animation: waveUpDown 5s ease-in-out infinite;
}
.wave2 {
display: inline-block;
animation: waveUpDown2 1.5s ease-in-out infinite;
}
@keyframes waveUpDown {
0% { transform: translateY(0); }
14.3% { transform: translateY(-10px); } /* ↑ 올라감 (약 1초) */
28.6% { transform: translateY(0); } /* ↓ 내려감 (약 1초) */
100% { transform: translateY(0); } /* 나머지 3초 멈춘 것처럼 보이게 유지 */
}
@keyframes waveUpDown2 {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.wave:nth-child(1) { animation-delay: 0s; }
.wave:nth-child(2) { animation-delay: 0.1s; }
.wave:nth-child(3) { animation-delay: 0.2s; }
.wave:nth-child(4) { animation-delay: 0.3s; }
.wave:nth-child(5) { animation-delay: 0.4s; }
.wave:nth-child(6) { animation-delay: 0.5s; }
.wave:nth-child(7) { animation-delay: 0.6s; }
.wave:nth-child(8) { animation-delay: 0.7s; }
.wave:nth-child(9) { animation-delay: 0.8s; }
.wave:nth-child(10) { animation-delay: 0.9s; }
.wave:nth-child(11) { animation-delay: 1.0s; }
.wave:nth-child(12) { animation-delay: 1.1s; }
.wave:nth-child(13) { animation-delay: 1.2s; }
.wave:nth-child(14) { animation-delay: 1.3s; }
.wave:nth-child(15) { animation-delay: 1.4s; }
.wave:nth-child(16) { animation-delay: 1.5s; }
.wave:nth-child(17) { animation-delay: 1.6s; }
.wave:nth-child(18) { animation-delay: 1.7s; }
.wave:nth-child(19) { animation-delay: 1.8s; }
.wave:nth-child(20) { animation-delay: 1.9s; }
.wave:nth-child(21) { animation-delay: 2.0s; }
.wave:nth-child(22) { animation-delay: 2.1s; }
.wave2:nth-child(1) { animation-delay: 0s; }
.wave2:nth-child(2) { animation-delay: 0.1s; }
.wave2:nth-child(3) { animation-delay: 0.2s; }
.wave2:nth-child(4) { animation-delay: 0.3s; }
.wave2:nth-child(5) { animation-delay: 0.4s; }
.wave2:nth-child(6) { animation-delay: 0.5s; }
.wave2:nth-child(7) { animation-delay: 0.6s; }
.wave2:nth-child(8) { animation-delay: 0.7s; }
.wave2:nth-child(9) { animation-delay: 0.8s; }
.wave2:nth-child(10) { animation-delay: 0.9s; }
.wave2:nth-child(11) { animation-delay: 1.0s; }
.wave2:nth-child(12) { animation-delay: 1.1s; }
.wave2:nth-child(13) { animation-delay: 1.2s; }
.wave2:nth-child(14) { animation-delay: 1.3s; }
.wave2:nth-child(15) { animation-delay: 1.4s; }
.wave2:nth-child(16) { animation-delay: 1.5s; }
.wave2:nth-child(17) { animation-delay: 1.6s; }
.wave2:nth-child(18) { animation-delay: 1.7s; }
.wave2:nth-child(19) { animation-delay: 1.8s; }
.wave2:nth-child(20) { animation-delay: 1.9s; }
.wave2:nth-child(21) { animation-delay: 2.0s; }
.wave2:nth-child(22) { animation-delay: 2.1s; }
.news-title a{
text-decoration: none;
color:#000000;
}
▣ diary.css
.content-box{
position: relative;
}
.calendar{
display: flex;
align-items: center;
height: 3rem;
font-family: "NeoDunggeunmo";
border: 1px solid #EDEDF0;
}
.date-today{
flex: 0;
align-items: center;
text-align: center;
padding: 0.5rem 0.8rem;
margin-right: 0.8rem;
color: #5c3ccf;
}
.date-list{
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: start;
}
.date{
margin-right: 10px;
}
.diary-scrollbox{
top: 100px;
left: 15px;
right: 15px;
bottom: 15px;
overflow: auto;
}
.diary{
border: 1px solid #EDEDF0;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.diary-date{
flex: 0;
font-family: "NeoDunggeunmo";
color: #5c3ccf;
padding: 1rem;
}
.diary-contents{
flex: 1;
font-size:20px;
font-family: "KyoboHand";
text-align: center;
}
.fa-lock{
font-size: 0.5rem;
color: white;
margin-right: 0.5rem;
}
.button-box{
display: flex;
justify-content: center;
}
.diary-button{
display: block;
border: none;
padding: 1rem;
margin-right: auto;
margin-left: auto;
font-size: 1rem;
font-family: "NeoDunggeunmo";
color: white;
background-color: white;
cursor: pointer;
}
#secret-box{
display: none;
}
.red{
color: red;
}
.blue{
color: blue;
}
.violet{
color: #af1cd4;
}
▣ picture.css
.content-photo{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.photo-title{
flex: 1;
padding: 0.5rem;
margin-top: 10px;
margin-bottom: 20px;
background-color: #c7c9ca;
border-radius: 9px;
width: 100%;
}
.photo-image{
flex: 1 auto;
padding: 1rem;
}
.photo-image-img{
max-width: 450px;
max-height: 550px;
display: block;
margin-left: auto;
margin-right: auto;
}
▣ guestbook.css
.content-box{
position: relative;
height: 90vh; /* 혹은 고정 height 값 */
}
.guestbook-scrollbox{
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
overflow: auto;
}
.guestbook-box{
margin-bottom: 20px;
}
.guestbook-title{
height: 2rem;
background-color: #D1F0F8;
display: flex;
align-items: center;
padding: 0 1rem;
font-family:"NeoDunggeunmo";
background-color: rgba(216, 216, 216, 0.932);
}
.guestbook-date{
font-size: 0.8rem;
}
.guestbook-contents{
padding: 1rem;
display: flex;
align-items: center;
}
.guestbook-image{
flex: 0 0 10rem;
height: 10rem;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.background-1{
background-image: url("images/background1.jpeg")
}
.background-2{
background-image: url("images/background2.jpeg")
}
.background-3{
background-image: url("images/background3.png")
}
.background-4{
background-image: url("images/background4.jpeg")
}
.guestbook-image > img{
width: 70%;
}
.guestbook-text{
flex: 1;
font-size: 1rem;
font-family: "KyoboHand";
padding: 1rem;
}
▣ box.css
.box {
background-color: white;
flex: 3;
border-radius: 10px;
border: 1px solid #cdcdcd;
padding: 16px;
}
.photo{
max-width: 400px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
.music{
width: 225px;
height: 225px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
border-radius: 5px;
}
▣ cursor.css
* {
margin: 0;
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDA2IDc5LjE2NDc1MywgMjAyMS8wMi8xNS0xMTo1MjoxMyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjMgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDE1MzlFMUEwRTZFMTFGMDk1QjBCNjAzQTc0REU0QkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDE1MzlFMUIwRTZFMTFGMDk1QjBCNjAzQTc0REU0QkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MTUzOUUxODBFNkUxMUYwOTVCMEI2MDNBNzRERTRCRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MTUzOUUxOTBFNkUxMUYwOTVCMEI2MDNBNzRERTRCRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpZdxf4AAAmtSURBVHjaxFd5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), auto !important;
}
/* 네 구석에 고정된 이미지 스타일 */
.fixed-img {
position: fixed;
width: 240px;
z-index: 999;
pointer-events: none;
}
/* 각각의 위치에서 약간 안쪽으로 이동 (예: 40px → 80px) */
.fixed-img.rainbow {
top: 100px;
left: 80px;
width: 320px;
}
.fixed-img.heart {
bottom: 200px;
left: 120px;
}
.fixed-img.star {
top: 200px;
right: 200px;
width: 200px;
}
.fixed-img.cloud {
bottom: 300px;
right: 80px;
}
/* 공통 애니메이션 스타일 */
@keyframes wiggle1 {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes wiggle2 {
0%, 100% { transform: rotate(3deg); }
50% { transform: rotate(-3deg); }
}
@keyframes wiggle3 {
0%, 100% { transform: rotate(-1.5deg); }
50% { transform: rotate(1.5deg); }
}
@keyframes wiggle4 {
0%, 100% { transform: rotate(2.5deg); }
50% { transform: rotate(-2.5deg); }
}
.wiggle1 {
animation: wiggle1 2s infinite ease-in-out;
}
.wiggle2 {
animation: wiggle2 3s infinite ease-in-out;
}
.wiggle3 {
animation: wiggle3 2.5s infinite ease-in-out;
}
.wiggle4 {
animation: wiggle4 3.2s infinite ease-in-out;
}
◈ javascript
▣ loadPage.js
function loadPage(pageUrl) {
document.getElementById("main-frame").src = pageUrl;
}▣ today.js
// 현재 날짜 가져오기
const today = new Date();
const month = String(today.getMonth() + 1).padStart(2, '0'); // 월 (0부터 시작하므로 +1)
const day = String(today.getDate()).padStart(2, '0'); // 일
// 날짜 표시
document.getElementById('today-date').textContent = `${month}.${day}`;
2. 실행 결과
3. 참고 자료
◈ 싸이월드
https://sujin-dev.tistory.com/377
[ Visual Studio Code ] 싸이월드 페이지 만들기 - ①
body { background-color: #a3a3a3; /** body에 배경이미지 적용 */ background-image: url("../static/images/pattern.png"); /** 고정된 사이즈로 설정 */ background-size: 100px; /** 기본 body 사이즈를 화면 크기로 고정 */ position: fi
sujin-dev.tistory.com
◈ 마우스 커스텀 커서
https://sereni-ty.tistory.com/134#google_vignette
웹사이트 마우스 커서 바꾸기 커스터마이징 - CSS와 JavaScript 방법 총정리 (Custom Cursor Tips)
1. 서론오늘은 웹사이트에서 마우스 커서를 JavaScript와 CSS를 이용해 바꾸는 방법에 대해 자세히 알아보겠습니다.웹사이트를 더 감각적으로 만들고 싶거나, 게임/이벤트 페이지 등에서 사용자 경
sereni-ty.tistory.com