Codekata💢

toString -> 2진법 전환

const solution = N => {
  let binaryNumArr = N.toString(2).split("");
  let oneIdx=[];
  for (let i=0; i<binaryNumArr.length; i++){
    if (binaryNumArr[i]==="1"){
      oneIdx.push(Number(i));
    }
  }
  let binaryGap = (oneIdx.map((el, idx)=>{
    return (oneIdx[idx-1]>=0?
      (el-oneIdx[idx-1]-1):0);
  }));
  return Math.max.apply(null, binaryGap);
}

오늘의 CSS🎨

Grid

속성 종류

• grid-column-start / grid-column-end

  • end 숫자 -1 까지 열이 만들어진다
  • 음수 가능열
  • span 숫자 : 숫자 -> 열의 개수

• grid-column

  • 숫자/숫자 : 시작열/ 끝열
  • display 설정한 부모한테 주는 것이 아니라 자식에게 부여하는 것이다

.typeOfSilluet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  .silluetSquare {
    border: 1px solid var(--FilterColor);
    &:last-child {
      grid-column: 1 / 3;
  }
}

• grid-row
  • column 속성을 세로로 적용한 것과 같다

• grid-area

  • grid-row-start, grid-column-start, grid-row-end, grid-column-end

• order

  • 숫자로 우선 순위를 설정한다(z-index 같은 느낌)
  • 기본값은 0

• grid-template-columns

  • 각 열의 너비를 설정할 수 있다
  • repeat(숫자, 너비) : 같은 너비의 열이 숫자만큼 생성된다
  • fr 단위

꿀Tip🧀

nth-child

• 부모 클래스에서 지정하면 안되고 동일한 depth 에서 지정해야 한다.

SPA란?

• Single Page Application
• 단일 페이지로 구성된 웹 어플리케이션, 화면 이동시 html 다시 받지 않고, 필요한 데이터만 서버로부터 받고 렌더링 할 수 있다
• 화면 전환이 빠르지만, 초기 세팅에 로딩이 걸리고 코드가 복잡하다.

flex-wrap

• 한줄 짜리 flex를 다음 줄로 넘어가게 하는것

max-width + width(100%)

• 반응형을 위한 너비값

경고창 줄이기

• map + key 속성
• img + alt 속성