반응형
💡수업 목표💡
1. 서버와 클라이언트의 역할에 대해 이해한다.
2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
3. Javascript 기초 문법을 익힌다.
서버와 클라이언트의 역할
Client 컴퓨터 : 서비스를 이용하는 컴퓨터로써 사용자
Server 컴퓨터 : 서비스를 제공하는 컴퓨터
필수 프로그램 설치
파이참 (PyCharm) 설치하기
파이참(PyCharm)은 IntelliJ에서 만든 파이썬 개발에 가장 널리 사용되는 통합 개발 환경(IDE, Integrated Development Environment) 또는 개발 도구 입니다.
보통 VScode를 많이 사용하나 스파르타코딩클럽 웹개발종합반에서는 백엔드로 파이썬과 Django를 배우기 때문에 파이참을 사용한다.
(예전에 내가 파이썬 배울때는 eclipse를 썼었는데...)
파이참은 Community / Professinal 버전이 있는데 파이썬 개발이 필요한 기능을 사용할려면 아무래도 유료결제를 해야한다. 설치하면 7일간 Professinal버전을 무료 체험이 있지만 그 이상을 사용하려면 연간 89달러 정도를 지불해야한다..... 생각보다 가격이 나가는 편이다.
스파르타 코딩클럽에서는 웹개발 종합반을 수강하면 Professinal버전의 4개월 크레딧을 지원해준다👍
https://www.jetbrains.com/pycharm/download
Download PyCharm: Python IDE for Professional Developers by JetBrains
Download the latest version of PyCharm for Windows, macOS or Linux.
www.jetbrains.com
HTML, CSS, JS 기본
html, css, js의 기초 문법은 강의에서 다루지 않는다. 디테일한 부분은 W3School을 참조해서 필요한 부분이 있을때마다 그때그때 찾아가면서 사용하면된다.
물론 개발에 관한 모든것을 외우는 것도 좋지만, 그것보다 필요한 부분을 잘 찾아가면서 활용할 줄 아는게 개발에서 가장 큰 도움이 된다.
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
HTML(HyperText Markup Language)
: 뼈대
: 하이퍼텍스트,링크 / 마크업, 태그</> / 언어
: 웹 페이지의 구조를 기술하기 위한 마크업 언어, 문서
CSS(Cascading Style Sheets)
: 살
: 마크업 언어(HTML, XML 등)가 실제 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정하여 콘텐츠 구조를 꾸며주는 정적 언어
: 웹의 시각적인 표현을 담당
JS(JavaScript)
: 움직임
: HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 프로그래밍 언어 (≠ JAVA)
example : login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<style>
.myTitle{
background: darkgreen;
width: 300px;
height: 200px;
color: #fff;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 20px;
padding-top: 40px;
}
.wrap{
width: 300px;
margin: auto;
}
.mybtn{
padding: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="myTitle">
<h1>로그인페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요. </h5>
</div>
<form>
<p>ID: <input type="text" name="id"/></p>
<p>PW: <input type="text" name="pw"/></p>
<button type="submit" class="mbtn">로그인하기</button>
</form>
</div>
</body>
</html>
부트스트랩 Bootstrap
부트스트랩은 트위터에서 오픈한 반응형 모바일 우선 사이트를 구축하기위한 세계에서 가장 인기있는 HTML, CSS, JS 프레임 워크이다.
웹 페이지의 개발을 진행할때 를 바닥부터 하나하나 짜는 것 물론 좋지만, 시간도 오래걸리고 디테일한 것을 놓치기 쉽다. 하지만 부트스트랩에는 입력폼, 버튼, 아이콘 등 자잘한 것뿐만아니라 네비바, 메뉴, 탭, 리스트, 알림창 등 웹페이지에 많이 쓰이는 요소들 까지 전부 내장하고 있어서, 원하는 기능을 쉽게 삽입하고 재사용할 수 있다.
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
- 깔끔한 UI 라이브러리
- Twitter에서 개발한 깔끔한 UI
- 별도의 디자인 시안없이 빠른 생산성
- 웹에 기본적으로 필요한 UI 컴포넌트들이 다 구현되어 있어서 쉽게 화면 레이아웃 구성 가능
- 반응형 웹 기본 지원 ⭐
- 특히 그리드 시스템 을 이용한 다양한 디바이스 크기에 대응가능한 반응형 웹 개발이 가능
example : index.html
<!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>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.myTitle {
background-color: darkgreen;
width: 100%;
height: 250px;
color: #fff;
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;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.myTitle .mybtn {
width: 200px;
height: 50px;
background-color: transparent;
color: #fff;
border-radius: 50px;
border: solid 1px #fff;
margin-top: 10px;
}
.myTitle .mybtn:hover {
border: solid 2px #fff;
}
.wrap {
width: 95%;
max-width: 1200px;
margin: 20px auto 0px;
}
.myPost {
width: 95%;
max-width: 500px;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
margin: 20px auto;
}
.mybtn {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
.mybtn button {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="myTitle">
<h1>내 생애 최고의 영화들</h1>
<button class="mybtn" onclick="hey();">영화 기록하기</button>
</div>
<div class="myPost">
<div class="form-floating mb-3">
<input type="text" 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="wrap">
<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">This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
<p>⭐⭐⭐</p>
<p>여기 코멘트가 들어갑니다</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">This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
<p>⭐⭐⭐</p>
<p>여기 코멘트가 들어갑니다</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">This is a longer card with supporting text below as a natural lead-in to
additional content.</p>
<p>⭐⭐⭐</p>
<p>여기 코멘트가 들어갑니다</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">This is a longer card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
<p>⭐⭐⭐</p>
<p>여기 코멘트가 들어갑니다</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS 기초 문법
JS는 Html, CSS와 같은 마크업 언어와 다르게 프로그래밍 언어이다.
프로그래밍은 코딩을 포함하여 전반적으로 로직을 설계하는 작업을 말하는 거고 코딩은 프로그래밍 언어를 통해서 작성하는 행위이다.
HTML, CSS는 로직을 설계하는 부분이 아니다 보니 프로그래밍 언어라고 보기 어렵지만 지금부터 배울 JS는 프로그램 로직을 짜는데 사용되는 언어이다.
프로그래밍 언어를 처음 공부하게 될 때 기초 문법으로 꼭 알아야하는 5가지가 있다.
변수 / 자료형 / 조건문 / 반복문 / 함수. 이 5가지를 익힌다면 간단한 JS 코딩은 가능하게 된다.
변수
let 변수명; // 변수 선언
let 변수명 = 값; // 변수값 할당
자료형
//String 문자열
let s = "hello"
//Number 숫자
let num = 100;
//Boolean 불린형
let 변수 = true or false;
//Null 널
let a=null;
//undefined
let s; // undefined
//symbol 심볼
const symbol1 = Symbol();
const symbol2 = Symbol(42);
//object 객체
let 변수명 = [value1,value2,value3] //배열
let user = {}; //객체 생성
user{
이름 : 값,
name: "leehyunji",
password : "1234",
gender :"female"
};
조건문
// 기본 if문
if(조건식){
실행 문장 1;
}else{
실행 문장 2;
}
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else {
alert('청소년이에요')
}
}
is_adult(25)
// if ~ else if ~ else문
if(조건식1){
실행 문장 1;
}else if(조건식2){
실행 문장 2;
}else{
실행 문장 3;
}
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)
반복문
//for문
for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
//example
for (let i = 0; i < 100; i++) {
console.log(i);
}
함수
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
//example
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('숫자', num1, num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
HW01. 팬명록 메인페이지 만들기
<!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>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.myTitle {
background-color: darkgreen;
width: 100%;
height: 250px;
color: #fff;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://img.hankyung.com/photo/202205/03.30135835.1.jpg");
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wrap {
width: 95%;
max-width: 500px;
margin: 20px auto 0px;
}
.myPost {
width: 95%;
max-width: 500px;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
margin: 20px auto;
}
.mybtn {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="myTitle">
<h1>세븐틴 팬명록</h1>
</div>
<div class="myPost">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">닉네임</label>
</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>
</div>
</div>
<div class="wrap">
<div class="row row-cols-1 row-cols-md-1 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>사랑해요</p>
<footer class="blockquote-footer">캐럿</footer>
</blockquote>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>사랑해요</p>
<footer class="blockquote-footer">캐럿</footer>
</blockquote>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>사랑해요</p>
<footer class="blockquote-footer">캐럿</footer>
</blockquote>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>사랑해요</p>
<footer class="blockquote-footer">캐럿</footer>
</blockquote>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>사랑해요</p>
<footer class="blockquote-footer">캐럿</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
반응형
'스파르타코딩클럽 > 웹개발' 카테고리의 다른 글
| 웹개발종합반 개발일지 | 2주차 - 6,7,8,9,10,11강 (0) | 2022.08.16 |
|---|---|
| 웹개발종합반 개발일지 | 2주차 - 1,2,3,4,5강 (0) | 2022.08.16 |
| 웹개발종합반 개발일지 | 1주차 - 숙제 (0) | 2022.08.12 |
| 웹개발종합반 개발일지 | 1주차 - 12,13,14,15,16강 (0) | 2022.08.11 |
| 웹개발종합반 개발일지 | 1주차 - 8,9,10,11강 (0) | 2022.08.11 |
