🌵 [스파르타코딩클럽] 웹개발 종합반 - 1주차
🔥 수업 목표 🔥
- 서버와 클라이언트의 역할에 대해 이해한다.
- HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
- Javascript 기초 문법을 익힌다.
📌 프로그램 설치 & 가입
PycharmProfessional 설치, Professional 라이센스 등록JetBrains회원가입AWS가입하기
AWS는 이전에 라캠에서 가입해놔서 생략했다. 생각난 김에 이전에 만들어두었던 EC2인스턴트도 요금 폭탄을 방지하기 위해서 중단해뒀다.
📌 HTML, CSS 기본 내용
HTML과 CSS
HTML은 뼈대, CSS는 꾸미기!
HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.
head안에 들어가는 대표적인 요소들: meta, script, link, title 등body안에 들어가는 대표적인 요소들!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>
📌 CSS 기초
HTML 부모-자식 구조
/* css는 <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성한다. */-
배경관련
background-color
background-image
background-size -
사이즈
width
height -
폰트
font-size
font-weight
font-famliy
color -
간격
margin (바깥쪽 여백, 시계방향,display:block)
padding (안쪽 여백)
📌 폰트
구글 웹 폰트 사용 방법
html에 추가
<!-- HTML에 이 부분을 추가하고 -->
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">CSS에 추가
/* CSS에 이 부분을 추가하면 완성! */
* {
font-family: 'Nanum Gothic', sans-serif;
}📌 Bootstrap
부트스트랩이란?
부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다.)
Bootstrap 시작 탬플릿
bootstrap 적용은 CSS 파일 분리와 원리가 동일하다. 다만, CSS의 파일이 인터넷 어딘가에 있다.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>부트스트랩 컴포넌트 4.0
📌 Javascript
Javascript란?
프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.
Java랑 완전히 다르다,, 조금은 비슷할 줄 알았는데 거의 python하는 느낌이다.. C랑 Java가 확실히 어려운 언어구나 싶었다
Javascript작성 방법
/* <head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성한다. */ex )
function hey(){
alert('안녕!'); // 알림
}주문하기
<button type="button" class="btn btn-primary order_btn" onclick="order()">주문하기</button>
Javascript 기초 문법
크롬 개발자도구를 열어서, console 탭에 작성
반복문, if문은 다른 언어들과 유사해 생략
변수, 기본연산
- 변수 선언
let num = 20
num = 'Bob'- 사칙연산, 문자열 더하기(자동 형변환)
let a = 1
let b = 2
a+b // 3
a/b // 0.5
let first = 'Bob'
let last = 'Lee'
first+last // 'BobLee'
first+' '+last // 'Bob Lee'
first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.리스트 & 딕셔너리
- 리스트 : 순서를 지켜서 가지고 있는 형태
자료형이 여러가지 복합적으로 쓰일 수 있다.
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능
b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5를 출력- 딕셔너리: 키(key)-밸류(value) 값의 묶음
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력- 딕셔너리 활용 ex)
let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};기본 함수들
- toUpperCase() - 자바, c와 유사
또, 모든 알파벳을 대문자로 바꾸고 싶은 경우
let myname = 'spartacodingclub'
myname.toUpperCase() // SPARTACODINGCLUB- token 분리
split함수 사용
또, 특정 문자로 문자열을 나누고 싶은 경우
let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']
result[0] // sparta
result[1] // gmail.com
let result2 = result[1].split('.') // ['gmail','com']
result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com
myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!- 문자열 합치기
문자열.join('문자');
특정 문자로 합치고 싶은 경우
let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)📌 1주차 숙제
추가적으로 필요했던 것들
- [가격 : 59,000W / 개] -> 따로
<span>태그
이미지 Carousel - Slides 추가
개인적으로 javascript alert 추가
🌵 참고 URL
私はゲームと日本が好きなBackend Developer志望生のOguです🐤🐤