이전 포스팅에서 값(value)과 단위(unit)에 대해서 대략적으로 정리해봤는데, 얘네들은 아래 이미지 예시처럼 엘리먼트(element)의 속성(property)에 할당되는 방식으로 사용할 수 있다. 엘리먼트는 타입(type)과 속성(property)로 구성되는데, 전기차 타입이면서 흰색 컬러와 19인치 휠크기, 그리고 길이는 4.7m의 속성을 가진 자동차를 만든다고 생각하면 이해가 쉬울 것 같다. (추가로 class나 id를 'tesla modelY'로 지어줄 수도 있다). 여기서 속성(property)은 휠크기, 컬러, 길이이고 값(value)은 19인치, 흰색, 4.7m이다.

엘리먼트(element) vs 컴포넌트(component)

element: component를 이루는 단위이며, 매번 만들어야 하는 객체

(eg. '전기차를 하나 만들건데, 컬러는 화이트고, 휠크기는 19인치고, 길이는 4.7m야'라고 하면 자동차 하나가 만들어진다)

component: element를 모아 모듈화해서 재사용 가능하게 한 것. 변수를 설정해서 매번 다른 속성의 컴포넌트를 만들 수 있음.

(eg. 예를 들어 '이번엔 컬러는 블랙, 휠크기는 20인치, 길이는 5m인 전기차를 2개 불러와줘!'라고 하면 그렇게 생긴 자동차 엘리먼트들을 불러내서 생성한다)

1. block vs inline

우리가 보는 웹페이지는 일반적인 문서처럼 자연스럽게 아래로 쌓이는 flow layout을 기본적으로 가지고 있다. 별도로 display 속성을 변경하여 flex layout(n x 1, 1 x n), grid layout(n x n)을 사용하지 않는 이상 각 엘리먼트의 display 속성은block이거나 inline 을 가진다. 용도에 따라서 어떤 태그(eg. header, paragraph, 등)들은 display: block; 속성을, 어떤 태그(eg. 링크(a), 강조(em))들은 display: inline; 속성을 미리 가지고 있으며, 용도에 따라서 변경이 가능하다.

block : 페이지를 구성하는 콘텐츠 덩어리.

가로: 화면을 꽉채움, 세로: 내가 가진 양만큼만 늘어남

inline : 필요한 만큼만 중간에 삽입되는 요소.

가로: 내가 가진 양만큼만 늘어남, 세로: 내가 가진 양만큼만 늘어남

굳이 어렵게 block과 inline에 대한 얘기를 꺼낸 이유는 display: inline; 속성을 가진 엘리먼트는 width, height를 지정할 수 없다는 얘기를 하기 위해서인데, inline 속성을 가진 엘리먼트가 가지고 있는 공간을 별도로 정의하고 싶다면 block 혹은 inline-block 속성으로 바꿔주거나 margin을 조절하는 방식이 가능하다. 이 부분은 개발적인 얘기이기 때문에 디자이너분들은 이런게 있구나 정도로 참고만 해도 좋을 듯 하다.

2. 정량적 vs 키워드

정량 : 절대값/상대값

100%, 200px, 5rem

키워드 : 문맥에 따라서 결정되는 값

auto, fit-content, max-content, min-content

• auto : 내가 가지고 있는 컨테이너의 가로 공간 중에서 margin, padding, border를 뺀 나머지 공간을 최대로 채우고 벗어나면 아래로 줄바꿈되는 방식 (figma에서는 fill container와 같다)
• fit-content : 이름에서 유추할 수 있는 것처럼 콘텐츠의 길이 기준으로 대응하면서 동시에 콘테이너 가로 공간도 모두 고려하는 방식
  콘텐츠가 컨테이너보다 짧을 때는 max-content, 길 때는 auto처럼 표현됨
• max-content : 컨테이너 공간은 무시하고, 컨텐츠를 줄바꿈없이 가로로 최대로 표현하는 방식
• min-content : 컨테이너 공간은 무시하고, 컨텐츠를 최소로 썰어서 줄바꿈하는 방식 (텍스트로 예를 들면 단어 단위로 줄바꿈 함)

3. min/max, clamp

좋은 사용자 경험을 주는 레이아웃을 구성하기 위해서는 2가지 조건을 만족시켜야 한다고 생각한다.

1. 다양한 해상도와 디바이스의 유형 마다 최적화된 레이아웃을 구성해야 한다.
2. viewport의 사이즈가 변하는 과정(eg. 브라우저 창을 확대/축소)에서 덜컹거리지 않고 슬릭해야 한다.

2번 조건을 해결하기 위해서 vw, %, auto, fit-content와 같은 단위를 사용하는 것과 함께, 크기나 레이아웃을 min/max 조건에 따라 줄바꿈할 지 여부를 정의하는 부분도 매우 중요하다. 단순히 'viewport가 1280px, 768px, 393px에서 레이아웃이 이렇게 보여질거야'라고 생각하는 방식에서 벗어나 '컴포넌트/엘리먼트를 중심으로 viewport 상태에 따라 동적인 레이아웃을 구성할거야'라고 하는 fluid 방식에 대한 내용이라고 할 수 있겠다.

적응형(Adaptive)

특정 breakpoint보다 크고 작은 기준으로 도메인 자체를 분리
특정 breakpoint는 레이아웃 구성을 변경하는 트리거 역할을 할 뿐 결국 도메인별로 fluid한 레이아웃 처리가 필요함

반응형(Responsive)

A,B breakpoint를 기준으로 구간(-A, A-B, B-)을 나눠서 레이아웃을 구성
A,B는 레이아웃 구성을 변경하는 트리거 역할을 할 뿐 결국 각 3구간별 fluid한 레이아웃 처리가 필요함

Fluid

viewport의 너비(width)에 기반하여 엘리먼트의 크기를 동적으로 처리하는 방식

예를 들어 이렇게 처리하고 싶다고 생각해보자
1. 그리드 속 카드는 viewport에 따라 같이 커지거나 줄어들고, 대신 width는 240px 보다 작아지거나 480px 보다 커지지 않았으면 좋겠어 . 240px보다 작아질거 같으면 한 줄에 카드 1,2장씩 줄여주고, 480px보다 커질거 같으면 한 줄에 카드 1,2장씩 늘려줘
2. 헤드라인 텍스트 사이즈도 마찬가지로 2rem(32px)와3rem(48px)사이를 유지해야 돼

1번

width/height 속성 같은 경우는 min-width, max-width라는 별도 속성(property)을 제공한다. 그렇기 때문에 아래처럼 정의해주면 충분히 처리가 가능하다.

.card {
    min-width: 240px;
    width: 100%; 
    max-width: 480px;
}

2번

width/height를 제외한 다른 속성들은 별도의 min/max prefix가 없다. 그래서 속성(property)이 아닌 내장 함수를 통해 값(value)을 전달해야한다.

h1 {
	font-size: clamp(2rem, 30vw, 3rem);
}

1.clamp(최소 값, 이상적인 값, 최대 값)

최소(절대 단위) - 최대 범위(절대 단위) 안에서 이상 적인 값(상대 단위) 우선 적용

2. min(A, B)

A,B 중 작은 값
max를 지정할 때 사용
A,B 중 하나는 절대 단위, 하나는 상대 단위 사용

3. max(A, B)

A,B 중 큰 값
min을 지정할 떄 사용
A,B 중 하나는 절대 단위, 하나는 상대 단위 사용

4. wrap(줄바꿈)

기본적으로 웹페이지는 block 컴포넌트들이 아래로 쌓여나가는 구조이기 때문에 줄바꿈 여부 자체를 정의할 필요가 없다. 하지만 가로(row) 방향 flex layout(n x 1)이나 grid layout(n x n) 같은 경우는 가로 방향이 먼저인 Z자 형태로 컨텐츠가 쌓이기 때문에 부모의 가로 공간을 넘치게 될 거 같으면 줄바꿈 할지 여부를 정해줘야한다.

각 레이아웃별로 flex나 grid가 적용된 부모 엘리먼트에 아래와 같은 css를 넣어주면 되는데, 대충 '1/n 할껀데 min ~ max 범위를 벗어나면 줄바꿈해주거나 하나를 더 채워줘'라는 개념이라고 보면 될 것 같다.

4-1. flex layout

flex-wrap: wrap;

4-2. grid layout

grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));

5. 정리

디자이너분들 대상으로 포스팅 하려다가 개발적인 내용까지 다루려니 정체성 혼란이 오고 있긴 하지만, 어쨌거나 우리가 대응하려는 화면 크기(예를 들어 280 ~ 3,840)의 모든 구간에 대해서 동적으로 레이아웃을 구성해야겠다는 시야가 생겼다면 그것만으로도 의미가 있는 것 같다.

5-1. 각 엘리먼트의 공간을 정의한다.

• 화면의 50%를 차지하고 싶어 - width: 50vw;
• 부모를 기준으로 50%를 차지하고 싶어 - width: 50%;
• 같은 공간에 있는 친구들끼리 1/n의 공간을 차지하고 싶어 - flex:1
• 그래도 얘는 고정값일 필요가 있겠어 - width: 360px;

5-2. 무작정 커지거나 작아질 수 없으니 최소/최대 범위를 정한다.

5-3. 최소/최대 범위를 벗어나는 경우에 줄바꿈할 지 정한다.

6. 100vh, 100vw (apdx)

6-1. 100vh

어떤 영역을 viewport 높이에 딱 맞춰서 쓰고 싶다고 한다면 height보다는 min-height를 100vh로 지정하는 것이 좋다. 왜냐하면 viewport 높이가 생각보다 작거나 컨텐츠 양이 생각보다 많아질 수도 있기 때문이다. 콘텐츠양이 100vh를 초과할 수 있는 상황이 생기면, min-height로 적용해야 해당 영역도 같이 가변적으로 늘어난다.

6-2. 100vw

block 요소에 대해서 설명했던 것처럼 웬만한 엘리먼트들은 기본적으로 화면을 꽉채우려는 성질이 있는데, 굳이 width를 100vw로 정의한다면 약간의 문제가 생길 수 있다. 이유는 스크롤바를 포함해서 viewport를 100% 채우는 것이 아니기 때문에 오히려 스크롤바(15px)만큼 가로 스크롤이 생기기 때문이다.