[스파르타코딩클럽 1주차]웹개발 종합반 Week I Learned

날짜 : 2023년 1월 19일 목요일

📌 PLAN (~2/5)

• 웹개발 종합반 강의 2회독 완료 → Velog 기술 블로그 정리까지 (1주차/총 5주차) (~1월/25일)
• GIT & GITHUB 이해 및 사용법 숙달(1회 완료/총 5회)
• 코딩테스트 맛보기 (Aft)
• 토이프로젝트 맛보기 (Aft)

📌 WHAT TODAY?

Frontend 기본(Html,CSS,Javascript)공부 회고시작(1주차)
Front-DAY 1 : 웹페이지의 뼈대를 강의없이 구축하기.
강좌 : https://spartacodingclub.kr/online/web 웹개발 종합반_스파르타코딩클럽

1. HTML은 뼈대!, CSS는 꾸미기!

• HTML은 크게 head 와 body로 구성된다.
  • head 안에는 페이지의 속성 정보를 입력, body안에는 페이지의 내용을 담는다.
    ex) meta, script, link, title
• CSS는 head 코드사이에 style 코드로 넣어 입력한다.
  • ex) mytitle이라는 클라스를 가르킬 때는, .mytitle{..}로 표현하여 입력한다.

Google Font 적용법

1. < link ...> 섹션의 3번째 Tag를 카피한다.
2. < title...> 밑에 그대로 붙여 넣어준다.
3. < style...> 밑에 * {...} 만들어준 후, ' CSS rules to specify families '를 붙여 넣어준다

주석달기

• HTML, CSS, Javascript 모두 주석이 다르게 생겼으므로, command + / 로 통일.

파일분리(HTML ↔︎ CSS)

1. CSS 파일을 새로 만든 후
2. title 태그 밑에

<link rel='stylesheet' type='text/css' href='css파일이름'> 붙여 넣어주기

2. Bootstrap이란?

• 부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (미리 완성된 부트스트랩을 가져다 쓰는 목적)

< div > 안에 있는 컨텐츠 정렬하기

diplay:flex;
flex-direction:column;
justify-content:center;
align-items:center;
항상 세트로 묶어쓰도록 하자

마우스 올렸을 때 형태가 바뀌는 'HOVER' 처리하기

.mytitle > button:hover{...}
... ← 에는 마우스를 올렸을 때의 형태를 명령해준다.

2. Javascript란?

• 자바스크립트는 주로 웹 브라우저에서 사용되며, 웹의 동작을 구현할 수 있다.
  - [크롬 개발자도구(devtool)]를 열어서 console탭을 이용하면 편하다.
  (띄워놓은 페이지에 빠르게 자바스크립트를 테스트해볼 수 있지만, 새로고침하면 모두 사라짐.)

<style></style> 밑에 <script></script>를 만들어 이 사이에 코드를 작성한다.

Javascript 연습하기

미세먼지(IDEX_MVL)의 값이 40 미만인 구이름(MSRSTE_NM)과 값을 출력하기
for (let i = 0; i < mise_list.length; i++) {
  let mise = mise_list[i];
  if (mise["IDEX_MVL"] < 40) {
    let gu_name = mise["MSRSTE_NM"];
    let gu_mise = mise["IDEX_MVL"];
    console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
  }
}
함수로 한번 만들어볼까,,
function show_gus(index) {
  for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < index) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
	    console.log(gu_name, gu_mise);
    }
  }
}
// 이러면 아래와 같은 것이 가능!
show_gus(40) // 40보다 작은 구만 출력!
show_gus(35) // 35보다 작은 구만 출력!