https://korinnne.github.io/minihomepage/ //미니홈피 완성!

새로운 기록용 계정 생성

//<div id ="iWrote">             <div class ="menu1">NO.5 <span style="font-size : 14px" id ="name" class ="nicknamed">*지대간지*</span> <span style="color:grey" id="datetoday">(2011.03.23)</span><span class ="warning">비밀글로 달기 | 삭제 | 신고</span></div>             <div class ="listtext">               <img class ="img1" src ="jeno.PNG">                            <div style ="display:flex; flex-direction: column;">                <div class ="text1">퍼가요~❤️ 퍼가요~❤️ 퍼가요~❤️ 퍼가요~❤️ 퍼가요~❤️ </div>               <div class ="text1">퍼가요~❤️ 퍼가요~❤️ 퍼가요~❤️ 퍼가요~❤️ 퍼가요~❤️</div>               <div class ="text1">퍼가요~❤️ 퍼가요~❤️ 퍼가요~❤️ 퍼가요~❤️ 퍼가요~❤️</div>               <div class ="text1">퍼가요~❤️ 퍼가요~❤️ 퍼가요~❤️ 퍼가요~❤️ 퍼가요~❤️</div>               </div>                                           </div>           </div> //css

//javascipt파일로 완성!

//css .today{  color:steelblue;  flex:0.2;  margin: 10px;     } .date{     flex: 0.2;     border: 1px solid lightgray;     color: black;     margin :10px;     font-family: 'DungGeunMo';     display: flex;     flex-direction: row;     } .datewrap{         flex: 2;     margin: 10px; } .diary{     flex:2;         margin:10px;         display: flex;     flex-direction: column;     overflow-y: scroll; } .diary1{     flex:0.3;     color: black;     border: 1px solid lightgray;     margin-bottom: 30px; } .diarytext{   color:black;   text-align: center;   margin: 10px;   font-size: 15px; } .diarydate{     margin: 20px;     color:steelblue; } .diarybutton{     margin: 10px; } .diarybutton > button{     margin-left: 150px;     background-color:white;     color: white;     text-align: center;     font-size: 15px;     width: 200px;     font-family: 'DungGeunMo';     border: 1px white;     margin-bottom: 10px; } .diarybutton > button:hover{     background-color:aliceblue;     color: black;     transition: 800ms ease all; } .icon{     margin: 10px; } //html  <div class = "date">                         <div class ="today">08.02                             <div>TUE</div>                         </div>                         <div class ="datewrap"> 1 <span style ="color: red;">2</span> 3 4 5 <span style ="color: blue;">6</span> 7 8 9 10 11 12 <span style ="color: red;">13</span> 14 15 16 17 18 19 20 21 22 <span style ="color: rgb(0, 47, 255);">23</span> 24 25 26 27 28 29 30</div>                     </div>                     <div class ="diary">                         <div class = diary1>                            <div class ="diarydate">2005.08.02 수 12:09</div>                            <div class ="diarytext">이제 그만 울자..</div>                            <div class ="diarytext">이제 그만 미치자..</div>                            <div class ="diarytext">이제 그만 지우자..</div>                            <div class ="diarytext">이제 그만 잊자..</div>                            <div class ="diarytext">이제 그만 끝내자..</div>                            <div class ="diarytext">.</div>                            <div class ="diarytext">.</div>                            <div class ="diarytext">.</div>                            <div class ="diarytext">미련도 아픔도 슬픔도..</div>                            <div class ="diarytext">기억도...사랑도...</div>                            <div class ="diarytext">설레임도..눈물도...</div>                            <div class ="diarytext">.</div>                            <div class ="diarytext">.</div>                            <div class ="diarytext">.</div>                            <div style ="color : red" class ="diarytext">심장아..이제..제발 ...그만하자..</div>                         </div>                         <div class = diary1>                             <div class ="diarydate">2005.06.06 금 4:09</div>                             <div class ="diarytext">"언제부터 나 기다린거야..?"</div>                             <div class ="diarytext">"1분."</div>                             <div class ="diarytext">"거짓말"</div>                             <div class ="diarytext">"5분"</div>                             <div class ="diarytext">"내가 바보냐....나 언제부터 기다린 거냐구..."</div>                             <div class ="diarytext">.</div>                            <div class ="diarytext">.</div>                            <div class ="diarytext">.</div>                            <div style ="color : red" class ="diarytext">"신호등이 182번 바뀔 동안"</div>                          </div>                          <div class ="diarybutton">                            <button><i class="fa-solid fa-lock icon"></i>비밀일기 보러가기</button>                                                     </div>                                               </div>

overflow 기능 사용!

select{   font-family: 'Cafe24SsurroundAir';   text-align: center;   margin-left: 30px;   margin-bottom: 40px ;   padding: 5px;    } .button{   background-color:steelblue;   font-family: 'DungGeunMo';   border-bottom-right-radius: 6px ;   border-top-right-radius: 6px ;   width: 90px;   color:white;   text-align: left;   margin-top: 15px;   height: 30px; } .button:hover{   background-color:navy; } .intro{   font-family: 'DungGeunMo';   color: black;   font-size: 13px;   margin-left: 30px;   margin-bottom: 7px; }

layout,home,diary,font 까지 전부 분리 완! flex부분을 조금 더 공부해야겠다 ㅠㅠ

   <div>지쳤을땐▶뒤에서</div>                       <div>위로할땐▶옆에서</div>           <div>항상그대와함께~</div>         <div>할께요♡*^^*</div>         <div>너란 사람 진짜 싫 ㄷ k ...^</div>           </div>           <div class ="profile_text">            <div class ="music">프리스타일 - Y</div>            <div>행복해서 웃는 게 아니라</div>            <div>웃어서 행복한거다..$</div>           </div>           </div>          </div>          <div class ="right1">           <div class ="righttext">            <div class ="righttext1">이쀼ㄹi킹왕쨩@.@</div>            <div class ="righttext1">난 ㄱr끔 눈ㅁㅜㄹ을,,흘린ㄷ r,,,</div>           </div>            <div class ="right">            <div class ="news">             <div class ="update">나의소식</div>             <div class ="update2">              <div class ="list">               <div class ="list1"><span class ="photoshoot"> 사진첩</span> 나 보러왔길래 손잡아줌</div>               <div class ="list1"><span class ="board"> 게시판</span> 나 오늘 어디갓다왓게^3^</div>               <div class ="list1"><span class ="board"> 게시판</span> 오늘숙제지대많음개짱나</div>               <div class ="list1"><span class ="photoshoot"> 사진첩</span> 오늘학교끝나고한컷>.~</div>              </div>             <div class ="listmenu">              <div class ="listmenu1"><span>다이어리 <span class ="font">0/25</span></span><span class ="list2nd">우리이쀼리팸>.~ <span class ="font">0/25</span></span>              </div>              <div class ="listmenu1"><span>게시판 <span class ="font">0/25</span></span><span class ="list2nd">방명록<span class ="font"> 0/25</span></span></div>             </div>             </div>            </div>            <div class ="miniroom">미니룸</div>            <div class ="miniroomimg"></div>                       </div>         </div>       </div>              <div class ="menu"></div>      </div> .right{   border-radius: 9px;   flex:3;   background-color: white;      margin-bottom: 15px;   display:flex;   flex-direction: column;       } .news {   display: flex;   flex:0.4;   flex-direction: column;       } .update{   margin:10px;   padding-bottom: 5px;   flex:0.1;     color:black; border-bottom: 1px solid grey; } .update2{   flex:2;   display:flex;   flex-direction: row;    } .list{   flex:0.5;      display: flex;   flex-direction: column; } .list1{   margin-left: 13px;   color:black;   font-size: 13px;   margin-bottom: 5px;    } .listmenu{   flex:0.5;   font-size: 13px;   color:black;   display:flex;   flex-direction: column; } .listmenu1{   border-bottom: 1px dashed grey ;   margin-bottom: 3px;   margin-right: 10px; } .list2nd{   margin-left: 10px ; } .photoshoot{   background-color: red;   border-radius: 3px;   color:aliceblue;   font-size: 13px;   font-weight:100;   font-family: 'DungGeunMo';   padding:2px; } .board{   background-color:royalblue;   border-radius: 3px;   color:aliceblue;   font-size: 13px;   font-weight: 100;   font-family: 'DungGeunMo';   padding:3px; } .miniroom{   flex:0.05;   margin:10px;   padding-bottom: -5px;       color:black; border-bottom: 1px solid grey; } .music{   font-size: 20px;    } .miniroomimg{   flex:0.9;   background-image: url("미니룸.PNG");   margin: 10px;   border-radius: 9px;   background-size: cover; } .font{   font-family: 'DungGeunMo';   color:navy;   font-size: 15px; }

->박스 안에 텍스트를 넣어서 다시 보완해야겟다

body{     background-image: url("pattern.png");     background-color: gray;     background-size: 100px; } .bookcover{    margin:100px auto;     background-color:lightblue;     background-size: 100px;     width: 960px;     height: 660px;     border-radius: 9px;     position: relative; } .bookdot{     border: dashed ;     border-radius: 9px;     color: beige;     padding: 10px;     position: absolute;     top:15px;     left:15px;     right: 15px;     bottom: 15px;         } .page{         background-color:lightgray;     width: 900px;     background-size: 100px;     height: 600px;     border-radius: 9px;     position: absolute;     top: 100px;     left: 100px;     width: 100px;     height: 100px; } //position absoulte , relative 속성을 이용하여 위아래양옆 간의 간격을 일정하게 조절 //border: dashed 속성을 이용하여 점선을 생성

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>투니버스만화</title>     <link rel="stylesheet" href="style.css" /> </head> <body>    <div class ="home"style="background-color:rgb(151, 185, 247)">        <div class ="menu">홈</div>        <div class ="menu">메뉴</div>        <div class ="menu">비밀</div>    </div>    <h2>오늘 나의 노래와 코멘트들 달고 일기를 써보세요</h2>    <p class ="diary">     <input type="text" cols="50" rows ="10" placeholder="오늘 듣고 싶은 나의 노래는?">    </p>    <div class ="">     <div class ="feel" >내일의 나를 믿을게</div>     <div class ="feel">자퇴하겟습니다</div>     <div class ="feel">휑~휑~휑~</div> </div> <div class ="dd">오늘 일기</div>    <div class ="text"><textarea cols="50%" rows="10%" placeholder="오늘 나의 하루는?"></textarea></div>    <button>submit</button> </body> </html> .home{         border-radius: 20px; } body{     font-size: 10px;     text-align: center;     font-family: 'Cafe24SsurroundAir';     background-color:bisque; } .menu{     font-family: 'Cafe24Shiningstar';     display: inline-block;     padding: 10px;     font-size: 20px;     font-weight: bold;     } .diary{     padding-top: 5%; } .feel{     display: inline-block;     margin: 20px;     font-family: 'Cafe24Ssurround';     font-size: 20px; } .dd{     margin-top: 10%;     text-align: left;     font-size:  2em; }

@font-face {     font-family: 'Cafe24SsurroundAir';     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');     font-weight: normal;     font-style: normal; } @font-face {     font-family: 'Cafe24Shiningstar';     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff');     font-weight: normal;     font-style: normal; } @font-face {     font-family: 'Cafe24Ssurround';     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');     font-weight: normal;     font-style: normal; } h1{     font-family:  'Cafe24Ssurround';     text-align: center; font-size: 50px; margin: 60px; border: 5px solid orange; color: coral; border-radius: 10px; padding: 15px; background-color: antiquewhite; } .list{     font-family: 'Cafe24Shiningstar';     color:darkgoldenrod;     font-size: 30px;     } .listing{     font-family: 'Cafe24SsurroundAir';     border-radius: 20px;      font-size: 20px;     bottom: 5px; } p{     font-family: 'Cafe24SsurroundAir'; }

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>방학전까지 할일</title>     <style>         h1{             text-align: center;         font-size: 50px;         margin: 60px;         border: 5px solid orange; color: coral;         border-radius: 10px;         padding: 15px;         background-color: antiquewhite;         }         .list{             color:darkgoldenrod;             font-size: 30px;                     }         .listing{               border-radius: 20px;              font-size: 20px;             bottom: 5px;         }     </style> </head> <body>     <h1>         방학 전까지 할 일     </h1>     <div class ="list">         *1월까지 리스트       </div>       <div><p>ㅠㅠㅠㅠ1월</p></div>         <ul class ="listing">             <li>모각코 완강하기</li>         <li>자격증 공부하기</li>         <li>운동 꾸준히 다니기</li>         <li>대외활동 포트폴리오 준비하기</li>           </ul>                 <div class ="list">             *2월까지 리스트           </div>           <div><p>ㅠㅠㅠㅠ2월</p></div>           <ul class ="listing"><li>영어 회화 공부하기</li>             <li>책 꾸준히 읽기</li>             <li>알고리즘 공부하기</li>             <li>스터디하기</li>             </ul>     </body> </html>

웹 개발은 백엔드,프론트엔드,퍼블리싱으로 구성 백엔드는 눈에 보이지 않는 데이터 관리,서버 등등 프론트엔드는 눈에 보이는 웹사이트 구성(클릭하면 어딘가로 이동) html 뼈대 css 디자인 j/s는 움직임

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>자기소개글</title> </head> <style>       .title{         color: #3f3732;                     display: flex;             flex-direction: column;             justify-content: center;             align-items: center;             }     .title>h1{         color: beige;                 padding: 8px 16px;         border-radius: 16px;         margin-bottom: 16px;             }     .title>p>span{         font-size: 20px;     }     body{         background-color:cadetblue;     } </style> <body>     <div class ="title">                   <h1>이것은 제 첫 html 파일입니다</h1>         <a  href= "https://cafe.naver.com/codeuniv">룰루랄라</a>         <p>여기로 놀러오세요: <span>컴온컴온</span></p>         <button>나는야코린이</button>     </div>         </body> </html>