탐색
가이드
@kbyyah
전체 보기
프로젝트
포스트
팔로잉
스크랩
전체 보기
프로젝트
포스트
팔로잉
스크랩
프로젝트 히스토리
프로젝트 상세 페이지
타임라인
리스트
2022.05.09
@kbyyah님이 새 포스트를 작성했습니다.
8일차 과제
분리 완료했습니다!
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> 사진첩 </span>memory</div> <div class="board"><span> 게시판 </span>coding</div> <div class="board"><span> 게시판 </span>passion</div> <div class="picture"><span> 사진첩 </span>love</div> </div> <div class="item2"> <div class="list"> 다이어리<span>0/25</span>    사진첩<span>0/25</span> </div> <div class="list"> 게시판<span>0/25</span>     방명록<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; }
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;}
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; }
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; }
2022.04.05
@kbyyah님이 새 포스트를 작성했습니다.
3일차
@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; } h1,h2 { font-family: 'Nanum Gothic', sans-serif; font-weight: 500; }
2022.04.03
@kbyyah님이 포스트를 업데이트했습니다.
포스트
2일차
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>
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>
