1주차_TIL

26 Oct 2020 - 2 minute read

• 201026 DAY1: JS 변수, 타입, 함수
• 201027 DAY2: JS 조건문, 문자열
• 201028 DAY3: JS 반복문
• 201029 DAY4: HTML 구조와 문법, CSS box
• 201030 DAY5: JS querySelector, textContent

201026 DAY1: JS 변수, 타입, 함수

Variable

• 변수(variable) 선언과 할당, expression evaluation의 의미

Type

• 데이터의 타입(type): string, number, boolean, undefined, function, compound
• type 변경 함수: Number(); String();

Function

• 알고리즘을 구현하는 함수(function) 선언, 함수의 재료(keyword: function, name, parameter, body)와 사용법, 함수의 return, 함수 선언식 & 함수 표현식, 함수 호출

201027 DAY2: JS 조건문, 문자열

조건문

• truthy와 falsy

• 논리연산자(logical operator) &&(and),

  (or), !(not)

• if, else if, else
• Boolean: true/false 값을 반환하는 데이터 타입
• 비교연산자(comparison operator) >, < , >= , <= , ===, !==
• falsy 값 6가지: false, null, undefined, 0, NaN, ‘’
• pseudocode == 프로그램의 절차를 실제로 사용하는 언어로 작성

문자열

• 문자열의 속성과 메소드
• string method == immutable
• str.length, str[0], +부호를 사용한 문자열의 concatenating, str.indexOf, str.spllit, str.substring, str.slice

201028 DAY3: JS 반복문

반복문

• for문과 While문의 사용법
• 조건을 얼마나 효율적으로 짜느냐가 중요한 듯. 문법은 간단하기 때문에 이론은 별 거 없는 듯.
• for(초기화, 조건식, 증감문)
• while(조건식)

CRUD

• Create, Read, Update, Delete : 아주 기초적인 것. 모든 언어는 CRUD가 되어야 할 줄 안다고 할 수 있다.

201029 DAY4: HTML 구조와 문법, CSS box

HTML

• HyperTextMarkup Language, 구조를 표현하는 마크업 언어
• 자주 사용되는 HTML elements: div, span,img, a, ul, ol, li, input, textarea, p, section, button
• block level : 한 줄 차지 (div, p, h1) / inline level : 컨텐츠 크기만큼 공간 차지 (span)
• input의 type: text, password, radio, checkbox
• id는 문서 내의 유일한 언어여야 하는 반면, class는 동일한 스타일을 적용할 때 여러 element에 적용할 수 있다.

CSS

• selector 규칙 (.class / #id)
• 절대단위(px, pt) / 상대단위(%, em, rem, ch, vw, vh)
• 텍스트 스타일링: color, font-family, font-size, font-weight, text-decoration, letter-spacing, line-height
• 정렬: text-align (left, right, center, justify)
• 관심사의 분리: 구조(html)와 디자인(css) 영역의 구분 => center, font는 지양해야 할 태그
• display: block / inline-block / inline

css box

• border(테두리): 테두리 두께 / 테두리 스타일 / 테두리 색상
• border-style, border-radius, box-shadow
• padding(안쪽 여백): top right bottom left;
• margin(바깥 여백)
• overflow: 한정된 박스 크기와 넘치는 컨텐츠 (기본값 auto; visible; hidden; scroll) //컨테이너 설정
• box-sizing: border-box; // 여백과 테두리 두께를 포함하는 박스 계산법. 기본값은 content-box

201030 DAY5: JS querySelector, textContent

querySelector

• html의 옐리먼트를 조회 및 선택
• document.querySelector()

textContent

• 선택한 엘리먼트의 내용을 변경 가능
• document.querySelector.textContent = “”

Sprint

• sprint란 프로토타입을 계속 만들고 검증하는 과정으로, 단거리 달리기에 비유된다.
• prototype: 기술 구현, UI/UX 등을 미리 검증하기 위해 어느정도 작동이 되게 만든 소프트웨어
• 간단한 계산기 만들어 github 과제로 제출하기