ISU
2022.01.26
@ISU님이 새 포스트를 작성했습니다.
모각코 플러스 웹 개발(개발자를 위한...)
  <!DOCTYPE html>   <html lang="ko">     <head>       <meta charset="UTF-8" />       <title>2022 MINI HOMEPAGE</title>       <link rel="stylesheet" href="./static/style.css" />       <script src="https://kit.fontawesome.com/7d2f38d808.js" crossorigin="anonymous"></script>     </head>     <body>       <div class="bookcover">         <div class="bookdot">           <div class="page">             <div class="lc">               <div class="lt">Today 01.17 | Total 20135</div>               <div class="lb">                 <div style = "text-align: center;">                   <br>                   <img src = "C:\Users\sounj\OneDrive\바탕 화면\project1\KakaoTalk_20220119_163537161.jpg" alt = "내 사진" width = "150" id = "pic">                   <p>                     <br>마침내 눈은 떠지고                     <br>사위는 고요해진다                     <br>거꾸로 쏟아지는 눈송이                     <br>빈틈을 메워넘치고                     <br>실 같은 울음 터지고                     <br>살아서 다시 꿈을 꿔본다                   </p>                   <select name = "pado" class = "pado" onchange = "window.open">                     <option value = "">파도타기</option>                     <option value = "https://www.instagram.com/_____soun_____/">인스타그램</option>                     <option value = "https://blog.naver.com/sounjong612">블로그</option>                   </select>                 </div>               </div>             </div>             <div class="mc">               <div class="mt">                 <div class="intro">____SOUN____</div>                 <div class="url"><a href = "https://www.instagram.com/_____soun_____/" target = "_blink">Instagram</a></div>           </div>           <div class="mbox" >             <div class = "calendar">               <div class="mainday">01.24<br>MON</div>                 <div class="subday">1 2 3 4                 <span class="saturday">5</span>                 <span class="sunday">6</span> 7 8 9 10 11                 <span class="saturday">12 </span>                 <span class="sunday">13</span>                 14 15 16 17 18                 <span class="saturday">19 </span>                 <span class="sunday">20</span> 21 22 23 24 25                 <span class="saturday">26 </span>                 <span class="sunday">27</span> 28 29 30               </div>             </div>             <span id = "news"><strong>업데이트 소식♥</strong></span>             <br><br><div class = "mt-memo"><strong>Miniroom</strong>              </div>              <div class = "photobox">               <div class = "guestbookbox">                 <div class="guestbook">                   <div class="guestname">첫 번째<span class = "num">카페1</span><i class = "fas fa-home"></i>(22. 01. 26)</div>                   <div class="guest-cont">                     <div class = "guestbook-image background-1"><img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220122_212039260_01.jpg" alt = "카페" width = "90%"></div>                     <div class="guest-post"><p>22. 01. 16</p>행복한 하루</div>                   </div>                 </div>                 <div class="guestbook">                   <div class="guestname">두 번째<span class = "num">카페2</span><i class = "fas fa-home"></i>(22. 01. 26)</div>                   <div class="guest-cont">                     <div class = "guestbook-image backgourd-2"><img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220122_212039260_02.jpg" alt = "카페" width = "90%"></div>                     <div class="guest-post"><p>22. 01. 12</p>이쁜 배경과 함께</div>                   </div>                   <div class="guestbook">                     <div class="guestname">세 번째 <span class = "num">카페3</span><i class = "fas fa-home"></i>(22. 01. 26)</div>                     <div class="guest-cont">                       <div class = "guestbook-image backgourd-3"><img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220122_212039260.jpg" alt = "카페" width = "90%"></div>                       <div class="guest-post"><p>22. 01. 20</p>이쁜 사람이 있네</div>                     </div>                   </div>                                     <div class="guestbook">                     <div class="guestname">네 번째 <span class = "num">카페 4</span><i class = "fas fa-home"></i>(22. 01. 26)</div>                     <div class="guest-cont">                       <div class = "guestbook-image background-4"><img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220125_163608412.jpg" alt = "카페" width = "90%"></div>                       <div class="guest-post"><p>22. 01. 25</p>평생하자~</div>                     </div>                   </div>                 </div>               </div>               <button class = "secret-note" onclick="getTextfile()"><i class="fal fa-alicorn"></i>ISU의 비밀 일기장으로 가기</button>               <div class = "diary-name" id = "secret-box">                 <div class="diary-new">ISU의 비밀일기</div>                 <div class="diary-text"><p id = "secret-name"></p></div>               </div>             </div>            </div>          </div>         </div>         <div class="rbox">           <div class="first_menu"><a href="#">홈</a></div>           <div class="second_menu"><a href="#">다이어리</a></div>           <div class="third_menu"><a href="#">사진첩</a></div>           <div class="fourth_menu"><a href="#">방명록</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-note").innerText = reader.result;         };        }     </script>   </body>   </html> .guestbookbox {   overflow: auto;   height: 512px;   font-family: 'NeoDunggeunmo'; } .guestname {   background-color: powderblue;   height: 35px;   vertical-align: middle;   line-height: 35px;   padding: 0px 15px;   font-size: 15px;   margin : 5px;   border-radius: 75px; } .guest-cont {   display: flex;   flex-direction: row;   margin: 30px 0px;   position: relative; } .guestbook-image {   flex: 0.35;   background-size: cover;   display: flex;   align-items: center;   justify-content: center; } .guest-post {   flex:1;   font-size: 12px;   margin-left: 20px;   display:table; } p{   display:table-cell;   vertical-align: middle; } .num {   color :powderblue; }
ISU
2022.01.25
@ISU님이 새 포스트를 작성했습니다.
모각코 플러스 웹 개발 12일차 (개발자를 위한...)
  <!DOCTYPE html>   <html lang="ko">     <head>       <meta charset="UTF-8" />       <title>2022 MINI HOMEPAGE</title>       <link rel="stylesheet" href="./static/style.css" />       <script src="https://kit.fontawesome.com/7d2f38d808.js" crossorigin="anonymous"></script>     </head>     <body>       <div class="bookcover">         <div class="bookdot">           <div class="page">             <div class="lc">               <div class="lt">Today 01.17 | Total 20135</div>               <div class="lb">                 <div style = "text-align: center;">                   <br>                   <img src = "C:\Users\sounj\OneDrive\바탕 화면\project1\KakaoTalk_20220119_163537161.jpg" alt = "내 사진" width = "150" id = "pic">                   <p>                     <br>마침내 눈은 떠지고                     <br>사위는 고요해진다                     <br>거꾸로 쏟아지는 눈송이                     <br>빈틈을 메워넘치고                     <br>실 같은 울음 터지고                     <br>살아서 다시 꿈을 꿔본다                   </p>                   <select name = "pado" class = "pado" onchange = "window.open">                     <option value = "">파도타기</option>                     <option value = "https://www.instagram.com/_____soun_____/">인스타그램</option>                     <option value = "https://blog.naver.com/sounjong612">블로그</option>                   </select>                 </div>               </div>             </div>             <div class="mc">               <div class="mt">                 <div class="intro">____SOUN____</div>                 <div class="url"><a href = "https://www.instagram.com/_____soun_____/" target = "_blink">Instagram</a></div>           </div>           <div class="mbox" >             <div class = "calendar">               <div class="mainday">01.24<br>MON</div>                 <div class="subday">1 2 3 4                 <span class="saturday">5</span>                 <span class="sunday">6</span> 7 8 9 10 11                 <span class="saturday">12 </span>                 <span class="sunday">13</span>                 14 15 16 17 18                 <span class="saturday">19 </span>                 <span class="sunday">20</span> 21 22 23 24 25                 <span class="saturday">26 </span>                 <span class="sunday">27</span> 28 29 30               </div>             </div>             <span id = "news"><strong>업데이트 소식♥</strong></span>             <br><br><div class = "mt-memo"><strong>Miniroom</strong>              </div>              <div class = "photobox" style = "overflow : scroll">               <img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220122_212039260_01.jpg" alt = "카페" id = coffee2>               <br>22 . 01. 16 ♥               <img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220122_212039260_02.jpg" alt = "카페" id = coffee3>               <br>22. 01. 12 ♥               <img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220122_212039260.jpg" alt = "카페" id = "coffee1">               <br>22. 01. 20 ♥               <img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220125_163608412.jpg" alt = "카페" id = "coffee4">               <br>22. 01. 25 ♥              </div>               <button class = "secret-note" onclick="getTextfile()"><i class="fal fa-alicorn"></i>ISU의 비밀 일기장으로 가기</button>               <div class = "diary-name" id = "secret-box">                 <div class="diary-new">ISU의 비밀일기</div>                 <div class="diary-text"><p id = "secret-name"></p></div>               </div>             </div>           </div>         <div class="rbox">           <div class="first_menu"><a href="#">홈</a></div>           <div class="second_menu"><a href="#">다이어리</a></div>           <div class="third_menu"><a href="#">사진첩</a></div>           <div class="fourth_menu"><a href="#">방명록</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-note").innerText = reader.result;         };        }     </script>   </body>   </html> .secret-note {   background-color: powderblue;   color: black;   margin: 0 auto;   height: 50px;   border: none;   font-family: 'NeoDunggeunmo';   font-size: 14px;   margin: auto;   display: block;   } .secret-note:hover {   background-color: powderblue;   border:none; } .diary-text {   position: absolute;   top: 70px; } .diary-new {   position: absolute;   top: 15px;   left: 10px;   font-family: 'NeoDunggeunmo';   color: powderblue;   font-size: 16px; } .diary-name {   height: 270px;   border: solid grey 1px;   margin-bottom: 20px;   position: relative; }
imdadamiii
2022.01.25
@imdadamiii님이
모각코 플러스 웹 개발 11일차(개발자를 위한...)
포스트에 댓글을 남겼습니다.
ISU
2022.01.24
@ISU님이 새 포스트를 작성했습니다.
모각코 플러스 웹 개발 11일차(개발자를 위한...)
  <!DOCTYPE html>   <html lang="ko">     <head>       <meta charset="UTF-8" />       <title>2022 MINI HOMEPAGE</title>       <link rel="stylesheet" href="./static/style.css" />       <script src="https://kit.fontawesome.com/7d2f38d808.js" crossorigin="anonymous"></script>     </head>     <body>       <div class="bookcover">         <div class="bookdot">           <div class="page">             <div class="lc">               <div class="lt">Today 01.17 | Total 20135</div>               <div class="lb">                 <div style = "text-align: center;">                   <br>                   <img src = "C:\Users\sounj\OneDrive\바탕 화면\project1\KakaoTalk_20220119_163537161.jpg" alt = "내 사진" width = "150" id = "pic">                   <p>                     <br>마침내 눈은 떠지고                     <br>사위는 고요해진다                     <br>거꾸로 쏟아지는 눈송이                     <br>빈틈을 메워넘치고                     <br>실 같은 울음 터지고                     <br>살아서 다시 꿈을 꿔본다                   </p>                   <select name = "pado" class = "pado" onchange = "window.open">                     <option value = "">파도타기</option>                     <option value = "https://www.instagram.com/_____soun_____/">인스타그램</option>                     <option value = "https://blog.naver.com/sounjong612">블로그</option>                   </select>                 </div>               </div>             </div>             <div class="mc">               <div class="mt">                 <div class="intro">____SOUN____</div>                 <div class="url"><a href = "https://www.instagram.com/_____soun_____/" target = "_blink">Instagram</a></div>           </div>           <div class="mbox" >             <div class = "calendar">               <div class="mainday">01.24<br>MON</div>                 <div class="subday">1 2 3 4                 <span class="saturday">5</span>                 <span class="sunday">6</span> 7 8 9 10 11                 <span class="saturday">12 </span>                 <span class="sunday">13</span>                 14 15 16 17 18                 <span class="saturday">19 </span>                 <span class="sunday">20</span> 21 22 23 24 25                 <span class="saturday">26 </span>                 <span class="sunday">27</span> 28 29 30               </div>             </div>                         <br><br><div class = "mt-memo"><strong>Miniroom</strong>              </div>              <div class = "photobox" style = "overflow : scroll">               <img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220122_212039260_01.jpg" alt = "카페" width = "400" id = coffee2>               <br>22 . 01. 16 ♥               <img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220122_212039260_02.jpg" alt = "카페" widht = "20" id = coffee3>               <br>22. 01. 12 ♥               <img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220122_212039260.jpg" alt = "카페" id = "coffee1">               <br>22. 21. 20 ♥              </div>              <div class = "choose"><button><i class="fal fa-alicorn"></i>나의 다음 일기장으로 가기</button></div>             </div>           </div>         <div class="rbox">           <div class="first_menu"><a href="#">홈</a></div>           <div class="second_menu"><a href="#">다이어리</a></div>           <div class="third_menu"><a href="#">사진첩</a></div>           <div class="fourth_menu"><a href="#">방명록</a></div>         </div>       </div>     </div>     </div>   </body>   </html> .choose {   margin: 30px 0px 30px 150px; } button {   background-color:powderblue;   color: black;   border: 2; } button:hover {   transition: 800ms ease all;   color: black;   background-color: blanchedalmond;   border: 1px solid black; } .mainday {   flex: 0.1;   color: powderblue;   margin: 8px 5px 8px 10px;   text-align: center; } .subday {   flex: 0.9;   color: rgb(78, 78, 78);   margin: 8px 5px 8px 10px; } .saturday {   color: blue; } .sunday {   color: red; }
ISU
2022.01.23
@ISU님이 새 포스트를 작성했습니다.
모각코 플러스 웹 개발 10일차 (개발자를 위한...)
<div class = "photobox" style = "overflow : scroll">               <img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220122_212039260_01.jpg" alt = "카페" width = "400" id = coffee2>               <br><br> 22 . 01. 16 ♥               <img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220122_212039260_02.jpg" alt = "카페" widht = "20" id = coffee3>               <br><br> 22. 01. 12 ♥               <img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220122_212039260.jpg" alt = "카페" id = "coffee1">               <br><br> 22. 21. 20 ♥              </div> #coffee1 {   width : 100%; } #coffee2 {   width : 100%; } #coffee3 {   width: 100%; }
ISU
2022.01.22
@ISU님이 새 포스트를 작성했습니다.
모각코 플러스 웹 개발 9일차 (개발자를 위한...)
  <!DOCTYPE html>   <html lang="ko">     <head>       <meta charset="UTF-8" />       <title>2022 MINI HOMEPAGE</title>       <link rel="stylesheet" href="./static/style.css" />     </head>     <body>       <div class="bookcover">         <div class="bookdot">           <div class="page">             <div class="lc">               <div class="lt">Today 01.17 | Total 20135</div>               <div class="lb">                 <div style = "text-align: center;">                   <br>                   <img src = "C:\Users\sounj\OneDrive\바탕 화면\project1\KakaoTalk_20220119_163537161.jpg" alt = "내 사진" width = "150" id = "pic">                   <p>                     <br>내게 남아있는 모든 것들이                     <br>모두 사라지고 이름 뿐일때                     <br>모든 것을 감싸 안으며                     <br>따뜻하게 불러준 사람                   </p>                   <select name = "pado" class = "pado" onchange = "window.open">                     <option value = "">파도타기</option>                     <option value = "https://www.instagram.com/_____soun_____/">인스타그램</option>                     <option value = "https://blog.naver.com/sounjong612">블로그</option>                   </select>                 </div>               </div>             </div>             <div class="mc">               <div class="mt">                 <div class="intro">____SOUN____</div>                 <div class="url"><a href = "https://www.instagram.com/_____soun_____/" target = "_blink">Instagram</a></div>           </div>           <div class="mbox">             <div class = "box-title"><strong>업데이트 소식</strong><hr></div>             <div class = "update_left">               <span class = "left_update_1"><span class = "red">&nbsp;사진첩&nbsp;</span> MiniHomepage</span>               <span class = "left_update_2"><span class = "red">&nbsp;게시판 &nbsp;</span> 웹 페이지 제작중</span>               <span class = "left_update_3"><span class = "org">&nbsp;게시판2 &nbsp;</span> 퀸 맥도 제작중</span>               <span class = "left_update_4"><span class = "org">&nbsp;게시판3 &nbsp; </span>TOEIC 공부중</span>             </div>             <br>             <div class = "update_right">           <div class = "right_update_1">다이어리<span class = "right_update_1_num"> 0/4</span>&emsp;&emsp;&emsp;&emsp;             사진첩<span class = "right_update_1_num"> 1/10</span></div>             <div class = "right_update_2">게시판<span class = "right_update_1_num"> 0/3</span>&emsp;&emsp;&emsp;&emsp;&emsp;             방명록<span class = "right_update_1_num"> 0/14</span></div>             <div class = "right_update_3"></div>             </div>             <br><div class = "mt-memo"><strong>Miniroom</strong>              </div>              <img src = "C:\Users\sounj\OneDrive\바탕 화면\모각코 웹심화 5일차 과제 코드(뼈대)\KakaoTalk_20220122_212039260_01.jpg" alt = "카페" width = "400" id = coffee2>             </div>           </div>         <div class="rbox">           <div class="first_menu"><a href="#">홈</a></div>           <div class="second_menu"><a href="#">다이어리</a></div>           <div class="third_menu"><a href="#">사진첩</a></div>           <div class="fourth_menu"><a href="#">방명록</a></div>         </div>       </div>     </div>     </div>   </body>   </html> @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');   #pic   {     border-radius: 75px;   }   body   {     background-color: #a3a3a3;     background-image: url("../static/images/pattern.png");     background-size: 100px;     position: fixed;     left: 0;     top: 0;     right: 0;     bottom: 0;   }   .bookcover   {     background-color: #b4d1da;     width : 1000px;     height : 700px;     top : 10%;     margin : auto auto;     position : relative;     border-radius: 10px;   }   .bookdot   {     position: relative;     left : 5px;     top : 5px;     width : 980px;     height : 680px;     border-style: dotted;     border-color: white;     border-radius: 10px;   }   .page   {     background-color: whitesmoke;     width: 960px;     height: 655px;     position: absolute;     top: 2%;     left: 1%;     border-radius: 15px;     display: flex;   }   .box   {     background-color: white;     flex:2;     border: 1px solid powderblue;   }   p   {     font-family: 'Noto Sans KR', sans-serif;     margin-left: 15px;     text-align: left;   }   .lc   {     display: flex;     flex : 0.3;     flex-direction: column;     margin-right: 22px;   }   .lt /*left title*/   {     position : relative;     top : 7px;     font-family: 'Noto Sans KR', sans-serif;     text-align: center;     padding: 10px;   }   .lb /*왼쪽 박스 컨테이너와 폰트*/   {     background-color: white;     border : 1px solid rgb(173, 169, 169);     border-radius: 10px;     width:195px;     height: 600px;     margin: 15px;   }   .mc   {     display: flex;     flex : 1px;     flex-direction: column;   }   .mt/* Soun과 Instagram의 위치*/   {     font-family: 'Noto Sans KR', sans-serif;     display: flex;     padding: 10px;     margin : 7px;   }   .mbox /*가운데 박스 */   {     background: white;     border: 1px solid rgb(173, 169, 169);     border-radius: 10px;     width : 550px;     height : 580px;   }   .intro /*____Soun____*/   {     font-family: 'Noto Sans KR', sans-serif;     flex: 1;   }   .url /*Instagram 과 주소*/   {     font-family: 'Noto Sans KR', sans-serif;     flex: 1;   }   .rbox /*오른쪽 박스*/   {     display: flex;     flex : 0.15;     flex-direction: column;     border: 1px;   }   .mt-memo /*Miniroom*/   {     font-family: 'Noto Sans KR', sans-serif;     margin-top: 0px;     margin-left: 10px;     margin-right: 10px;     color: powderblue;     font: bolder;     font-size: 20px;     border-bottom: solid 1px black;   }   .box-title   {     font-family: 'Noto Sans KR', sans-serif;     margin-top: 20px;     margin-left: 10px;     margin-right: 10px;     color: powderblue;     font: bolder;     font-size: 20px;   }   .update_left   {     display: flex;     flex-direction: column;     flex: 1;   }   .left_update_1,.left_update_2,.left_update_3,.left_update_4   {     flex: 1;     font-size: 15px;   }   .red   {     color: black;     background-color: bisque;     border-radius: 10%;     margin-left: 10px;   }   .org   {     color: black;     background-color: aquamarine;     border-radius: 10%;     margin-left: 10px;   }   .update_right   {     display: flex;     flex-direction: column;     flex: 1;   }   .right_update_1, .right_update_2   {     flex: 0.3;     font-size: 15px;     border-bottom: 1px solid powderblue;     border-bottom-style: dashed;   }   .right_update_3   {     flex : 1;   }   .right_update_1_num   {     color: powderblue;   }   .pado   {       margin-top: 100px;   } .first_menu /*오른쪽 박스 홈*/ {   margin-top: 70px;   padding-left: 10px;   padding-top: 10px;   background-color: powderblue;   height: 25px;   border-top-right-radius: 10px;   border-bottom-right-radius: 10px;   position: relative;   right : 66px;   top : 20px; } .second_menu /*오른쪽 박스 다이어리*/ {   margin-top : 5px;   padding-left : 10px;   padding-top : 10px;   background-color: powderblue;   height: 25px;   border-top-right-radius: 10px;   border-bottom-right-radius: 10px;   position: relative;   right : 66px;   top : 20px; } .third_menu /*오른쪽 박스 사진첩*/ {   margin-top : 5px;   padding-left : 10px;   padding-top : 10px;   background-color: powderblue;   height: 25px;   border-top-right-radius: 10px;   border-bottom-right-radius: 10px;   position: relative;   right : 66px;   top : 20px; } .fourth_menu /*오른쪽 박스 방명록*/ {   margin-top : 5px;   padding-left : 10px;   padding-top : 10px;   background-color: powderblue;   height: 25px;   border-top-right-radius: 10px;   border-bottom-right-radius: 10px;   position: relative;   right : 66px;   top : 20px; } #coffee2 {     position: relative;     left : 70px;     top : 10px; }
ISU
2022.01.20
@ISU님이 새 포스트를 작성했습니다.
모각코 플러스 웹 개발 7일차 (개발자를 위한...)
  <!DOCTYPE html>   <html lang="ko">     <head>       <meta charset="UTF-8" />       <title>2022 MINI HOMEPAGE</title>       <link rel="stylesheet" href="./static/style.css" />     </head>     <body>       <div class="bookcover">         <div class="bookdot">           <div class="page">             <div class="lc">               <div class="lt">Today 01.17 | Total 20135</div>               <div class="lb">                 <div style = "text-align: center;">                   <br>                   <img src = "C:\Users\sounj\OneDrive\바탕 화면\project1\KakaoTalk_20220119_163537161.jpg" alt = "내 사진" width = "150" id = "pic">                   <p>                     <br>내게 남아있는 모든 것들이                     <br>모두 사라지고 이름 뿐일때                     <br>모든 것을 감싸 안으며                     <br>따뜻하게 불러준 사람                   </p>                 </div>               </div>             </div>             <div class="mc">               <div class="mt">                 <div class="intro">____SOUN____</div>                 <div class="url"><a href = "https://www.instagram.com/_____soun_____/" target = "_blink">Instagram</a></div>           </div>           <div class="mbox">             <div class = "box-title"><strong>업데이트 소식</strong><hr></div>             <div class = "update_left">               <span class = "left_update_1"><span class = "red">&nbsp;사진첩&nbsp;</span> MiniHomepage</span>               <span class = "left_update_2"><span class = "red">&nbsp;게시판 &nbsp;</span> 웹 페이지 제작중</span>               <span class = "left_update_3"><span class = "org">&nbsp;게시판2 &nbsp;</span> 퀸 맥도 제작중</span>               <span class = "left_update_4"><span class = "org">&nbsp;게시판3 &nbsp; </span>TOEIC 공부중</span>             </div>             <br>             <div class = "update_right">           <div class = "right_update_1">다이어리<span class = "right_update_1_num"> 0/4</span>&emsp;&emsp;&emsp;&emsp;             사진첩<span class = "right_update_1_num"> 0/10</span></div>             <div class = "right_update_2">게시판<span class = "right_update_1_num"> 0/3</span>&emsp;&emsp;&emsp;&emsp;&emsp;             방명록<span class = "right_update_1_num"> 0/14</span></div>             <div class = "right_update_3"></div>             </div>             <br><div class = "mt-memo"><strong>Miniroom</strong></div>             </div>           </div>         <div class="rbox"></div>       </div>     </div>     </div>   </body>   </html>   @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');   #pic   {     border-radius: 75px;   }   body   {     background-color: #a3a3a3;     background-image: url("../static/images/pattern.png");     background-size: 100px;     position: fixed;     left: 0;     top: 0;     right: 0;     bottom: 0;   }   .bookcover   {     background-color: #b4d1da;     width : 1000px;     height : 700px;     top : 10%;     margin : auto auto;     position : relative;     border-radius: 10px;   }   .bookdot   {     position: relative;     left : 5px;     top : 5px;     width : 980px;     height : 680px;     border-style: dotted;     border-color: white;     border-radius: 10px;   }   .page   {     background-color: whitesmoke;     width: 900px;     height: 610px;     position: absolute;     top: 2%;     left: 1%;     border-radius: 15px;     display: flex;   }   .box   {     background-color: white;     flex:2;     border: 1px solid powderblue;   }   p   {     font-family: 'Noto Sans KR', sans-serif;     margin-left: 15px;     text-align: left;   }   .lc   {     display: flex;     flex : 0.3;     flex-direction: column;     margin-right: 22px;   }   .lt /*left title*/   {     position : relative;     top : 7px;     font-family: 'Noto Sans KR', sans-serif;     text-align: center;     padding: 10px;   }   .lb /*왼쪽 박스 컨테이너와 폰트*/   {     background-color: white;     border : 1px solid rgb(173, 169, 169);     border-radius: 10px;     width:195px;     height: 485px;     margin: 15px;   }   .mc   {     display: flex;     flex : 1px;     flex-direction: column;   }   .mt/* Soun과 Instagram의 위치*/   {     font-family: 'Noto Sans KR', sans-serif;     display: flex;     padding: 10px;   }   .mbox /*가운데 박스 */   {     background: white;     border: 1px solid rgb(173, 169, 169);     border-radius: 10px;     width : 550px;     height : 485px;   }   .intro /*____Soun____*/   {     font-family: 'Noto Sans KR', sans-serif;     flex: 1;   }   .url /*Instagram 과 주소*/   {     font-family: 'Noto Sans KR', sans-serif;     flex: 1;   }   .rbox /*오른쪽 박스*/   {     display: flex;     flex : 0.15;     flex-direction: column;   }   .mt-memo /*Miniroom*/   {     font-family: 'Noto Sans KR', sans-serif;     margin-top: 0px;     margin-left: 10px;     margin-right: 10px;     color: powderblue;     font: bolder;     font-size: 20px;     border-bottom: solid 1px black;   }   .box-title   {     font-family: 'Noto Sans KR', sans-serif;     margin-top: 20px;     margin-left: 10px;     margin-right: 10px;     color: powderblue;     font: bolder;     font-size: 20px;   }   .update_left   {     display: flex;     flex-direction: column;     flex: 1;   }   .left_update_1,.left_update_2,.left_update_3,.left_update_4   {     flex: 1;     font-size: 15px;   }   .red   {     color: black;     background-color: bisque;     border-radius: 10%;     margin-left: 10px;   }   .org   {     color: black;     background-color: aquamarine;     border-radius: 10%;     margin-left: 10px;   }   .update_right   {     display: flex;     flex-direction: column;     flex: 1;   }   .right_update_1, .right_update_2   {     flex: 0.3;     font-size: 15px;     border-bottom: 1px solid powderblue;     border-bottom-style: dashed;   }   .right_update_3   {     flex : 1;   }   .right_update_1_num   {     color: powderblue;   }
ISU
2022.01.17
@ISU님이 새 포스트를 작성했습니다.
모각코 플러스 웹 개발 6일차 (개발자를 위한...)
<!DOCTYPE html> <html lang="ko">   <head>     <meta charset="UTF-8" />     <title>2022 MINI HOMEPAGE</title>     <link rel="stylesheet" href="./static/style.css" />   </head>   <body>     <div class="bookcover">       <div class="bookdot">         <div class="page">           <div class="lc">             <div class="lt">Today 01.17 | Total 20135</div>             <div class="lb"></div>           </div>           <div class="mc">             <div class="mt">               <div class="intro">____SOUN____</div>               <div class="url"><a href = "https://www.instagram.com/_____soun_____/" target = "_blink">Instagram</a></div>         </div>         <div class="mbox"></div>       </div>       <div class="rbox"></div>     </div>   </div>   </div>   </body> </html> body {   background-color: #a3a3a3;   /** body에 배경이미지 적용 */   background-image: url("../static/images/pattern.png");   /** 고정된 사이즈로 설정 */   background-size: 100px;   /** 기본 body 사이즈를 화면 크기로 고정 */   position: fixed;   left: 0;   top: 0;   right: 0;   bottom: 0; } .bookcover {   /** 배경 색깔 지정  */   background-color: #b4d1da;   width : 960px;   height : 660px;   top : 10%;   margin : auto auto;   position : relative;   border-radius: 10px; } .bookdot /* 윤곽선 점선*/ {   position: absolute;   width: 925px;   height: 630px;   top: 2%;   left: 1%;   border-style: dotted;   border-color: white;   border-radius: 10px; } .page /**/ {   background-color: whitesmoke;   width: 900px;   height: 610px;   position: absolute;   top: 2%;   left: 1%;   border-radius: 15px;   display: flex; } .lc {   display: flex;   flex : 0.3;   flex-direction: column;   margin-right: 22px; } .lt {   font-size: 15px;   font-weight: bold;   text-align: center;   margin : 11px; } .lb {   background-color: white;   border : 1px solid rgb(173, 169, 169);   border-radius: 10px;   width:195px;   height: 485px;   margin: 15px; } .mc {   display: flex;   flex : 1px;   flex-direction: column; } .mt {   display: flex;   font-size: 12px;   font-weight : bold;   padding : 9px 0px; } .mbox {   background: white;   border: 1px solid rgb(173, 169, 169);   border-radius: 10px;   width : 550px;   height : 485px; } .intro {   display: flex;   font-size: 15px;   font-weight: bold;   padding: 10px;   margin: -1px; } .url {   padding-left: 50px;   font-size: 20px; } .rbox {   display: flex;   flex : 0.15;   flex-direction: column;   border: 1.5px solid black; }
loveim0112
2022.01.15
@loveim0112님이
모각코 플러스 웹 개발 5일차 (개발자를 위한...)
포스트에 댓글을 남겼습니다.
loveim0112
2022.01.15
@loveim0112님이
모각코 플러스 웹 개발 5일차 (개발자를 위한...)
포스트를 좋아합니다.
imdadamiii
2022.01.14
@imdadamiii님이
모각코 플러스 웹 개발 5일차 (개발자를 위한...)
포스트에 댓글을 남겼습니다.
imdadamiii
2022.01.14
@imdadamiii님이
모각코 플러스 웹 개발 5일차 (개발자를 위한...)
포스트를 좋아합니다.
ISU
2022.01.14
@ISU님이 새 포스트를 작성했습니다.
모각코 플러스 웹 개발 5일차 (개발자를 위한...)
모각코 플러스 웹 개발 5일차 (개발자를 위한...) HTML <!DOCTYPE html> <html lang="ko">   <head>     <meta charset="UTF-8" />     <title>2021 MINI HOMEPAGE</title>     <link rel="stylesheet" href="./static/style.css" />   </head>   <body>     <div class="bookcover">       <div class="bookdot">         <div class="page"></div>       </div>     </div>   </body> </html> CSS body {   background-color: #a3a3a3;   /** body에 배경이미지 적용 */   background-image: url("../static/images/pattern.png");   /** 고정된 사이즈로 설정 */   background-size: 100px;   /** 기본 body 사이즈를 화면 크기로 고정 */   position: fixed;   left: 0;   top: 0;   right: 0;   bottom: 0; } .bookcover {   /** 배경 색깔 지정  */   background-color: #b4d1da;   width : 960px;   height : 660px;   top : 10%;   margin : auto auto;   position : relative;   border-radius: 10px; } .bookdot {   position: absolute;   width: 925px;   height: 630px;   top: 2%;   left: 1%;   border-style: dotted;   border-color: white;   border-radius: 10px; } .page {   background-color: white;   width: 900px;   height: 610px;   position: absolute;   top: 2%;   left: 1%;   border-radius: 15px; }
ISU
2022.01.13
@ISU님이 새 포스트를 작성했습니다.
모각코 플러스 웹 개발 4일차 (개발자를 위한...)
모각코 플러스 웹 개발 4일차 입니다. 패딩과 마진 ~~ <!DOCTYPE html> <html> <head>     <meta charset = "utf - 8">     <title>사용자 ISU의 웹 페이지</title>         <link rel = "stylesheet" href = "C:\Users\sounj\OneDrive\바탕 화면\project1\memory.css"> </head> <body>         <h1 id = "title">웹 페이지 구현하는 두 번째 날입니다</h1>                 <p><h2 id = "chart">이번 겨울 방학 동안에 할 리스트 목록</h2></p>                 <table class = "list" boreder = '1'>             <tr>                 <th>목표1</th>                 <th>토익 공부하기</th>             </tr>             <tr>                 <th>목표2</th>                 <th>웹 페이지 만들기</th>             </tr>             <tr>                 <th>목표3</th>                 <th>퀸 맥 구현하기</th>             </tr>         </table>               <h3>ol과 ul의 차이점을 보여드릴게요.</h3>       <ol>           <h2>ordered list를 썼을 때 출력모습</h2>           <li>코뮤니티</li>           <li>모각코</li>           <li>플러스</li>       </ol>       <ul>           <h2>unordered list를 썼을 때 출력모습</h2>           <li>코뮤니티</li>           <li>모각코</li>           <li>스탠다드</li>       </ul>       <h3 class = "confortable">본 웹 페이지의 만족도</h3>             <div class = "confortable">         <select>             <input type = "checkbox" name = "Very Good"> 매우 만족             <input type = "checkbox" name = "Good"> 만족             <input type = "checkbox" name = "Not bad"> 보통             <input type = "checkbox" name = "Bad"> 나쁨             <input type = "checkbox" name = "The Worst"> 매우 나쁨         </select>       </div>         <a href = "C:\Users\sounj\OneDrive\바탕 화면\project1\memo.html" target = "_blink" id = "one"><h2>HTML</h2></a>         <a href = "C:\Users\sounj\OneDrive\바탕 화면\project1\css.html" target = "_blink" id = "two"><h2>CSS</h2></a>         <a href = "C:\Users\sounj\OneDrive\바탕 화면\project1\javascript.html" target = "_blink" id = "three"><h2>JavaScript</h2></a> </body> </html> #chart  {     text-decoration: underline;     text-underline-position: under;  }  table, tr, th  {      border: 2px solid black;  }  .confortable  {      text-align: center;      color: wheat;      background-color: tomato;  }  #title  {      background-color: rgb(15, 248, 15);      font-size: 50px;      text-align: center;  }  body  {     font-family: 'Indie Flower', cursive;  }  #one  {      padding: 20px;      margin: auto;  }  #two  {      padding: 10px;      margin : auto;  }  #three  {      padding : auto;      margin : auto;  } <!DOCTYPE html> <head>     <meta charset = "utf - 8"> </head> <body>      <h2>HTML</h2>      <p>HTML은 Hypertext Markup Language로 하이퍼텍스트 기반의 마크업 언어를 이용하여          웹 페이지를 제작하는 하나의 마크업 언어입니다.      </p>      <p>HTML에서 중요하게 여기는 것은 태그가 중요하다고 여기지 않을까 싶습니다.</p> </body> <!DOCTYPE html> <head>     <meta charset = "utf - 8">     </head> <body>     <h2>CSS</h2>     <p>CSS는 cascading style sheets의 약자로 웹 페이지에서 전반적인 스타일을 미리 저장해둔 스타일시트입니다.</p>     <p>기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데,         이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. </p> </body> </body> <!DOCTYPE html> <head>     <meta charset = "utf - 8"> </head> <body>     <h2>JavaScript</h2>     <p>JavaScript는 크로스 플랫폼, 객체지향 스크립트 언어로써 웹 페이지의 동적을 담당합니다.</p>     <p>HTML이 뼈대를 담당하고 CSS가 사람의 외관의 모습을 담당한다고 치면         JavaScript는 근육 및 신경계 조직을 담당한다고 보면 되겠네요. </p> </body>
ISU
2022.01.12
@ISU님이 새 포스트를 작성했습니다.
모각코 플러스 3일차 웹 개발 (개발자를 위한...)
모각코 플러스 3일차 웹 개발 (개발자를 위한...)입니다. HTML <!DOCTYPE html> <html> <head>     <meta charset = "utf - 8">     <title>사용자 ISU의 웹 페이지</title>         <link rel = "stylesheet" href = "C:\Users\sounj\OneDrive\바탕 화면\project1\memory.css"> </head> <body>         <h1 id = "title">웹 페이지 구현하는 두 번째 날입니다</h1>                 <p><h2 id = "chart">이번 겨울 방학 동안에 할 리스트 목록</h2></p>                 <table class = "list" boreder = '1'>             <tr>                 <th>목표1</th>                 <th>토익 공부하기</th>             </tr>             <tr>                 <th>목표2</th>                 <th>웹 페이지 만들기</th>             </tr>             <tr>                 <th>목표3</th>                 <th>퀸 맥 구현하기</th>             </tr>         </table>               <h3>ol과 ul의 차이점을 보여드릴게요.</h3>       <ol>           <h2>ordered list를 썼을 때 출력모습</h2>           <li>코뮤니티</li>           <li>모각코</li>           <li>플러스</li>       </ol>       <ul>           <h2>unordered list를 썼을 때 출력모습</h2>           <li>코뮤니티</li>           <li>모각코</li>           <li>스탠다드</li>       </ul>       <h3 class = "confortable">본 웹 페이지의 만족도</h3>             <div class = "confortable">         <select>             <input type = "checkbox" name = "Very Good"> 매우 만족             <input type = "checkbox" name = "Good"> 만족             <input type = "checkbox" name = "Not bad"> 보통             <input type = "checkbox" name = "Bad"> 나쁨             <input type = "checkbox" name = "The Worst"> 매우 나쁨         </select>       </div>         </body> </html> CSS #chart  {     text-decoration: underline;     text-underline-position: under;  }  table, tr, th  {      border: 2px solid black;  }  .confortable  {      text-align: center;      color: wheat;      background-color: tomato;  }  #title  {      background-color: rgb(15, 248, 15);      font-size: 50px;      text-align: center;  }  body  {     font-family: 'Indie Flower', cursive;  } 분명 제가 생각한 폰트는 이게 아닌데 왜 이렇게 나왔는지 모르겠네요... 정답을 아시는 분은 당근을 흔들어주세요 ~~
loveim0112
2022.01.12
@loveim0112님이
모각코 플러스 웹 개발 2일차 (웹 개발자를 위한...)
포스트에 댓글을 남겼습니다.
loveim0112
2022.01.12
@loveim0112님이
모각코 플러스 웹 개발 2일차 (웹 개발자를 위한...)
포스트를 좋아합니다.
iamwotjr
2022.01.11
@iamwotjr님이
모각코 플러스 웹 개발 2일차 (웹 개발자를 위한...)
포스트에 댓글을 남겼습니다.
wh4018
2022.01.11
ISU
2022.01.11
@ISU님이 새 포스트를 작성했습니다.
모각코 플러스 웹 개발 2일차 (웹 개발자를 위한...)
<!DOCTYPE html> <html> <head>     <meta charset = "utf - 8">     <title>사용자 ISU의 웹 페이지</title> </head> <style>  #chart  {     text-decoration: underline;     text-underline-position: under;  }  table, tr, th  {      border: 2px solid black;  }  .confortable  {      text-align: center;      color: wheat;      background-color: tomato;  }  #title  {      background-color: rgb(15, 248, 15);      font-size: 50px;      text-align: center;  } </style> <body>         <h1 id = "title">웹 페이지 구현하는 두 번째 날입니다</h1>         <p><h2 id = "chart">이번 겨울 방학 동안에 할 리스트 목록</h2></p>                 <table class = "list" boreder = '1'>             <tr>                 <th>목표1</th>                 <th>토익 공부하기</th>             </tr>             <tr>                 <th>목표2</th>                 <th>웹 페이지 만들기</th>             </tr>             <tr>                 <th>목표3</th>                 <th>퀸 맥 구현하기</th>             </tr>         </table>               <h3>ol과 ul의 차이점을 보여드릴게요.</h3>       <ol>           <h2>ordered list를 썼을 때 출력모습</h2>           <li>코뮤니티</li>           <li>모각코</li>           <li>플러스</li>       </ol>       <ul>           <h2>unordered list를 썼을 때 출력모습</h2>           <li>코뮤니티</li>           <li>모각코</li>           <li>스탠다드</li>       </ul>       <h3 class = "confortable">본 웹 페이지의 만족도</h3>             <div class = "confortable">         <select>             <input type = "checkbox" name = "Very Good"> 매우 만족             <input type = "checkbox" name = "Good"> 만족             <input type = "checkbox" name = "Not bad"> 보통             <input type = "checkbox" name = "Bad"> 나쁨             <input type = "checkbox" name = "The Worst"> 매우 나쁨         </select>       </div>         </body> </html>