항해 사전 준비기간 1주차 강의 정리

1주차

• 1강.
  1) 브라우저의 역할: 서버에 API를 통해 요청/정보(HTML, CSS, JS)를 가져와서 보여주는 것
  2) 웹의 동작 원리: 클라이언트(브라우저) -> 서버(API-HTML/CSS/JS, Flask서버, MongoDB)
  3) 데이터만 내려올 경우는, JSON 형식으로 서버의 DB에서 가져온다.

• 2강.
  1) 환경 설정 (Pycharm 설치/라이선스 발급, JetBrains 가입, AWS 가입)

• 3강.
  1) HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것
  2) head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다
  3) head 안에 들어가는 대표적인 요소들: meta, script, link, title 페이지의 속성을 정의하거나, 필요한 스크립트들을 부름
  4) Pycharm에서 ctrl+alt+L (맥은 cmd+alt+L) 로 자동 정렬 기능 사용가능

• 4강, 5강.
  1) html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받음
  2) 로그인 페이지 만들기. (완)

• 6강
  1) 배경 이미지 넣을 때 3가지 요소(묶음): image(URL), size(cover), position(center)
  2) Margin은 바깥 쪽 여백, Padding은 안 쪽 여백을 조정함. (상 우 하 좌 시계방향)
  3) Margin: auto; 는 상하좌우를 동일하게 맞춰줌.

background-image: url("https://movie-JPEG/movie_image.jpg");
background-position: center;
background-size: cover;

• 7강
  1) 폰트 바꾸는 방법.
  2) 주석 처리는 ctrl + /
  3) style>은 따로 분리하여 관리 가능.
  

<link rel="stylesheet" type="text/css" href="mystyle.css">

• 8강
  1) 부트스트랩 쓰는 방법
  2) 부트스트랩 컴포넌트 5.0 (https://getbootstrap.com/docs/5.0/components/buttons/)
  
• 9강
  1) 내부 정렬 방식은 네 줄 세트(묶음)

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

2) 이미지 어둡게 하기 복붙

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

• 10강<본격 부트스트랩 활용하기>
  1) 부트 스트랩 카드 형식 가져와서 여백 맞춰주기
  2) 이미지, 별, 이모티콘 넣어주기 참고
  3) https://kr.piliapp.com/facebook-symbols/ (이모티콘 주소)
  

• 11강
  1) 여러가지 부트스트랩 요소 써보기
  

• 12강 (자바스크립트 기초)
  1) 자바스크립트: 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
  2) 역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 됨
  3) 사이에 를 넣어줌

• 13강 자바스크립트 기초 문법(1)
  1) 자료형 list [1, 2, 3, 4], dictionary {‘이름’: ‘김형준’, ‘나이’:’27}
  2) List.push()하면 삽입
  3) String.split(‘기준’) -> 입력한 기준으로 좌우 분리

• 14강 자바스크립트 기초 문법(2)
  1) 기본 함수 구조, 조건문, 반복문 구조 학습
  

• 15강
  1) 미세먼지 수치가 40보다 낮은 지역들만 로그에 찍어보기

  function show_gus(index){
    for (let i = 0; i < mise_list.length; i++){
        if (mise_list[i]['IDEX_MVL'] < index){
            console.log(mise_list[i]['MSRSTE_NM'])
        }
    }
  }
  show_gus(40) //40보다 작은 지역만 출력.

• 16강 숙제 팬명록 만들기
  1) Index.html에서 사용했던 mypost 그대로 복붙하여 post box 완성.
  2) Card quote 활용하여 응원 코멘트 완성.
  3) 1주차 과제까지 완료!!
  

• GitHub 업로드
  현재 hanghae99_pre_lecture repository 만듦.
  (소스트리 툴로 형상관리 중)
  설정 방법)

$ git init
$ git add .
$ git commit -m "first project commit"
$ git remote add origin <url>
$ git push -u --force origin master

->1주차 과제 url: https://github.com/Kim-HJ1986/hanghae_pre_lecture/blob/master/homework(week1-2).html