개발세발

[HTML/CSS][모각코][11] 미니홈피 다이어리 만들기 본문

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

[HTML/CSS][모각코][11] 미니홈피 다이어리 만들기

뉼👩🏻‍💻 2022. 2. 21. 21:54
728x90
반응형
SMALL

[제출본]

https://codemate.kr/@yuuulya/day11-미니홈피-다이어리-만들기

 

[day11] 미니홈피 다이어리 만들기 by yuuulya | 코드메이트

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

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"> 
                        <br>
                        <i class="fa-solid fa-unlock"></i>&nbsp&nbsp나의 비밀일기
                        <br>
                        <br>
                      </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>
  </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;
    text-align: center;
    color:#ffffff;
    margin-bottom: 20px;
    margin-left: 230px;
}


.secret:hover{
    color:rgb(255, 255, 255);
    font-weight: bold;
    background-color: #1b996f; 
}


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

 

font.css

@import url('https://fonts.googleapis.com/css2?family=Cute+Font&family=Dongle&family=Nanum+Pen+Script&family=Single+Day&display=swap');



.lefttop{
    font-size: 12px;]
}


.profilemention{
    font-family: 'Nanum Pen Script', cursive;
    font-size:24px;
}


.cate1left{
    line-height:1.5;    
    text-align: center;
    color:#ffffff;
    font-weight: 900;
}


.mini {
    color: #3794b0; 
    font-weight: 900;
    line-height: 10px;
}


.profilebottom .coding {
    font-family: 'Dongle', sans-serif;
    font-size:24px;
    text-align:center;
    
}


.update{
    color: #3794b0; 
    font-weight: 900;
    line-height: 10px;  
}


.coding{
    color:#144b8f;
    font-weight: bold;
    font-size: 25px;
}


.month{
    font-weight: bold;
    color:#144b8f;
    font-size: 25px;;
    font-family: 'Dongle', sans-serif;
    line-height: 20px;
}


tr{
    font-weight: bold;
    color: rgb(92, 92, 88);
    font-size: 14px;
}


.day{
    color: #23728a; 
    font-weight: bold;
    font-size: 25px;;
    font-family: 'Dongle', sans-serif;
}

.write {
    color: rgb(65, 65, 63);
    font-weight: bold;
    font-size: 15px;;
}

.secret{
    color: #ffffff;
}

 

📝[REVEIW]

 

확실히 시작하기 전보다 능숙해졌다. 화면 구성에 대한 대략적인 감이 조오오오오오금이나마 왔달까. 

전보다 더 이래저래 수정을 빨리 해나가고 가져다 쓰는 스스로를 보며 약간의 뿌듯함을 느낄 수 있었다. 

거의 다 완성인데 좀만 더 힘내자!

728x90
반응형

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

[HTML/CSS][모각코][13] 방명록 만들기  (0) 2022.02.24
[HTML/CSS][모각코][12] 비밀글(txt 파일) 불러오기  (0) 2022.02.23
[HTML/CSS][모각코][10] 미니홈피 사진첩 만들기  (0) 2022.02.18
[HTML/CSS][모각코][09] 미니홈피 홈화면 레이아웃 완성하기  (0) 2022.02.17
[HTML/CSS][모각코][08] 미니홈피 프로젝트 css 파일 분리하기  (0) 2022.02.16
'인터넷 배움/코뮤니티- 모각코(HTMLㆍCSS 심화편)' Related Articles more