웹개발 종합반
웹개발 종합반 1주차
Won's log
2023. 4. 24. 15:29
오늘은 스파르타코딩에서 제공하는
[왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택) 1주차를 수강하였다
해당 강의는 국비지원이 가능한 웹개발 강의이다.
HRD-Net에서 확인가능하며
80%이상 수강을 하면 전액환급이 되는 것으로 알고 있다!
그리고 기간 내에 수강을 완료하면 평생 소장이 가능하다고 한다
총 5주차 강의로 이루어져 있으며
이며 비전공자들을 위한 웹개발 강의라고 할 수 있다
이번 게시물은 1주차 강의에 대한 개발일지이다!
스파르타코딩클럽에서 제공하는 웹개발 종합반 강의가 궁금하다면
참고해도 좋을 것 같다!
기대되고 기다리던 웹개발 종합반 1주차를 수강하였다.
대표적으로는 다음과 같이 배웠다.
1. 필수 프로그램 설치
- Visual Code
- VC에서 Live Server 사용하기
2. 강사님께서 강조하신 3문장
- HTML은 뼈대
- CSS는 꾸미기
- Javascripts는 움직이기
HTML은 뼈대
- 뼈대의 중심은 구역을 나누는 것
- div 태그 - 문단을 나누는 태그 = 구역!
- h1 - 큰 글씨, 문서의 제목
- span - 특정 글자를 감쌀 때
- 등등
CSS는 꾸미기
- 웹을 꾸민다
- 부트스트랩 컴포넌트 5.0 (https://getbootstrap.com/docs/5.0/components/buttons/)
Javascript는 움직이기
- 다음 주차에 배울 예정!
3. 알아두면 좋을 정보
폰트
- *은 모두 다 라는 뜻
- 무료로 폰트 다운로드 가능한 사이트: 구글웹폰트 (https://fonts.google.com/?subset=korean)
주석
- 개발자한테는 보이지만 컴퓨터에게는 보이지 않는 것
- /* font-family: 'IBM Plex Sans KR', sans-serif; */
- 주석은 CSS 또는 HTML에 따라 문법이 다름
- 단축키를 외우는 것이 용이
- /* */ ctrl+/
4. 내가 만든 웹페이지 배포하는 법
- Github 웹사이트 이용하기
정렬 예쁘게 하는 법
- 윈도우 : shift+alt+f
- Mac : shift+option+f
[느낀 점]
- 개발이 처음이라 나와 과연 잘 맞을까 걱정이 많았는데 막상해보니 재밌고 흥미가 더 생겼다
- 이론(공부)보다 실습이 제일 중요한 것 같다
- 나만의 정적 웹페이지(?)를 만들 수 있어서 자신감도 생기고 앞으로의 공부가 더 기대된다
아래는 드디어 만든 나만의 페이지다 >_<
https://letsgo-nation.github.io/mypage/
스파르타코딩클럽 | 부트스트랩 연습하기
영화URL 별점 -- 선택하기 -- ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ 코멘트 기록하기 닫기
letsgo-nation.github.io
<!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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: green;
color: white;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 이 네 줄은 같이 다닌다 */
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;
/* 위 세 가지 'background'는 많이 사용된다 */
}
.mytitle>button {
/* mytitle 아래 있는 버튼이라는 뜻 */
width: 250px;
height: 50px;
background-color: transparent;
border: 1px solid white;
/* 1px solid 실선이라는 뜻 */
color: white;
/* 폰트는 흰색 */
border-radius: 50px;
margin-top: 20px;
}
.mytitle>button:hover {
border-radius: 2px solid white;
}
.mycomment {
color: gray;
}
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
.mypost {
width: 500px;
margin: 20px auto 20px auto;
padding: 20px 20px 20px 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mybtn{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtn > button {
margin-right: 10px;
}
</style>
</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="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</label>
</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="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">영화 제목이 들어갑니다.</h5>
<p class="card-text">여기에 코멘트가 들어갑니다.</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">영화 제목이 들어갑니다.</h5>
<p class="card-text">여기에 코멘트가 들어갑니다.</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">영화 제목이 들어갑니다.</h5>
<p class="card-text">여기에 코멘트가 들어갑니다.</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">영화 제목이 들어갑니다.</h5>
<p class="card-text">여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>