탐색
가이드
@wopr123
전체 보기
프로젝트
포스트
팔로잉
스크랩
전체 보기
프로젝트
포스트
팔로잉
스크랩
프로젝트 히스토리
프로젝트 상세 페이지
타임라인
리스트
2022.02.23
@wopr123님이 새 포스트를 작성했습니다.
15일차 구글 클론 코딩 ②
HTML <!DOCTYPE html> <html lang="ko"> <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 href="구글 큰론코딩.css" rel="stylesheet"> </head> <body> <div class="ssd"> <div class="name"> <span>C</span><span>r</span><span>e</span><span>a</span><span>m</span> </div> </div> <div class="td"> <div class="serd"></div> <form action="https://www.google.com/search" method="GET"> <input name="q" type="text" class="내용" placeholder="Google 검색 또는 URL 입력" aria-label="Recipient's username" aria-describedby="button-addon2"> <img class="sd"img src="C:\coding\사진\web html용 사진\ssd.jpg" alt="sd"> </form> </div> <div class="sectionthree"> <button type="button" class="sectionthree">Cream 검색</button> <button type="button" class="sectionthree">I'm a developer</button> </body> </html> CSS body{ background-color: white; } .ssd{ position:relative; width:100%; height:300px; } span { display: inline-block; text-align: center; font-size:90px; font-family: 'Inter', sans-serif; } span:nth-child(1) { color : rgb(0, 38, 255); } span:nth-child(2) { color : rgb(255, 0, 0); } span:nth-child(3) { color : rgb(241, 241, 76); } span:nth-child(4) { color : rgb(38, 0, 255); } span:nth-child(5) { color : rgb(50, 233, 89); } .Container{ display: flex ; flex-direction: row ; flex-wrap: wrap ; justify-content: space-evenly; align-items: center; } .box{ width: 50px; } .name{ position:relative; text-align: center; top:160px; } .td{ position:relative; width:100%;height:90px; display: flex; justify-content: center; } input{ position:relative; margin:10px; height: 40px; width: 400px;top:2px; display: flex; justify-content: center; border: white; font-size: inherit; font-family: inherit; } .serd{ margin:10px; position:absolute; height: 44px; border: 1px solid #dfe1e5; border-radius: 24px; width: 548px; } .sd{ position:relative; height:42px;width:42px;right:40px;bottom:50px; } .sectionthree{ font-family: Apple SD Gothic Neo,arial,sans-serif; font-size: 14px; margin: 11px 4px; padding: 0 16px; line-height: 27px; height: 36px; min-width: 54px; margin-top: -1.5%; margin-right: -14%; margin-left: 15.9%; border-radius: 5px; background-color: f9f9fa; border: 0; padding: 2% 4%; } 사진첨부 참고사항 원래는 바로가기로 할려했는데 구글을 보니 위에 처럼 돼있더라구요. 그래서 저렇게 만들었습니다. 더 할려다 귀찮아서 안했어요.;;
2022.02.22
@wopr123님이 새 포스트를 작성했습니다.
14일차 구글 클론 코딩 ①
HTML 코드 <!DOCTYPE html> <html lang="ko"> <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 href="구글 큰론코딩.css" rel="stylesheet"> </head> <body> <h1><span>C</span><span>r</span><span>e</span><span>a</span><span>m</span></h1> <form action="https://www.google.co.kr/search?p=" method="get"> <input name="p" type="text"> </form> <div class="Container"> <a href="https://www.naver.com/" target="_box" class="box"> <div class="box">네이버</div></a> <a href="https://www.youtube.com/" target="_box" class="box"> <div class="box">유튜브</div></a> <a href="https://www.google.co.kr/" target="_box" class="box"> <div class="box">구글</div></a> <a href="https://codemate.kr/" target="_box" class="box"> <div class="box">코드 메이트</div></a> <a href="https://cafe.naver.com/codeuniv" target="_box" class="box"> <div class="box">코뮤니티</div></a> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html> CSS코드 h1 { width: 50px; height: 50px; position: absolute; left: 46.9%; top: 20%; transform: translate(-50%, -50%); } span:nth-child(1) { color : rgb(0, 38, 255); } span:nth-child(2) { color : rgb(255, 0, 0); } span:nth-child(3) { color : rgb(241, 241, 76); } span:nth-child(4) { color : rgb(38, 0, 255); } span:nth-child(5) { color : rgb(50, 233, 89); } .Container{ display: flex ; flex-direction: row ; flex-wrap: wrap ; justify-content: space-evenly; align-items: center; } .box{ width: 50px; } 사진
2022.02.21
@wopr123님이 새 포스트를 작성했습니다.
13일차 과제
HTML <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>FLEXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXL</title> <link rel="stylesheet" href="C:\coding\HTML\모각코 HTML\FIex맛보기.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap'); </style> </head> <body> <H1>Cherish인증</H1> <div class="container"> <div class="box">안</div> <div class="box">녕</div> <div class="box">하</div> <div class="box">세</div> <div class="box">요</div> </div> </body> </html> CSS .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; } .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: rgb(0, 255, 0); } .box:nth-child(5){ background-color: rgb(38, 0, 255); } 사진 🚨참고사항🚨 움짤을 어케하는지 몰라서 스크린샷으로 했습니다.
2022.02.19
@wopr123님이 새 포스트를 작성했습니다.
12일차 과제
HTML <!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <body> <br> <form action="https://www.google.com/search" method="GET"> <input name="q" type="text"><button type="button" class="btn btn-primary">검색</button> </form> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html> css코드는 없어요.
2022.02.18
@wopr123님이 새 포스트를 작성했습니다.
11일차 과제
4일만 하면 끝이네요. 이걸 보시는분들은 힘내세요. CSS코드는 없습니다. HTML <!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>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" > <style> .b{ border: solid 1px rgb(0, 0, 0); } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-sm 1 b">좋아하는 게임 고르기 <button type="button" class="btn btn-primary">콜 오브 듀티</button> <button type="button" class="btn btn-outline-primary">배그</button> <button type="button" class="btn btn-primary">모던워십</button> </div> <div class="col-md2"></div> <div class="card" style="width: 18rem;"> <img src="C:\coding\사진\web html용 사진\구글플레이.jpeg" class="card-img-top" alt="구글플레이"> <div class="card-body"> <h5 class="card-title">게임하자~</h5> <p class="card-text">지금 좋아하는 게임을 고르고 게임을 하고싶다고요?<br>플레이 스토어로 바로 가자~~</p> <a href="https://play.google.com/store/games" class="btn btn-primary" target="_blank">플레이 스토어 바로가기</a> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </body>
2022.02.17
@wopr123님이 새 포스트를 작성했습니다.
10일차 과제
HTML <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>나만의 프로필 만들기</title> <style> @import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap'); </style> <link rel="stylesheet" href="나만의 프로필 만들기!.css"> </head> <body> <div class="profile"> <h1>자기소개하기</h1> <h2>이름:Cherish</h2><br> <img src="2DAD51C7-9DE0-4F9A-86A8-9708D3BDA9F7.jpeg" width="30%"><br> </div> <div class="contents"> <p> <h1>MBTI:INTP</h1><br> <h1>직업:중학생</h1><br> <h1>목표:코딩 마스터하기</h1><br> <h1>지금은 파이썬을 공부하고 있고 어서 마스터하는 것이 목표</h1><br> <h1>좌우명:Big goals get big results.(큰 목표가 큰 결과를 가져온다.)</h1><br> </p> </div> </body> </html> CSS .contents { text-align: center; line-height: 1.5 } .profile{ text-align: center; line-height: 1.5 } body{ background-color: rgb(174, 223, 124); font-family: 'Gugi', cursive; }
2022.02.17
@wopr123님이 포스트를 업데이트했습니다.
포스트
9일차 과제
2022.02.17
@wopr123님이 새 포스트를 작성했습니다.
9일차 과제
html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>나만의 프로필 만들기</title> <style> @import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap'); </style> <link rel="stylesheet" href="나만의 프로필 만들기!.css"> </head> <body> <div> <h1>자기소개하기</h1> <h2>이름:Cherish</h2><br> <img src="2DAD51C7-9DE0-4F9A-86A8-9708D3BDA9F7.jpeg" width="30%"><br> <h1>MBTI:INTP</h1><br> <h1>직업:중학생</h1><br> <h1>목표:코딩 마스터하기</h1><br> <h1>지금은 파이썬을 공부하고 있고 어서 마스터하는 것이 목표</h1><br> <h1>좌우명:Big goals get big results.(큰 목표가 큰 결과를 가져온다.)</h1><br> </div> </body> </html>
2022.02.14
@wopr123님이 새 포스트를 작성했습니다.
8일차과제
HTML코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>???</title> <link rel="stylesheet" href="C:\coding\모각코 HTML\민트.css"/> </head> <body> <div class="t1"> <div class="e1"></div> <div class="t2"> <div class="e2"></div> <div class="t3"> <div class="e3"></div> <div class="t4"> <div class="e4"></div> </div> </body> </html> CSS 코드 .t1{ width: 100px; height: 100px; background: rgb(0, 247, 255); } .e1{ width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; } .t2{ width: 100px; height: 100px; background: rgb(0, 247, 255); } .e2{ width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; } .t3{ width: 100px; height: 100px; background: rgb(0, 247, 255); } .e3{ width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; } .t4{ width: 100px; height: 100px; background: rgb(0, 247, 255); } .e4{ width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; } 참고사진 출처 : css position 속성을 이용하여 div 겹치는 방법 https://heinafantasy.com/62 처음에 눈사람 만들려다가 실패해서 이걸 만들었습니다.
2022.02.11
@wopr123님이 새 포스트를 작성했습니다.
7일차 과제
html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>cherish의 일기</title> <link rel="stylesheet" href="일기.css"/> <style> @import url('https://fonts.googleapis.com/css2?family=Gugi&family=Yeon+Sung&display=swap'); </style> </head> <body> <div class="box1">cherish의 일기</div> <div class="box2"><div class="box3"> <br>7일차까지 왔다<br>그만큼 내용의 난이도도 더 올라갔다.<br>전보다 더 열심히 공부해야겠다는 생각이 든다.<br>7일차가 끝나면 8일차다. 나는 아직까지 초보이다....<br> <br><img src="2DAD51C7-9DE0-4F9A-86A8-9708D3BDA9F7.jpeg"><br> </div> </body> </html> css body { text-align:center; font-family: 'Gugi', cursive; font-family: 'Yeon Sung', cursive; } img { width:70%; } .box1 { position:fixed; top:0; width:1280px; height:50px; background-color: lightgray; font-family: 'Nanum Myeongjo', serif; font-size:2em; font-weight:800; z-index:2; } .box2 { position:relative; top:70px; left: 380px; width:500px; height:1000px; background-color: rgb(202, 205, 209); } .box2 .box3 { position:absolute; top:10px; left:10px; width:480px; height:980px; background-color:lightgray; font-family: 'Nanum Myeongjo', serif; font-size:1em; font-weight:700; z-index:1; }
2022.02.08
@wopr123님이 새 포스트를 작성했습니다.
6일차과제
HTML코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Cherish차트</title> <style> @import url('https://fonts.googleapis.com/css2?family=Gugi&family=Yeon+Sung&display=swap'); </style> <link rel="stylesheet" href="C:\coding\모각코 HTML\좋아하는 노래 소개하기.css"/> </head> <body> <body>                                                                                Cherish음원차트 <div class="box2"> 1. ABCDEFU-GAYLE</div> <div class="box2"> 2. Burn The House Down-AJR </div> <div class="box2"> 3. Damn It Feels Good To Be Me-Andy Grammer </div> <div class="box2"> 4. Infinity-Jaymes Young </div> <div class="box2"> 5. Stereo Hearts-Gym class heroes </div> </body> </html> 중간에  이게많은이유는 아시죠? css코드 body{ font-family: 'Poor Story', cursive; font-size: x-large; } p{ font-family: 'Single Day', cursive; font-size: 200%; } div{ width: 600px; height: 50px; } .box2{background-color:tan;padding: 25px; margin:20px 20px 20px 725px; font-size: 30px; font-weight:lighter }
2022.02.07
@wopr123님이 새 포스트를 작성했습니다.
5일차과제
html코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>좋아하는 유튜브 소개하기</title> <link rel="stylesheet" href="유.css"> <body> <h1>지켜츄 알아보기</h1> <h5><span>이</span><span>름</span><span>:</span><span>김</span><span>지</span><span>우</span><span>(</span><span>활</span><span>동</span><span>명</span><span>:</span><span>츄</span>)</h5> <h6>출생 : 1999년 10월 20일<br></h6> <h6>유튜브 시작일: 2020월 11월 30일<br></h6> </span> <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAyMTdfMjg4%2FMDAxNjEzNTMxNTQ4MjIy.iViTlmCglo-hr_PEMj4l2T-Cn0_-G0GAvXyywyXUv8Ig.h1McZDI2DEZv1bE2A12ZVqJ4r5vEfhj98yold-scWs8g.PNG.math3377%2F%2528ENG%2529_%25C1%25A6%25B8%25F1%25C0%25BA_&type=sc960_832" alt="출처:네이버"> <br> <a href="https://www.youtube.com/channel/UChK2DhvPSG3sY0jIYYngVBA"><h3>유튜브 가기!!!</h3></a> </body> </head> </html> css코드 h1{ color: rgb(129, 96, 121); background-color: lightpink; font-family: 'Black Han Sans', sans-serif; font-family: 'Nanum Brush Script', cursive; } span:nth-child(1) { color : red; } span:nth-child(2) { color : orange; } span:nth-child(3) { color : yellow; } span:nth-child(4) { color : green; } span:nth-child(5) { color : lightblue; } span:nth-child(6) { color : blue; } span span:nth-child(7) { color : purple; } span:nth-child(8) { color: rgb(0, 0, 0); background-color: rgb(173, 232, 236); } span:nth-child(9) { color : red; } span:nth-child(10) { color : orange; } span:nth-child1(11) { color : yellow; } span:nth-child(12) { color : green; } span:nth-child(13) { color : lightblue; } h6{ color: rgb(174, 255, 255); font-family: 'Black Han Sans', sans-serif; font-family: 'Nanum Brush Script', cursive; font-family: 'Single Day', cursive; } h6{ color: rgb(143, 187, 226); font-family: 'Black Han Sans', sans-serif; font-family: 'Nanum Brush Script', cursive; font-family: 'Single Day', cursive; } 인증샷!!!!!!!!!!!
2022.02.06
@wopr123님이 새 포스트를 작성했습니다.
4일차과제
코드 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>좋아하는 유튜브 소개하기</title> <link rel="stylesheet" href="유.css"> <body> <h1>지켜츄 알아보기</h1> <span> </br> 이름 : 김지우(활동명: 츄)</br> 출생 : 1999년 10월 20일</br> 유튜브 시작일: 2020월 11월 30일</br> </span> <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAyMTdfMjg4%2FMDAxNjEzNTMxNTQ4MjIy.iViTlmCglo-hr_PEMj4l2T-Cn0_-G0GAvXyywyXUv8Ig.h1McZDI2DEZv1bE2A12ZVqJ4r5vEfhj98yold-scWs8g.PNG.math3377%2F%2528ENG%2529_%25C1%25A6%25B8%25F1%25C0%25BA_&type=sc960_832" alt="출처:네이버"> <br> <a href="https://www.youtube.com/channel/UChK2DhvPSG3sY0jIYYngVBA"><h3>유튜브 가기!!!</h3></a> </body> </head> </html> <!--css code--> h1{ color: rgb(129, 96, 121); background-color: lightpink; font-weight: bold; } span{ color: rgb(215, 154, 240); background-color: rgb(230, 191, 191); } h6{ color: rgb(0, 0, 0); background-color: rgb(173, 232, 236); }
2022.02.06
@wopr123님이 새 포스트를 작성했습니다.
3일차 과제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>좋아하는 유튜브 소개하기</title> <style> div { background-color: rgb(215, 154, 240); font-size: 30px; } span { background-color: rgb(235, 141, 206); font-size: 20px; } </style> </head> <body> <div>지켜츄 알아보기</div> <span> </br> 이름 : 김지우(활동명: 츄</br> 출생 : 1999년 10월 20일</br> 유튜브 시작일: 2020월 11월 30일</br> </span> <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAyMTdfMjg4%2FMDAxNjEzNTMxNTQ4MjIy.iViTlmCglo-hr_PEMj4l2T-Cn0_-G0GAvXyywyXUv8Ig.h1McZDI2DEZv1bE2A12ZVqJ4r5vEfhj98yold-scWs8g.PNG.math3377%2F%2528ENG%2529_%25C1%25A6%25B8%25F1%25C0%25BA_&type=sc960_832" alt="출처:네이버"> <br> <a href="https://www.youtube.com/channel/UChK2DhvPSG3sY0jIYYngVBA">지켜츄 유튜브 바로가기</a> </body> </html> 실행화면
2022.02.05
@wopr123님이 새 포스트를 작성했습니다.
2일차 과제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>좋아하는 노래 소개하기</title> </head> <body> <details> <p> <summary>제목 보기</summary> <h1>ABCDEFU-GAYLE</h1> </p> </details> <br> <details> <p> <summary>정보 보기</summary> <h4>노래 / GAYLE / 2021.08.13</h4> </p> </details> <br> <details> <p> <summary>사진 보기</summary> <img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTA4MjRfNTAg%2FMDAxNjI5NzkxMzM1NzMw.hRyGADBKEE8g8VAfGEjf9DAUaFWHnUc3OUupwBRHTFMg.9JVv93H48afVf9KTWEJWWS4VV6JlBl4cLWUv_lgta2cg.JPEG.raintaro%2F31.jpg&type=a340" width="600" height="450"> </p> </details> <br> <div> <details> <summary>노래 들으러 가기</summary> <a href="https://youtu.be/l0wZh6dXQbo">노래 들으러 가기</a> </details> <br> <details> <summary>가사 보기</summary> <p> Fuck you<br><br> and your mom<br><br> and your sister<br><br> and your job<br><br> and your broke ass car<br><br> and that shit you call art<br><br> fuck you<br><br> And your friends<br><br> that i'll never see again<br><br> everybody but your dog<br><br> you can all FUCK OFF<br><br> i swear i meant to mean the best<br><br> when it ended<br><br> even try to bite my tongue<br><br> when you start shit<br><br> now you're texting all my friends asking questions<br><br> they never even liked you in the first place<br><br> dated a girl that i hate for the attention<br><br> she only made it two days, what a connection<br><br> it's like you'd do anything for my affection<br><br> you're going all about it in the worst ways<br><br> i was into you but I'm over it now<br><br> and I was trying to be nice<br><br> but nothing's getting through so let me spell it out<br><br> a b c d e<br><br> f u<br><br> and your mom<br><br> and your sister<br><br> and your job<br><br> and your broke ass car<br><br> and that shit you call art<br><br> fuck you<br><br> And your friends<br><br> that i'll never see again<br><br> everybody but your dog<br><br> you can all fuck off<br><br> Nananananananana<br><br> a b c d e f u<br><br> You said you just needed space<br><br> and so i gave it<br><br> when I had nothing to say<br><br> you couldn't take it<br><br> told everyone i'm a bitch<br><br> so i became it<br><br> always had to put yourself above me<br><br> i was into you but I'm over it now<br><br> and I was trying to be nice<br><br> but nothing's getting through so let me spell it out<br><br> a b c d e<br><br> f u<br><br> and your mom<br><br> and your sister<br><br> and your job<br><br> and your craigslist couch<br><br> and the way your voice sounds<br><br> fuck you<br><br> And you friends<br><br> that i'll never see again<br><br> everybody but your dog<br><br> you can all fuck off<br><br> Nananananananana<br><br> a b c d e f off<br><br> Nananananananana<br><br> a b c d e<br><br> f u<br><br> and your mom<br><br> and your sister<br><br> and your job<br><br> and your broke ass car<br><br> and that shit you call art<br><br> fuck you<br><br> And your friends<br><br> that i'll never see again<br><br> everybody but your dog<br><br> you can all FUCK OFF<br><br> </p> </details> </div> </body> </html>
2022.02.03
@wopr123님이 새 포스트를 작성했습니다.
1일차 과제
1. <html>: 웹페이지의 시작과 끝 2. <head>: 웹 페이지의 정보, 문서에서 사용할 외부 파일들을 가져올 때 사용한다 3. <script>: 코드 삽입 4. <p>: 단락 5. <nav>: 문서 연결 링크