2023.08.02(수) 슈퍼코딩 부트캠프 신입연수원 Day3 중간보고

(9/22 수정)

✔ 하루를 시작하는 체크리스트

• 침대에서 3초만에 나왔는가? X
• 일어나서 침대를 정리했는가? X
• 가벼운 스트레칭을 했는가? O
• 물 1잔을 마셨는가? O
• 감사일기를 썼는가? X
• 좋은 감정을 불러오는 음악을 들었는가? X
• 오늘 일정을 확인하였는가? O
• 오늘 해야할 3가지 일을 정리했는가? O
• 거울을 보고 격려의 말을 해줬는가? X
• 몸, 마음, 의복을 정갈히 했는가? X​

​

한게 거의 없넹..

​

✔ WHAT TO DO

• 10:00 Daily Scrum
• Day3 입사 가이드 교육
• 19강 클론코딩(당근마켓) ~ 26강 JavaScript 문법 2 - 함수와 조건문 까지 수강

​

✔ 배운 내용 요약 정리

​

width: 100vw (view width)

100프로 해당 영역 너비를 채운다는 의미!

​

height: 100vh (view height)

100프로 해당 영역 높이를 채운다는 의미!

​

HTML

레이아웃 태그: <header>, <section>, <main>, <nav>, <footer>

<form>, <input>

<div>, <span>

<a>, <img>

​

HTML 태그의 attribute(속성)

class / id / data / style

​

CSS(Cascading Style Sheets)

• 박스모델

contents - padding - border - margin

• Flexbox (main / cross axis)
• position

static, relative, absolute, fixed

• selector

Element명으로 선택

class나 id로 선택

Pseudo Selector (가상 선택자)

• 색상, 애니메이션 / 미디어 쿼리

@keyframes transition / animation

​

JavaScript

프론트엔드의 동적인 요소 추가

사용자 입력에 대한 처리 담당(이벤트 처리)

백엔드와 데이터 주고 받는 등

어떤 브라우저에서라도 돌릴 수 있음! (별도 설치 없이도 브라우저가 있다면 사용 가능)

​

JavaScript의 변수와 객체

const / let / var

const, let 활용해 변수 선언 -> 웬만해서는 const 사용

true / false / undefined / null

Array / Object(추상화) 자료형

​

- 함수와 조건문

함수: 반복 사용할 수 있는 코드 조각

// 함수 같은 표현

function 더하기 () {}

const 더하기 = () => {}

ex)

const 더하기 = (a, b) => {

console.log("가격은", a + b, "만원입니다.");

};

조건문: 특정 상황에 따라 다른 동작을 수행할 수 있도록

반복문

for(let i=0;i<10;i++) {

console.log('i가 지금", i, "입니다.");

}