CSS — Look and Layout
CSS — Look and Layout
If HTML describes what something is, CSS describes how it looks and how it is arranged. Color, size, spacing, alignment, responsiveness — most of the visual decisions on screen belong to CSS. This article covers CSS's origins, the box model, layout tools, selector specificity, units and media queries, and the flow of modern CSS.
1. About CSS
Short for Cascading Style Sheets. Håkon Wium Lie proposed it in 1994 while working at CERN. Together with Bert Bos he refined it, and W3C published CSS Level 1 as a Recommendation in 1996. CSS2 (1998) and CSS 2.1 (2011) followed.
From CSS3 onward, instead of one large monolithic spec, the spec branched into modules. Names like Selectors Level 4, Color Module Level 4, Grid Layout Level 1, Flexbox Level 1. The distinction "is it CSS3 or CSS4" itself has lost meaning.
2. Box Model
Every element CSS sees is a rectangular box. The box has four layers from inner to outer:
┌─────────────────── margin (바깥 여백) ───────────────────┐
│ ┌───────────────── border (테두리) ───────────────────┐ │
│ │ ┌─────────────── padding (안쪽 여백) ─────────────┐ │ │
│ │ │ ┌─────────── content (실제 내용) ──────────────┐ │ │ │
│ │ │ └──────────────────────────────────────────────┘ │ │ │
│ │ └──────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘
By default, width: 200px only sets the content area to 200px, and the actual occupied space is the result of adding padding and border. Because that calculation is counter-intuitive, the convention is to put the following one-liner globally:
*, *::before, *::after { box-sizing: border-box; }
border-box means width is the total box width including padding and border.
3. Major display Branches
| Value | Behavior |
|---|---|
block |
Takes a full row. Default for div and p |
inline |
Flows inline like text. Default for span and a. Ignores width / height |
inline-block |
Flows like inline but honors width / height |
flex |
1-D alignment container |
grid |
2-D alignment container |
none |
Removed from the screen (occupies no space) |
4. Flexbox
CSS Flexible Box Layout. After draft specs starting in 2009 it stabilized gradually, and around 2017 every modern browser supported it. Strong at aligning children along one axis.
.row {
display: flex;
gap: 12px; /* 자식 사이 간격 */
justify-content: space-between; /* 주축 정렬 */
align-items: center; /* 교차축 정렬 */
}
5. Grid
CSS Grid Layout. Major browsers shipped it together in 2017. Defining rows and columns together makes 2-D layout natural:
.layout {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px;
}
The fr unit divides the remaining space proportionally.
6. Selector Specificity
The rule that decides who wins when the same property collides across rules:
| Selector | Score |
|---|---|
!important |
Beats everything (avoid using) |
Inline style (style="...") |
1000 |
id (#main) |
100 |
Class · attribute · pseudo-class (.btn · [type=text] · :hover) |
10 |
Element · pseudo-element (p · ::before) |
1 |
If scores tie, the later declaration wins. This flow is the etymology of "Cascading".
7. Units
| Unit | Meaning |
|---|---|
px |
Absolute pixel |
% |
Ratio relative to the parent |
em |
Relative to the element's own font size |
rem |
Relative to the root (html) font size |
vh · vw |
1% of viewport height / width |
dvh · svh · lvh |
Viewport height accounting for the mobile address bar |
ch · ex |
Based on character width / height |
The general view is that relative units (rem, em) are friendlier to accessibility and responsive design.
8. Media Queries · Responsive
.card { padding: 16px; }
@media (min-width: 768px) {
.card { padding: 24px; }
}
A different rule applies when the viewport width is at least 768px. The mobile-first approach (stacking from min-width) is commonly recommended.
9. Other Paths
Branches we often see beside pure CSS:
- CSS preprocessors — Sass (2006), Less (2009). Variables, nesting, mixins. As modern CSS absorbed some features, usage frequency has dropped.
- CSS-in-JS — styled-components, Emotion. Write styles inside JS. Runtime cost is debated.
- Utility-first — Tailwind CSS (2017). Style by composing tiny utility classes.
- CSS Modules — Class names scoped per file. Webpack / Vite handles it at build time.
10. Common Shape
/* 변수 */
:root {
--color-primary: #2563eb;
--space-1: 4px;
--space-2: 8px;
}
.btn {
background: var(--color-primary);
padding: var(--space-2) calc(var(--space-2) * 2);
border-radius: 6px;
color: white;
border: none;
cursor: pointer;
}
.btn:hover { filter: brightness(0.95); }
/* 모던 셀렉터 */
.card:has(> img) { padding-top: 0; } /* 이미지가 자식인 카드만 */
/* 컨테이너 쿼리 (2023 정식) */
.sidebar { container-type: inline-size; }
@container (min-width: 400px) {
.sidebar .item { display: flex; }
}
11. Common Pitfalls
width: 100% overflowing the parent — because padding and border were added. Use box-sizing: border-box.
Margins not stacking, only the larger one applying — vertical margin collapse. It does not happen inside flex / grid containers.
position: absolute taking an unexpected ancestor as reference — the nearest ancestor whose position is not static becomes the reference. Set position: relative on the intended parent.
z-index not working — the parent might lack position, or the stacking context is broken.
Overusing !important — a specificity war begins, and we end up rewriting often.
Closing thoughts
CSS rests on four foundations: the box model, Flexbox / Grid, selector specificity, and variables. As modern CSS absorbs variables, :has(), and container queries, the role of preprocessors has shrunk and Tailwind's utility-first style leads a large flow today. The core stays the same — selectors with clear intent, consistent units, and mobile-first.
Next
- javascript-basics
- http-rest
W3C CSS Working Group · CSS Snapshot 2024 · MDN CSS · web.dev Learn CSS · css-tricks.com · Flexbox Froggy · Grid Garden · Can I Use · Håkon Wium Lie's CSS proposal email (1994) for reference.