그외/스파르톤 밤샘일지
2022.09.17_스파르톤 밤샘코딩 생존일지
<병아리>
2022. 9. 18. 00:06
23:00 시작
두근두근 오프닝 시작~
매니저 구름님이 간단하게 어떻게 진행되는지를 설명해 주셨다!
조별로 앉아서 자기소개도 하고 조이름도 정했다,
(별생각 없이 성공해조 라고 의견을 냈는데 이걸로 조이름이 결정되어서 내심 기분이 좋았다 ㅋㅋ)
웹개발 종합반을 다 들은 상태라 무료로 제공되는 스파르톤 무료강의를 듣기 시작했다
솔직히 무료라서 강의갯수가 적을줄알았는데 오늘 안에 다들을수 있을까 싶을정도로 갯수가 많았다!
듣다보니 웹개발 종합반과 겹치는 내용도 있었지만 복습한다고 생각하고 듣기로 했다.
시작은 VS studio로 시작!!
24:00 본격적으로 강의듣기 시작!
시작은 가볍게 로그인페이지 만들기!!
한번 배웠던거라 그런지 아직까진 쉽고 재밌다.
한번더 복습하니 더 기억에 잘 남는 기분 !!
앞으로도 화이팅!!
* 브라우저 실행시 alt + B
*안쪽 여백 - padding
*바깥쪽 여백 - margin
01:00 벌써 시간이 이렇게?!
강의들으면서 하나씩 만들다 보니 시간가는줄 몰랐다
벌써 시작한지 2시간이 흘렀다니..
우선은 로그인 페이지를 완성하였다!
< HTML, CSS 시작하기 - 로그인 페이지>
<!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>
.mytitle{
background-image: url('https://static.spartacodingclub.kr/media/main_carousel/1kq0i51tuqc2kfzp.png');
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 250px;
color: white;
border-radius: 10px;
}
.wrap {
width: 300px;
margin: auto;
}
.mybtn {
background-color: brown;
color : white;
border-radius: 10px;
border : none;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h3>코딩의 시작, 딩동코딩</h3>
</div>
<p>ID : <input type="text"></p>
<p>PW : <input type="password"></p>
<button class="mybtn">로그인하기</button>
</div>
</body>
</html>이부분은 웹개발에서도 해본적 있었지만
그때는 파이참으로 했었는데 이번에는 vs studio로 하니까 뭔가 색다른 기분이 든다
남은 강의도 화이팅!!
<CSS : 활용하기 - 띵동코딩 메인페이지 클론코딩>
<!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>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* {
font-family: "Pretendard",serif;
}
.wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
margin: 70px auto auto auto;
padding: 80px 50px 50px 50px;
border: 1px solid lightgray;
border-radius: 8px;
}
.wrap > img {
width: 90px;
height: 46px;
margin-bottom: 30px;
margin-right: auto;
}
.wrap > p {
font-size: 24px;
color: #26343d;
margin-right: auto;
line-height: 1.5;
margin-top: 10px;
}
.wrap > button {
width: 320px;
height: 60px;
border-radius: 8px;
border: none;
background-color: #ffe237;
cursor: pointer;
color: #1c1d1e;
font-size: 16px;
font-weight: bold;
margin-top: 50px;
margin-bottom: 25px;
}
.wrap > span {
color: #26343d;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<img src="https://ddingdong.spartacodingclub.kr/images/common/logo-tb.svg">
<p>
매주 월요일,<br>
내 강의실에 찾아오는<br>
코딩 학습지
</p>
<button>카카오로 1초만에 시작하기</button>
<span>이메일로 시작하기</span>
</div>
</body>
</html>이번에는 처음 배워보는 부분이라 새로웠다.
간단한 코드로 이렇게 실제 있는 페이지와 거의 유사하게 만들수 있어서 신기했다.
02:00 잠깐 쉬는타임- ox 게임
잠깐 잠도 깰겸 ox퀴즈가 시작되었는데 3번 문제에서 탈락 ㅠㅠ
그래도 확실히 잠은 깼다. 이걸 시작으로 다시한번 불태워 보자!!
03:00 아직까진 버틸만해!
<HTML,CSS 복습하기- 청첩장 만들기>
<!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">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
<title>청첩장</title>
<style>
* {
font-family: 'IBM Plex Sans KR', sans-serif;
}
body, h1, h2, h3, p, a {
font-size: 16px;
margin: 0px;
padding: 0px;
text-decoration: none;
font-weight: normal;
}
.wrap {
width: 350px;
margin: auto;
}
h1 {
font-size: 16px;
padding: 16px;
color: white;
background-color: pink;
font-weight: 500;
}
.pic {
color: pink;
letter-spacing: 3px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 250px;
margin: 30px auto;
}
.pic > img {
width: 250px;
border: 3px solid pink;
margin: 10px;
}
.name {
width: 200px;
margin: auto;
font-size: 24px;
font-weight: 500;
border-top: 1px solid pink;
border-bottom: 1px solid pink;
color: pink;
text-align: center;
}
.main {
background-color: pink;
color: white;
margin-top: 30px;
margin-bottom: 30px;
padding: 20px;
}
.title {
font-size: 20px;
text-align: center;
}
.msg {
margin-top: 40px;
margin-bottom: 40px;
line-height: 30px;
}
.place {
text-align: center;
}
.bottom {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bottom > p {
color: pink;
font-weight: 500;
margin-bottom: 10px;
}
.bottom > input {
width: 250px;
margin-bottom: 10px;
}
.bottom > textarea {
width: 250px;
height: 100px;
margin-bottom: 10px;
}
.bottom > button {
width: 150px;
height: 40px;
border-radius: 8px;
border: none;
background-color: pink;
color: white;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="wrap">
<h1>영희와 철수의 첫 시작을 축하해주세요</h1>
<div class="pic">
<h2>Save The Date</h2>
<img src="wedding.png">
<span>12.31.SUNDAY.PM.12:30</span>
</div>
<div class="name">
김영희 & 이철수
</div>
<div class="main">
<p class="title">INVITATION</p>
<p class="msg">
서로 다른 두 사람이 만나 <br/>
사랑으로 하나 되는 자리에 <br/>
소중한 여러분들을 초대합니다. <br/>
기쁠 때나, 슬플 때나 <br/>
서로를 사랑으로 품으며 <br/>
행복의 계단을 쌓아가겠습니다. <br/>
저희의 첫 시작을 함께 해주신다면 <br/>
감사한 마음 깊이 간직하며 잘 살겠습니다.
</p>
<p class="place">
2023. 12. 31. SUN. PM 12:30<br/>
스파르타웨딩 르탄홀
</p>
</div>
<div class="bottom">
<p>축하메시지를 남겨주세요</p>
<input type="text" placeholder="이름">
<textarea placeholder= "메시지를 남겨주세요"></textarea>
<button>메시지 남기기</button>
</div>
</div>
</body>
</html>모바일 청첩장이 어떤식으로 만들어 지는지 대략적으로 알수있었다.
다음에 내가 결혼하게 되면 내청첩장은 내가 직접 만들수 있을꺼 같은 자신감이 든다.
스파르타 코딩은 실제로 활용 할 수 있는 코딩을 알려주어서 참 좋은것 같다.
04:00 슬슬 졸리기 시작,,
<부트스트랩- 인스타그램>
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<title> 띵동코딩-부트스트랩_인스타그램</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
* {
font-family: 'Noto Sans KR', sans-serif;
}
body,h1,h2,h3,p,a {
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}
.name {
font-size: 12px;
color: gray;
margin-bottom: 5px;
}
.title {
font-size: 14px;
}
.wrap {
width: 300px;
margin: 20px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card-text {
font-size: 14px;
}
.user {
font-size: 14px;
font-weight: 500;
}
.card-body > input {
border: none;
font-weight: normal;
margin-top:10px;
}
.icons {
margin-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.icons > .bi-suit-heart {
margin-right: 10px;
}
.icons > .bi-chat {
margin-right: 10px;
}
.icons > .bi-send {
margin-right: auto;
}
.card-body > input {
border: none;
font-weight: normal;
margin-top:10px;
}
.me {
width: 280px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 5px;
margin-bottom: 5px;
}
.me > img {
width: 25px;
height: 25px;
border-radius: 100%;
margin-right: 10px;
}
.me > span {
margin-right: auto;
font-size: 14px;
font-weight: 500;
}
</style>
</head>
<body>
<div class="wrap">
<h1 class="name">SKUUKZKY</h1>
<p class="title">게시물</p>
<div class="me">
<img src="http://www.naewoeilbo.com/news/photo/202110/414285_189601_940.png">
<span>SKUUKZKY</span>
<i class="bi bi-three-dots"></i>
</div>
<div class="card" style="width: 18rem;">
<img src="http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2021/10/18/a706569b-e8db-4c05-bbd1-2c48a53a0f2f.jpg" class="card-img-top" alt="...">
<div class="card-body">
<div class="icons">
<i class="bi bi-suit-heart"></i>
<i class="bi bi-chat"></i>
<i class="bi bi-send"></i>
<i class="bi bi-bookmark"></i>
</div>
<p class="card-text">1500명이 좋아합니다</p>
<p class="user">SKUUKZKY</p>
<input class="form-control form-control-sm" type="text" placeholder="...댓글달기" aria-label=".form-control-sm example">
</div>
</div>
</div>
</body>
</html>이번에는 수지의 인스타그램을 따라 만드는 것을 해보았다
평소에도 자주 보는 페이지를 만드는 과정이 재미있었다
특히나 유용한 사이트를 발견한것 같아서 좋다.
* 부트스트랩
Bootstrap
세계에서 가장 인기있는 HTML, CSS, JS 라이브러리.
getbootstrap.kr
* 부트스트랩-아이콘
https://icons.getbootstrap.com/icons/three-dots/
Three dots
Official open source SVG icon library for Bootstrap
icons.getbootstrap.com
앞으로도 유용하게 쓸수 있을것 같다!
이제 두시간이 채 남지 않았는데 마지막까지 불태워 보자!!
05:00 이제 한시간 남았다!!
5시라는 늦은 시간에도 다들 열심히 하는걸 보니 나도 의지가 불탄다!!
남은 강의수도 2개 마지막 까지 불태워 보자!!
<부트스트랩 활용하기- 파타고니아 클론코딩>
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<title>띵동코딩-부트스트랩_파타고니아</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
* {
font-family: 'Noto Sans KR', sans-serif;
}
body,h1,h2,h3,p,a {
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}
.up {
background-color: #500778;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.up > a:first-child {
margin-left: auto;
}
.up > a:last-child {
margin-right: 20px;
}
.up > a {
margin-right: 15px;
color: white;
}
.up > span {
color: white;
margin-right: 15px;
}
.down {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 70px;
}
.down > .icons {
margin-left: auto;
}
.down > img {
width: 130px;
margin-left: 20px;
}
.down > a {
margin-left: 80px;
font-weight: 900;
color: black;
}
.down > form {
margin-left: 80px;
width: 500px;
}
.down > .icons > i {
margin-right: 20px;
font-size: 24px;
}
.main > img {
width: 100%;
}
.items {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
padding: 30px;
}
.list-group > span {
font-size: 25px;
margin-left: 15px;
}
.imgs {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
margin-left: 100px;
margin-right: auto;
}
.imgs > .card {
margin-right: 10px;
}
.items > select {
width: 120px;
}
</style>
</head>
<body>
<div class="gnb">
<div class="up">
<a href="#">Climate Goals</a>
<a href="#">푸른 심장</a>
<a href="#">Worn Wear</a>
<span>|</span>
<a href="#">더보기</a>
</div>
<div class="down">
<img src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/patagonia_main_logo.png">
<a href="#">SHOP</a>
<a href="#">INSIDE PATAGONIA</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
</form>
<div class="icons">
<i class="bi bi-question-circle-fill"></i>
<i class="bi bi-person-fill"></i>
<i class="bi bi-cart-fill"></i>
</div>
</div>
</div>
<div class="main">
<img src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/patagonia_main_banner.png">
</div>
<div class="items">
<ul class="list-group list-group-flush">
<span>WOMEN'S</span>
<li class="list-group-item">신상품</li>
<li class="list-group-item">재킷 & 베스트</li>
<li class="list-group-item">플리스</li>
<li class="list-group-item">스웨트셔츠 & 후디</li>
<li class="list-group-item">셔츠</li>
<li class="list-group-item">티셔츠</li>
<li class="list-group-item">팬츠 & 레깅스</li>
<li class="list-group-item">모자 & 액세서리</li>
</ul>
<div class="imgs">
<div class="card" style="width: 18rem;">
<img src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/patagonia_item_1.png"
class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">
<span>Women Stand Up Overalls</span></br>
<span>₩159,000</span>
</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/patagonia_item_2.png"
class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">
<span>Women Ridge Flow Shirt</span></br>
<span>₩89,000</span>
</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/patagonia_item_3.png"
class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">
<span>Women All Seasons Hemp Canvas Shorts</span></br>
<span>₩119,000</span>
</p>
</div>
</div>
</div>
<select class="form-select" aria-label="Default select example">
<option selected>상품정렬</option>
<option value="1">최신순</option>
<option value="2">낮은가격순</option>
<option value="3">높은가격순</option>
</select>
</div>
</body>
</html>
06:00 드디어 완주 완료!!!
조금 피곤하긴 했지만 너무 즐거운 시간이였던것같다.
하루만에 짧게라도 목표한 바를 다 이룰수 있다는 것이 매우 큰 메리트 인것같다.
혼자였다면 아마 피곤하다고 포기할수도 있었을텐데 다른 사람들도 있는것을 직접 볼수있고
그것으로 더 힘내자! 하는 동기부여가 된것같다.
내년에도 개최한다면 꼭 참여하고싶다.
