dev-hpk 님의 블로그

웹 개발에서 스타일링은 UI의 품질과 사용자 경험을 좌우하는 중요한 부분입니다. 이를 구현하는 방법에는 CSS-in-CSS, CSS Module, CSS-in-JS가 대표적입니다. 각각의 방식은 접근 방식과 사용 사례가 다르며, 프로젝트의 요구사항에 따라 선택지가 달라질 수 있습니다 목차 1. CSS-in-CSS 2. CSS Module 3. CSS-in-JS 4. CSS-in-CSS, CSS Module, CSS-in-JS 비교위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. CSS-in-CSS CSS-in-CSS는 가장 전통적인 스타일링 방식으로, 별도의 CSS 파일에 스타일을 작성하고 HTML 요소에 클래스를 할당하는 방식입니다.특징파일 분리: CSS는 독립적인 파일에 작성되어 HTML, J..

1. Repaint와 Reflow position: absolute나 position: fixed와 같은 속성을 사용하면 요소가 문서 흐름에서 제거되기 때문에, 브라우저는 해당 요소의 위치를 계산하고 레이아웃을 조정해야 합니다. 이는 reflow를 유발할 수 있으며, 많은 요소를 동시에 다루거나 복잡한 레이아웃이 있을 경우 성능에 부정적인 영향을 미칠 수 있습니다. 2. 복잡한 레이아웃 및 배치 position: absolute나 position: fixed를 사용하면 요소는 ..

반응형 웹사이트? 반응형 웹사이트란 한 가지의 웹사이트로 다양한 종류의 화면 크기에 최적화된 화면을 보여주는 것을 뜻합니다. 반응형 웹은 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변합니다. 반응형 웹사이트에 필요한 CSS 속성들 Viewport 단위 vw (viewport width) : 브라우저의 넓이를 기준으로 하..

CSS 적용 방법 및 Cascading의 원리 CSS의 적용 방법 1. Style 태그 HTML 파일 내에 태그를 사용해 스타일링하는 방법입니다. /* 스타일 작성 */ a { color: red; } 2. 인라인 스타일 HTML 파일에 style 속성을 추가해 스타일링하는 방법입니다. 링크 3. CSS 파일 ..

Cascading이란?최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 말합니다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다.  규칙 선택자마다 명시도 점수가 있고 명시도를 고려한 우선 적용되는 순서는 아래와 같습니다. !important (명시도와 무관하지만, 명시도에 직접 영향을 미침, 다른 선언보다 우선함) 인라인 스타일 정의 (인라인 스타일은 항상 외부 스타일시트의 모든 스타일을 덮어쓰기때문에 가장 높은 명시도를 갖는다고 생각할 수 있음) 명시도 아이디 선택자 클래스 선택자, 속성 선택자, 가상(pseudo)클래스 선택자 태그 선택자, 가상(psuedo)요소 선택자상속된 스타일상속: 부모 태그에 적용된 CSS 규칙..