sliver__

웹사이트를 구성할 때 CSS는 단순한 스타일링 도구를 넘어 웹 페이지의 레이아웃 전체를 계산하고 구성하는 핵심 엔진 역할을 합니다. 이 글에서는 CSS가 실제로 웹사이트의 시각적 구조를 어떻게 계산하고 렌더링하는지, 그 과정에서 중요한 시각적 포맷 모델(Visual Formatting Model) 개념을 설명합니다.박스 모델(Box Model): CSS의 가장 기본 개념CSS에서 모든 HTML 요소는 직사각형 상자(Box) 로 표현됩니다. 이 상자는 다음 네 가지 영역으로 나뉩니다.Content (콘텐츠): 텍스트, 이미지 등 실제 내용이 들어가는 영역Padding (패딩): 콘텐츠와 테두리 사이의 여백 (안쪽 여백)Border (테두리): 패딩 바깥의 선Margin (마진): 다른 요소들과의 거리 (바..

웹 개발에서 크기 단위를 선택하는 일은 사소해 보이지만, 유지보수성과 접근성에 큰 영향을 미칩니다. 특히 반응형 웹 디자인에서 px 대신 rem을 사용하는 것은 현대적인 CSS 개발의 핵심입니다. 이 글에서는 왜 rem 단위를 써야 하는지, 어떻게 쉽게 적용할 수 있는지 워크플로우와 함께 설명드립니다.rem이란?rem은 root em의 약자로, 루트 요소(일반적으로 요소)의 폰트 크기를 기준으로 크기를 지정하는 단위입니다.예를 들어, 에 font-size: 10px을 설정하면 1rem = 10px가 됩니다.왜 rem을 써야 할까?✅ 전역 크기 제어한 번의 설정으로 전체 페이지의 크기를 조절할 수 있습니다. 예를 들어, 미디어 쿼리 없이도 html의 font-size만 바꾸면 모든 rem 단위의 크기가 ..

이번에는 새로운 CSS 프로젝트를 시작할 때 반드시 설정해야 할 초기 세팅과 함께, 비교적 최신 CSS 기능인 clip-path를 활용한 디자인까지 다룹니다. 본문에서는 주요 흐름과 실습 내용을 정리해 보겠습니다.배우는 것Universal Selector를 이용한 기본 Resetbody에 적용하는 글꼴 설정 및 전역 스타일clip-path 속성으로 요소의 클리핑(잘라내기)background-image를 활용한 배경 이미지 및 그라디언트 오버레이vh 단위를 사용한 반응형 높이 설정box-sizing: border-box의 의미와 필요성기본 Reset 설정하기브라우저 기본 스타일을 제거하기 위해 universal selector(*)를 사용합니다:* { margin: 0; padding: 0; box-..

안녕하세요! 이번 포스팅에서는 사이드바에 패딩을 추가하다 생긴 박스 크기 붕괴 문제를 살펴보고, 이를 box‑sizing: border-box 로 한 방에 해결하는 방법을 알아볼게요. ✨1️⃣ 문제 상황: 패딩을 추가하자!사이드바(aside)에 padding: 40px;을 넣자원래 width: 300px;이던 박스가 총 380px로 커져서 레이아웃 밖으로 튀어나옴원인: 기본 박스 모델(content-box)은 지정 너비에 패딩/보더를 “추가”하기 때문2️⃣ 해결책: box-sizing: border-box개념border-box 모드에서는 padding과 border를 포함해 전체 박스 크기를 계산지정한 너비(높이)가 “컨텐츠+패딩+보더” 모두를 아우르는 값이 됨코드 적용/* 전역 Reset 예시 */* ..