kbyyah
2022.05.08
@kbyyah님이 새 포스트를 작성했습니다.
7일차
<!DOCTYPE html> <html lang="ko">   <head>     <meta charset="UTF-8" />     <title>2022 NEW PROJECT</title>     <link rel="stylesheet" href="st.css" />   </head>   <body>     <div class="bookcover">       <div class="bookdot">         <div class="page">           <div class="col1">             <div class="col2">               TODAY <span class="today">38</span> |               TOTAL <span class="total">1000000</span>             </div>             <div class="box1">             </div>             <div class="introduction">               새로운 세상으로 온 것을 <br>               환영합니다           </div>               </div>           <div class="row1">             <div class="row2">               <div class="title">멋진 신 세계</div>               <div class="url">http://bravenewworld.com</div>             </div>             <div class="box2">               <div class="updated_news">                 <div class="head">Updated news</div>                 <hr>                 <div class="item_box">                     <div class="item1">                         <div class="picture"><span>&nbsp;사진첩&nbsp;</span>memory</div>                         <div class="board"><span>&nbsp;게시판&nbsp;</span>coding</div>                         <div class="board"><span>&nbsp;게시판&nbsp;</span>passion</div>                         <div class="picture"><span>&nbsp;사진첩&nbsp;</span>love</div>                     </div>                     <div class="item2">                       <div class="list">                           다이어리<span>0/25</span>&emsp;&emsp;&emsp;&emsp;사진첩<span>0/25</span>                       </div>                       <div class="list">                           게시판<span>0/25</span>&emsp;&emsp;&emsp;&emsp;&emsp;방명록<span>0/25</span>                       </div>                   </div>               </div>           </div>           <div class="miniroom">               <div class="head">Miniroom</div>               <hr>           </div>       </div>   </div>             </div>           </div>           <div class="menu"></div>         </div>       </div>     </div>   </body> </html> * {   box-sizing: border-box; } body {   background-color: #a3a3a3;   /** body에 배경이미지 적용 */   background-image: url("../static/pattern.png");   /** 고정된 사이즈로 설정 */   background-size: 100px;   /** 기본 body 사이즈를 화면 크기로 고정 */   position: fixed;   left: 0;   top: 0;   right: 0;   bottom: 0; } .bookcover {       /** 배경 색깔 지정  */   background-color: #b4d1da;   /** 모서리 둥글게 */   border-radius: 9px;   /** 윤곽선 */   border: 1px solid #738186;       /** 기본 너비, 높이 지정 (반응형 X) */   width: 960px;   height: 660px;   /** 좌우 마진을 auto(중앙에 배치), 상하 마진을 100px로 지정 */   margin: 100px auto;   /** .bookdot 요소에서 absolute 속성값을 이용하기 위해 position: relative 로 설정 */   position: relative; } .bookdot{     position:absolute;     top: 10px;     left: 10px;     /**하얀색 점선 만들기**/   border: dashed 2px whitesmoke;  border-radius: 9px;  width: 930px;  height: 630px; } .page{   position:absolute;   display: flex;   border-radius: 9px;   background-color: whitesmoke;   top : 10px;   left : 10px;   width: 900px;   height: 600px; } .col1{   flex:0.4;   display: flex;   flex-direction: column;   margin: 10px; } .row1{   flex:1;   margin : 10px;   display: flex;   flex-direction: column; } .menu {   flex: 0.15;   border: 2px solid gainsboro;   margin: 35px 10px 10px 0px; } .col2{   font-size: 12px;   text-align: center;   margin-bottom: 10px; } .today {   color: red; } .total {   color: darkgray;   font-weight: bold; }   .box1 {     background-color: white;     border: 1px solid gainsboro;     border-radius: 10px;     width: 240px;     height: 580px;   }       .row2 {     display: flex;     justify-content: space-between;     font-size: 15px;     margin-bottom: 10px;     height: 16px;   }       .box2 {     background-color: white;     border: 1px solid gainsboro;     border-radius: 10px;     height: 600px;}     .title_item {   flex: 0.5;   text-align: left;   padding-left: 4px; } .url_item {   flex: 0.5;   text-align: right;   padding-right: 60px; } .menu_column {   flex: 0.1;   border: 1px solid gray; } .box1 {   background-color: white;   border: 5px solid lightgray;   border-radius: 10px; } .profile {   flex: 0.45;   width: 210px;   height: 230px;   padding: 30px; } .introduction {   flex: 1.0;   font-size: 20px;   text-align: center;   font-family: 'Dongle', sans-serif; } .name {   flex: 0.05;   padding: 10px;   font-weight: bolder;   font-size: 14px;   font-family: 'Noto Sans KR', sans-serif; } .head {   color: rgb(70, 115, 150);   font-size: 16px;   margin: 3px;   font-weight: 1000;   font-family: 'Do Hyeon', sans-serif; } hr {   margin: 3px; } .updated_news {   flex: 0.3; } .item_box {   display: flex; } .item1 {   flex: 0.5;   line-height: 20px;   margin: 2px; } .item2 {   flex: 0.5;   line-height: 20px;   margin: 2px; } .picture span {   color: white;   border-radius: 5px;   padding: 2px;   margin: 10px 3px;   font-weight: bold;   text-align: center;   background-color: rgb(40, 203, 225); } .board span {   color: white;   border-radius: 5px;   padding: 2px;   margin: 10px 3px;   font-weight: bold;   text-align: center;   background-color: rgb(204, 70, 21); } .list {   border-bottom: 1px dashed lightgray; } .list span {   color: rgb(180, 227, 38);   font-weight: bold;   margin-left: 5px; } .miniroom {   flex: 0.7; }
kbyyah
2022.05.06
@kbyyah님이 새 포스트를 작성했습니다.
6일차
<!DOCTYPE html> <html lang="ko">   <head>     <meta charset="UTF-8" />     <title>2022 NEW PROJECT</title>     <link rel="stylesheet" href="st.css" />   </head>   <body>     <div class="bookcover">       <div class="bookdot">         <div class="page">           <div class="col1">             <div class="col2">               TODAY <span class="today">38</span> |               TOTAL <span class="total">1000000</span>             </div>             <div class="box1">             </div>           </div>           <div class="row1">             <div class="row2">               <div class="title">멋진 신 세계</div>               <div class="url">http://bravenewworld.com</div>             </div>             <div class="box2">             </div>           </div>           <div class="menu"></div>         </div>       </div>     </div>   </body> </html> * {   box-sizing: border-box; } body {   background-color: #a3a3a3;   /** body에 배경이미지 적용 */   background-image: url("../static/pattern.png");   /** 고정된 사이즈로 설정 */   background-size: 100px;   /** 기본 body 사이즈를 화면 크기로 고정 */   position: fixed;   left: 0;   top: 0;   right: 0;   bottom: 0; } .bookcover {       /** 배경 색깔 지정  */   background-color: #b4d1da;   /** 모서리 둥글게 */   border-radius: 9px;   /** 윤곽선 */   border: 1px solid #738186;       /** 기본 너비, 높이 지정 (반응형 X) */   width: 960px;   height: 660px;   /** 좌우 마진을 auto(중앙에 배치), 상하 마진을 100px로 지정 */   margin: 100px auto;   /** .bookdot 요소에서 absolute 속성값을 이용하기 위해 position: relative 로 설정 */   position: relative; } .bookdot{     position:absolute;     top: 10px;     left: 10px;     /**하얀색 점선 만들기**/   border: dashed 2px whitesmoke;  border-radius: 9px;  width: 930px;  height: 630px; } .page{   position:absolute;   display: flex;   border-radius: 9px;   background-color: whitesmoke;   top : 10px;   left : 10px;   width: 900px;   height: 600px; } .col1{   flex:0.4;   display: flex;   flex-direction: column;   margin: 10px; } .row1{   flex:1;   margin : 10px;   display: flex;   flex-direction: column; } .menu {   flex: 0.15;   border: 2px solid gainsboro;   margin: 35px 10px 10px 0px; } .col2{   font-size: 12px;   text-align: center;   margin-bottom: 10px; } .today {   color: red; } .total {   color: darkgray;   font-weight: bold; }   .box1 {     background-color: white;     border: 1px solid gainsboro;     border-radius: 10px;     width: 240px;     height: 580px;   }       .row2 {     display: flex;     justify-content: space-between;     font-size: 15px;     margin-bottom: 10px;     height: 16px;   }       .box2 {     background-color: white;     border: 1px solid gainsboro;     border-radius: 10px;     height: 600px;}
kbyyah
2022.05.02
@kbyyah님이 새 포스트를 작성했습니다.
5일차 과제
<!DOCTYPE html> <html lang="ko">   <head>     <meta charset="UTF-8" />     <title>2021 MINI HOMEPAGE</title>     <link rel="stylesheet" href="st.css" />   </head>   <body>     <div class="bookcover">       <div class="bookdot">         <div class="page"></div>       </div>     </div>   </body> </html> body {     background-color: #e36565;     /** body에 배경이미지 적용 */     background-image: url("./assets/pattern.png");     /** 고정된 사이즈로 설정 */     background-size: 100px;         /** 기본 body 사이즈를 화면 크기로 고정 */     position: fixed;     left: 0;     top: 0;     right: 0;     bottom: 0;   }       .bookcover {     /** 배경 색깔 지정  */     background-color: #7be122;     /** 모서리 둥글게 */     border-radius: 9px;     /** 윤곽선 */     border: 1px solid #dd219e;         /** 기본 너비, 높이 지정 (반응형 X) */     width: 960px;     height: 660px;         /** 좌우 마진을 auto(중앙에 배치), 상하 마진을 100px로 지정 */     margin: 100px auto;         /** .bookdot 요소에서 absolute 속성값을 이용하기 위해 position: relative 로 설정 */     position: relative;   }       .bookdot {     width: 930px;     height: 630px;     position: absolute;     top: 13px;     left: 13px;     border: 2px dashed whitesmoke;     border-radius: 9px;   }       .page {     width: 900px;     height: 600px;     background-color: whitesmoke;     border-radius: 9px;     position: absolute;     top: 13px;     left: 13px;   }
kbyyah
2022.04.06
@kbyyah님이 새 포스트를 작성했습니다.
4일차
<!DOCTYPE html> <html lang="ko"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>모각코 html css 2일차</title>     <link rel="stylesheet" href="./fa.css">     <style>         .box{             background-color: rgb(147, 166, 216);             text-align: center;         }         .box1{             border-style: dashed;             width: fit-content;         }     </style> </head> <body>     <div class ="box">         <h1 >             실리콘밸리         </h1>     </div>       <hr>     <p >         <ol class ="box1"> 대표적인 기업들 <br/><br/>             <li>                 <a href="#think"> 구글                 </a>             </li>                         <li>                 <a href="#think1">메타                 </a>             </li>             <li>                 <a href="#think2">애플                 </a>             </li>         </ol>     </p>     <h2 id ="think">1.구글     </h2>     <p>         순다르 피차이 <br/>         인도인<br/>         엄청난 노력파.     </p>     <hr>     <h2 id ="think1">2. 메타     </h2>     <p>         마크 주커버그  <br/>         하버드대학교<br/>         중국어 공부     </p>     <hr>     <h2 id ="think2">3. 애플     </h2>     <p>         팀쿡  <br/>         아이폰.<br/>     </p>     <hr>     </body> </html> @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&family=Dosis:wght@200;300&family=Gothic+A1:wght@600&family=Nanum+Gothic+Coding&family=Nanum+Gothic:wght@400;700;800&family=Oxygen:wght@300&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&family=Dosis:wght@200;300&family=Gothic+A1:wght@600&family=Nanum+Gothic+Coding&family=Nanum+Gothic:wght@400;700;800&family=Nanum+Myeongjo&family=Oxygen:wght@300&display=swap'); .title {       font-family: 'Dongle', sans-serif;     margin: 2rem auto;     text-align: center;     width: 1000px;     padding: 0.3px; } h1,h2 {    background-color: rgb(184, 161, 123);     font-family: 'Nanum Gothic', sans-serif;     font-weight: 500;     margin: 20px;     text-align: left;     display: inline-block;     padding-top: 10px;     padding-left: 50px;     padding-right: 50px; }
kbyyah
2022.04.03
@kbyyah님이 새 포스트를 작성했습니다.
2일차
<!DOCTYPE html> <html lang="ko"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>모각코 html css 2일차</title>     <style>         .box{             background-color: rgb(147, 166, 216);             text-align: center;         }         .box1{             border-style: dashed;             width: fit-content;         }     </style> </head> <body>     <div class ="box">         <h1 >             실리콘밸리         </h1>     </div>       <hr>     <p >         <ol class ="box1"> 대표적인 기업들 <br/><br/>             <li>                 <a href="#think"> 구글                 </a>             </li>                         <li>                 <a href="#think1">메타                 </a>             </li>             <li>                 <a href="#think2">애플                 </a>             </li>         </ol>     </p>     <h2 id ="think">1.구글     </h2>     <p>         순다르 피차이 <br/>         인도인<br/>         엄청난 노력파.     </p>     <hr>     <h2 id ="think1">2. 메타     </h2>     <p>         마크 주커버그  <br/>         하버드대학교<br/>         중국어 공부     </p>     <hr>     <h2 id ="think2">3. 애플     </h2>     <p>         팀쿡  <br/>         아이폰.<br/>     </p>     <hr>     </body> </html>
kbyyah
2022.03.31
@kbyyah님이 새 포스트를 작성했습니다.
1일차
<!DOCTYPE html> <html> <head> <title>1일차 과제</title> </head> <body> <h2>오늘</h2> <table>     <ul>         <tr>             <td><li>모각코</li></td>             <td><input type="checkbox"/></td>         </tr>         <tr>             <td><li>수업 듣기</li></td>             <td><input type="checkbox"/></td>         </tr>         <tr>             <td><li>교보가기</li></td>             <td><input type="checkbox"/></td>         </tr>         <tr>             <td><li>아몬드 먹기</li></td>             <td><input type="checkbox"/></td>         </tr>           <tr>             <td><li>신문읽기</li></td>             <td><input type="checkbox"/></td>         </tr>         </ul> </table> <hr> <h3>오늘의 한마디</h3> <p>엄청 피곤한 날</p> </body> </html>