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.