mirabo01 님의 블로그

CSS의 본질은 박스를 다루는 기술이다.텍스트, 이미지, 버튼, 섹션 — 전부 하나의 ‘박스’로 구성되어 있다.이번 글에서는 박스 모델(Box Model) 의 개념부터margin, padding, border의 관계, 그리고 실무에서의 레이아웃 활용법까지한눈에 이해할 수 있도록 정리했다.💡 1. 박스 모델(Box Model)이란?“모든 HTML 요소는 눈에 보이지 않아도 하나의 상자(Box)다.”브라우저는 HTML 요소를 박스 형태의 레이어로 렌더링한다.이 박스는 네 부분으로 구성된다 👇┌─────────────────────────────┐ ← margin (바깥 여백) │ ┌─────────────────────────┐ │ │ │ border (테두리) │ │ │ │ ┌──────..

HTML이 웹의 ‘뼈대’라면,CSS는 그 위에 살과 피부를 입히는 디자인 언어다.이번 글에서는 CSS의 핵심 개념부터스타일이 HTML에 적용되는 3가지 방식까지기초를 완벽히 다지고 실무로 넘어갈 수 있도록 정리했다.💡 1. CSS란 무엇인가?“CSS는 Cascading Style Sheets의 약자 — HTML을 꾸며주는 언어다.”HTML이 내용(content) 을 담당한다면,CSS는 표현(presentation) 을 담당한다.즉, HTML은 ‘무엇을 보여줄지’를 정의하고,CSS는 ‘어떻게 보여줄지’를 결정한다.예를 들어 👇이 문장은 평범합니다. 이 문장은 CSS로 꾸몄습니다. 💬 두 번째 문장은 CSS 스타일 속성이 적용되어 색상이 바뀌었다.🧱 2. CSS 기본 문법 구조CSS는 아래와 같은 선..