개발세발

[HTML/CSS][모각코][12] 비밀글(txt 파일) 불러오기 본문

인터넷 배움/코뮤니티- 모각코(HTMLㆍCSS 심화편)

[HTML/CSS][모각코][12] 비밀글(txt 파일) 불러오기

뉼👩🏻‍💻 2022. 2. 23. 00:42
728x90
반응형
SMALL

[제출본]

https://codemate.kr/@yuuulya/day12-비밀글txt-파일-불러오기

 

[day12] 비밀글(txt 파일) 불러오기 by yuuulya | 코드메이트

[코드] diary.html <!DOCTYPE html> <html lang="ko">   <head>     <meta charset="UTF-8" />     <title>2021 MINI HOMEPAGE</title>     <link rel="styles

codemate.kr

 

 

diary.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>2021 MINI HOMEPAGE</title>
    <link rel="stylesheet" href="../static/images/font.css" />
    <link rel="stylesheet" href="../static/images/home.css" />
    <link rel="stylesheet" href="../static/images/layout.css" />
    <link rel="stylesheet" href="../static/images/diary.css" />
    <script src="https://kit.fontawesome.com/c21d7630fc.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="bookcover">
      <div class="bookdot">
        <div class="page">
        <div class="container">
            <div class="left">
              <div class="first">
                <span class="lefttop">
                TODAY 
                <font color="#f74545">25</font>
                | TOTAL 248956
                </span>
              </div>
              <div class="profile">
                <div class="profileimg"></div>
                <div class="profilemention">
                 <br>
                 오늘도 <br>
                 코딩을 부수기 위해<br>
                 열심히 노력했지만<br>
                 <br>
                 언제나 부셔지는건 
                 <br>
                 나였다.....
                </div>
                <div class="profilebottom">
                  <p class="coding">
                  개발세발 (♀)
                  </p>
                  <div class="dropdown">
                    <button class="dropbt">
                      <span>파도타기</span>
                      <span>&nbsp;&nbsp;▼</span>
                    </button>
                    <ul class="dropdown-content" >
                      <li><a href="https://bluepinetree.tistory.com/" target='_blank'>Tistroy</a></li>
                      <li><a href="https://cafe.naver.com/codeuniv?iframe_url=/MyCafeIntro.nhn%3Fclubid=30026525" target='_blank'>코뮤니티</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="center">
                <div class="title">
                    <div class="my">나만થ 공간 나થ 싸ગ월⊑</div>
                    <div class="address"> https://url주소/나중에입력</div>
                </div>


                <div class="main">
                    <div class="calendar">
                        <div class="month"> 02.30<br> SUN </div>
                        <div class="date">
                            <table>
                                <tr>
                                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td class="sat">6</td><td class="sun">7</td>
                                <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td class="sat">13</td><td class="sun">14</td>
                                <td>15</td><td>16</td><td>17</td><td>18</td>
                                </tr>
                                <tr>
                                    <td>19</td><td class="sat">20</td><td class="sun">21</td><td>22</td><td>23</td><td>24</td><td>25</td>
                                    <td>25</td><td class="sat">27</td><td class="sun">28</td><td>29</td><td>30</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="diaryform">
                      <div class="writeform"> 
                        <div class="day">
                            2020.02.7. 일 01:29
                        </div>  
                        <div class="write">
                          あг늘○ı 좋どг...ユ 푸르름○ı.. <br>
                          들○ı 좋どг.......ユ 풍족함○ı..<br>
                          Ħгどгづг 좋どг...ユ 囚ı원함○ı..<br>
                          ユ런どij圖 づг 슴○ı 텅 빈 듯한<br>
                          느낌○ı 드는건 오й일ㄲг???  <br>
                        </div>  
                      </div>
                      <div class="writeform">
                        <div class="day"> 
                          2020.02.18. 목 12:17
                        </div>  
                        <div class="write">
                          ────────────‥ВЦS★〃<br>
                          버스 표スı판 앞Ø·ij 서있フı만 ㉻면 <br>
                          버스フГ 와서 멈춥レıてł、<br>
                          항l복도 レН앞Ο-ij서 멈추어<br>
                          준でŀ면좋겄l습ㄴl⊂Г。<br>
                          언ズij든スı ㄴи㉮ 잡을 수 있는 <br>
                          ュ 거乙iØ·ij서 말입ㄴi≤Г。<br>
                          ────────────‥ВЦS★〃<br>
                          </div>  
                      </div>
                      <div class="writeform"> 
                        <div class="day"> 
                          2020.02.27. 토 09:49
                        </div>  
                        <div class="write">
                          ╔＊═╗ ╔╗ε♡₃ 너만을*　╔╗╔╗사랑해*♡ <br>
                          ╚╗╔╝ ║║★═╦╦╦═╗ ║☆╝╠═╦╦╗ <br>
                          ╔╝╚╗ ＊╚╣║║║║╠╣ ╚╗╔╣║ ♀║☆ <br>
                          ╚═☆╝ ╚═╩═╩＊╩═╝　 ╚╝╚═╩═╝ <br>                                          
                          ♥ 오늘 あŀ루 그대를 만난것은 ㈎장큰 선물입Łıどŀ ♥  
                        </div>  
                      </div>


                      <div class="secret"> 
                        <button class="diary-button" onclick="getTextFile()">
                        <i class="fa-solid fa-unlock"></i>나의 비밀일기
                        </button>
                      </div>
                      <div class="diary-box" id="secret-box">
                        <div class="diary-date"></div>
                        <div class="diary-content" id="secret-diary"></div>
                      </div>
                      
                     </div>
                </div>
            </div>
            <div class="menubar">
              <div id="home"><a href="./home.html">홈</a></div>
              <div id="diary"><a href="./diary.html">다이어리</a></div>
              <div id="photobook"><a href="./photobook.html">사진첩</a></div>
              <div id="guestbook"><a href="#">방명록</a></div>
            </div>
            </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>

 

diary.css

.center {
    flex:0.6;
    display: flex;
    flex-direction:column;
}


.title {
    flex:0.05;
    display:flex;
}


.main{
    flex: 0.8px;
    background-color:#ffffff;
    
    border: 1px solid #e6e3e3;
    border-radius: 11px;
    margin: 0;
    padd
    display:flex;
    flex-direction:column;
}


.calendar {


    display: inline-block;
    height: 60px;
    margin: 10px;
    border-radius: 9px;
    border: 1px solid rgb(182, 182, 182);


    display: flex;
}


.month {
    flex:0.13;
    padding: 5px 5px;
    text-align: center;
    color: #23728a; 
    margin-top: 5px;   
}



.date {
    flex:0.5;
}


td{   
    padding: 4px 4px;
    vertical-align: middle;
    text-align: center;
}


.sat {
    color:blue;
}
.sun{
    color:red;
}





.diaryform{
    flex: 0.5px;
    display: flex;
    flex-direction: column;


    overflow-y: scroll;
    overflow-x:hidden;
}


.writeform{
    flex:0.2px;
    display:flex;
    flex-direction:column;
    border-radius:9px;
    border: 1px solid rgb(190, 187, 187);
    margin : 30px;
}


.day{
    flex:0.3px;
    display: inline-flex; 
    padding: 25px;
}


.write{
    flex:0.5px;
    display: inline-block;
    width: 500px;
    text-align: center;   
    line-height: 40px;
    padding-bottom: 30px;
    
}


.secret{
    flex:0.2px;
    width:150px;
    height: 50px;
    text-align: center;
    color:#ffffff;
    
    margin-left: 230px;
    margin-top: 20px;
    margin-bottom: 70px;


}


.secret:hover, .diary-button:hover{
    color:rgb(255, 255, 255);
    font-weight: bold;
    transition: 1000ms ease all;
    cursor: pointer;
    background-color: #1b996f; 



}


.diary-button{
    width: 150px;
    height: 50px;
    text-align: center;
    /* background-color: #ffffff;
    color: #ffffff; */


    background-color: #fff;
    padding: 15px;
    border: none;
    border-radius: 7px;
    color: #fff;
    display: block;
  
  }


.icon{
    color:rgb(255, 255, 255);
}


.diary-title{
    padding: 18px;
}


.diary-text {
    width: 180px;
    margin: 0 auto;
}


#secret-box{
    display: none;
    font-size: 20px;
    margin-top: 30px;
}


.diary-box {
    flex:0.5px;
    display: inline-block;
    width: 500px;
    text-align: center;   
    border-radius:9px;
    border: 1px solid rgb(190, 187, 187);
    margin : 30px;
    line-height: 40px;
    padding-bottom: 30px;
}

 

📝[REVEIW]

자바스크립트 제대로 알지도 못하는데 자꾸 여기저기 썼더니 머리 터지것다 .... 

 

728x90
반응형

'인터넷 배움 > 코뮤니티- 모각코(HTMLㆍCSS 심화편)' 카테고리의 다른 글

[HTML/CSS][모각코][14] 나의 Github 만들기  (0) 2022.02.24
[HTML/CSS][모각코][13] 방명록 만들기  (0) 2022.02.24
[HTML/CSS][모각코][11] 미니홈피 다이어리 만들기  (0) 2022.02.21
[HTML/CSS][모각코][10] 미니홈피 사진첩 만들기  (0) 2022.02.18
[HTML/CSS][모각코][09] 미니홈피 홈화면 레이아웃 완성하기  (0) 2022.02.17
'인터넷 배움/코뮤니티- 모각코(HTMLㆍCSS 심화편)' Related Articles more