프로그래머 도전기 63일차

오늘은

 

주말은 언제나 아쉽습니다

많은 계획을 세워놓고는 다 하지 못해서 아쉬움이 남습니다

 

 

 

 

CSS 공부

<flex-wrap 속성>
= 주축이 수평일 때 새로운 행을 만들어 요소를 정렬
   주축이 수직일 때 새로운 열을 만들어 요소를 정렬

* flex-wrap: wrap;
  flex-wrap: wrap-reverse;
  flex-wrap: nowrap;
  => wrap은 교차축의 방향을 결정한다

<align-items 속성>
= 교차축을 따라 아이템을 배열

* justify-content = 주축을 따름 : 주축을 기준으로 골고루 배열
  align-items = 교차축을 따름 : 교차축을 기준으로 골고루 배열

  align-items: flex-start; = 디폴트값, 교차축의 시작점을 기준으로 한다
  align-items: flex-end; = 입력한 교차축의 끝점에 맞춰 정렬된다
  align-items: flex-center; = 수직과 수평 방향을 한 번에 중앙 정렬
  align-items: baseline; = 텍스트의 기준선에 맞춰 정렬
                                => 각 글자를 잇는 밑줄을 긋는다고 생각하고 그 기준에 맞춰 정렬된다고 보면 된다
  * 요소의 종류나 크기에 상관없이 똑같이 적용된다

<align-content 속성>
= 열 사이의 공간을 조정

* align-content: space-between;
  align-content: flex-start
  align-content: flex-end
  align-content: center

* flex-wrap을 적용하지 않은 채 행이나 열이 단 하나라면 => aligan-content는 아무 의미가 없다
   = wrap이나 wrap-reverse가 적용되어야 한다

<align-slef 속성>
= align-items와 비슷하지만 단일 요소에서 사용하거나 플렉스 컨테이너에서 두 개 요소에 개별로 사용
   플렉스 컨테이너 자체에는 쓰지 않는 특성으로 개별 요소에 적용할 때 사용한다\


<flex-basis>
= 요소가 배치되기 전에 요소의 최초 크기를 결정
   플렉스 컨테이너에 추가되기 전 시작점 같은 것
   => flex-basis값이 정해져있는 이상 다른 너비 값은 무시된다
        = flex-basis가 가로인 주축에 걸쳐 있기 때문에 너비의 기준이 된다

<flex-grow>
= 공간이 있을 때 요소가 그 공간을 얼마나 차지할지 정한다
-> flex-grow는 단위를 적지 않아도 된다
    1로 설정하면 설정된 요소는 남은 공간 모두 차지하게 된다
    1로 설정된 요소가 여러개라면 동일한 비율로 남은 공간을 모두 차지한다
    = 창을 줄이더라도 비율은 유지된다
=> 너무 좁아지면 한 줄에 나머지 요소가 남고
     flex-grow:1; 로 설정된 요소는 줄바꿈되어 아랫줄을 전부 차지한다
=> A요소를 flex-grow:1;, B요소를 flex-grow2; 로 설정하면
    B요소가 A요소보다 공간을 2배 더 많이 차지한다
    A요소가 늘어난 양의 2배로 B요소가 늘어나 공간을 차지한다 

<flex-shrink>
= 컨테이너에 충분한 공간이 없을 때 요소들이 줄어드는 비율을 통제한다
=>flex-shrink를 2로 설정하면 -> 다른 요소들보다 더 줄어든다
    3으로 설정하면 더 줄어든다
    0으로 설정하면 전혀 줄어들지 않고 원래의 크기를 유지하게된다
    1은 디폴트값이기 때문에 모두 동일한 비율로 줄어든다

<flex 속기법>
flex-basis, flex-grow, flex-shrink 특성이 자주 쓰이다 보니 flex 속기법이 만들어짐
= 세가지를 한 번에 설정할 수 있다
=> 세 가지 값의 순서 = flex-grow, flex-shrink, flex-basis 이다
     단위 없이 숫자만 입력한다면 (flex:1;) flex-grow로 취급
     flex-basis는 배치하기 전에 생각하는 최초 크기 -> 배치하고 나서 크기 조정 가능
     단위가 있는 값은 flex-basis 이다

 

 

 

Coding Test Practice

Description
두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요.

function solution(left, right) {
    var answer = 0;
    for(var i = left; i <= right; i++){
        var count = 0;
        for(var j = 1; j <= i; j++){
            if(i % j == 0){
                count++;
            }
        }
        if(count % 2 == 0){
            answer += i;
        }
        if(count % 2 != 0){
            answer -= i;
        }
    }
    return answer;
}

 

 

 

Description
길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요.
이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이)

function solution(a, b) {
    var answer = 0;
    for(var i = 0; i < a.length; i++){
        answer += a[i]*b[i];
    }
    return answer;
}

 

 

 

Description
길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다.

function solution(n) {
    var answer = '';
    for(var i = 1; i <= n; i++){
        if(i % 2 != 0){
            answer+= '수';
        }else{
            answer+= '박';
        }
    }
    return answer;
}

 

 

 

 

 

 

2023. 11. 05 (일)