000 - 웹개발 종합반 1주차 (HTML, CSS, Javascript)

 

 

1-1 / 1주차 오늘 배울것

웹 동작의 개념

로컬에서 마음대로 변경 가능한건 서버에서 내컴퓨터로 가져온 것을 변경하는 것    브라우저의 역할 ( 서버에 요청 / 가져와서 보여주기 )   새로고침 ( 서버에서 새로 받아오기 )

웹 동작의 개념 (HTML 받아오기)

요청은 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것   홈페이지 뼈대 HTML    홈페이지 꾸미는 CSS   홈페이지 움직이기 Javascript

웹 동작의 개념 (데이터 받아오기)

틀을 매번 새로 받아오는건 비효율적 데이터만 받아 갈아끼운다

 

 

 

 

---

1-2 / 필수 프로그램 설치

1. 파이참 설치 - "Professional 버전으로 다운"

별도의 설정사항 없이 Next로 넘겨 설치 

https://www.jetbrains.com/ko-kr/pycharm/download/#section=windows

다운로드 PyCharm: JetBrains가 만든 전문 개발자용 Python IDE

2. JetBrains 회원가입

https://account.jetbrains.com/login

JetBrains Account

3. 스파르타에서 제공하는 라이센스 코드를 입력 (4개월 짜리용) 

4. 해당계정으로 파이참 로그인 및 라이센스 엑티브

5. AWS 가입

https://portal.aws.amazon.com/billing/signup#/start

AWS Console - Signup

 

 

 

 

---

1-3 / HTML, CSS 기본내용

prac.html 생성

head	body에 들어가지 않는 속성들 meta, script, link, 파비콘, 웹페이지 title 등
body	페이지에 출력되는 내용

 

 

 

 

---

1-4 / HTML 기초 실습

로그인 틀 만들기

 

 

 

---

1-5 /  CSS 기초

이름(클래스)를 붙여주고 이름표를 어떻게 하라고 수식한다.

CSS 부모자식 관계를 따른다.

head 부분에 <style></style>을 추가하여 안에 작성하거나 별도의 css파일을 만들어 링크로 연결하여 사용

 

 

---

1-6 / CSS 실습

백그라운드 이미지, 글자 배열, padding, margin, font color, width, height, border-radius 등

margin	padding
바깥여백	안쪽여백

 

 

 

---

1-7 / 폰트, 주석, 파일분리

구글 폰트에서 마음에 드는 것을 선택

1번은 title 아래에

2번은 style 안 * {} 안에  (CSS 안에서 * {} 은 모든것에 적용되는 CSS)

 

 

 

---

1-8 / 부트스트랩, 예쁜 CSS 모음집

https://getbootstrap.com/docs/5.0/components/

https://getbootstrap.com/docs/5.0/components/accordion/

 

 

 

---

1-9 / CSS 꿀팁 한번 더 배우기

* 내용물 정렬할 때

.mytitle {
    display: flex;
    flex-direction: column;
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;
}

* 배경이미지에 변화주기 (url 앞에 linear-gradient)

.mytitle {
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;
}

 

 

 

---

1-10 / 본격 부트스트랩 써보기

부트스트랩 카드 이용

한 row마다 카드 개수 바꾸는 건 부트스트랩의 Grid system을 이해하면 됨

https://getbootstrap.com/docs/5.0/layout/grid/

Grid system

<div class="row row-cols-1 row-cols-md-3 g-4">

row	행 (열을 감싸고 있음)
col / cols	열 / 열들
md	열이 medium사이즈 / 992px 이하에서 세로 표시 시작 (사이즈 종류에는 xs < sm < md < lg < xl < xxl )
g	gutter 거터, 양쪽에 나 있는 홈

row-cols-md-3 : md 사이즈 display에서 또는 그 이상 경우 col 3개가 1개의 row로 

row-cols-1 : 그 보다 작은 디스플레이 경우 col 1개가 1개의 row로

https://record-than-remember.tistory.com/entry/bootstrap-%EA%B7%B8%EB%A6%AC%EB%93%9Cgrid

bootstrap / 그리드(grid)

https://csmoon.tistory.com/21

Bootstrap 5 Grid System, 부트스트랩 그리드 시스템

 

 

 

---

1-11 / Quiz_포스팅박스를 완성하기!

모바일 처리 예시 (최대 500px까지 커질수 있고 그 전까지는 화면의 95%까지만 채운다)

.mypost {
  max-width: 500px;
  width: 95%;
  }

 

 

---

1-12 / Javascript 맛보기

Javascript란?

프로그래밍 언어 중 하나로 브라우저가 알아듣는 언어. 여러언어로 만들게 되면 그 언어 마다의 전용 브라우저가 필요하는 등의 혼란을 야기할 수 있기 때문에 모두가 약속 즉, 표준을 만들었다. 그것이 바로 Javascript.

이름으로 Java와 관련있어보이지만 둘은 전혀 상관관계가 없다.

head 부분에 <script></script> 을 추가하여 안에 작성

 

 

---

1-13 /  Javascript 기초 문법 배우기(1)

크롬에서 F12로 눌렀을때 뜨는 console 창이 script 안과 동일하다 보고 테스트할때 F12를 적극 활용

콘솔창에서 함수호출하니 반응하는 모습

 

프로그래밍 언어를 배울때 알아두어야할 것 5가지 : 변수, 자료형, 함수, 반복문, 조건문

list = 데이터를 한번에 모아놓고 정렬한 자료형  ( [ ] 사용 )

+ list형 변수.push(넣을데이터) = list에 데이터 추가

dict = 딕셔너리, key 와 value로 정리되어진 자료형 ( { } 사용 )

 

+ 변수명.split('@') = at 사인 기준으로 나누어 리스트로 반환 (원래 변수값이 변하는 건 아님)

let mymail = 'sparta@gmail.com'
mymail.split('@')
// ['sparta','gmail.com']
mymail.split('@')[1]
// 'gmail.com'
mymail.split('@')[1].split('.')
// ['gmail','com']
mymail.split('@')[1].split('.')[0]
// 'gmail'

 

 

 

---

1-14 /  Javascript 기초 문법 배우기(2)

헤더부분부터 읽히기 때문에 바디보다 먼저 스크립트가 읽힘

조건문 if문 

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	} 
}

is_adult(19)

// 청소년이에요

반복문 for문 

let a_list = ['사과','배','감','딸기']
for (let i = 0; i < a_list.length; i++){
	console.log(a_list[i])
}

// 사과
// 배
// 감
// 딸기

 

 

 

---

1-15 /  Javascript 연습

실제 데이터로 특정값 출력하기

 

 

 

---

1-16 /  숙제 설명

배운것을 기초로 html과  css를 사용하여 페이지 만들어 제출!

 

 

 

---

+ 오늘의 Tip

* h1 태그 : 페이지 당 하나면 좋다. 검색시 제목으로 인식 * Shift + tap : 왼쪽으로 tap * 스니펫(snippet) : 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어이다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와준다. * 백그라운드 관련 css 3개는 항상 같이 * CSS 안에서 * {} 은 모든것에 적용되는 CSS * 주석처리 : ctrl + / * 내용물 정렬 CSS (1-9) * hover: 마우스 올렸을때 * div : 디브