멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 14 (반응형 웹, 논리 속성 및 논리 값, 플렉시블 레이아웃)

 

목차

• 반응형 웹
• 논리 속성 및 논리 값
• 플렉시블 레이아웃
• 오늘 하루를 돌아보며

 

 

학습 목표 → 과정 → 결과 → 느낀 점 → 향후 계획

반응형 웹

방응형 웹은 유연하게 설계하는 서비스다. 2000년대를 기점으로 모바일 기기가 등장하면서 기술 플랫폼의 패러다임이 변화를 맞이했다. 데스크탑 중심 서비스가 모바일 중심 서비스로 이동하면서 기업들이 별도로 모바일 환경에 최적화된 대응을 시작한다.

 

그러나 모바일 디바이스의 크기가 다양해지면서 N Screen 환경을 고려하는 것이 필요해졌다. 고정형 레이아웃을 사용했던 서비스가 각 환경에 대응하기에는 개발 및 유지보수, 비용 관점에 대한 고민이 발생한다. 이때 반응형 웹이 필요해졌다.

 

콘텐츠는 물과 같아야 한다는 말이 있다. 컵에 담든, 주전자에 담든, 유리병에 담든 모양은 바뀌어도 본질은 변하지 않아야 한다는 뜻이다. 콘텐츠를 다양한 크기의 디바이스에서 유연하게 보여줄 수 있어야 한다. 그러기 위해 반응형 웹을 적용해 봐야 한다.

 

반응형 웹 핵심 기술

• 유연한 그리드(Fluid Grid) - 고정된 px 단위보다 %, em, rem 같은 유연한 상대 단위를 사용하고, flex, grid와 같은 속성 사용
• 유연한 미디어(Responsive Media) - 이미지와 비디오를 사용할 때 width: 100%, 또는 max-width: 100%로 정의해서 해당 콘텐츠를 포함하는 컨테이너 영역을 넘지 않으면서 유연하게 보여지게 한다.
• 미디어 쿼리(Media Queries) - 미디어 유형(print, speech, screen)과 미디어 특성(width, aspect-ratio, resolution, orientation, prefers-color-scheme)에 따라 웹사이트의 레이아웃이나 스타일을 수정한다. 논리 연산자(and, only, not, 콤마)를 사용할 수 있다.
• 뷰포트(Viewport) 메타 태그 - 미디어 쿼리로 레이아웃 및 스타일을 선택적으로 적용할 수 있게 한다.

 

적응형 웹(Adaptive Web) VS 반응형 웹(Responsive Web)

적응형 웹과 반응형 웹 모두 모바일 기기를 포함하여 다양한 N 스크린 환경에서 정보를 원활하게 제공하기 위한 방법이다. 적응형 웹은 서버나 클라이언트 측에서 기기를 감지하여, 기기별로 다른 HTML과 레이아웃을 제공한다. 반응형 웹은 미디어 쿼리(media queries)를 사용해, 하나의 HTML과 CSS로 화면 크기에 따라 자동으로 조정된다.

 

	적응형 웹(Adaptive Web)	반응형 웹(Responsive Web)
디바이스 감지	서버/클라이언트 측 감지	미디어 쿼리 사용
콘텐츠 전달	사전 선택된 정보만 다운로드 (최적화됨)	모든 리소스 다운로드 (비효율적일 수 있음)
디바이스 최적화	기기별 템플릿 제공	단일 템플릿 사용
기능 구현	스크립트 기반으로 기능 적응	포괄적인 기능 제공
성능	빠름 (필요 리소스만 다운로드)	느림 (모든 리소스 로드 후 크기 조절)
개발	기존 사이트 기반 템플릿 구축	전체 사이트 재구축 필요
배포	진입 장벽 높음 (자바스크립트 숙련 필요)	사용자 경험 커스터마이징 필요
결론	리빌드 불필요, 고급 기술 요구, 다기기 대응에 강함	새 웹사이트에 유리, 기존 사이트엔 부적합, 성능 저하 가능성

 

반응형은 Mobile First로 구현하는 것이 바람직하다. 모바일 퍼스트는 모바일에서 시작하여 점진적인 향상을 통해 웹을 지원하는 모든 장치를 위한 방법론이다.

 

 

논리 속성 및 논리 값

CSS의 논리 속성(Logical Properties)은 요소의 레이아웃과 스타일을 정의할 때 언어 방향(글쓰기 방향)이나 문서 흐름에 따라 동작하도록 설계된 속성이다. 기존의 물리적 속성(left, right, top, bottom)이 아닌, 언어와 레이아웃 방향을 고려한 논리적 방식으로 스타일을 정의할 수 있도록 돕는다.

 

writing mode는 다양한 국제 쓰기 모드를 정의하는 속성이다. 쓰는 방향에 따라 다음과 같은 값을 지정한다.

• horizontal-tb: 가로 쓰기, 위에서 아래로 읽는 방향
• vertical-lr: 세로 쓰기, 왼쪽에서 오른쪽으로 읽는 방향
• vertical-rl: 세로 쓰기, 오른쪽에서 왼쪽으로 읽는 방향

 

레이아웃과 스타일을 정의할 때 사용할 수 있는 논리 값은 다음과 같다.

• block: 콘텐츠가 글줄의 흐름 방향(좌우 또는 우좌)에 따라 배치되는 영역
• inline: 콘텐츠가 문서 흐름 방향(위아래 또는 아래위)에 따라 배치되는 영역
• start: 콘텐츠 흐름의 시작 방향
• end: 콘텐츠 흐름의 끝 방향

 

플렉시블 레이아웃(Flexible Layout)

플렉시블 레이아웃은 요소의 배치를 유연하게, 레이아웃을 조금 더 사용자 친화적으로 제공하는 모던 레이아웃 기법이다.

/* block 박스 */
div {
  display: flex;
}

/* inline 박스 */
div {
  display: inline-flex;
}

 

Flexbox(Flexible Box Module)는 컨테이너(display: flex;로 지정한 부모 요소) 안에서 아이템(flex item. 컨테이너의 직계 자식)을 배치할 때 하나의 행 또는 하나의 열로 배치되는 1차원 레이아웃 모델이다. 플렉스 컨테이너 안에서 아이템의 배치는 주축(Main Axis)과 교차축(Cross Axis)에 의해 결정된다.

 

 

플렉스 컨테이너

flex-direction

아이템을 배치할 때 flex-direction 속성 값에 따라 주축이 결정된다.

• row(기본 값) - 가로 배치. 주축 = X 좌표, 교차축 = Y 좌표
• column - 세로 배치, 주축 = Y 좌표, 교차축 = X 좌표
• row-reverse - 가로 역행 배치(오른쪽부터 정렬)
• column-reverse - 세로 역행 배치(아래부터 정렬)

flex-wrap

flex-wrap은 flex 컨테이너에 포함된 아이템이 한 줄 또는 여러 줄로 배치될 것인지를 지정하는 속성이다. 초기값은 none으로 모든 아이템을 단일 행이나 열로 배치한다. 이때 아이템의 크기가 컨테이너보다 커서 넘치더라도 shrink가 적용되어 한 줄로 유지한다. 속성 값으로 wrap을 지정하면 넘치는 아이템은 줄바꿈한다.

flex-flow는 flex-direction과 flex-wrap 속성의 단축 속성이다.

 

justify-content

justify-content는 아이템을 주축을 기준으로 정렬하는 속성이다.

flex-start/flex-end: 왼쪽 정렬/오른쪽 정렬. reverse 여부에 따라 시작과 끝 위치가 달라진다.

start/end: 논리 값. writing mode에 따라 시작과 끝 위치를 잡는다.

 

 

align-items

align-items는 컨테이너 안에 아이템을 배치할 때 교차축을 기준으로 정렬하는 속성이다. 기본 값은 normal(stretch)로 아이템에 100% 높이를 적용한 것처럼 보인다. center로 지정하면 세로 방향으로 가운데 정렬한다.

 

Normal Flow 레이아웃 환경에서 가로 방향으로 가운데 정렬하려면 text-align: center;를 지정하면 되는데, 세로 방향으로 가운데 정렬하려면 여러 꼼수들을 사용해야 했다. 하지만 작년 6월부터 flex에서만 사용할 수 있던 세로 방향 가운데 정렬인 align-content: center;를 노멀 플로우 환경에서도 사용할 수 있게 됐다.

 

align-content

justify-content 속성처럼 주축을 기준으로 아이템을 정렬하는 방법과 유사하며 교차축에 추가 공간(flex-wrap)이 있을 때 정렬하는 속성으로 flex-wrap 속성에 의해 플렉스 아이템들이 여러 줄로 배치된 경우 컨테이너에 지정할 수 있다.

 

정렬 속성 값

• space-between: 아이템 사이 간격을 균등하게 준다.
• space-around: 아이템 사이 간격을 주되, 그 절반 간격을 알파와 오메가 마진(왼쪽 끝과 오른쪽 끝)에 준다.
• space-evenly: 아이템 사이 간격과 알파와 오메가 마진을 모두 같은 값으로 준다.
• baseline: 텍스트의 baseline에 정렬한다.

 

gap

gap 속성을 사용하면 아이템 사이의 간격을 원하는 크기로 지정할 수 있다. 방향에 따라 column-gap, row-gap 속성을 사용할 수 있다.

 

 

플렉스 아이템

• order: 배치 순서를 지정한다. 기본 값은 0이며, -1로 지정하면 제일 첫 번째로 배치한다. 9999로 지정하면 맨 마지막으로 지정한다.
• align-self: 아이템의 정렬을 직접 지정한다.
• flex-grow: 확대
• flex-shrink: 축소
• flex-basis: 기준 값
• flex: flex-grow, flex-shrink, flex-basis의 단축 속성이다.

 

더 자세한 설명은 아래 링크 참고

CSS Flexbox Layout Guide | CSS-Tricks

 

 

오늘 하루를 돌아보며

레이아웃의 꽃이라고 불리는 flex를 드디어 배웠다! 팀원 중 한 분이 빨리 flex까지 진도를 나가서 편하게 레이아웃하고 싶다고 했는데 오늘 배우고 보니 무슨 말인지 알 것 같다. 아직 조금 헷갈리긴 하지만 레이아웃할 때 훨씬 쉽게 할 수 있을 것 같다. 이전에 만들었던 예제 파일들을 flex를 이용해서 다시 만들어 보는 것도 재밌을 것 같다. 내일은 실습을 많이 한다고 해서 기대된다.