프론트엔드 강의를 들으며 처음 보거나 정확히 알지 못했던 CSS 개념들을 하나씩 정리해 보았습니다.transitionbutton { transition: all 250ms ease-in;}transition은 CSS 속성의 값이 바뀔 때 애니메이션 효과 ✨ 를 줄 수 있는 속성입니다.all → 모든 CSS 속성에 대해 트랜지션을 적용하겠다는 의미입니다.250ms → 0.25초 동안 애니메이션이 진행됩니다.ease-in → 애니메이션이 천천히 시작되고 빠르게 끝나는 곡선입니다.💡 언제 쓰나요?버튼에 마우스를 올릴 때 색상이나 크기 변화가 부드럽게 보이도록 만들고 싶을 때 사용합니다.white-space: nowrap.tab-title { white-space: nowrap;}텍스트가 줄바꿈되지 않도록..

BEM 네이밍 방식CSS 클래스명을 체계적으로 명명하는 방법론BEM (Block Element Modifier) 구조block__element--modifier🏗️ 구조 파악: 클래스명만 봐도 HTML 구조를 한눈에 알 수 있어요🛡️ 충돌 방지: 다른 개발자가 만든 스타일과 겹치지 않아요👥 팀워크: 모든 개발자가 같은 규칙으로 코딩해요실제 사용 예시/* Block: header */.header { }/* Element: header 안의 menu */.header__menu { }/* Element: menu 안의 item */.header__menu__item { }/* Modifier: active 상태의 item */.header__menu__item--active { }/* 여러 클래스 동..

HTML 태그에 스타일을 적용할 때, 같은 요소에 여러 스타일이 겹치는 경우 어떤 스타일이 최종 적용되는지 정리해보았습니다.이번 포스팅에서는 CSS 스타일 우선순위의 원칙과 함께, 실제 예제를 통한 적용 순서를 설명드리겠습니다.CSS 우선순위구분설명우선순위인라인 스타일태그 내부 style 속성에 직접 작성⭐ 가장 높음ID 선택자#primary 형태매우 높음클래스 선택자.special 형태중간태그 선택자button 등 태그 이름낮음중복 선언같은 선택자라면 나중에 선언된 것이 적용됨적용됨실전 예제로 살펴보는 적용 우선순위아래와 같은 HTML 버튼 요소들이 있다고 가정:기본 버튼클래스 버튼ID + 클래스 버튼인라인 스타일 버튼 그리고 아래처럼 CSS가 선언되어 있다면:button { background-co..