CSS - Display

• 안의 요소를 어떻게 보여줄지 결정하는 속성

속성

1. inline : inline 아닌 것을 inline처럼 사용하기 위함
2. block : block아닌 것을 block 처럼 사용하기 위함, 크기를 조정할 수 있다
3. inline-block : 기본적으로 inline인데 크기 조정하고 싶을때
4. flex : 기본적으로 바로 아래 자식을 inline-block처럼 만든다.
   - justify-content : main axis 방향으로 정렬 / 자식이 inline이나 inline block일때 사용가능
   - align-items : cross axis 방향으로 정렬
5. none : 안보이는 것, 크기를 차지하지 않는다

---

CSS - animation

• 애니메이션을 나타내는 css스타일 + 애니메이션의 중간 상태를 나타내는 키 프레임
• 퍼센트(%) 또는 from-to로 지정가능

transform origin

• transform 과 함께 쓰이는 속성
• 회전 중심(원점, 기준점)을 지정
• 초기값은 50%, 50%로 요소의 중심점이 된다.
• transform-origin : 0% 0% : 왼쪽 상단 모서리 / 100% 100% : 오른쪽 하단 모서리

---

JS

• Javascript : 웹페이지에서 복잡한 기능을 구현할 수 있도록 하는 언어, 생동감, 동적인 작업
• head태그와 body태그에 모두 사용가능

전부 head에 넣으면 읽는데 시간이 오래걸리는 작업이 많을 경우 html 태그 로딩이 길어질 수 있다

따라서 body밑에 넣는 경우를 고려할 수 있다.

console.log() : 브라우저 개발자도구의 콘솔
alert() : 브라우저에 알림창을 띄우는 함수

Javascript 변수

• var : 선언과 초기화 동시, 할당하지 않으면 undefined, 중복선언, 재할당 가능
• let : 중복선언 불가, 재할당 가능, 선언시 할당하지 않으면 마찬가지로 undefined
• const : 상수, 초기화와 동시에 할당, 재할당, 재선언 불가능

Javascript 자료형

• 강한타입언어 : 타입 검사를 통과하지 못하면 실행 불가, 타입을 1종류로 명확히 지정하는 언어
• 약한 타입 언어 : 타입 오류를 만나더라도 실행 막지 않음
  
  ⇒ 자바스크립트는 약한 타입 언어다

• 기본형 : string, number , boolean, null, undefined
• 객체 : 기본형이 아닌 모든 것

typeof() : 자료형 검사 가능

Javascript 연산자

• 대입연산자 : =
• 비교 연산자 : ==, !=, ===,!===, >, >=, <, <=
• 산술연산자 : +, -, *,
• 논리연산자 : !, &&, ||

Javascript 함수

• function 함수이름(){ } 구조
• 함수 표현식 방식으로 쓰는게 낫다
  - 함수 표현식 : const hello = function() {} ⇒ 중복선언 방지

Javascript 조건문

• if문 : 조건이 참일 때 실행
  - if문은 중첩해서 사용가능
• switch 문도 있다

Javascript 반복문

1. for문 : for(초기값;조건문;증감문){}
2. while문 : while(조건)
   조건이 참일동안 반복, 잘못사용하면 무한루프에 빠질 수 있음
   중첩가능
   

---

객체

• 실생활에서 우리가 인식할 수 있는 사물
• 속성(명사)과 메서드(동사)로 구성

배열

• 객체 자료형
• 어떤 자료형이 들어와도 상관없다
• [] 를 이용하거나 new Array를 통해 생성
• 크기의 제약이 없다
• 배열의 index는 0부터
• length 속성 : 배열의 길이를 가져올 수 있다

배열의 함수

1. indexOf(): 배열의 몇번째 index에 위치하는가
2. 변수명.push(추가할 값) : 가장 마지막에 값을 추가
3. 변수명.pop() : 가장 마지막의 값을 꺼냄
4. 변수명.unshift(추가할 값) : 맨 앞에 값을 추가
5. 변수명.shift() : 맨 앞의 값을 꺼냄

딕셔너리

• 키-값 형태로 저장

var me = {
            name : 'hyebin',
            birth : '0507'
        };

me['gender'] = 'female';
console.log(me);
console.log(me['name']); //hyebin
console.log(me.name);  //hyebin

• 인덱스라는 개념이 없어서 key를 기반으로 값을 가져와야한다.

표준객체

• 자바스크립트가 기본적으로 가지고 있는 객체들
• String, Number, Array, Date, Math…

Date객체

• 시간과 날짜에 대한 정보

• new Date() // 현시간
• new Date(밀리초) // 1970년 1월 1일 0시 기준 지난날자
• new Date(년, 월, 일, 시, 분, 초, 밀리초)
• new Date(16, 5, 25) // 1916년 5월 25일 00:00:00
• new Date(2016, 5,25) // 2016년 5월 25일 00:00:00
• getYear, getMonth, getDate, getDay, getTime, getHours 함수들

Math 객체

• 수학에서 자주 사용하는 상수와 함수들을 미리 구현
• 웹 브라우저마다 다른 결과 얻을 가능성이 있어 정확한 결과를 위한다면 Math메소드 사용하지 않는게 좋다

console.log(Math.PI);
        console.log(Math.E);
        console.log(Math.min(2,10,4,-1)); //-1
        console.log(Math.max(2,10,4, -1)); //10

        console.log(Math.random()); //0~1사이의 무작위수
        console.log(Math.floor(Math.random()*(10-1) + 1)); //내림 
        console.log(Math.round(1.3)); //1, 반올림
        console.log(Math.ceil(1.3)); //2, 올림

---

DOM

• xml이나 html 문서에 접근하기 위한 일종의 인터페이스
• 문서 내의 모든 요소
• 각각 요소에 접근하는 방법 제공

Document 객체

• html 요소에 접근해서 행동을 하고자 할 때 사용

요소선택

• document.getElementById(아이디 속성값)
• document.getElementByClassName(클래스속성값)
• document.getElementByTageName
• document.getElement
• document.querySelector : 가장 첫번째 것만 가져옴
• document.querySelectorAll : 해당 모든 요소 가져옴

HtmlCollection : 살아있는 요소
NodeList : 변화를 가져오지 않는 것

요소 변경 함수

• createElement
• innerText, innerHTML
• append, appendChild
• remove, removeChild

---

Bootstarp

• 웹 사이트 제작을 위한 프레임워크

프레임워크

• 틀이 짜여져 있는것
• 단점 : 커스터마이징이 어렵다

  따라서 프레임워크를 선택할 때는 확장성을 기준으로 판단함

Display

d-{breakpoint}-{value} for sm, md, lg, xl, and xxl

ex)
d-sm-none : sm 이후부터는 none 해라

• 반응형 웹사이트 : 사이트 크기에 따라서 요소들이 바뀜 , 최적의 레이아웃을 위해, 예시로 네이버는 반응형이 아니다

layout

• row를 만들고 그안에 col을 만듬

<div class="row">
        <div class="col bg-warning">1</div>
        <div class="col bg-primary">2</div>
        <div class="col bg-success">3</div>
</div>

• 각각 12개의 칸으로 구성되어 있다고 생각

• 즉 col이 3개라서 12/3 = 4 즉 각각 칸마다 4칸씩 갖고 있다고 생각하기

<div class="row">
        <div class="col-2 bg-warning">1</div>
        <div class="col-7 bg-primary">2</div>
        <div class="col-1 bg-success">3</div>
        <div class="col-2 bg-secondary">3</div>
    </div>

• 이렇게 col다음에 숫자를 쓰면 해당 비율만큼 갖게 된다.
• 12칸 이상하면 내려오게된다

<div class="row">
        <div class="col-2 col-md-4 col-sm-6 bg-warning">1</div> <!--기본적으로2, sm이후로 6, md이후로 4-->
        <div class="col-7 col-md-4 col-sm-2 bg-primary">2</div>
        <div class="col-1 col-md-4 col-sm-4 bg-success">3</div>
</div>

---

Jquery

• 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화 시킨 자바스크립트 라이브러리

1. 파일 다운로드
2. CDN 사용

$(선택자).동작함수(); 의 형태

클래스 조작

• addClass
• removeClass
• hasClass
• toggleClass

jquery ui

• switch ⇒ 자연스럽게 변하는

• swichClass(a,b) ⇒ b
• switchClass(a,c) ⇒ b,c
• switchClass(b,d) ⇒ c,d

---

후기

2주차에는 Jquery와 Bootstrap을 배운게 기억에 남는다.
사용해본 경험은 있지만 그때그때 필요할때만 조금씩 써봤어서 자세히 공부했던 적이 없는데 이번 기회에 배울 수 있어서 나중에 프로젝트를 진행할 때 화면 구성시 큰 도움이 될 것 같다!