Window / PyCharm 2022.2.1
✅ 1주차 수업 목표
1. 서버와 클라이언트의 역할에 대해 이해한다.
2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
3. Javascript 기초 문법을 익힌다.
✅ 필수 프로그램 설치
스파르타코딩클럽을 통해,
연 10만원 상당의 PyCharm Professional 버전을
4개월 간 무료로 사용.
강의 5주차에 배포를 위해 필요한
AWS에 미리 회원가입을 하는데
(개인에게 클라우드 환경의 가상서버를 제공)
EC2(기본 사양의 서버)를 1년 동안 무료로 사용 가능.
✅ 단축키
1. 코드정렬 : Ctrl + Alt + L
2. 들여쓰기 : Tab
3. 들여쓰기 취소 : Shift + Tab
4. 주석 : Ctrl + /
✅ HTML, CSS의 개념
HTML은 뼈대, CSS는 꾸미기!
✔ HTML 기초
HTML은 크게 head와 body로 구성.
✔ CSS 기초
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성.
mytitle 이라는 클래스를 가리킬 때 👉 .mytitle {...}
만들어둔 화면을 가운데로 가져오려면 👉 width 를 주고, margin: auto
그래도 안되면 👉 display: block 추가?
자주 쓰이는 CSS
배경관련
background-color
background-image
background-size
background-position
사이즈
width
height
폰트
font-size
font-weight
font-family
color
간격
margin //바깥 여백
padding //내 안쪽 여백<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>
⭕ 구글웹폰트
https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
👇
👇
👇
link 태그 복사 : <head> ~ </head> 사이,
<title> ~ </title> 밑에
CSS 복사 : <style> ~ </style> 사이,
맨 위에 * { }
⭕ 부트스트랩 (bootstrap, 예쁜 CSS 모음집)
https://getbootstrap.com/docs/5.0/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
⭕ 이모티콘 모음
https://kr.piliapp.com/facebook-symbols/
페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록
× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원
kr.piliapp.com
✔ CSS 파일 분리
<style> ~ </style> 부분이 너무 길어져 보기 어려울 때
👉 style.css 파일을 같은 폴더에 만들고 head 태그에서 불러오기
👉 <link rel="stylesheet" type="text/css" href = "(css파일이름).css">
background-image: url("");
background-position: center; //cecter 30%; 사진 위치 조정 가능
background-size: cover;display: flex;
flex-direction: column; //column, row만 바꿔가며 쓴다
justify-content: center;
align-items: center;background-color: transparent; //투명한 색이미지 어둡게 하기
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
//background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("");그림자 효과
box-shadow: 0px 0px 3px 0px gray;약간의 모바일 처리 해두기
max-width: 500px; //어디서나 500px로 맞추기
width: 95%; //500px 전에는 화면폭 95%로 맞추다가, 넘으면 500px로 보여주기
✅ 자바스크립트(Javascript)
자바스크립트란 👉 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
자바와 자바스크립트의 차이 👉 아무 관련 없음
✔ 맛보기
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성.
<script> ~ </script> 내에 자바스크립트를 작성하는 것.
✔ 기초
Chrome 👉 F12 👉 console
or
Chrome 👉 마우스 우클릭 👉 검사 👉 console
크롬 개발자 콘솔창은 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게,
개발자들을 위해 만들어둔 도구. console.log(변수)
✔ 변수 & 기본연산
- 변수 대입의 의미 : 오른쪽에 있는 것은 왼쪽에 넣는 것
- let 으로 변수를 선언 (한 번 선언했으면, 다시 선언하지 않고 값을 넣음)
- 사칙연산과 문자열 더하기가 기본적으로 가능
- 변수명은 아무렇게나?
let first_name = 'bob' //snake case라고 함
또는,
let firstName = 'bob' //camel case라고 함
회사마다 규칙이 있지만,
쉽게 알아볼 수 있게 쓰는 것이 중요.
다른 특수문자 또는 띄워쓰기는 불가능!
✔ 리스트 & 딕셔너리
- 리스트 : 순서를 지켜서 가지고 있는 형태
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}을 출력
- 리스트와 딕셔너리의 조합
names = [{'name':'bob','age':20},{'name':'carry','age':38}]
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name)
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'
✔ 함수
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
//예시
function sum(num1, num2) {
console.log('숫자', num1, num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
✔ 조건문
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)
✔ 반복문
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
for (let i = 0 ; i < scores.length ; i++) {
console.log(scores[i]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력,
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력.'웹개발 > 수업' 카테고리의 다른 글
| 웹개발 4주차 개발일지_Sparta Coding Club (0) | 2023.03.02 |
|---|---|
| 웹개발 4주차_스파르타피디아 프로젝트 연습 (0) | 2023.02.27 |
| 웹개발 4주차_화성땅 공동구매 프로젝트 연습 (0) | 2023.02.27 |
| 웹개발 3주차 개발일지_Sparta Coding Club (0) | 2023.02.25 |
| 웹개발 2주차 개발일지_Sparta Coding Club (0) | 2023.02.23 |