hyedal95
2022.01.31
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)]15일차과제
✅ 퀴즈 문제 : 구글 클론 코딩 ② 결과물 HTML <!doctype html> <html lang="ko">   <head>     <meta charset="utf-8">     <title>15일차 과제</title>     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">     <link rel="stylesheet" href="15day.css">   </head>   <body>     <div>         <h1 class=><span>C</span><span>o</span><span>o</span><span>G</span><span>l</span><span>e</span></h1>         <nav class="navbar navbar-light bg-light">             <div class="container-fluid">                 <form class="mx-auto" action="https://www.google.com/search" method="GET">                     <input id="query" class="form-control me-2" name="query" type="search" placeholder="coogle 검색 또는 URL 입력" aria-label="Search" size="80">                 </form>             </div>           </nav>           <div class="container">             <div class="box">                 <a href="https://naver.com" target="_blank"><img src="네이버로고(50).png" width="50" height="50"></a>             </div>             <div class="box">                 <a href="https://youtube.com" target="_blank"><img src="유튜브로고(50).png" width="50" height="50"></a>             </div>             <div class="box">                 <a href="https://ko-kr.facebook.com/" target="_blank"><img src="페이스북로고(50).png" width="50" height="50"></a>             </div>             <div class="box">                 <a href="https://www.instagram.com/?hl=ko" target="_blank"><img src="인스타로고(50).png" width="50" height="50"></a>             </div>             <div class="box">                 <a href="https://band.us/home" target="_blank"><img src="밴드로고(50).png" width="50" height="50"></a>             </div>           </div>     </div>   </body> </html> CSS div h1 {     font-size:100px;     text-align:center; } div h1 span:nth-child(1) {color:blue;} div h1 span:nth-child(2) {color:red;} div h1 span:nth-child(3) {color:yellow;} div h1 span:nth-child(4) {color:blue;} div h1 span:nth-child(5) {color:green;} div h1 span:nth-child(6) {color:red;} .container {     display: flex;   flex-direction: row;   flex-wrap: wrap;   justify-content: space-evenly;   align-items: center; } .box {   width: 50px;   height: 50px;   border: solid black;   display: flex;   justify-content: space-evenly;   align-items: center;   margin: 30px;   font-size: 30px;   color: black;   border-radius: 30%; } .box:nth-child(1){     background-color:red; } .box:nth-child(2){     background-color:orange; } .box:nth-child(3){     background-color: yellow; } .box:nth-child(4){     background-color: lightgreen; } .box:nth-child(5){     background-color: lightblue; }
hyedal95
2022.01.27
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)] 14일차 과제
✅ 퀴즈 문제 : 구글의 프로토타입 제작하기 HTML <!DOCTYPE html> <html lang="ko"> <head>   <meta charset="UTF-8">   <title>14day</title>   <link rel="stylesheet" href="13day.css">   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous"> </head> <body>     <div>       <h1 class ="<span>"><span> coogle</span><h1>         <nav class="navbar navbar-light bg-light">           <div class="container-fluid">               <form method=get action="http://search.google.co.kr/search" target="_blank">                   <input id="query" class="form-control me-2" name="query" type="search" placeholder="검색창을 입력하세요" aria-label="Search">                   <button class="btn btn-outline-success" type="submit">search</button>               </form>           </div>         </nav>   <div class="container">     <div class="box" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity=""">1</div>         <div class="box">2</div>     <div class="box">3</div>     <div class="box">4</div>     <div class="box">5</div>   </div> </body> </html> CSS div h1 {     font-size: 100px;     text-align: center; } h1 span:nth-child(1) {     text-align: center;     color: aqua; } h1 span:nth-child(2) {     text-align: center;     color: blueviolet; } h1 span:nth-child(3) {     text-align: center; } h1 span:nth-child(4) {     text-align: center; } h1 span:nth-child(5) {     text-align: center; } .container-fluid {     justify-content: center; } .container {     display: flex;   flex-direction: row;   flex-wrap: wrap;   justify-content: center;   align-items: center; } .box {   width: 50px;   height: 50px;   border: 3px solid black;   display: flex;   justify-content: center;   align-items: center;   margin: 50px;   font-size: 30px;   color: black;   border-radius: 20%; } .box:nth-child(1){     background-color:rgb(223, 139, 139); } .box:nth-child(2){     background-color:rgba(233, 191, 114, 0.986); } .box:nth-child(3){     background-color: rgb(245, 245, 106); } .box:nth-child(4){     background-color: rgb(146, 236, 146); } .box:nth-child(5){     background-color: rgb(190, 231, 245); } input {     background-color: var(--search-box-bg, white);     border: none;     border-radius: calc(0.5 * var(--ntp-realbox-height));     color: var(--search-box-text);     font-family: inherit;     font-size: inherit;     height: 100%;     outline: none;     padding-inline-end: 44px;     padding-inline-start: 52px;     position: relative;     width: 100%; }
hyedal95
2022.01.26
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)]13일차 과제
✅ 퀴즈 문제 : Flex 해보기! 결과물 HTML <!DOCTYPE html> <html lang="ko"> <head>     <meta charset="UTF-8">     <title>13DAY</title>     <link rel="stylesheet" href="13day.css"> </head> <body>     <div class="text">     <span>결과물 보기</span>     </div>   <div class="container">     <div class="box">1</div>     <div class="box">2</div>     <div class="box">3</div>     <div class="box">4</div>     <div class="box">5</div>   </div> </body> </html> CSS .text {     font-display: flex;     text-align: center; } .container {     display: flex;   flex-direction: row;   flex-wrap: wrap;   justify-content: space-evenly;   align-items: center; } .box {   width: 50px;   height: 50px;   border: 3px solid black;   display: flex;   justify-content: space-evenly;   align-items: center;   margin: 50px;   font-size: 30px;   color: black;   border-radius: 20%; } .box:nth-child(1){     background-color:rgb(223, 139, 139); } .box:nth-child(2){     background-color:rgba(233, 191, 114, 0.986); } .box:nth-child(3){     background-color: rgb(245, 245, 106); } .box:nth-child(4){     background-color: rgb(146, 236, 146); } .box:nth-child(5){     background-color: rgb(190, 231, 245); }
hyedal95
2022.01.25
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)]12일차 과제
✅ 퀴즈 문제 : 네이버 검색창 만들어보기! 결과물 HTML <!doctype html> <html lang="ko">   <head>     <meta charset="utf-8">     <title>검색창 입력하기 </title>     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">   </head>   <body>     <nav class="navbar navbar-light bg-light">         <div class="container-fluid">             <form class="mx-auto" action="https://search.naver.com/search.naver" method="GET">                 <img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Flittledeep.com%2Fmagnifying-glass-icon%2F&psig=AOvVaw3MUTXAtWnhNATgTN4zP5Wu&ust=1643195471950000&source=images&cd=vfe&ved=0CAgQjRxqFwoTCLDOiLHizPUCFQAAAAAdAAAAABAD">                 <input id="query" class="form-control me-2" name="query" type="search" placeholder="검색창을 입력하세요" aria-label="Search">                 <button class="btn btn-outline-success" type="submit">search</button>             </form>         </div>       </nav>   </body> </html> CSS .btn btn-outline-success {     text-decoration-line: overline; }
hyedal95
2022.01.25
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)]11일차 과제
✅ 퀴즈 문제 : Bootstrap 사용해보기! 결과물 =>창을 키우고 늘릴 때 원서접수 홈페이지 박스도 같이 늘어나게끔 하고싶은데 어떻게해야하나요?ㅠㅠ HTML코드 <!DOCTYPE html> <html>     <head lang = "ko">         <meta charset="UTF=8">         <link rel = "stylesheet" href="11day.css"/>         <title>Bootstrap 사용</title>         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">     </head>     <body>         <h4>2022년 목표 자격증</h4>         <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">             <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">             <label class="btn btn-outline-primary" for="btncheck1">정보처리산업기사</label>                       <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">             <label class="btn btn-outline-primary" for="btncheck2">cs리더스관리사</label>                       <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">             <label class="btn btn-outline-primary" for="btncheck3">네트워크관리사2급</label>             <input type="checkbox" class="btn-check" id="btncheck4" autocomplete="off">             <label class="btn btn-outline-primary" for="btncheck4">웹디자인기능사</label>             <input type="checkbox" class="btn-check" id="btncheck5" autocomplete="off">             <label class="btn btn-outline-primary" for="btncheck5">ADsP</label>             <input type="checkbox" class="btn-check" id="btncheck6" autocomplete="off">             <label class="btn btn-outline-primary" for="btncheck6">SQR개발자</label>           </div>           <div class="card" style="width: 18rem;">             <img src="books.png" class="card-img-top" alt="...">             <div class="card-body">               <h5 class="card-title">원서접수 홈페이지</h5>               <p class="card-text">원서접수 사이트로 편리하게 이동하기</p>               <a href="https://www.dataq.or.kr/www/main.do" class="btn btn-primary">데이터자격검정 바로가기</a>               <a href="http://www.q-net.or.kr/man001.do?gSite=Q" class="btn btn-primary">큐넷 바로가기</a>               <a href="https://www.kie.or.kr/kiehomepage/fc/main" class="btn btn-primary">한국정보평가협회 바로가기</a>             </div>             <span>해달's</span>           </div>     </body> </html> CSS코드 .btn-group {     margin: 20px;     text-align: center; } .card {     margin: 20px;     text-align: center;     padding-top: 40px; } h4 {     text-align: center;     color: blueviolet;     margin: 90px;     padding-top: 20px;     box-sizing: unset; } span {     text-align: right; }
hyedal95
2022.01.24
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)]10일차 과제
#10. 나만의 프로필 만들기 ② 결과물 HTML <!DOCTYPE html> <html lang="ko">     <head>             <meta charset="UTF-8">         <title>프로필의 프로토타입 제작하기!</title>         <link rel="stylesheet" href="9day.css"/>     </head>     <body>         <div class="main">             <div class="main-div">                 <h2 class="main-title">나를 소개합니다. </h2>             </div>             <div class="main-content">                         <h1>              <strong><span> 해달 </span></strong>         <br>         <div class="box0"> <img src="살찐 보노보노.jpg", width "100", height "100" >         </div>         </h1>     <div>           <h2><br>테트리스 운영 주임</br><h2>         </div>         <h4><br>-------------------------------------- </br></h4>     <div class="box1">         <p> <span>이름</span>:해달 <br>             <span>직업</span>:주차 운영주임 or 대학생<br>             <span>나이</span>:28<br>             <span>MBTI</span>: INFP<br>             <span>SNS</span>:<a href="https://www.instagram.com/double95_noh" target="_blank"><button>instagram</button></a><br>         </p>     </div>             <p> <span> <자기소개> </span><br>             노트북 들고다니며 프리랜서 앱개발자 및 웹개발자를 꿈꾸는!<br>             개발자 꿈나무 해달입니다.<br>             2022년에는 모각코를 통해서 모든 과정을 접해보고,<br>             흥미를 가지는 것이 목표예요!<br>             아직까지는 다른 분들이 만들어 놓은 코드 및 설명을 참고해서<br>             과제를 해나가고있는데, 발전하고 싶습니다.<br>         </p>             <span><TMI></span> <br>             2년사이에 10kg이 쪘어요. <br>             <br>         </p>         <p><span> <스펙> </span><br>             -서울거리예술창작센터 현대서커스의 이해 워크숍 5일 수료<br>             -제2회 용산전자랜드 메타버스 크리에이터 경진대회 동상 시상<br>             <br>         </p>     </div>     </body> CSS body {     background: darkseagreen;     font-family: 'Jua', sans-serif;     text-align: center;     line-height: 1.5;     } .container {     width: 1000px;     margin: 0 auto;     background: rgba(255, 250, 250, 0.281);     border-radius: 5%;     border: 7px dotted ghostwhite;     padding: 50px 50px; } .box0 {     text-align: center;     border-radius: 10%;     padding-top: 40px;     margin: unset; .box1 {     width: 700px;     height: 1000px;     background: rgb(255 255 255 / 48%);     border-radius: 10%;     padding-top: 40px;     margin: unset; } h2 {     font-size: 35px; } .main-title {     font-size: 20px;     color: darkgreen; } .main {     width: 600px;     opacity: 0.7;     padding: 0 150px;     margin: 50px auto;     font-size: 17px; } p:nth-child(1) {     text-align: center; } p:nth-child(2) {     text-align: center; } p:nth-child(3) {     text-align: center; } p:nth-child(4) {     text-align: center; } span {     color: darkgreen;     font-size: 20px; }
hyedal95
2022.01.20
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)]9일차 수행중
결과물 HTML <!DOCTYPE html> <html lang="ko">     <head>             <meta charset="UTF-8">         <title>프로필의 프로토타입 제작하기!</title>         <link rel="stylesheet" href="9day.css"/>     </head>     <body>         <div class="main">             <div class="main-div">                 <h2 class="main-title">나를 소개합니다. </h2>             </div>             <div class="main-content">         <h1>              <strong><span> 노혜림 </span></strong>         </h1><br>         <h2><br>테트리스 운영 주임</br><h2>         <h4><br>-------------------------------------- </br></h4>         <h5> 이름:노혜림 <br>             직업:주차 운영주임 or 대학생<br>             나이:28<br>             MBTI: INFP<br>             SNS:<br>             <자기소개><br>             나는 현재 파이썬 기초를 매주 토요일마다 배우고있어!<br>             <TMI> <br>             2년사이에 10kg이 쪘어...비만이야 ㅠㅠ<br>             <스펙><br>             -서울거리예술창작센터 현대서커스의 이해 워크숍 5일 수료<br>             -제2회 용산전자랜드 메타버스 크리에이터 경진대회 동상 시상<br>             -<br>     </body>
hyedal95
2022.01.20
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)]8일차 과제
✅ 퀴즈 문제 : 여러가지 도형 만들어보기! 결과물: ==> 하트가 왜 안나올까요 ㅠㅠ BOX3이 표현이 안되는데 무엇이 잘못된걸까요? ㅠㅠ HTML <!DOCTYPE html> <html lang="kor">     <head>         <title>hyedal's 8일차 과제</title>         <meta charset="UTF-8">         <link rel="stylesheet" href="8day.css"/>         <center><abbr>도형 만들기</abbr></center>     </head>     <body>         <p1>         <div class = "box1">             <center><br>                 <strong>hyedal<br>                 8일차 과제</strong></center>         </p1><br><br><br>         <p2>             <div class = "box2">                         </p2><br><br><br>         <p3>             <div class = "box3">                         </p3><br><br><br>     </body> CSS .box1 {     border-top: 10px solid deepskyblue;     border-right: 10px double deeppink;     border-bottom: 10px dotted greenyellow;     border-left: 10px dashed plum;     border-radius: 50%;     width: 100px;     height: 100px; } .box2 {         width: 0;         height: 0;         border-left: 50px solid transparent;         border-right: 50px solid transparent;         border-bottom: 100px solid rgb(10, 165, 23);         position: relative;       }       #star-six:after {         width: 0;         height: 0;         border-left: 50px solid transparent;         border-right: 50px solid transparent;         border-top: 100px solid rgb(10, 165, 23);         position: absolute;         content: "";         top: 30px;         left: -50px;       } } .box3 {         width: 100;         height: 100;         border-left: 50px solid transparent;         border-right: 50px solid transparent;         border-bottom: 100px solid red;         position: relative; }
hyedal95
2022.01.20
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)] 7일차 과제
✅ 오늘의 문제 : 오늘의 일기 쓰기! 결과물 어딘가 막혀서 다른분들의 코드를 참고했습니다 ㅠㅠ 이미지도 크기 적었는데,, 줄지를 않네요 ㅠㅠ 곧 수정해서 올리겠습니다. 스크롤도 다시금 해봐야겠다. HTML소스 <!DOCTYPE html> <html lang="kor">     <head>         <title>hyedal's 7일차 과제</title>         <meta charset="UTF-8">         <link rel="stylesheet" href="7day.css"/>         <abbr>hyedal's 일기장</abbr>     </head>             <style>                 @import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Nanum+Brush+Script&display=swap');             </style>     </head>           <body>                     <p1>                 <div class = "box1">1월18일의 일기</div>             </p1>                             <p2>                 <div class = "box2">                                         <strong>모각코+<Br>                     HTML+CSS(1)<Br></strong>                                       <ul>                         <li><a href="https://codemate.kr/@hyedal95/HTMLCSS11일차-과제" target="_blank">1일차 과제</a></li><Br>                         <li><a href="https://codemate.kr/@hyedal95/HTMLCSS12일차-과제" target="_blank">2일차 과제</a></li><Br>                         <li><a href="https://codemate.kr/@hyedal95/HTMLCSS1-3일차-과제" target="_blank">3일차 과제</a></li><Br>                         <li><a href="https://codemate.kr/@hyedal95/HTMLCSS1-4일차-과제" target="_blank">4일차 과제</a></li><Br>                         <li><a href="https://codemate.kr/@hyedal95/HTMLCSS15일차-과제" target="_blank">5일차 과제</a></li><Br>                         <li><a href="https://codemate.kr/@hyedal95/HTMLCSS16일차-과제" target="_blank">6일차 과제</a></li>                                     </ul>                 </div>             </p2>                             <p3>                 <div class = "box3">                     오늘은 웹개발 기본 7일차 과제를 하는 날이자,<br>                         내 애인의 생일이었다.<br>                         함께 돈 관리를 하면서 생활하는지라<br>                         내가 많이 쓴 달이면, 내게 용돈을 주거나, 본인 돈을 줄여가면서<br>                         남은 달을 살아가는데, 그런 고마운 사람에게<br>                         특별한 생일을 해주고 싶어서<br>                         브라우니만들기, 휘핑크림사서 생크림만들기, 딸기 사서<br>                         케이크를 만들어줬다.<br>                         더 많은 것을 해주지 못해서 못내 아쉬운 마음이고,<br>                         내년 생일에는 미리 미리 생일선물이나, 편지 준비해서<br>                         선물해줘야겠다^^<br>                         그래서 과제를 다음 날 아침에 하고 있다 ㅎㅎ 화이팅<br>                         <img src="i love you.jpg" width "200", height "200">                         <img src="29.jpg" width "200", height "200">                 </div>             </p3>     </body> </html> CSS body{   font-family: 'Gamja Flower', cursive;   background-color: beige; } .box1{   position: static;   font-size: 50px;   font-weight: bolder;   height: 100px;   text-align: center;   padding-top: 35px;   background-color: rgb(131, 83, 64); } .box2{   position: relative;   font-size: 150%;   margin-top: 8px;   width: 210px;   height: 1000px;   background-color: rgb(200, 214, 197); } .box3{   position: static;   font-size: 20px;   height: 1500px;   margin-top: 8px;   margin-left: 220px;   padding: 50px;   background-color: rgb(159, 202, 146); }
wocl123
2022.01.18
@wocl123님이
[HTML+CSS(1)]6일차 과제
포스트에 댓글을 남겼습니다.
wocl123
2022.01.18
@wocl123님이
[HTML+CSS(1)]6일차 과제
포스트를 좋아합니다.
hyedal95
2022.01.17
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)]6일차 과제
✅ 오늘의 문제 : 나만의 음원 차트 만들기! 결과물 HYML <!DOCTYPE html> <html lang="kor">     <head>         <title>나만의 음원차트 만들기</title>         <meta charset="UTF-8">         <link rel="stylesheet" href="6day.css"/>         <abbr>hyedal's 음원차트 TOP5</abbr>     </head>     <body>         <h1>&#128266;hyedal's의 음원 차트&#127925;</h1>         <br>         <div class="box">            1. 피에스타 - 아이즈원<button> <a href="https://youtu.be/eDEFolvLn0A" target="blank"> 노래 들으러 가기</a> </button>         </div>         <div class="box">             2. 고양이가 되고 싶어 - 아이즈원 <button> <a href="https://youtu.be/g7WzZ6SwVsU" target="blank"> 노래 들으러 가기</a> </button>         </div>         <div class="box">             3. I - 태연 <button> <a href="https://youtu.be/4OrCA1OInoo" target="blank"> 노래 들으러 가기</a> </button>         </div>         <div class="box">             4. 사계 - 태연 <button> <a href="https://youtu.be/4HG_CJzyX6A" target="blank"> 노래 들으러 가기</a> </button>         </div>         <div class="box">             5. Can't Control Myself - 태연 <button> <a href="https://youtu.be/RccDIpx4ZMM" target="blank"> 노래 들으러 가기</a> </button>         </div>     </body> </html> CSS코드 .box{     background-color: rgb(255, 209, 6);     font-size: 25px;     font-weight: bolder;     padding: 5px 150px;     margin: 20px 30px; } abbr{     font-size: 15px;     color: lightgrey; } div{     width:500px;     height:40px; } h1{     width:500px;     height:50px;     padding: 5px 100px;     margin: 5px 50px; } body{     padding: 15px; }
hyedal95
2022.01.14
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)]5일차 과제
✅ 오늘의 문제 : 4일차 과제에 디자인 추가하기 결과물 ->느낀점: 폰트 최소2개 이상을 <head> 안에 넣을 때, css에는 어떤 식으로 넣어야 구분구분 제가 예를 들어서 h1의 글자만 다른 폰트를 사용하고자 할 때 어떻게 해야하는지 몰라서 ㅜㅜ 우선 html코드만 넣었습니다. 혹시나 아시는 분 계시면 알려주세요 ㅠㅠ 코드(HTML) <!DOCTYPE html> <html lang="ko">     <head>             <meta charset="UTF-8">         <title>오늘의 문제 : 좋아하는 유튜브 소개하기</title>         <link rel="stylesheet" href="./style.css"/>         <style>             @import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');             </style>         <style>              @import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');              </style>     </head>     <body>         <div class="main">             <div class="main-div">                 <h2 class="main-title">살아가듯 여행하는 </h2>             </div>             <div class="main-content">         <h1>              <span>원</span><span>지</span><span>의</span><span>하</span><span>루</span> *         </h1><br>         <br>살아가듯 여행하는 원지의 하루</br>         <h4><br> <추천이유> </br></h4>         <h5> 룸메의 추천으로 보기 시작했는데, 다른 여행유튜버들과 다르게 <br>             굉장히 살아가듯 여행하는 모습에<br>             매력을 느꼈고, 중간 중간 튀어나오는 문장줄이기,<br>             영단어 몇 개만 간단간단하게 사용하는데 현지에서<br>             소통에 문제없이 여행을 다니는 모습이 굉장히 영어회화에 용기를 주고,<br>             여행을 못가는 시점에서 대리만족을<br>             하게끔 도와주는 채널이다. <br>                   <a href="https://www.youtube.com/c/WonjiLeeLife" target="_blank">📺원지의 하루TV</a>             <img src="원지의 하루.png">     </body> CSS코드 body {     text-align: center;     font-family: 'Nanum Brush Script', cursive; } h1 {     color: red;     background-color: yellow; } h1 span:nth-child(1) {     color : red; } h1 span:nth-child(2) {     color : orange; } h1 span:nth-child(3) {     color : yellow; } h1 span:nth-child(4) {     color : green; } h1 span:nth-child(5) {     color : rgb(7, 10, 136); } h2 {     color:blue;     background-color:yellowgreen;     text-shadow: none;     text-decoration: double; }  span {       background-color: lightblue;      }             div {                 background-color: white;             }           </style>
hyedal95
2022.01.13
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)] 4일차 과제
✅ 오늘의 문제 : 3일차 퀴즈에 디자인 추가하기 HTML코드 <!DOCTYPE html> <html lang="ko">     <head>             <meta charset="UTF-8">         <title>오늘의 문제 : 좋아하는 유튜브 소개하기</title>         <link rel="stylesheet" href="./style.css"/>     </head>     <body>         <div class="main">             <div class="main-div">                 <h2 class="main-title">살아가듯 여행하는 </h2>             </div>             <div class="main-content">         <h1>              <span> *원지의 하루* </span>         </h1><br>         <br>살아가듯 여행하는 원지의 하루</br>         <h4><br> <추천이유> </br></h4>         <h5> 룸메의 추천으로 보기 시작했는데, 다른 여행유튜버들과 다르게 <br>             굉장히 살아가듯 여행하는 모습에<br>             매력을 느꼈고, 중간 중간 튀어나오는 문장줄이기,<br>             영단어 몇 개만 간단간단하게 사용하는데 현지에서<br>             소통에 문제없이 여행을 다니는 모습이 굉장히 영어회화에 용기를 주고,<br>             여행을 못가는 시점에서 대리만족을<br>             하게끔 도와주는 채널이다. <br>                   <a href="https://www.youtube.com/c/WonjiLeeLife" target="_blank">📺원지의 하루TV</a>             <img src="원지의 하루.png">     </body> CSS코드 body {     text-align: center; } h1 {     color: red;     background-color: yellow; } h2 {     color:blue;     background-color:yellowgreen;     text-shadow: none;     text-decoration: double; }  span {       background-color: lightblue;      }             div {                 background-color: white;             }           </style>
hyedal95
2022.01.12
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)] 3일차 과제
✅ 오늘의 문제 : 좋아하는 유튜브 소개하기 코드 <!DOCTYPE html> <html lang="ko">     <head>             <meta charset="UTF-8">         <title>오늘의 문제 : 좋아하는 유튜브 소개하기</title>         <style>             span {               background-color: lightblue;             }             div {                 background-color: yellow;             }           </style>     </head>     <body>         <h2>             <div> 살아가듯 여행하는</div>         <h1>              <span> *원지의 하루* </span>         </h1><br>         <br>살아가듯 여행하는 원지의 하루</br>         <h4><br> <추천이유> </br></h4>         <h5> 룸메의 추천으로 보기 시작했는데, 다른 여행유튜버들과 다르게 <br>             굉장히 살아가듯 여행하는 모습에<br>             매력을 느꼈고, 중간 중간 튀어나오는 문장줄이기,<br>             영단어 몇 개만 간단간단하게 사용하는데 현지에서<br>             소통에 문제없이 여행을 다니는 모습이 굉장히 영어회화에 용기를 주고,<br>             여행을 못가는 시점에서 대리만족을<br>             하게 도와주는 채널이다. <br>                   <a href="https://www.youtube.com/c/WonjiLeeLife" target="_blank">📺원지의 하루TV</a>             <img src="원지의 하루.png">     </body>
hyedal95
2022.01.11
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)]2일차 과제
✅ 오늘의 문제 : 좋아하는 노래 소개하기 이미지도 작게 삽입하고 싶은데,,,캡처하기에는 잘리네요 ㅠㅠ <!DOCTYPE html> <html lang="ko">     <head>             <meta charset="UTF-8">         <title>오늘의 문제 : 좋아하는 노래 소개하기</title>     </head>     <body>         <h1>고양이가 되고 싶어</h1>         <h5>노래 / IZ*ONE(아이즈원)/2019.04.01</h5>         <img src = "https://w.namu.la/s/65bd661417a116ea4e9c5d841df2472b19bb11543e22def938227cceacaa4e9e93143ea9cd8ec9c9a682b94637e167ae51f2f2af95716962dee7a735223b27435d9dc11e2192e212b583b7ab13933ce301b22b44f4b95bb19ce884d3b7601114f71f3fadb4be6505c0354730d22bdc1c">         <h6>출처-나무위키</h6>         <h5>             난 지금 이대로가 좋아 Woo<br>             창밖의 시선 따윈 필요 없잖아<br>             이 순간 내가 원하는 걸 좀 더 꿈꿀래<br>             내 안에 나를 더 알고 싶어<br>             I wanna be a cat*3<br>             아늑한 소파 위로<br>             쏟아지는 아침 햇살이<br>             포근한 이불 속을<br>             계속 뒹구르게 해<br>             잔잔히 흐르는 느긋한 이 시간<br>             속에서 나는 매일 새로운 꿈을 꿔<br>             천천히 흐르는 여유로운 일상 지금 이 시간이 난 좋아<br>             지나간 이 시간은 두 번 다시 돌아오지 않아<br>             아무도 신경 쓰지 마 이 순간 오직 너에게만<br>             난 지금 이대로가 좋아 Woo<br>             창밖의 시선 따윈 필요 없잖아<br>             이 순간 내가 원하는 걸 좀 더 꿈꿀래<br>             내 안에 나를 더 알고 싶어<br>             I wanna be a cat<br>             You know, alright? Woo<br>             You know, alright? Oh<br>             You know, alright? Hey<br>             About yourself<br>             About yourself<br>             I know, alright? Woo<br>             I know, alright? Oh<br>             I know, alright? Hey<br>             About myself<br>             About myself<br>             I wanna be a cat<br>             I wanna be a cat<br>         <a href="https://youtu.be/g7WzZ6SwVsU" title="고양이가 되고 싶어">             <button>>> 노래 들으러 가기</button>         </a>         </h5>     </body> </html>
hyedal95
2022.01.10
@hyedal95님이 새 포스트를 작성했습니다.
[HTML+CSS(1)]1일차 과제
✅ 오늘의 문제 : 태그에 대해 조사하기   태그 h1, h2… h6: 제목을 표기할 때 <html></html>: html를 작성하기 위한 첫 단계. 이 틀 안에 코드를 작성하면 된다. <head></head>: 브라우저 내 표시되지는 않지만, 속성 및 외부링크를 가진다. <body></body>: 브라우저 내 표시되는 코드 <title></title> : 브라우저 상단에 노출되는 제목 <p></p>: 문단을 표기할 때 <br></br>: 줄바꿈 요소, block요소는 자동으로 줄바꿈이 됨으로 인라인 요소 대상으로 사용한다. <strong></strong>: 강조를 할 때 사용한다. =<b></b> <button></button>: 클릭 버튼을 만들 때 사용한다. <div></div>: 블록 요소를 만들 때 사용한다. (폭과 높이를100% 채운다) <span></span>: 인라인 요소를 만들 때 사용한다. <img>: 이미지를 삽입할 때 사용한다. Src 속성이 필수로 필요하다.