[ Visual Studio Code ] 싸이월드 페이지 만들기

Web/모각코

[ Visual Studio Code ] 싸이월드 페이지 만들기 - ⑧

곽수진 2022. 1. 5. 02:00

1. home.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>2021 MINI HOMEPAGE</title>
    <link rel="stylesheet" href="./static/layout.css" />
    <link rel="stylesheet" href="./static/font.css" />
    <link rel="stylesheet" href="./static/home.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 class="color-red"> 28</span> | TOTAL 234918
            </div>
            <div class="box profile-box">
              <div class="profile-image">
                <img
                  class="profile-image-img"
                  src="./static/images/cyworld1.png"
                  alt="프로필 이미지"
                />
              </div>
              <div class="profile-text font-kyobohand">
                ㄴr는.. 오늘도.. 눈물을.. 흘린ㄷr..★
              </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="#" target="_blank">블로그 바로가기</a>
                  <a href="#" target="_blank">페이스북 바로가기</a>
                  <a href="#" target="_blank">인스타그램 바로가기</a>
                </div>
              </div>
            </div>
          </div>
          <div class="content-container">
            <div class="header content-title">
              <div class="content-title-name">수지니의 추억 상ㅈr... (*ˊᵕˋo💐o</div>
              <div class="content-title-url">https://url주소/나중에입력</div>
            </div>
            <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-pic">사진첩</div>
                    <div class="news-title">일상...♥</div>
                  </div>
                  <div class="news-row">
                    <div class="news-category category-post">게시판</div>
                    <div class="news-title">웹코딩...♥</div>
                  </div>
                  <div class="news-row">
                    <div class="news-category category-post">게시판</div>
                    <div class="news-title">Memory...♥</div>
                  </div>
                  <div class="news-row">
                    <div class="news-category category-pic">사진첩</div>
                    <div class="news-title">여행...♥</div>
                  </div>
                </div>
                <div class="update-box">
                  <div class="menu-row">
                    <div class="menu-item">다이어리<span class="menu-num">0/25</span></div>
                    <div class="menu-item">사진첩<span class="menu-num">0/25</span></div>
                  </div>
                  <div class="menu-row">
                    <div class="menu-item">게시판<span class="menu-num">0/25</span></div>
                    <div class="menu-item">방명록<span class="menu-num">0/25</span></div>
                  </div>
                </div>
              </div>
              <div class="miniroom">
                <div class="box-title">Miniroom</div>
                <div class="miniroom-gif-box">
                  <img src="./static/images/myroom.png" alt="수지니의 미니룸" />
                </div>
              </div>
            </div>
          </div>
          <div class="menu-container">
            <div class="menu-button">
              <a href="home.html"><button>홈</button></a>
              <a href="diary.html"><button>다이어리</button></a>
              <a href="picture.html"><button>사진첩</button></a>
              <a href="#"><button>방명록</button></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

2. picture.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>2021 MINI HOMEPAGE</title>
    <link rel="stylesheet" href="./static/layout.css" />
    <link rel="stylesheet" href="./static/font.css" />
    <link rel="stylesheet" href="./static/picture.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 class="color-red"> 28</span> | TOTAL 234918
            </div>
            <div class="box profile-box">
              <div class="profile-image">
                <img
                  class="profile-image-img"
                  src="./static/images/cyworld1.png"
                  alt="프로필 이미지"
                />
              </div>
              <div class="profile-text font-kyobohand">
                ㄴr는.. 오늘도.. 눈물을.. 흘린ㄷr..★
              </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="#" target="_blank">블로그 바로가기</a>
                  <a href="#" target="_blank">페이스북 바로가기</a>
                  <a href="#" target="_blank">인스타그램 바로가기</a>
                </div>
              </div>
            </div>
          </div>
          <div class="content-container">
            <div class="header content-title">
              <div class="content-title-name">수지니의 추억 상ㅈr... (*ˊᵕˋo💐o</div>
              <div class="content-title-url">https://url주소/나중에입력</div>
            </div>
            <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="./static/images/photo1.png"
                    alt="사진첩 이미지"
                    />
                </div>
                <div class="photo-title font-neo">나의.. 이zㅅro..★☆</div>
                <div class="photo-image">
                    <img
                    class="photo-image-img"
                    src="./static/images/photo2.png"
                    alt="사진첩 이미지"
                    />
                </div>
                <div class="photo-title font-neo">양ㅍr같은 남ㅈr..</div>
                <div class="photo-image">
                    <img
                    class="photo-image-img"
                    src="./static/images/photo3.png"
                    alt="사진첩 이미지"
                    />
                </div>
            </div>
        </div>
          </div>
          <div class="menu-container">
            <div class="menu-button">
              <a href="home.html"><button>홈</button></a>
              <a href="diary.html"><button>다이어리</button></a>
              <a href="picture.html"><button>사진첩</button></a>
              <a href="#"><button>방명록</button></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

3. diary.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>2021 MINI HOMEPAGE</title>
    <link rel="stylesheet" href="./static/layout.css" />
    <link rel="stylesheet" href="./static/font.css" />
    <link rel="stylesheet" href="./static/diary.css" />
    <script src="https://kit.fontawesome.com/ab54b9d48d.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="bookcover">
      <div class="bookdot">
        <div class="page">
          <div class="profile-container">
            <div class="header profile-title font-neo">
              TODAY<span class="color-red"> 28</span> | TOTAL 234918
            </div>
            <div class="box profile-box">
              <div class="profile-image">
                <img
                  class="profile-image-img"
                  src="./static/images/cyworld1.png"
                  alt="프로필 이미지"
                />
              </div>
              <div class="profile-text font-kyobohand">
                ㄴr는.. 오늘도.. 눈물을.. 흘린ㄷr..★
              </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="#" target="_blank">블로그 바로가기</a>
                  <a href="#" target="_blank">페이스북 바로가기</a>
                  <a href="#" target="_blank">인스타그램 바로가기</a>
                </div>
              </div>
            </div>
          </div>
          <div class="content-container">
            <div class="header content-title">
                <div class="content-title-name">수지니의 추억 상ㅈr... (*ˊᵕˋo💐o</div>
                <div class="content-title-url">https://url주소/나중에입력</div>
            </div>
            <div class="box content-box">
                <div class="calendar">
                    <div class="date-today">01.03<br/>MON</div>
                    <div class="date-list">
                        <div class="date"><span class="date-red">1</span></div>
                        <div class="date"><span class="date-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="date-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="date-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">21</div>
                        <div class="date"><span class="date-blue">22</span></div>
                        <div class="date"><span class="date-red">23</span></div>
                        <div class="date">24</div>
                        <div class="date">25</div>
                        <div class="date">26</div>
                        <div class="date">27</div>
                        <div class="date">28</div>
                        <div class="date"><span class="date-blue">29</span></div>
                        <div class="date"><span class="date-red">30</span></div>
                        <div class="date"><span class="date-red">31</span></div>
                    </div>
                </div>
                <div class="diary-scrollbox">
                    <div class="diary">
                        <div class="diary-date">2022.01.01. 토 03:38</div>
                        <div class="diary-contents">
                            <p><br>난..ㄱr끔.. 눈물을 흘린 ㄷㅏ.. <br>ㄱㅏ끔은 눈물을 참을 수 없는 ㄴㅐ가 별루ㄷㅏ..<br>소ㄹㅣ치며.. 울 수 있ㄷㅏ는건...<br>좋은ㄱㅓ..ㅇㅑ..</p>
                        </div>
                    </div>
                    <div class="diary">
                        <div class="diary-date">2022.01.02. 일 02:19</div>
                        <div class="diary-contents">
                            <p>전화번호도 아직 그대로<br>또 혹시 나를 찾아올까봐 집도 그대로<br>내 미니홈피 속에 너와 듣던 노래뿐<br>혹시 네가 볼까봐.. 다시 돌아올까봐<br><br>-티아라, TTL(Time to Love)</p>
                        </div>
                    </div>
                    <div class="diary">
                        <div class="diary-date">2022.01.03. 월 13:00</div>
                        <div class="diary-contents">
                            <p>내가 아침에 버스에 올라타서<br>"두명이요"하고 교통카드를 찍자<br>아저씨가 의아해하면서<br>넌 혼자 탔는데 왜 두명 몫을 찍냐고 묻는거야<br>그래서 난 이렇게 말했지<br>"내 가슴 속에는 김태연이라는 한 사람이 더 있거든요.."<br>추운 아침이었지만 나의 뜨거운 가슴으로<br>버스 안을 훈훈하게 데웠던 순간이었다..</p>
                        </div>
                    </div>
                    <div class="button-box">
                      <button class="diary-button font-neo" onclick="getTextFile()">
                        <i class="fas fa-lock"></i>수지니의 비밀 일기 보기
                      </button>
                    </div>
                    <div class="diary" id="secret-box">
                      <div class="diary-date">수지니의 비밀 일기</div>
                      <div class="diary-contents font-kyobohand" id="secret-diary"></div>
                    </div>
                </div>
            </div>
        </div>

          <div class="menu-container">
            <div class="menu-button">
                <a href="home.html"><button>홈</button></a>
                <a href="diary.html"><button>다이어리</button></a>
                <a href="picture.html"><button>사진첩</button></a>
                <a href="#"><button>방명록</button></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      function getTextFile() {
        var input = document.createElement("input");
        input.type = "file";
        input.accept = "text/plain";
        input.onchange = function (event) {
          processFile(event.target.files[0]);
        };
        input.click();
      }

      function processFile(file) {
        var reader = new FileReader();
        reader.readAsText(file, "utf-8");

        reader.onload = function () {
          document.getElementById("secret-diary").innerText = reader.result;
          document.getElementById("secret-box").style.display = "block";
        };
      }
    </script>
  </body>
</html>

4. layout.css

body {
    background-color: #a3a3a3;
    background-image: url("../static/images/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: #b4d1da;
    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.5rem; /* 적용한 폰트 특성 상 사이즈가 커서 font-size 조정 */
    text-align: end; /* 텍스트 우측 정렬 */
  }
  
  .profile-title {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .color-red {
    color: red;
  }
  
  .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-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;
  }

5. 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: #3b87ab;
  }
  
  .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;
  }

6. 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{
    width: 120%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

7. 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";
}

8. 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: #3b87ab;
}

.date-list{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
}

.date{
    margin-right: 10px;
}

.date-red{
    color: red;
}

.date-blue{
    color: blue;
}

.diary-scrollbox{
    position: absolute;
    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: #3b87ab;
    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;

}

.diary-button:hover{
    background: #1aab8a;
    color: #fff;
    transition: 2s ease all;
}

#secret-box{
    display: none;
}

저작자표시

'Web > 모각코' 카테고리의 다른 글

font-awesome 라이브러리 추가하기 (0)	2022.01.06
[ Visual Studio Code ] 싸이월드 페이지 만들기 - ⑨ (0)	2022.01.06
[ Visual Studio Code ] 싸이월드 페이지 만들기 - ⑦ (0)	2022.01.04
[ Visual Studio Code ] 싸이월드 페이지 만들기 - ⑥ (0)	2022.01.01
[ Visual Studio Code ] 싸이월드 페이지 만들기 - ⑤ (0)	2021.12.31

현재글[ Visual Studio Code ] 싸이월드 페이지 만들기 - ⑧

Sujin's Dlog

Study Note

Turtle Graphic, anaconda, MySQL, web, CSS, Spring, C, Baekjoon, 국비지원교육, Python, Jupyter Notebook, OS, 백준, HTML, Visual Studio, Operating System, django, Data Analysis, Inflearn, Java,

Sujin's Dlog

[ Visual Studio Code ] 싸이월드 페이지 만들기 - ⑧

'Web > 모각코' 카테고리의 다른 글

'Web/모각코'의 다른글

티스토리툴바

[ Visual Studio Code ] 싸이월드 페이지 만들기 - ⑧

'Web > 모각코' 카테고리의 다른 글

'Web/모각코'의 다른글

관련글

티스토리툴바