[F-Lab 모각코 챌린지 - 38일차] - 가상 선택자, 과제전형

Big One·2023년 6월 17일

에프랩

F-Lab

목록 보기

11/69

:root :where :is (가상 선택자)

:root

최상위 가상 선택자 웹페이지에서 :root를 사용하게되면 <html> 요소가 선택된다.

:where

그룹화화여 스타일을 적용한다. 대부분 :has나 다른 규칙과 함께 사용하여 자식요소에 스타일을 적용하는 경우가 많다.

:is

:where 가상 선택자와 같은 역할을 하지만 미묘한 차이가 있다. is는 그룹으로 묶어 스타일을 적용할 때 사용한다.

차이점 때문에 :is 선택자는 스타일을 적용하기 위한 목적으로 주로 사용되고, :where 선택자는 선택자 그룹을 만들어 다른 규칙과 함께 사용되는 데 더 적합합니다.

사용하는 이유

코드의 가독성과 유지보수성을 개선하는 데 도움을 줄 수 있기 때문이다.

position

공식

자손의 position 속성에 absolute 키워드를 적용하면 부모의 position 속성에 relative 키워드를 적용한다.

자손의 position 속성에 absolute 키워드를 적용하면 부모는 height 속성을 사용한다.

box-model

박스 모델은 css요소를 사각형의 박스로 취급하는 개념이다.

box-sizing 속성는 content-box 가 기본값이고, border-box를 자주 사용함

블록 레벨 스코프와 실행 컨텍스트 관계

블록 레벨 스코프 (Block-level Scope)는 코드 블록 내에서 변수가 유효한 범위를 가지는 것을 의미한다. 일반적으로 JavaScript에서 변수는 함수 레벨 스코프를 가지며, 함수 내에서 선언된 변수는 함수 내부에서만 유효하다. 하지만 ES6부터 도입된 let과 const 키워드를 사용하면 블록 레벨 스코프를 생성할 수 있다.

블록 레벨 스코프는 중괄호 {}로 둘러싸인 코드 블록 내에서 변수를 선언하면 해당 변수는 블록 내에서만 유효합니다. 블록 내에서 선언된 변수는 블록 외부에서는 접근할 수 없습니다. 이를 통해 변수의 스코프를 블록 단위로 제한하여 변수 충돌을 방지하고 코드의 가독성을 높일 수 있습니다.

{
  let x = 10; // 블록 레벨 스코프를 가지는 변수 선언
  console.log(x); // 10 출력
}

console.log(x); // x는 정의되지 않음

변수 x는 블록 내에서 선언되었기 때문에 블록 외부에서는 접근할 수 없다. 이를 통해 변수의 유효 범위를 제한할 수 있다.
ES6부터 let, const 등장으로 var 과의 차이점을 보면 블록 레벨 스코프도 관계가 있다.추 후 let const 학습 할 때 같이 도움이 될 것이다!

과제 전형

음 ..HTML 과 CSS 는 이미 작성되어있는 상태로 테이블 표에 데이터가 들어가있었다.
그런데 이 표를 과제 조건에 맞게 변경을 해야하는데 .. 절대 HTML, CSS 파일은 수정하면 안되고 js파일만 작성을 해야한다. 근데 .. 표 데이터에 이미 그려져있는 데이터를 전부 어떻게 교체하지? 하다가 innerHTML 사용하면 될까? 했는데 .. 태그 내부의 값은 그렇다치고 어떻게 많은 표들을 한 번에 고쳐야하느,ㄴ거지? 하면서 멘탈이 나갔다!
요즘 바닐라 자바스크립트 실시간 과제전형이 많이 증가하고 있다고 했다. 바닐라 자바스크립트로 프로젝트를 해보는게 다음달 까지의 목표이다!