🎨 CSS 파보기

display: flex; 를 설정하면 기본적으로 flex-direction: row; 가 적용됨즉, 요소들이 가로(왼→오) 방향으로 배치됨.justify-content: center; → 가로 정렬을 담당align-items: center; → 세로 정렬을 담당하지

먼저, 하나의 box가 있다고 가정해보자. 여기에 width: 200px과 padding-left: 50px을 적용하면 어떤 일이 발생할까?이 경우, 박스는 "나는 200px을 원하지만, padding 50px도 필요해!"라고 말하는 것과 같다.CSS의 기본 박스 모델

먼저, 하나의 box가 있다고 가정해보자. 여기에 width: 200px과 padding-left: 50px을 적용하면 어떤 일이 발생할까?이 경우, 박스는 "나는 200px을 원하지만, padding 50px도 필요해!"라고 말하는 것과 같다.CSS의 기본 박스 모델

CSS에서 요소의 크기를 설정할 수 있는 다양한 속성들이 있다.특히 width, height 와 max-width, min-height 는 이름이 비슷하지만 동작 방식이 매우 다르다.이번에 그 차이를 실제 코드 예제와 함께 명확히 이해했다.이미지 너비는 항상 300px

강의에서 사용된 이미지 레이아웃 스타일이 매우 유연하고 깔끔했는데,그 방식이 단순히 width, height 설정이 아니라 max-width, min-height, grid, transition, opacity 등을 활용한 고급 반응형 CSS 패턴이라는 것을 이해했다.

CSS 애니메이션(Animation) 이란, "시간에 따라 요소의 스타일을 바꾸는 것" 이다.즉, 요소를 움직이게 하거나 크기를 바꾸고, 색깔을 바꾸는 등의 동작을 자동으로 부드럽게 만들어주는 도구이다.👉 스타일 변경 중심이면 CSS 애니메이션!👉 사용자 상호작용/

@keyframes로 만든 애니메이션의 이름을 지정애니메이션이 한 번 완전히 실행되는 데 걸리는 시간s → 초 (2s = 2초)ms → 밀리초 (500ms = 0.5초)애니메이션의 속도 곡선 (느려졌다 빨라졌다 같은)애니메이션이 얼마 후에 시작될지 지정애니메이션을 몇

Tailwind를 CLI로 설치할 때 다음 명령어를 입력했다:그런데 npx tailwindcss init -p 명령어에서 다음과 같은 에러가 발생함:또한, node_modules/.bin/tailwindcss가 존재하지 않음.이 문제는 Tailwind CSS v4부터

처음엔 flex 를 단순히 가로 정렬하는 속성이라고 이해했었고, md: flex는 그저 반응형 정렬용이라고 생각음그래서 nav 메뉴를 보여주기 위해 굳이 md: flex가 필요한 이유가 잘 이해되지 않았음HTML 요소가 보이냐 / 안 보이냐, 어떻게 배치되느냐를 결정하