코딩 이야기
스파르타 코딩 웹 개발 일지 1주차
oozoobigstar
2022. 9. 16. 17:42
반응형
이제 막 1주차를 끝냈다😎
이건 1주차 수업 때 만든 전부!
타이틀 뒤 배경이 상당히 마음에 들고 부트캠프라는 걸 알게 되어 정말 기쁘다.
아무래도 css는 보이는 결과가 있어서 만들고 나면 참 마음이 뿌듯하다.
하지만 나는 프론트 엔드 보다는 백엔드가 더 좋다. 내가 직접 만들어 내는 게 더 좋기 때문!
하지만 기록은 아직 안 된다는 거...
아마 자바스크립트를 배우면 할 수 있지 않을까,,?
이건 1주차 수업 동안 배운 코드들이다.
코드는 다 이렇게 재활용하는 거니까 여기다 올림으로서 다음에 도움이 되지 않을까 생각한다.
중간에 데이터가 껴있어서 그런지 상당히 길다. 그러므로 빠르게 쭉쭉 넘기시길!
이런 데이터들은 따로 빼내는 게 역시 좋은 것 같기는 하다.
생활코딩에서 미리 배웠기에 다른 방법이 있다는 걸 아는 내 모습에 참 뿌듯하다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타 피디아</title>
<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
height: 250px;
width: 100%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 10px;
}
.mytitle > button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.mycards {
max-width: 1200px;
width: 95%;
margin: 20px auto 0px auto;
}
.mypost{
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 3px gray;
padding: 20px;
}
.mybtn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.mybtn > button {
margin-right: 10px;
}
</style>
<script>
let mise_list = [
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 22,
PM25: 14,
O3: 0.018,
NO2: 0.015,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "종로구",
PM10: 24,
PM25: 18,
O3: 0.013,
NO2: 0.016,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "용산구",
PM10: 0,
PM25: 15,
O3: 0.012,
NO2: 0.027,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "점검중",
IDEX_MVL: -99,
ARPLT_MAIN: "점검중",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "은평구",
PM10: 36,
PM25: 14,
O3: 0.019,
NO2: 0.018,
CO: 0.5,
SO2: 0.005,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "서대문구",
PM10: 28,
PM25: 9,
O3: 0.018,
NO2: 0.015,
CO: 0.6,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "마포구",
PM10: 26,
PM25: 8,
O3: 0.012,
NO2: 0.021,
CO: 0.5,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 36,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "광진구",
PM10: 17,
PM25: 9,
O3: 0.018,
NO2: 0.016,
CO: 0.6,
SO2: 0.001,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "성동구",
PM10: 21,
PM25: 12,
O3: 0.018,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 33,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "중랑구",
PM10: 27,
PM25: 10,
O3: 0.015,
NO2: 0.019,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 34,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "동대문구",
PM10: 26,
PM25: 9,
O3: 0.016,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 34,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "성북구",
PM10: 27,
PM25: 8,
O3: 0.022,
NO2: 0.014,
CO: 0.5,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "도봉구",
PM10: 25,
PM25: 12,
O3: 0.024,
NO2: 0.011,
CO: 0.3,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "강북구",
PM10: 30,
PM25: 15,
O3: 0.022,
NO2: 0.02,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "노원구",
PM10: 21,
PM25: 14,
O3: 0.017,
NO2: 0.016,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 36,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "강서구",
PM10: 36,
PM25: 16,
O3: 0.021,
NO2: 0.013,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "구로구",
PM10: 23,
PM25: 10,
O3: 0.022,
NO2: 0.016,
CO: 0.3,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "영등포구",
PM10: 29,
PM25: 15,
O3: 0.01,
NO2: 0.022,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "동작구",
PM10: 29,
PM25: 15,
O3: 0.012,
NO2: 0.023,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "관악구",
PM10: 27,
PM25: 12,
O3: 0.012,
NO2: 0.022,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "금천구",
PM10: 25,
PM25: 15,
O3: 0.015,
NO2: 0.02,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 43,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "양천구",
PM10: 0,
PM25: 14,
O3: 0.016,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "점검중",
IDEX_MVL: -99,
ARPLT_MAIN: "점검중",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "강남구",
PM10: 31,
PM25: 16,
O3: 0.018,
NO2: 0.018,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "서초구",
PM10: 34,
PM25: 13,
O3: 0.024,
NO2: 0.019,
CO: 0.3,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "송파구",
PM10: 25,
PM25: 6,
O3: 0.014,
NO2: 0.025,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "강동구",
PM10: 24,
PM25: 14,
O3: 0.016,
NO2: 0.02,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM25",
},
];
for (let i = 0; i < mise_list.length; i++) {
if (mise_list[i]['IDEX_MVL'] < 40) {
console.log(mise_list[i]['MSRSTE_NM'])
}
}
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기🤔</button>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화 url</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>선택하기</option>
<option value="1">⭐️</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="3">⭐⭐⭐⭐</option>
<option value="3">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text"> add content </p>
<p>⭐⭐⭐</p>
<p class="mycomment"> 여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text"> add content </p>
<p>⭐⭐⭐</p>
<p class="mycomment"> 여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text"> add content </p>
<p>⭐⭐⭐</p>
<p class="mycomment"> 여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text"> add content </p>
<p>⭐⭐⭐</p>
<p class="mycomment"> 여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
수업을 들으면서 문제가 생겨서 질문을 남겨보기도 했다!
나는 주로 밤에 수업을 듣기 때문에 바로 답을 받기는 어렵다ㅜㅜㅜ
이 공부 시간을 바꾸어야 할 텐데 말이다...
이건 1주차 마지막 과제로 만들어 낸 페이지이다.
얼굴이 잘려서 잘 보이지 않는다..
저런 건 좀 조종해야 하는데 그 부분은 직접 해보지 않아서 아직은 잘 모르겠다...
저 부분은 그냥 복붙한 부분을 조금 고친 것 뿐이기 때문이다.
이건 코드!
나중에 도움이 될까 해서 한 번 올려본다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>서인국 팬 방명록</title>
<link href="https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&family=Nanum+Myeongjo&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
height: 300px;
width: 100%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("https://img.hankyung.com/photo/202106/20210622102525_60d13c05b04f0_1.jpg");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mycomment {
color: gray;
}
.mypost{
max-width: 500px;
width: 95%;
margin: 20px auto 20px auto;
box-shadow: 0px 0px 3px 3px black;
padding: 20px;
}
.mybtn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.mybtn > button {
margin-right: 10px;
}
.card {
width: 95%;
max-width: 500px;
margin: auto;
}
.mycards > .card {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>서인국 팬 방명록</h1>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
</div>
<div class="mycomment">
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">응원 남기기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class = "mycards">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>응원 한 마디!</p>
<footer class="blockquote-footer">팬 닉네임 <cite title="Source Title"></cite></footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>응원 한 마디!</p>
<footer class="blockquote-footer">팬 닉네임 <cite title="Source Title"></cite></footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>응원 한 마디!</p>
<footer class="blockquote-footer">팬 닉네임 <cite title="Source Title"></cite></footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>이전에도 코딩 수업을 들은 적은 있었다.
바로 생활코딩이라는 사이트를 통해 들었는데 여기는 전부 무료다.
무료라는 점 때문에 접근성이 좋다고 생각한다. 바로 도전해 볼 수 있기 때문이다.
어찌되었든 나는 결국에 코딩이 나의 꿈을 이루는데 꼭 필요한 게 있기 때문에 생활코딩으로 시작했다.
요건 사이트
https://opentutorials.org/course/1
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그
opentutorials.org
시작자에게는 이만큼 좋은 사이트가 없는 것 같다.
나는 여기서 html1 수업과 php수업, css수업을 듣고 자바스크립트 수업을 들을까 고민하면서 나 스스로 사이트도 만들려고 해봤는데, 시작하려 했을 때 어떻게 시작해야 하는 건지 전혀 감이 잡히지 않았다.
수업 자체는 너무나 재미있고 따라가기 쉬웠다.
설명을 정말 잘해주시고 따라가기 쉽게 강의해주시기 때문이다.
하지만, 쉽기 때문에 정말 나 스스로 만들어야 할 때는 정작 큰 도움이 되지 않았다.
그래서 이 수업을 신청했다.
내가 직접적으로 돈을 지불하는 건 아니지만 어찌되었든 정부에서 돈을 지불하기는 하므로 유료 강의는 어떻게 다를지 너무나 궁금했고, 나는 한국에 들어가자마자 카드를 만들고 수업을 신청했다.
학기 중이기 때문에 먼저 들어놓고 나중에 한꺼번에 들으려고 하는데, 파이참이 그때 까지 되는지 잘 모르겠다.
내 기억으로는 4개월 정도 빌려주는 라이센스를 스파르타 코딩 팀으로부터 받은 것 같다.
이제막 1주차를 끝냈는데 유료는 역시 유료인건가..
생활코딩을 들으면서 가장 문제라고 생각했던 점은 물어볼 사람이 없다는 것이었다.
물어보고 싶은 게 있을 때마다 커뮤니티에 물어보거나 인터넷 상에서 찾는 것 뿐이었다.
주변에 아는 사람이 없었기 때문이다.
하지만 스파르타 코딩에는 물어볼 사람이 있었다.
게다가 나는 외국에 있는 사람으로서 오프라인 강의는 못 듣는데 온라인 강의라는 점도 마음에 들었고, 질문도 온라인으로 가능했다.
내가 주중에 질문을 올리면 정말 빠르게 답변을 받을 수 있다는 걸 다른 사람들이 질문하고 대답받는 걸 보며 직접 느꼈다.
물론 이런 장점도 있지만, 아무래도 왕초보다보니 영상 길이를 짧게 할려고 일부러 노력하신걸까?
대부분 10분 미만의 영상들이었는데 그러다보니 영상에서의 코딩 속도가 상당히 빨라서 멈추고 타이핑한 게 대부분이었다.
그리고 내 이해력이 문제인지는 모르겠지만 영상 템포가 빨라서 이해하려면 영상을 멈추고 나 혼자 다시 읽고 생각해야 했다.
설명 자체는 생활코딩의 설명이 더 좋다고 생각했다.
그나마 나는 한 번 다른 수업을 듣고 들은 수업이었는데도 이렇게 이해하려면 시간을 들여야 하는데 다른 사람들은 어떨지 궁금하기도 했다.
생활코딩과 스파르타코딩의 차이점은 내가 직접 해보는 기회가 주어지냐와 그걸 스스로 만드는 동안 그걸 물어볼 수 있는 사람이 있다는 점 같다.
1주 끝!
반응형