yongmin

• selection sort
• insertion sort
• bubble sort

Selection Sort

• 제자리 정렬(in-place sorting) 알고리즘의 하나
  • 입력 배열(정렬되지 않은 값들) 이외에 다른 추가 메모리를 요구하지 않는 정렬 방법
• 해당 순서에 원소를 넣을 위치는 이미 정해져 있고, 어떤 원소를 넣을지 선택하는 알고리즘
  • 첫 번째 순서에는 첫 번째 위치에 가장 최솟값을 넣는다.
  • 두 번째 순서에는 두 번째 위치에 남은 값 중에서의 최솟값을 넣는다.
• 과정 설명
  1. 주어진 배열 중에서 최솟값을 찾는다.
  2. 그 값을 맨 앞에 위치한 값과 교체한다(패스(pass)).
  3. 맨 처음 위치를 뺀 나머지 리스트를 같은 방법으로 교체한다.
  4. 하나의 원소만 남을 때까지 위의 1~3 과정을 반복한다.
• time complexity
  • worst : O(n^2)
  • average : O(n^2)
  • best : O(n^2)

//selection sort

#include <iostream>
#include <vector>
using namespace std;

void selectionSort(vector<int>& arr);

int main() {

  vector<int> arr;
  arr.push_back(9);
  arr.push_back(6);
  arr.push_back(7);
  arr.push_back(3);
  arr.push_back(5);

  for(int n=0; n<arr.size(); n++){
    cout << arr[n] << " "; // 9 6 7 3 5
  }

  selectionSort(arr);
  cout << endl;
  
  for(int n=0; n<arr.size(); n++){
    cout << arr[n] << " "; // 3 5 6 7 9
  }
}

void selectionSort(vector<int>& arr){
  int min, minIdx, swap ;

  for(int i=0; i<arr.size(); i++){
    min = arr[i];

    for(int j=i+1; j<arr.size(); j++){
      if(min > arr[j]){
         min = arr[j];    
         minIdx = j;
      }
    }
    
    swap = arr[i];
    arr[i] = arr[minIdx];
    arr[minIdx] = swap;
  }
}

Insertion Sort

• 정의
  • 자료 배열의 모든 요소를 앞에서부터 차례대로 이미 정렬된 배열 부분과 비교하여, 자신의 위치를 찾아 삽입함으로써 정렬을 완성하는 알고리즘
• 과정 설명
  • 삽입 정렬은 두 번째 자료부터 시작하여 그 앞(왼쪽)의 자료들과 비교하여 삽입할 위치를 지정한 후 자료를 뒤로 옮기고 지정한 자리에 자료를 삽입하여 정렬
  • 즉, 두 번째 자료는 첫 번째 자료, 세 번째 자료는 두 번째와 첫 번째 자료, 네 번째 자료는 세 번째, 두 번째, 첫 번째 자료와 비교한 후 자료가 삽입될 위치를 찾는다. 자료가 삽입될 위치를 찾았다면 그 위치에 자료를 삽입하기 위해 자료를 한 칸씩 뒤로 이동시킨다.
  • 처음 Key 값은 두 번째 자료부터 시작한다.
• time complexity
  • worst : O(n^2)
  • average : O(n^2)
  • best : O(n)

//insertion sort

#include <iostream>
#include <vector>
using namespace std;

void insertionSort(vector<int>& arr);

int main() {

  vector<int> arr;
  arr.push_back(9);
  arr.push_back(6);
  arr.push_back(7);
  arr.push_back(3);
  arr.push_back(5);

  for(int n=0; n<arr.size(); n++){
    cout << arr[n] << " "; // 9 6 7 3 5
  }

  insertionSort(arr);
  cout << endl;
  
  for(int n=0; n<arr.size(); n++){
    cout << arr[n] << " "; // 3 5 6 7 9
  }
}

void insertionSort(vector<int>& arr){
  int key, i , val;
  for(i=1; i<arr.size(); i++){
    key = i-1;
    while(key >= 0 && arr[key] > arr[i]){
      key--;
    }
    val = arr[i];
    arr.erase(arr.begin()+i);
    arr.insert(arr.begin()+key+1, val);
  }
}

Bubble Sort

• 정의
  • 서로 인접한 두 원소를 검사하여 정렬하는 알고리즘
• 과정 설명
  • 버블 정렬은 첫 번째 자료와 두 번째 자료를, 두 번째 자료와 세 번째 자료를, 세 번째와 네 번째를, … 이런 식으로 (마지막-1) 번째 자료와 마지막 자료를 비교하여 교환하면서 자료를 정렬한다.
  • 1회전을 수행하고 나면 가장 큰 자료가 맨 뒤로 이동하므로 2회전에서는 맨 끝에 있는 자료는 정렬에서 제외되고, 2회전을 수행하고 나면 끝에서 두 번째 자료까지는 정렬에서 제외된다. 이렇게 정렬을 1회전 수행할 때마다 정렬에서 제외되는 데이터가 하나씩 늘어난다.
• time complexity
  • worst : O(n^2)
  • average : O(n^2)
  • best : O(n)

//bubble sort


#include <iostream>
#include <vector>
using namespace std;

void bubbleSort(vector<int>& arr);

int main() {

  vector<int> arr;
  arr.push_back(9);
  arr.push_back(6);
  arr.push_back(7);
  arr.push_back(3);
  arr.push_back(5);

  for(int n=0; n<arr.size(); n++){
    cout << arr[n] << " "; // 9 6 7 3 5
  }

  bubbleSort(arr);
  cout << endl;
  
  for(int n=0; n<arr.size(); n++){
    cout << arr[n] << " "; // 3 5 6 7 9
  }
}

void bubbleSort(vector<int>& arr){
  for(int i=arr.size(); i>=1; i--){
    for(int j=0; j<i-1; j++){
      if(arr[j+1] < arr[j]){
        int swap = arr[j+1];
        arr[j+1] = arr[j];
        arr[j] = swap;
      }
    }
  }
}

Dynamic Programming, 동적계획법

• DP란 어떤 문제가 여러 단계의 반복되는 부분 문제로 이루어질 때, 각 단계에 있는 부분 문제의 답을 기반으로 전체 문제의 답을 구하는 방법
• 분할정복은 문제를 위에서 아래로 쪼개지만 (top-down), DP는 작은 부분 문제부터 상위에 있는 문제로 풀어 올라간다(bottom-up).
• 분할정복의 쪼갠 문제는 완전히 독립적인 하나의 새로운 문제이지만, DP는 각 단계의 부분 문제들이 이전 단계에 있는 문제들의 답에 의존한다. => DP는 한번 푼 적이 있는 부분 문제의 답은 다시 푸는 일이 없도록 테이블에 저장하여 재활용
• 메모이제이션 (memoization) : 결과를 저장하는 장소를 마련해 두고, 한번 계산한 값을 저장해 뒀다 재활용하는 최적화 기법.
• 메모이제이션 구현 패턴
  1. 항상 기저 사례를 제일 먼저 처리하고 테이블에 저장
  2. 점진적으로 상위 부분 문제를 풀때 해당 답을 구한 적이 있으면 테이블에서 곧장 반환
  3. 구한적이 없으면 답을 계산하고 테이블에 저장
• 다이나믹 프로그래밍 동작 방식
  1. 문제를 부분 문제들로 나눈다
  2. 가장 작은 부분 문제(base case)부터 해를 구한 뒤 테이블에 저장한다
  3. 상위 부분 문제의 해를 구하는데 해당 답을 구한적이 있으면 테이블에서 곧장 반환
  4. 구한적이 없으면 답을 계산하고 테이블에 저장
  5. 위와 같이 테이블을 이용하여 점차적으로 상위 부분 문제의 최적해를 구한다.
• 타일링 문제 : boj.kr/11726
  • base case : n==1 -> return 1 ;
  • base case : n==2 -> return2 ;
  • 규칙을 찾아 점화식을 정의 D[n] = D[n-2] + D[n-1]

#include <iostream>
#include <vector>
using namespace std;

vector<int> D(1001);

int solve(int n);

int main() {
  int N=0;
  cin >> N;
  int res = solve(N);
  cout << res<< endl;
}

int solve(int n){
  if(n ==1 ){
    return 1;
  }
  if(n == 2){
    return 2;
  } 
  if(D[n]!=0){
    return D[n];
  }

  return D[n]= (solve(n-2)+solve(n-1)) % 10007;
}

Divide & Conquer

• 문제를 더 이상 나눌 수 없을 때까지 나누고, 이렇게 나누어진 문제들을 각각 풂으로써 결국 전체 문제의 답을 얻는 알고리즘
• 분할정복 알고리즘의 핵심은 "문제를 잘게 쪼개기", 하지만 문제를 쪼개는 방법에 대해서 정해진 규칙은 없다
• 분할정복의 3가지 구성요소
  1. divide : 문제를 더 작은 문제로 분할
  2. base case : 더 이상 답을 분할하지 않고 곧장 풀 수 있는 매우 작은 문제
  3. merge : 각 문제에 대해 구한 답을 원래 문제에 대한 답으로 병합
• 분할시 생기는 각 하위 문제는 완전히 독립접이므로 네트워크상의 여러 컴퓨터에 의해 병렬처리가 가능
• 예제 BOJ 1780 - 종이의 갯수 https://www.acmicpc.net/problem/1780

#include <iostream>
#include <vector>
using namespace std;

// 종이 갯수
int Zero =0;
int One = 0;
int MinOne =0;

// (r2-r1+1) x (c2-c1+1) 행렬
short check(vector< vector<short> >& arr, int r1, int r2, int c1, int c2){ 
  //종이가 모두 같은 수로 있는지 검사
  // 모두 같은 수 이면 해당 수 카운트, 하나라도 다르면 -2

  int size = r2-r1+1;
  short res = arr[r1][c1];

  for(int i=r1; i<=r2; i++){
    if( res == -2){
      break;
    }
    for(int j=c1; j<=c2; j++){
      if( res != arr[i][j]){
        res = -2;
        break;
      }
    }
  }

  if( res == -1)
      MinOne++;
  else if (res == 1)
      One++;
  else if( res == 0)
      Zero++;
  return res;
};

// 
void cut( vector< vector<short> >& arr, int r1, int r2, int c1, int c2){
  int size = r2-r1+1;
  
  // base case - 사이즈 확인
  if( size <3){  // 1x1 행렬 
    check(arr, r1, r2, c1, c2); // 해당 숫자 카운트
    return;
  }
  else{ // 3이상, 자를 수 있을정도로 크기 큼
  // 모두 같은 수 인지 check
    short arrSize = (size/3);
    short chk;
    // 11
      chk = check(arr, r1, (r1+arrSize-1), c1, (c1+arrSize-1));
      if(chk == -2)
        cut(arr, r1, (r1+arrSize-1), c1, (c1+arrSize-1));

    // 12
    chk = check(arr, (r1+arrSize), (r1+arrSize+arrSize-1), c1, (c1+arrSize-1));
    if(chk == -2)
      cut(arr, (r1+arrSize), (r1+arrSize+arrSize-1), c1, (c1+arrSize-1));

    //13 *
    chk = check( arr, (r1+arrSize+arrSize), r2, c1, (c1+arrSize-1));
    if(chk == -2)
     cut( arr, (r1+arrSize+arrSize), r2, c1, (c1+arrSize-1));

    // 21
    chk = check(arr, r1, (r1+arrSize-1), (c1+arrSize), (c1+arrSize+arrSize-1));
    if(chk == -2)
      cut(arr, r1, (r1+arrSize-1), (c1+arrSize), (c1+arrSize+arrSize-1));

    // 22
    chk = check(arr, (r1+arrSize), (r1+arrSize+arrSize-1), (c1+arrSize), (c1+arrSize+arrSize-1));
    if(chk == -2)
      cut(arr, (r1+arrSize), (r1+arrSize+arrSize-1), (c1+arrSize), (c1+arrSize+arrSize-1));

    // 23 *
    chk = check(arr, (r1+arrSize+arrSize), r2, (c1+arrSize), (c1+arrSize+arrSize-1) );
    if(chk == -2)
       cut(arr, (r1+arrSize+arrSize), r2, (c1+arrSize), (c1+arrSize+arrSize-1));

    // 31
    chk = check(arr, r1, (r1+arrSize-1), (c1+arrSize+arrSize), c2);
    if(chk == -2)
      cut(arr, r1, (r1+arrSize-1), (c1+arrSize+arrSize), c2);

    // 32
    chk = check(arr, (r1+arrSize), (r1+arrSize+arrSize-1),(c1+arrSize+arrSize), c2);
    if(chk == -2)
      cut(arr, (r1+arrSize), (r1+arrSize+arrSize-1),(c1+arrSize+arrSize), c2);

    // 33
    chk = check(arr, (r1+arrSize+arrSize), r2,(c1+arrSize+arrSize), c2);
    if(chk == -2)
      cut(arr, (r1+arrSize+arrSize), r2,(c1+arrSize+arrSize), c2);

  }

};

int main(){

  //배열 만들기
int N =0;
cin >> N;
vector<vector<short> > arr;
arr.resize(N);

for(int i=0; i<N; i++){
  for(int j=0; j<N; j++){
    short num;
    cin >> num;
    arr[i].push_back(num);
  }
}

short chk = check(arr, 0, (N-1), 0, (N-1));
if( chk == -2)
  cut(arr, 0, (N-1), 0, (N-1));

cout << MinOne <<endl;
cout << Zero << endl;
cout << One << endl;

return 0;
}

반응형 웹

: 다양한 크기의 기기에 대응하여 웹사이트의 구조가 최적환된 구조로 변경하는 웹

뷰포트

• 정의 : 기기에서 실제 콘텐츠가 표시되는 부분
• <meta name="viewport" content="width=device-width, initial-scale=1. user-scalable=no">

미디어 쿼리

• 정의 : 화면해상도, 기기방향 등의 조건으로 html에 적용하는 css 스타일을 전환할 수 있는 css 속성
• 기본문법 : @media [only | not ] [미디어유형] [and | , ] (조건문) (실행문)
• @media all and (min-width:320px) { ... }
  @media all and (min-width:768px) { ... }
  @media all and (min-width:1024px) { ... }

그리드 레이아웃

• 정의 : 2차원 격자무늬의 레이아웃. 화면에 정보를 구성할 때 논리적으로 일관성 있게 표현하기 위한 구조
• 화면 너비를 특정 값으로 고정해 놓고 그 안에 표시할 요소의 너빗값을 지정

반응형 웹 구현 기법

1. 가변 그리드 레이아웃
   • 레이아웃을 고정 값이 아닌 백분율로 지정함으로써 화면의 너비가 바뀔 때마다 웹 요소의 너빗값도 함께 바뀜
2. 플렉스 박스 레이아웃
   • 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 레이아웃

플렉스 박스

• flexbox 구성
  1. flex container : flexbox가 놓여있는 영역. display : flex 속성이 적용 된 요소는 flex container가 된다
  2. flex item : flex container의 자식 요소
• flexbox의 두개의 축
  1. main axis : 주축. flex-direction에 의해 정의되며 주축을 따라 플렉스 아이템이 배치됨.
  2. cross axis : 교차축
• 시작선과 끝선
  1. 시작선: 처음 배치되는 위치, flex-direction이 row이면 주축의 시작선은 왼쪽 끝
  2. 끝선 : 마지막에 배치될 위치, flex-direction이 row이면 주축의 끝선은 오른쪽 끝
• 주요 속성
  1. display : flex | inline-flex 
     • flexbox로 작동시키기위한 기본 설정
     • flex : 박스를 블록수준의 flexbox로 작동하게 함
     • inline-flex : 인라인 수준의 flexbox로 작동하게 함
  2. flex-direction : row | row-reverse | column | column-reverse
     •  flexitem의 배치 방향을 설정
     • row : 박스를 왼쪽에서 오른쪽으로 배치
     • column : 박스를 위에서 아래로 배치
  3. flex-wrap : nowrap | wrap | wrap-reverse
     
     • 자식박스를 한줄안에 여러개를 배치하기 위한 부모속성
     • nowrap : 박스를 한 줄로 배치 (기본값)
     • wrap : 박스룰 여러 줄로 배치
  4. flex-flow : [flex-direction] [flex-wrap]
     • flex-direction과 flex-wrap의 축약 속성
  5. justify-content : flex-start | flex-end | center | space-between | space-around
     • 주축방향에서 플렉스아이템 배치 방법 설정
     • flex-start : 자식박스를 부모박스 주축의 시작점에 붙도록 배치 (기본값)
     • flex-end : 자식박스를 부모박스 주축의 끝점에 붙도록 배칙
     • center : 자식박스를 부모박스의 중앙에 배치, 양끝에 빈 공간 생길 수 있음
     • space-between : 자식박스가 시작점과 끝점에 붙도록 배치하고 자식박스들을 동일한 간격으로 정렬
     • space-around : 자식박스가 시작점과 끝점에 붙지 않도록 자식박스들을 동일한 간격으로 정렬
  6. align-items : stretch | flex-start | flex-end | center | baseline
     • 교차축방향으로 한줄의 플렉스아이템 배치 방법 설정
     • stretch : 자식박스를 확장해서 배치 (기본값)
     • flex-start : 자식박스를 시작점에 붙도록 배치
     • flex-end : 자식박스를 끝점에 붙도록 배치
     • center : 자식박스를 교차축 중앙에 배치
     • baseline : 자식박스의 문자열 baseline에 맞춰 자식박스들을 배치
  7. align-content : stretch | flex-start | flex-end | center | space-between | space-around
     • 교차축방향으로 여러줄의 플렉스아이템 배치 방법 설정
     • stretch : 자식박스를 확장해서 배치 (기본값)
     • flex-start : 자식박스가 시작점에 붙도록 배치
     • flex-end : 자식박스가 끝점에 붙도록 배치
     • center : 자식박스를 부모박스의 중앙에 배치
     • space-between : 자식박스가 시작점과 끝점에 붙도록 배치하고 자식박스들을 동일한 간격으로 정렬
     • space-around : 자식박스가 시작점과 끝점에 붙지 않도록 배치하고 자식박스들을 동일한 간격으로 정렬
  8. order : 정수값
     • 플렉스아이템의 배치 순서 바꾸기, 입력된 양수값값에 따라 배치
     • 0 : 기본값
  9. flex-grow : 양의 정수
     • 부모박스에 여백이 있을때 자식박스의 크기를 늘일 수 있는 속성, 자식박스간의 flex-grow 값 비율대로 남은 공간을 등분하여 확장
     • 0 : 기본값
  10. flex-shrink : 양의 정수
      • 부모박스 안의 자식박스의 크기가 넘치는 경우 크기를 줄이는 속성, 자식박스간의 flex-shrink 값 비율대로 크기 줄어듬
      • 1 : 기본값
  11. flex-basis : auto | width 속성값
      • 플렉스아이템의 기본 크기를 설정
      • auto : 플렉스아이템이 기본적으로 가지고 있는 크기를 기준으로 flex-grow, flex-shrink 속성값 적용 (기본값)
  12. flex : [flex-grow] [flex-shrink] [ flex-basis] | auto | initial | none
      • flex-grow, flex-shrink, flex-basis 축약속성
      • auto : 1 1 auto
      • initial : 0 1 auto
      • none :  0 0 auto
• 플렉스 박스 레이아웃 : https://d2.naver.com/helloworld/8540176

자바스크립트 역활

• 사용자 입력, 계산
• 웹페이지 내용, 모양의 동적제어
• 브라우저 제어
• 웹 서버와 통신
• 웹 애플리케이션 작성

자바스크립트 객체

• 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체
• 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합
• 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다
• 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입(prototype)”이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 이 프로토타입은 타 언어와 구별되는 중요한 개념이다.

자바스크립트 객체 종류

• built-in object : array, string, date, math
• user-defined object
• DOM
• Document Object
• BOM

Built-In Object

1. Array 객체
   • 자바스크립트에서 배열은 [ ] 로 생성하든 new Array()로 생성하든 모두 Array 객체로 다룬다
   • 배열에는 여러 타입의 데이터가 섞여 저장 
   • Array 객체 메소드
     • Array.concat(arr) : 현재 배열에 배열 arr 원소들을 덧붙여 만든 새 배열 리턴
     • Array.join( [ separator ] ) : 배열의 모든 원소들 사이에 separator를 삽입하여 하나의 문자열을 만들어 리턴
     • Array.reverse( ) : 원소를 역순으로 재배열한 새로운 배열 리턴
     • Array.slice( idxA [ , idxB] ) : idxA부터 idxB 까지를 잘라내어 만든 새로운 배열 리턴, idxB 생략시 맨 마지막 원소까지 포함
     • Array.sort( ) : 배열의 원소들을 정렬
     • Array.toString( ) : 원소들을 사이에 , 을 삽입하고 모두 연결하여 하나의 문자열로 리턴
2. String 객체
   
   • 문자열 객체는 new String( ) 또는 문자열리터럴로 생성
   • 문자열 길이 정보는 length 프로퍼티에 자동 저장
   • [ ] 로 문자 접근, 자바스크립트에는 문자 타입이 없으므로 길이가 1인 문자열 반환
   • String 메소드
     • String.concat(str1, str2, ...) : 현재 문자열 뒤에 str1, str2, ... 를 붙여 새로운 문자열 리턴
     • String.indexOf(str1 [, idx ] ) : idx부터 첫번째 str1이 나타나는 인덱스 리턴, idx 생략시 처음부터 검색
     • String.replace(str1, str2) : str1을 찾아서 str2로 수정한 새로운 문자열 리턴
     • String.slice(idxA [, idxB ] ) : idxA에서 idxB 이전의 문자열을 복사하여 리턴, idxB 생략시 문자열 끝까지 복사하여 리턴
     • String.substr(idxA [, len] ) : idxA에서 len개의 문자열을 복사하여 리턴, len 생략시 문자열 끝까지 복사하여 리턴
     • String.substring(idxA, idxB) : idxA에서 idxB 이전의 문자열을 복사하여 리턴
     • String.split( [separator] ) : separator을 구분자로 문자열을 분리하여 문자열 배열을 생성하여 리턴
     • String.trim( ) : 문자열을 앞뒤 공백을 제거한 새로운 문자열 리턴
3. Date 객체
   • new Date( ) 로 새로운 Date 객체 생성시 현재시간 정보로 초기화된 객체 생성
4. Math 객체

User-Defined Object

• 프로토타입 : 개발자가 선언하는 새로운 객체 타입
• 사용자 정의 객체 생성 방법
  1. 자바스크립트의 내장객체 중 Object 타입을 이용하여 생성
  2. 프토로타입객체를 위한 생성자함수 정의하고 new 연산자로 객체 생성
     
     • 프로토타입은 객체를 생성하기 위해서는 먼저 "생성자함수"를 정의
  3. ES6의 클래스 문법
     • es6 부터 class 키워드를 이용한 class 정의 가능
       
       class Dog {
         constructor(name) {
           this.name = name;
         }
         say() { console.log(this.name + ' : 멍멍'); }
       }
       
       const myDog = new Dog('흰둥이');
       myDog.say( ); //  흰둥이 : 멍멍

DOM, Document Object Model

• 정의 : 브라우저가 각 html 태그들을 객체화해서 만든 객체, html 태그 하나당 한개의 DOM 객체 생성
• DOM 트리 : DOM 객체들의 계층관계, DOM트리의 루트노드인 document 객체는 DOM객체가 아니다.
• DOM 객체의 구성요소
  • 프로퍼티 : html 태그의 속성. ex) innerHTML : html 태그에 들어있는 html 콘텐츠
  • 메소드 : html 태그 제어
  • 컬렉션 : 정보를 집합적으로 표현하는 일종의 배열
  • 이벤트 리스너 : html 태그에 작성된 이벤트 리스너를 그대로 가지고 있다
  • style 프로퍼티 : html 태그에 적용된 css 스타일시트에 접근
• this : 객체 자신을 가리키는 자바스크립 키워드로서, DOM 객체에서 객체 자신으 가리키는 용도로 사용됨

Document Object

• 정의 : html 문서 전체를 나타내는 객체로 DOM 트리의 최상위 객체
• 모든 DOM 객체를 접근하는 경로의 시작점
• document 객체의 프로퍼티들을 통해 html 문서 전반적인 속성을 나타냄
  • location 프로퍼티 : 현재문서의 url 정보를 가진 location 객체의 레퍼런스
  • head 프로퍼티 : head 객체에 대한 레퍼런스
  • body 프로퍼티 : body 객체에 대한 레퍼런스
• document 객체의 메소드들을 통해 DOM 객체 검색, 생성등 html 문서 제어 지원
  • getElementById( ) : 주어진 id 속성 값을 가진 첫 번째 DOM 객체 리턴
  • getElementsByClassName( ) : 주어진 class 속성 값을 가진 모든 태그의 컬렉션 리턴
  • write( ) : document 객체에 html 콘텐츠 삽입
• document 객체에는 동일한 이름의 html 태그들을 배열처럼 접근할 수 있는 컬렉션 존재
  • images : 문서내의 모든 <img> 객체들의 컬렉션
  • links : 문서내의 모든 href 속성을 가진 모든 링크객체들의 컬렉션

BOM, Browser Object Model

• 정의 : 윈도우, 윈도우에 로드된 문서의 url, 브라우저출력 스크린, 브라우저와 브라우저가 실행되고 있는 환경 등을 자바스크립트 코드로 접근, 제어할 수 있도록 설계된 객체 그룹
• BOM 종류
  • window 객체 : 열려있는 브라우저 윈도우나 탭 윈도우를 나타내는 객체
  • navigator 객체 : 현재 작동중인 브라우저에 대한 정보를 담고있는 객체
  • history 객체 : 사용자가 방문한 웹 페이지의 히스토리 정보를 담고있는 객체
  • location 객체 : 윈도우에 로드된 웹 페이지의 url 정보를 담고있는 객체
  • screen 객체 : 브라우저가 실행되는 스크린 장치에 대한 정보를 담고 있는 객체

1. CSS3

• Cascading Style Sheet, css로 작성된 코드를 style sheet이라고 한다
• 적용방법 : <link href="url" type="text/css" rel="stylesheet">
• 규칙 
  1. 자식태그는 부모태그의 스타일을 상속
  2. cascading : 여러 스타일이 합쳐서 적용된다
  3. overriding : 여러 스타일이 합쳐서 적용되어 충돌이 발생되는 경우 우선 순위가 높은 스타일을 적용
     ①html 태그의 style 속성  ② <style> 태그  ③스타일시트  ④브라우저디폴트스타일
• selector
  1. 태그이름 셀렉터 : h1 { color : red; }
  2. class 셀렉터 : .class1 { color : red; }
  3. id 셀렉터 : #id1 { color : red; }
  4. 자식 셀렉터 : div > h1 { color : red; }
  5. 자손 셀렉터 : div h1 { color : red; }
  6. 전체 셀렉터 : * { color : red; }
  7. 슈도 클래스 셀렉터 : h1:hover { color : red; }

2. 폰트 프로퍼티

- 폰트 단위

• html 요소 크기의 기본값은 웹브라우저에서 설정한 글자크기, 디폴트 16px
• em : 상위 요소 크기의 몇 배인지로 폰트 크기를 정함
• rem : html 요소 (문서의 최상위 요소) 크기의 몇 배인지로 폰트 크기를 정함

- 웹 폰트

• <style> </style> 태그 내에서 @font-face 규칙을 설정
  1. font-family : 사용할 웹 폰트의 이름 지정, 폰트 파일의 이름과 일치할 필요는 없지만 비슷하게 설정하여 유지보수 용이성 확보
  2. src : url( )에 폰트 파일의 경로를 설정하고 format( )에 폰트 파일의 형식을 설정
• @font-face 규칙을 설정한 다음 웹 폰트가 필요한 선택자의 font-family 속성에서 사용할 웹 폰트의 이름을 호출하여 사용. 웹 폰트 로딩 실패시 fallback폰트가 렌더링

font-family

• 글꼴 지정
• font-family : 글꼴1, 글꼴2  // 글꼴1 없는 경우 글꼴2(fallback 폰트) 적용

font-size

• 글자크기 지정
• font size : small | mediann | large | 3rem | 1.2em | 10px ...

font-weight

• 글자 굵기 지정
• font-weight : bold | bolder | lighter | normal | 100~900수치

font-style 

• 글자스타일
• font-style : italic | oblique

font 

• 단축 프로퍼티
• font : style weight size family

3. 텍스트 프로퍼티

text-decoration

• 밑줄
• text-decoration : none | underline | overline | line-through

text-transform

• 대,소문자 전환
• text-transform : none | capitalize | uppercase | lowercase

text-align

• 문단 정렬
• text-align : start (시작위치 맞춤) | end (끝위치 맞춤) | left (왼쪽정렬) | right | center | justify (양쪽정렬)

text-justify

• 문단 정렬시 공백 조절
• text-justify : auto | none

text-indent

• 들여쓰기
• text-indent : 10px | 10% (부모요소기준으로 10% 들여쓰기)

line-height

• 줄 높이
• line-height : noraml | 2.0 (2배) | 200% | 20px

4. 박스모델

- 개념

• html 태그 요소를 하나의 박스로 보고 박스의 크기, 배경, 색 여백 등을 다루는 시스템
• box는 margin, border, padding, content로 구성

box-sizing

• 박스의 크기의 기준을 설정
• box-sizing : content-box | border-box | initail (기본값으로 설정 : content-box) | inherit

- 박스 제어 프로퍼티

overflow

• html 콘텐츠가 width와 height 의 크기를 넘어가는 경우 콘텐츠를 자를 것인지 말 것인지 지정
• 블록태그에만 적용
• overflow : visible (잘리지 않고 태그 영역을 넘어서 출력, 디폴트) | hidden (넘어가는 것은 보이지 않음, 스크롤바 없음) | scroll | auto  

5. 포지셔닝

- 개념

• html 태그가 출력되는 위치를 지정하는 것

display 프로퍼티

• 디폴트 박스 유형을 무시하고 html 박스 유형을 지정한다
• display : block | inline | inline-block
• css3 박스유형

• 박스 유형 비교

position 프로퍼티

• 단일 박스 모델의 배치방법
• position : static (기본위치에 배치)
• positiion : relative (기본위치에서 left, top, bottom, right 프로퍼티 값 만큼 이동한 상대위치)
• position : absolute (부모요소를 기준으로 left, top, bottom, right 프로퍼티 값 만큼 이동한 절대위치)
• position : fixed (스크롤하거나 브라우저 크기 변경과 상관없이 left, top, bottom, right 값으로 뷰포트의 특정위치에 고정)

float 프로퍼티

• html 요소를 문서에 떠있게끔 배치
• position 이 absolute이나 fixed로 지정되어 있으면 해당 요소는 완전히 독립적인 위치를 갖으므로 float 속성은 none으로 지정된다.
• float : left (요소 자신을 포함하고 있는 컨테이너의 왼쪽으로 띄움)
• float : right (요소 자신을 포함하고 있는 컨테이너의 오른쪽으로 띄움)
• float : none (요소를 띄우지 않음, 디폴트)

clear 프로퍼티

• clear된 요소의 좌우에 float된 요소를 허용하지 않도록 함
• clear : none (요소들이 양쪽으로 float 할 수 있음, 디폴트)
• clear : left (왼쪽으로 float 할 수 없게 함)
• clear : right (오른쪽으로 float 할 수 없게 함)
• clear : both (양쪽으로 다 float 할 수 없게 함)

z-index 프로퍼티

• html 태그들을 z축을 따라 수직으로 쌓는 순서를 지정
• 값이 클 수록 위에 쌓인다
• position이 relative나 absolute인 경우에만 작동
• z-index : 3

 visibility 프로퍼티

• html 태그를 출력할 것인지 숨길 것인지 지정
• visibility : visible(출력) | hidden(공간은 차지하지만 태그는 보이지 않음)
• display : none (공간도 차지않고 태그도 출려되지 않음)

1. 기본태그

<title> : 페이지 제목으로 <head> 내에서만 작성

<meta> : 웹 페이지의 메타데이터를 표현하기위해 사용

<h1> ~ <h6>

• 문단 제목, 블록태그
• title 속성 : tooltip(설명문) 출력 (ex. <h1 title="h1 tag"> )

<p> : 단락 나누기, 블록태그

<hr> : 수평선 긋기

 <br> : 새로운 줄로 넘어가기

html entities

• html문서에서 예약어로 사용되고 있는 문자나 기호는 html entities를 이용하여 입력

<pre> : 개발자 포맷 그대로 출력

<strong> : 굵게 강조

<i> : 이탤릭체로 강조

<del> : 취소선

<ins> : 밑줄

<mark> : 하이라이팅

<div>

• 블록을 구성하기 위한 컨테이너로 사용되는 블록태그
• 블록태그는 항상 새 라인에서 시작하고 기본적으로 가로폭 전체 넓이를 가지는 직사각형 형태

<span>

• 텍스트 일부분에 스타일링을 하거나 JS로 제어하기 위해 사용되는 인라인 태그
• 인라인태그는 블록에 삽입되어 블록 콘텐트의 일부를 표현하는데 사용

<img>

• 이미지 삽입 태그
• src 속성 : 이미지파일의 url, 필수 속성
• alt 속성 : 이미지를 출력할 수 없는 경우 출려되는 문자열, 필수 속성
• width 속성 : 이미지 너비, 생략시 원본의 너비
• height 속성 : 이미지 높이, 생략시 원본의 높이

<ol> : 순서 있는 리스트

<ul> : 순서 없는 리스트

<li> : 리스트 아이템

<dl>

• definition list
• <dt> : 용어
• <dd> : 설명

<table>

• 표 전체를 담는 컨테이너
• <caption> : 표제목
• <thead> : 헤드
• <tbody> : 바디, 데이터 표현
• <tfoot> 바닥
• <tr> : 행, 여러개의 <td>, <th> 포함
• <th> : 제목 셀
• <td> : 데이터 셀

2. 하이퍼링크

<a>

• 하이퍼링크 태그
• href 속성 : 이동할 html 페이지의 url 또는 html 페이지 내의 앵커 ( 앵커는 id속성으로 지정)
• target 속성 : 연결된 html 페이지가 출력될 윈도우 지정
  • _blank : 새창에서 열기
  • _self : 현재창에서 열기
  • _parent : 부모창에서 열기
  • _top : 최상위 창에서 열기
  • iframe_name : 해당 인라인프레임에서 열기
• download 속성 : 링크 클릭시 href에 지정된 파일 다운로드 시작

3. 인라인 프레임

<iframe>

• 현재 html 페이지 내에 내장 윈도우를 만들고 다른 html 페이지를 출력
• src 속성 : 출력할 html 페이지 url
• name 속성 : 프레임 윈도우 이름 -> 다른 웹 페이지에서 <a> 태그의 target 속성 값으로 사용됨

4. 미디어

- 미디어 표준화

: html5 이전에는 오디오나 비디오를 재생하기 위해 플러그인 소프트웨어를 설치해야 했고 브라우저마다 설치해야되는 플러그인이 달라 브라우저에 따라 미디어가 재생되지 않는 문제점이 있었다. html5에서는 플러그인 없이 오디오나 비디오를 재생할 수 있도록 미디어 태그를 이용하여 표준화 시켰다.

<video>

• src  : 비디오 파일의 url
• width, height : 비디오 재생 영역의 너비와 높이
• controls : 비디오 제어 버튼
• autoplay : 비디오 로딩 즉시 재생
• loop : 비디오 반복 재생
• type : 비디오의 MIME type 설정 = video/mp4 | video/webm | video/ogg

<audio>

• src  : 오디오 파일의 url
• controls : 오디오 제어 버튼
• autoplay : 오디오 로딩 즉시 재생
• loop : 반복 재생

5. 문서구조화

- 시맨틱 웹

: 웹 문서를 구조화 하여 의미 있는 내용 탐색이 용이한 웹

- 시맨틱 태그

1. <header> : 페이지나 <section>의 머리말을 표현하는 태그
2. <nav> :  하이퍼링크들을 모아 놓은 섹션. ex) 페이지 내 목차
3. <section> : 본문의 콘텐츠를 분류
4. <article> : 콘텐츠의 실질적인 내용
5. <aside> : 본문의 흐름에서 약간 벗어난 내용
6. <footer> 페이지나 <section>의 꼬리말

<figure>

• 본문에 삽입된 그림, 이미지, 동영상등을 블록화하는 시맨틱 블록 태그
• <figcaption>으로 <figure>태그의 제목을 붙인다

<time> : 시간정보임을 표시하는 시맨틱 인라인 태그

<meter> 

• 퍼센테지를 나타내는 시맨틱 인라인 태그
• value 속성 : 0~1 사이의 값으로 비율 표현

<progress>

• 작업의 진행 정도를 표시하는 시맨틱 인라인 태그
• value 속성, max 속성 : max속성값 기준 value 값의 비율 표현

6. 웹 폼

- 개념

• 웹 페이지를 통해 사용자 입력을 받는 폼을 web form 이라고 한다.
• web from을 구성하는 태그들을 form element라고 한다. ex) <input>, <select>, <button>

<form>

• 웹 폼을 구성하는 폼 태그들을 담는 컨테이너
• name 속성 : 폼이름 지정
• action 속성 : 폼 데이터를 처리할 웹 서버 응용프로그램의 url
• method 속성 : 폼 데이터를 웹 서버로 전송하는 형식 지정 = "GET|POST"

- 텍스트 입력 form element

1. <input type="text"> : 한줄 텍스트를 입력받음
2. <input type="password"> : 비밀번호 입력받음
3. <textarea cols="20" rows="5"> : 20 x 5 크기의 여러줄의 텍스트 입력 받음
4. <input type="text" list="datalistId"> : 데이터 목록을 가진 텍스트 입력
     <datalost id = "datalistId">
       <option value="listItem1">
       <option value="listItem2">
     </datalist>

- 버튼 form element

1. <button type="button"> : 단순버튼, JS 코드에서 주로 이용
2. <button type="submit"> : submit 버튼
3. <button type="reset"> : 폼에 입력된 내용 모두 지우고 초기화하는 버튼
4. <button type="button"> : 이미지버튼
     <img src="imageUrl" alt="이미지버튼">
   </button>

- 선택형 form element

1. <input type="checkbox" value="요소 값" name="요소 이름" checked>
   • 각각의 체크박스를 선택/해제 하는 폼 요소
   • value 속성 : 폼 요소가 선택된 상태일 때 웹서버에 전송되는 값
   • checked 속성 : 이 속성이 설정되어 있으면 초기에 선택 상태로 출력
2. <input type="radio" value="요소 값" name="요소 이름 checked>
   • 가은 name 값을 가진 radio 버튼들이 하나의 그룹을 형성하고 그 중 하나만 선택되는 폼 요소
3. <select name="요소이름" size="5"> 
     <option value="1">option1</option>  
     <option value="2">option2</option>
   </select>
   • 드롭다운 목록을 보여주고 그 중 하나를 선택하는 폼 요소
   • size 속성 : 드롭다운 목록에 보여지는 항목 갯수

<input type="color" value="초기값">

• color 입력 form element

<input type="month | week | date | time | datetime-local">

• 시간정보 입력 form element

- 특정형식 입력 form element 

1. <input type="email"> : email 주소 형식으로 입력하지 않고 submit 하는 경우 오류메세지를 출력
2. <input type="url"> : url 형식으로 입력하지 않고 submit 하는 경우 오류메세지 출력

- placeholder 속성

• 입력할 정보의 예시를 보여주는 속성
• <input type="tel" placeholder="010-0000-0000">

- form element caption 설정 : 라벨링

• caption : 폼 요소 앞에 붙는 간단한 설명이나 이름
• 라벨링1 
  <label>
    캡션 : <input type="text">
  </label>
• 라벨링2
  <label for="formId">
    캡션 :
  </label>
  <input type="text" id="formId">

- 다수의 form element를 grouping

• <fieldset> : 폼 요소들을 감싸서 그룹핑. 브라우저는 그룹을 둘러싸는 외곽선 출력
• <legend> : 그룹핑된 그룹의 제목
• <form>
    <fieldset>
      <legend>회원정보</legend>
      이름 : <input type="text"><br>
      메일 : <input type="email">
    </fieldset>
  </form>

- 웹

• 한 컴퓨터에서 만든 문서를 다른 컴퓨터에서 볼 수 있도록 하기위해 인터넷으로 전 세계의 컴퓨터들을 거미줄처럼 연결하고 웹 문서를 쉡게 주고 받을 수 있도록 만든 시스템.

- 웹의 구성

• 웹 서버 : 문서, 이미지, 동영상 등의 데이터 저장. 웹 서버로 동작하려면 웹 브라우저로부터 요청을 해석하고 웹 문서를 전달하거나 적절한 웹 응용 프로그램을 실행시키고 실행결과를 다시 전송하는 웹 서버 소프트웨어(ex Apach, Nginx)를 탑재해야 한다.
• 웹 클라이언트 : 웹 서버로부터 데이터를 다운받아 사용자에게 보여주거나 사용자 데이터를 웹 서버에 업로드 하는 인터페이스. 웹 클라이언트로 작동하기 위해서는 웹 브라우저가 필요.

- 웹 페이지

• 정의 : 월드 와이드 웹 상에 있는 개개의 문서
• 웹 페이지 구성 3요소
  1. 웹 페이지 구조, 내용 - html 태그로 작성
  2. 웹 페이지 모양 - css로 작성
  3. 웹 페이지 행동 및 응용 프로그램 - javascript로 작성
• 정적 웹 페이지 : 저장된 그대로 사용자에게 전달되는 웹 페이지
• 동적 웹페이지
  • 서버사이드 동적 웹페이지 :  서버사이드 스크립트를 처리하는 애플리케이션 서버에 의해 통제되는 구조의 웹페이지이다. 서버 사이드 스크립트에서 파라미터는 클라이언트 사이드 처리의 구성을 포함하여, 새로운 모든 웹 페이지의 조합이 어떻게 처리되는지를 결정한다.
  • 클라이언트 동적 웹페이지 : 로드될 때 브라우저에서 실행되는 HTML 스크립트를 사용하여 웹 페이지를 처리한다. 자바스크립트와 다른 스크립트 언어들은 수신된 페이지의 HTML이 문서 객체 모델(DOM)로 구문 분석하는 방식을 결정하며 로드되는 웹 페이지를 표출한다. 동일한 클라이언트 사이드 기법들이 동일한 방식으로 DOM을 동적으로 업데이트하거나 변경한다.

- URL

• 웹 서버의 주소와 웹 페이지 파일의 경로명으로 구성된 인터넷 자원 주소
• 구성요소 : 프로토콜 + 서버주소 + tcp/ip 포트번호 + 경로명 + 파일이름

- HTTP

• 웹 브라우저와 웹 서버가 웹 페이지 등의 자원을 주고받기 위해 사용하는 통신 규약
• 웹 브라우저가 요청하고 웹 서버가 응답하는 방식으로 작동
• http 세션 : 하나의 html 파일을 받아오는 과정

- 쿠키

• 정의 : 브라우저가 웹 서버에 처음 접속하면 그 응답으로 웹 서버가 브라우저에게 보내는 4KB 이하의 작은 데이터
• 용도 : 웹의 stateless 상태에서도 현재 방문한 사용자가 다음에 방문할 때 알아보기 위해 사용된다.
• 쿠키 데이터는 6개의 쌍으로 구성되어 있다
  name=value; Expires=[Date]; Domain=[Domain]; Path=[Path]; [Secure]; HttpOnly;
• 웹 사이트의 어떤 웹 페이지가 다른 웹 페이지에게 전달할 정보를 쿠키로 만들어 사용자 로컬 컴퓨터에 저장하면, 다른 웹 페이지는 쿠키를 통해 정보를 전달 받는다
• 한계점
  • 크기가 4KB로 제한
  • 웹서버에 요청 보낼때마다 쿠키가 함께 전송되서 높은 트래픽 발생
  • 쿠키는 브라우저의 모든 윈도우가 공유하므로 윈도우마다 독립적인 값을 저장할 수 없다 

- 세션 스토리지

• 브라우저 윈도우마다 마련된 독립적인 저장소로 윈도우가 사라지면 함께 사라지는 일시적인 저장소
• 세션 : 브라우저 윈도우와 웹 사이트가 연결된 상황
• 용도 : 세션 스토리지는 한 세션동안 한 윈도우에 연결된 웹 사이트의 웹 페이지들이 주고 받는 임시 데이터를 로컬 컴퓨터에 일시적으로 저장하기 위해 사용된다.

- 로컬 스토리지

• 모든 브라우저 윈도우들이 공유하며 윈도우나 브라우저가 닫혀도 사라지지 않는 영구적인 저장소
• 웹 사이트와 연결하지 않고도 오프라인 상태에서 웹 어플리케이션이 로컬 스토리지를 활용할 수 있다

프로그램에서 자료를 다루기 위해 필요한 여러가지 자료구조에 대해 배움
스택, 큐, 데크
연결 리스트, 환형 연결 리스트, 이중 연결 리스트
해쉬, 더블해쉬, 맵
트리, 트리 순회 방법, 이진 트리, 이즘진 탐색 트리, AVL 트리, 힙, 우선 순위 큐
그래프, 무방향 그래프, 방향 그래프, DFS, BFS, 다익스트라 알고리즘