26일차 - 반응형 웹, 플렉스 박스와 그리드 레이아웃

반응형 웹

반응형 웹이란, 다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해 가며 반응하는 웹문서 또는 이를 위해 사용하는 기법을 뜻하는 말이다.

 

 

스마트 모바일 기기의 등장으로, 데스크톱 화면을 위해 존재했던 웹문서의 설계에도 변화가 요구되기 시작했다. 변화의 초기에는 모바일 전용 URL을 제공 하는 방법이 주로 사용 되었다.

 

 

태블릿, 스마트 워치, 자동차

 

(네이버처럼)모바일 환경과의 격리가 성공적으로 정착한 사례도 물론 있지만, 기기의 유형이 갈수록 다양해짐에 따라 한계를 드러낼 수밖에 없다.

기기에 최적화된 콘텐츠를 계속해서 생산해내는 것은 현실적으로 어렵기 때문에, 사용하는 기기에 적절하게 맞춰지는 사이트를 개발하는 것이 바람직하다. 즉 반응형 웹사이트를 만드는 것이 좋다.

그리고 반응형 웹사이트에서 가장 핵심이 되는 키워드는 바로 ‘가변성’이다.

 

 

뷰포트(viewport)

 

 

뷰포트(viewport)란 현재 화면에 보여지고 있는 영역을 의미한다.

기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다.

 

 

 

px & em & rem

절대 길이 단위 px

입문 레벨에서 가장 많이 사용하는 단위인 px(픽셀)은 절대 길이 단위이다.

px은 어떤 상황에서도 동일한 값을 유지하므로, 가변성이 없다.

 

 

 

em과 rem

em과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위이다.

em은 부모 요소의 글꼴 크기를, rem은 루트 요소의 글꼴 크기를 의미한다.

 

em과 rem은 주변 상황에 따라 그 크기를 달리할 수 있는 가변성을 지니고 있지만, 브라우저나 기기 화면에 크기에 따라 크기가 달라지는 단위는 아니다. 따라서 진정한 반응형 단위(?)라고 할 수는 없다.

 

 

반응하는 단위들

아래 몇 가지 단위들은 뷰포트 크기를 기반으로 값을 계산하여 크기를 결정하는 가변 단위이다.

 

 

 

비율에 기반한 크기 조절

em을 이용해 상대적인 크기의 폰트를 적용할 때처럼, 레이아웃에도 비율에 기반한 적용을 할 수 있다.

부모 요소에 비례해 자식 요소의 크기가 변하는 방식은 가변 레이아웃을 만들 때 흔히 사용되는 방식이다.

 

 

%

% 단위는 백분율값을 나타낸다. 보통 부모 요소와의 상대적 크기를 지정할 때 사용한다.

너비와 높이, 여백 뿐 아니라 글자 크기에도 사용할 수 있다.

 

 

 

함수 개념과 calc()

함수

수학에서의 함수와 코딩(프로그래밍)에서의 함수는 그 개념이 유사하다.

함수란 주어진 인수에 따라 정해지는 값을 일컫는 표현으로, CSS의 속성값을 지정할 때도 함수 개념을 적용할 수 있다.

 

 

CSS 함수

CSS의 함수는 괄호 안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용하는 방식으로 동작한다.

 

 

calc()

CSS 함수 calc()를 이용하면 계산식의 결과를 속성값으로 지정할 수 있다.

calc() 함수는 괄호 안에 표현식 하나를 받고, 표현식의 결과가 최종 값이 된다. 표현식은 단순 계산식이면 무엇이든 가능하다.

 

 

미디어 쿼리

미디어 쿼리(media query)는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)이다.

모든 미디어 쿼리는 다음 두 가지 구성 요소를 지니고 있다.

 

 

미디어 타입과 쿼리

미디어 쿼리에 입력할 수 있는 미디어 타입과 쿼리의 종류는 무척 다양하다.

* min-width와 max-width를 사용 시 순서에 주의를 해야한다.

제한이 큰 선언문이 먼저 와야한다.

 

* portrait는 세로가 긴 상태를, landscape는 가로가 더 긴 상태이다.

 

 

미디어 쿼리 적용의 다른 형태

다음과 같은 방식으로도 미디어 쿼리를 적용할 수 있습니다.

 

 

 

 

가변 이미지

이미지 요소에도 상대 단위 em, vw, % 등을 얼마든지 사용할 수 있다.

이때 주의할 점은 브라우저가 대개 이미지의 비율을 유지한다는 점, 그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점이다.

 

 

max-width

가변 이미지를 사용 시 너비가 일정 수준 이상으로 커지면 이미지가 깨진다.

CSS의 max-width 속성은 너비의 최대값을 지정하여 요소의 너비가 그 이상 커지지 않게 합니다.

 

 

picture

HTML의 picture 요소를 이용하면 뷰포트의 너비 등 브라우저의 특정 조건에 따라 이미지를 반응형으로 불러 올 수 있다.

1200px이상일 땐 데스크탑 이미지를, 800px보다 클땐 테블릿 이미지를, 그보다 작을 때는 기본 모바일이미지를 출력한다.

 

 

 

가변 동영상

이미지를 가변 이미지로 처리해주었던 것과 동일한 처리를, 동영상에도 똑같이 적용할 수 있다.

그러나 문제는 동영상 서비스에 따라 그 성질(?)이 조금씩 다를 수 있다는 점이다.

 

mp4와 같은 일반 동영상 파일 뿐 아니라 유튜브나 비메오 등에서 공유한 동영상 콘텐츠를 사용하는 경우도 있기 때문에 여러가지를 고려해서 처리하는 것이 좋다.

 

 

 

모듈화 디자인

반응형 웹 개발의 대세는 ‘페이지 만들기’에서 ‘컴포넌트 만들기’로 이동했다고 봐도 무방하다.

웹 개발(또는 프로그래밍)에 있어 컴포넌트(Component)란 독립적이고 재사용이 가능한 모듈을 뜻한다.

컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조합을 이용해 화면을 구성할 수 있습니다.

 

 

모듈화된 디자인

모듈화된 디자인은 작업 효율에 많은 도움이 된다.

여러 개의 페이지는 각각의 다양한 레이아웃을 가지지만, 페이지를 구성하는 컴포넌트의 형태는 비슷한 경우가 많기 때문에 컴포넌트에 초점을 맞추어 웹을 만들면 일이 줄어들게 된다.

 

=> 모듈화란? 개별 컴포넌트를 하나의 조립 부품(모듈)으로 보고 작업하는 것이다.

 

 

 

반응형 웹 내용 정리

• 반응형 웹이란, 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법을 뜻하는 말이다.
• 반응형 웹사이트에서 가장 핵심이 되는 키워드는 바로 ‘가변성’이다.
• 기기에 따라 다른 화면 크기에 대응하기 위해, 웹문서에 viewport 속성에 대한 마크업을 추가해야 한다.

• 절대 길이 단위인 px은 어떤 상황에서도 동일한 값을 유지하므로, 가변성이 없다.
• em과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위이다.
• em은 부모 요소의 글꼴 크기를, rem은 루트 요소의 글꼴 크기를 의미한다.
• em으로 여백 크기(padding과 margin)를 정할 때는 자기 자신의 글자 크기를 기준으로 한다.

• 뷰포트 크기를 기반으로 크기를 계산하는 가변 단위들이 있다.
• vw는 뷰포트 너비의 100분의 1 크기를 뜻합니다. •vh는 뷰포트 높이의 100분의 1 크기를 뜻한다.
• vmin은 뷰포트 높이와 너비 중 작은 쪽의 100분의 1 크기를 뜻한다.
• vmax는 뷰포트 높이와 너비 중 큰 쪽의 100분의 1 크기를 뜻한다.

• 비율 계산 기반으로 변화하는 가변 레이아웃에는 % 단위가 주로 사용된다.
• % 단위는 백분율 값으로, 부모 요소와의 상대적 크기를 지정한다.
• 너비와 여백은 부모 요소의 너비에 비례해 계산된다.
• 높이는 부모 요소의 높이에 비례해 계산된다.
• 글자 크기는 부모 요소의 글자 크기에 비례해 계산된다.

• 함수란 주어진 인수에 따라 정해지는 값을 일컫는 표현이다.
• CSS의 함수는 괄호 안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적 용하는 방식으로 동작한다.
• calc()를 이용하면 계산식의 결과를 속성값으로 지정할 수 있다.

• 미디어 쿼리는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치이다.
• 미디어 타입과 조건문(쿼리)으로 구성된다.
• 다양한 미디어 타입과 조건을 지정할 수 있다.
• 화면(screen)의 너비(width)를 조건으로 사용하는 경우가 가장 많다.

• 이미지 요소에도 상대 단위 em, vw, % 등을 사용할 수 있다.
• 브라우저에서 이미지는 기본적으로 비율을 유지한다.
• 이미지가 원본보다 커지면 이미지 품질이 떨어질 수 있다. 
• max-width 속성은 요소의 최대 너비 제한을 정할 수 있는 속성이다.
• picture와 source 요소는 이미지를 미디어 조건에 맞게 선택적으로 불러올 수 있는 요소이다.

모듈화가 주는 이점
• 반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는 자연스럽게 반응형페이지가 된다.
• 스타일 재사용이 용이하다. 필요한 경우 추가 스타일을 적용하면 된다.
• 페이지의 일관성을 유지하기가 용이하다

 

 

 

---

 

flex

플렉스박스(flexbox)

플렉스박스는 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차 원 레이아웃 방식을 말한다.

플렉스박스 방식에서 요소의 배치와 정렬은 플렉스컨테이너와 플렉스아이템 간의 상호작용을 통해 결정된다.

 

 

플렉스박스 방식은 두 개의 축을 제공한다.

그 중 하나의 축을 주축삼아 요소를 배치하는데, 주축의 기본값은 가로 방향(왼쪽에서 오른쪽)이다.

 

 

 

 

flex-direction

플렉스 컨테이너의 주축을 결정하는 속성이다. 행은 가로 축을, 열은 세로 축을 주축으로 한다.

 

 

flex-wrap

플렉스 아이템들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성이다.

 

 

justify-content

플렉스아이템들이 플렉스박스 주축을 따라 배치될 때, 요소 사이의 공간을 분배 하는 방식을 결정합니다.

 

 

align-items & self

플렉스 컨테이너의 교차축 위에서 플렉스아이템들이 어떤 식으로 정렬될 것인지를 결정한다.

 

 

align-content

교차축 위에서 justify-content와 동일하게 사용할 수 있는 속성이다.

다음 두 조건이 만족되면서 여유공간이 있을 때만 동작할 수 있다.

 

 

 

 

flex-grow

플렉스아이템이 기본 크기보다 더 커질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성이다.

속성값으로는 양의 정수만 들어간다.

 

flex-shrink

플렉스아이템이 기본 크기보다 더 작아질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성이다.

속성값으로 양의 정수를 사용한다.

 

 

flex-basis

플렉스아이템의 초기 크기를 지정한다.

box-sizing이 따로 설정되지 않은 경우, 콘텐츠 박스의 크기를 결정하게 된다. 기본값은 auto이다.

width 속성을 정의할 때와 동일한 방식으로 정의한다.

 

 

flex

flex는 flex-grow, flex-shrink, flex-basis 위 세 가지 속성을 정의할 수 있는 단축 속성이다.

flex는 item에 지정해야 한다.

 

order

플렉스 아이템의 배치 순서를 설정할 수 있으며, 지정한 숫자에 맞춰 오름차순으로 배치가 진행된다.

코드에 영향을 끼치는 것이 아닌, 보여지는 순서에만 영향을 준다.

속성값이 같은 값이면 코드 상의 순서대로 진행한다.

 

 

 

 

레이아웃

그리드 레이아웃(grid layout)

그리드 레이아웃이란 이름 그대로 격자 형태의 레이아웃을 만드는 2차원 레이 아웃 방식을 말한다.

그리드 레이아웃 방식에서, 그리드 아이템의 배치와 정렬은 그리드 컨테이너 내부의 행과 열의 상호작용을 통해 결정된다.

 

 

 

display: grid;

레이아웃 방식을 사용하기 위해 그리드 컨테이너를 만든다.

 

 

display: inline-grid;

컨테이너를 인라인 레벨 요소로 만든다.

 

 

그리드 방식은 컨테이너에 행(row)과 열(column)을 제공합니다. 행과 열을 동 시에 제어해 요소를 배치할 수 있으며, 컨테이너의 구조는 다음과 같다.

 

 

 

grid layout 관련 속성들

 

 

grid-template-columns

그리드 컨테이너의 트랙 중 열(column) 트랙 내 아이템들의 크기를 지정할 수 있는 속성이다.

그리드 컨테이너에서 트랙이란 행 또는 열을 뜻한다.

 

 

 

grid-template-rows

그리드 컨테이너의 트랙중 행(row) 트랙 내 아이템들의 크기를 지정할 수 있는 속성이다.

 

 

gap(grid-gap)

그리드 아이템 사이의 간격을 지정하는 속성이다.

행에서의 간격과 열에서의 간격을 똑같이 지정할 수도 있고, 각자 따로 지정할 수도 있다.

row-gap과 column-gap의 단축속성이다.

 

 

 

 

트랙 관련 함수

그리드 컨테이너의 트랙(행과 열) 크기를 지정할 때 사용할 수 있는 유용한 함수 들이 있다.

 

ex) grid-template-columns: repeat(2,100px); - 열의 트랙을 100픽셀 크기로 2개 만든다.

ex) grid-template-columns: repeat(2,minmax(100px, 250px)); - 100~250픽셀의 트랙 2개를 만든다.

 

auto-fill : 빈공간을 자동으로 체운다. / auto-fit : 

auto-fit은 컨테이너 내부에 공간이 남을 경우, 공간을 셀들이 나눠 갖는다.

auto-fill은 셀이 들어갈 공간을 만든다.

 

 

grid-column & row

grid-column과 grid-row 속성을 이용하면 그리드 컨테이너의 줄 번호를 이용해 아이템을 배치할 수 있다.

 

5

grid-template-areas

그리드 영역(아이템)의 이름을 이용해 레이아웃의 형태를 정의할 수 있다.

 

입력한 문자열 비율에 맞춰 레이아웃을 정한다.

입력할 문자열은 grid-area로 지정한다.

 

grid-area

그리드 영역(아이템)의 이름을 지정할 때 사용하는 속성이다.

 

 

align-items & self

플렉스박스 방식에서와 유사한 역할을 한다.

그리드 컨테이너 행 트랙의 높이를 기준으로 그리드 아이템의 배치를 결정한다.

 

 

 

justify-items & self

수평축(행)을 따라 그리드 아이템을 정렬하고자 할 때 사용할 수 있는 속성으로, 그리드 컨테이너에 지정한다. 아이템에 할당된 열 방향 너비가 기준이 된다.

 

 

 

align-content & justify-content

플렉스박스 방식과 유사하게 사용한다.

그리드 컨테이너의 수직축과 수평축 에서의 아이템 정렬 방식을 결정한다.

컨테이너에 여유 공간이 있을 때 사용할 수 있다.