선택자(클래스, ID) 사용 기준과 실전 가이드 그리고 BEM
·
HTML & CSS
주의공부하는 과정에서 정리하는 하나의 가이드라인일 뿐입니다.  클래스 선택자 vs ID 선택자 - 사용 기준과 실전 가이드CSS에서 효율적인 스타일링을 위해 클래스 선택자와 ID 선택자를 적절히 사용하는 것이 중요합니다. 각각의 선택자는 특정 상황에 맞게 사용해야 코드가 깔끔하고 유지보수가 쉬워집니다. ID 선택자(#) - 고유한 요소에 사용특징문서 내에서 유일한 요소에 사용합니다 > 단일 요소를 명확하게 타겟팅해야 할 때 적합명시도(Specificity)가 높아 우선순위가 가장 강함자바스크립트에서 DOM 조작할 때 사용하기 편리함사용 기준페이지에서 단 한 번만 등장하는 요소레이아웃의 주요 구조 요소 : `#header`, `#footer`, `#main-content`특정 상호작용이 필요한 요소 : `..
CSS Cascading - style 적용의 우선순위
·
HTML & CSS
CSS 적용 우선순위의 기본 개념CSS는 여러 스타일의 규칙이 동일한 요소에 적용될 때 Cascading (폭포수 효과) 원리를 통해 어떤 스타일이 적용될지 결정합니다. 이를 통해 예측 가능한 동작과 효율적인 스타일 관리가 가능합니다. 가장 간단한 예시를 몇 가지 보겠습니다.하나의 요소 `텍스트 내용`에 두 가지 스타일을 적용하려고 합니다. 그리고 결과는 늦게 선언된 `color: red`가 적용되죠.See the Pen css-cascading-01 by Hansaem Jeong (@Hansaem-Jeong) on CodePen. 또 다른 경우도 있습니다. `p` 태그를 `div`로 감싸고 `id`와 `class` 속성을 추가합니다. 그리고 세 가지의 스타일을 적용하려고 합니다. 결과는 가장 먼저 선..