Frontend Lab

display: grid부터 grid-template-areas, auto-fill/fit, 실습 예제까지 인터랙티브 슬라이더로 배워요.

오늘 배운 Grid 개념을 15문제로 확인해보세요. 힌트, 해설, 점수까지 제공해요.

1차원 레이아웃의 모든 것. flex-direction, justify-content, align-items 등을 인터랙티브하게 배워요.

Flex 핵심 개념을 문제로 확인해보세요.

static, relative, absolute, fixed, sticky의 차이를 시각적으로 이해해요.

Position 핵심 개념을 문제로 확인해보세요.

CDN 셋팅부터 flex, grid, position, 단위 시스템, v4 주의사항까지 인터랙티브하게 배워요.

1995년 탄생부터 현대 JavaScript까지. 브라우저 전쟁, DOM/BOM, ES6+ 표준화까지 배워요.

var, let, const의 완벽한 차이. 변수 선언, 스코프, 재할당 완전 정복!

String, Number, Boolean, null, undefined, Object. 7가지 타입을 초딩도 이해할 수 있게!

산술, 대입, 증감, 비교, 논리, 삼항 연산자. 우선순위까지 완벽하게!

함수 스코프, 블록 스코프, 스코프 체인. 호이스팅의 모든 것을 인터랙티브하게 배워요.

if/else, else if, switch문으로 조건에 따라 다르게 실행하는 분기를 완전히 이해해요.

while, for, forEach, for...of로 같은 코드를 여러 번 실행해요. break/continue 포함!

querySelector, createElement, appendChild, textContent 등 DOM 메서드를 마스터해요.

Array, String, Math, Date, Object 등 JavaScript의 주요 내장 객체와 메서드.

HTML 문서 구조, 시맨틱 태그, 폼, 링크, 이미지 등 기초 개념을 확인해요.

HTML 심화 개념을 문제로 확인해보세요.

text-align, text-transform, text-decoration, text-shadow, CSS Colors 등을 확인해요.

font-size, font-weight, font-family, line-height 등 폰트 관련 속성을 확인해요.

px, em, rem, %, vw, vh 등 CSS 단위 개념을 확인해요.

margin, padding, border, box-sizing 등 박스모델 개념을 확인해요.

background-color, background-image, background-size 등 배경 속성을 확인해요.

자손, 자식, 인접, 일반 형제 선택자 등 결합 선택자 개념을 확인해요.

specificity, important, 캐스케이딩 등 CSS 우선순위 규칙을 확인해요.