Flex 해버렸지 뭐얌

언젠가만날날·2024년 8월 27일

🏗️ 레이아웃

레이아웃(layout)이란, HTML 태그로 작성한 구성 요소를 제한된 공간 안에 효과적으로 배열하는 일을 의미한다.

🖼️ Flex

플렉스 박스 레이아웃은 1차원 방식으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성이다.

1차원 방식이란, 가로(row) 혹은 세로(column) 중 한 방향으로 레이아웃을 설계하는 방식을 일컫는다.

display: flex;

기초

구성 요소

Flex box 레이아웃에서는 다음과 같은 독자적인 구성 요소가 존재한다.

main axis (주축)

플렉스 박스의 진행 방향과 수평한 축을 뜻한다.
cross axis (교차축)

플렉스 박스의 진행 방향에 수직한 축을 뜻한다. 즉, 주축에 대해서도 수직하다.
container

display의 속성값으로 flex 혹은 inline-flex가 적용된 요소를 뜻한다.
item

container와 자식 관계를 이루는 요소이다.

레이아웃 확인 방법

브라우저는 일반적으로 플렉스 박스 레이아웃을 확인하는 기능을 지원한다. 크롬 브라우저의 경우 개발자 도구(F12)를 이용한다.

개발자 도구의 Elements 탭으로 가면, 플렉스 박스 레이아웃이 적용된 HTML element는 옆에 flex 아이콘이 있는 것을 확인할 수 있다.

이를 클릭하면 해당 요소의 플렉스 박스 레이아웃이 시각적으로 표시된다.

속성

플렉스 박스 레이아웃에 적용할 수 있는 속성은 다음과 같다.

기본 속성

flex-direction

속성값에 따라 플렉스 박스 레이아웃의 main axis 방향을 결정한다.
- row 방향을 왼쪽→오른쪽으로 지정한다.
- row-reverse 방향을 오른쪽→왼쪽으로 지정한다.
- column 방향을 위쪽→아래쪽으로 지정한다.
- column-reverse 방향을 아래쪽→위쪽으로 지정한다.
flex-wrap

속성값에 따라 item이 container 영역을 벗어날 때 어떻게 처리할지를 결정하며, 기본값은 nowrap이다.
- nowrap item이 container를 벗어나도 무시한다.
- wrap item이 container를 벗어날 시 줄바꿈을 한다.
- wrap-reverse item이 container를 벗어나면 wrap의 역방향으로 줄바꿈을 한다.
flex-flow

flex-flow: <flex-direction 속성값> <flex-wrap 속성값>; 와 같이 사용하며, 문법에서 알 수 있듯 flex-direction과 flex-wrap을 한 번에 사용할 수 있는 속성이다.

정렬 속성

justify-content

item을 속성값에 따라 main axis 방향으로 정렬할 때 사용하는 속성이다.
- flex-start main axis 방향의 시작을 기준으로 정렬한다.
- flex-end main axis 방향의 끝을 기준으로 정렬한다.
- center main axis 방향의 중앙에 정렬한다.
- space-between item 사이의 간격이 균일하도록 정렬한다.
- space-around item의 둘레(around)가 균일하도록 정렬한다.
- space-evenly item 사이와 양 끝의 간격이 균일하도록 정렬한다.
aligin-items aligin-content aligin-self

item을 속성값에 따라 cross axis 방향으로 정렬할 때 사용하는 속성이다.
- stretch cross axis 방향으로 item의 너비 또는 높이가 늘어난다.
- flex-start cross axis 방향의 시작을 기준으로 정렬한다.
- flex-end cross axis 방향의 끝을 기준으로 정렬한다
- center cross axis 방향의 중앙을 기준으로 정렬한다.
- baseline item의 baseline을 기준으로 정렬한다.

🪟 Grid

Grid 레이아웃은 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 속성이다.

이때 2차원 방식이란, 가로와 세로를 같이 사용해 레이아웃을 설계하는 방식이다.

display: grid;

기초

구성 요소

그리드 레이아웃에서 사용하는 구성 요소는 다음과 같다.

row (행)

가로줄을 의미한다.
column (열)

세로줄을 의미한다.
grid line

row와 column을 구분하는 선을 의미한다.
gird cell

row와 column이 만나 이루어지는 하나의 공간을 나타낸다.
gap

각각의 grid cell들 사이의 간격을 의미한다.
container

display의 속성값으로 grid 혹은 inline-grid가 적용된 요소를 뜻하며, 그리드와 관련한 모든 내용은 이 container 안에 표현된다.
item

gird cell 안에서 표현되는 콘텐츠 요소를 일컫는다.

레이아웃 확인 방법

그리드 레이아웃도 플렉스 박스처럼 레이아웃을 시각적으로 확인하기 위해 크롬 브라우저의 개발자 도구를 이용한다. Elements 탭에서 그리드 컨테이너로 지정된 태그를 보면 grid 아이콘이 보인다.

이를 클릭하면 브라우저에서 그리드 레이아웃의 구성 요소를 확인할 수 있다.

속성

기본 속성

grid-template-columns grid-template-rows

그리드 레이아웃의 핵심은 column과 row이다. 따라서 이를 지정함으로써 grid cell을 생성해야 한다. 다음과 같이 앞에서부터 1행 또는 1열이며, 속성값을 공백으로 구분하여 작성한다.
```
   .grid-container {
     display: grid;
     grid-templete-columns: 50px 50px 50px;
     grid-templete-rows: 50px 50px;
   }
```
이와 같이 작성하면 50px 크기의 2행*3열 그리드를 생성할 수 있다. 또한 이 코드를 다음과 같이 repeat() 함수를 이용하여 간편하고 직관성있게 작성할 수 있다.
```
   .grid-container {
     display: grid;
     grid-templete-columns: repeat(3, 50px);
     grid-templete-rows: repeat(2, 50px);
   }
```
또한 속성값으로 auto를 지정하면, 해당하는 행 혹은 열의 크기를 container에 맞춰 자동으로 지정한다.
column-gap row-gap

속성의 이름에서 알 수 있듯이, 앞서 설명한 그리드의 요소 중 gap의 크기를 설정할 수 있으며, 그 방법은 다음과 같다.
```
   #container {
     display: grid;
     column-gap: 20px;
     row-gap: 10px;
   }
```
이와 같이 작성하면 그리드의 행과 행 사이의 간격은 10px, 열과 열 사이의 간격은 20px가 된다.

정렬 속성

align-items aligin-self
- stretch item이 grid cell을 채우도록 크기를 늘린다.
- start item이 grid cell의 맨 위에 배치된다.
- end item이 grid cell의 맨 아래에 배치된다.
- center item이 grid cell의 세로 방향 중간에 배치된다.
justify-items justify-self
- stretch item이 grid cell을 채우도록 늘린다.
- start item이 grid cell의 좌측 끝에 배치된다.
- end item이 grid cell의 우측 끝에 배치된다.
- center item이 grid cell의 가로 방향 중간에 배치된다.
place-items place-self

각각 aligin-items, justify-items 혹은 aligin-self, justify-self 속성을 한 번에 사용할 수 있는 단축 속성으로, 그 사용법은 다음과 같다.

place-items: <aligin-items 속성값> <justify-items 속성값>;

place-self: <aligin-self 속성값> <justify-self 속성값>;

배치 속성

grid-template-areas grid-area

grid-templete-areas 을 이용해 그리드 레이아웃의 각 행과 열에 다음과 같이 이름을 지정한 후, grid-area 를 통해 이름을 item에 배치할 수 있다.

   <div class="container">
     <p id="header">머리</p>
     <p id="nav">왼팔</p>
     <p id="contet">배</p>
     <p id="footer">발</p>
   </div>

   .container {
     display: grid;
     grid-templete-areas: "header header header", "nav content content", "footer footer footer";
   }
   #header {
     grid-area: header;
   }
   #nav {
     grid-area: nav;
   }
   #content {
     grid-area: content;
   }
   #footer {
     grid-area: footer;
   }

이러한 코드를 통해 다음과 같은 그리드 레이아웃을 완성할 수 있다.

grid-column-start grid-column-end grid-row-start grid-row-end

grid-column-start 과 grid-column-end 속성은 grid number를 통해 item의 column 시작 위치와 종료 위치를 지정하며, grid-row-start 과 grid-row-end 속성은 grid number를 통해 item의 row 시작 위치와 종료 위치를 지정한다.
이 4가지의 속성을 조합하여 item의 배치를 지정할 수 있다. 만약 다음 그림처럼 item을 배치하고 싶다면,

다음과 같이 코드를 작성할 수 있다.

   .container {
     display: grid;
     grid-templete-columns: repeat(3, 100px);
     grid-templete-rows: repeat(3, 100px);
   }
   .grid-item:nth-child(1) {
     grid-column-start: 1;
     grid-column-end: 3;
   }
   .grid-item:nth-child(2) {
     grid-column-start: 3;
     grid-column-end: 4;
   }
   .grid-item:nth-child(3) {
     grid-row-start: 2;
     grid-row-end: 4;
   }
   .grid-item:nth-child(4) {
     grid-column-start: 2;
     grid-column-end: 4;
     grid-row-start: 2;
     grid-row-end: 4;
   }

grid-column grid-row

각각 grid-column-start, grid-column-end 혹은 grid-row-start, gird-row-end 를 한 번에 사용할 수 있는 단축 속성으로, 그 사용법은 다음과 같다.

grid-column: <grid-column-start 속성값> <grid-column-end 속성값>

grid-row: <grid-row-start 속성값> <grid-row-end 속성값>

💥 반응형 웹?

반응형 웹이란 디스플레이 종류에 반응하여 UI 요소를 유기적으로 배치하도록 설계한 웹이다.

기술이 발전하여 웹사이트를 PC 뿐만 아니라 휴대폰, 태블릿, 텔레비전 등 여러 기기에서 접속할 수 있게 되었다. 허나 화면 크기가 서로 상이한 탓에 같은 웹페이지를 다른 layout으로 여러 종류를 만들어야 하는 불편함이 있었다. 이를 해결하기 위해 반응형 웹이 탄생했다.

따라서 반응형 웹은 한 사이트가 다양한 디바이스에 대응하여 최적의 layout을 제공한다.

뷰포트

이해

Viewport는 웹 페이지가 접속한 기기에서 보이는 실제 영역의 크기를 의미한다.

일반적으로 UI, 메뉴바를 제외한 브라우저 창과 동일하다.

해상도가 980px인 화면에서 보이는 1px와 360px인 화면에서 보이는 1px의 크기는 다르다. 그러나 HTML 문서는 접속하는 기기에 상관없이 기본적으로 980px 크기를 기준으로 보여 주게 설정되어 있다. ~~알빠노~~ 그래서 스마트폰처럼 해상도가 작은 디바이스로 PC용 웹사이트를 접속하면 모든 content가 좁쌀만치 보이는 문제가 있다.

사용

위와 같은 현상을 해결하기 위해서 기기의 해상도를 인식할 수 있게 HTML 코드로 뷰포트를 설정해 주어야 한다. 이를 처리하는 것이 meta테그의 viewport 값이다.

<meta name="viewport" content="width=device-width, inital-scale=1.0" />

여기서 width=device-width 는 HTML 문서의 width(너비)를 device-width(기기의-너비)로 설정한다는 의미이다. 이것 때문에 어떤 기기로 접속하더라도 뷰포트는 접속한 기기의 해상도를 알아서 인식하게 된다. 다음과 같은 값을 content에 사용할 수 있다.


width	뷰포트의 너비를 설정한다. 보통 기기의 너비와 같도록 한다.
height	뷰포트의 높이를 설정한다. 스크롤 이슈때문에 잘 쓰지 않는다.
inital-scale	뷰포트의 초기 배율을 설정하며, 기본값이 1이며 이보다 크면 확대값, 작으면 축소값으로 설정된다.
minimum-scale	뷰포트의 최소 축소 비율을 설정하며, 기본값이 0.25이다.
maximum-scale	뷰포트의 최대 확대 비율을 설정하며, 기본값이 5.0이다.
user-scalable	뷰포트의 확대 혹은 축소의 여부를 설정한다. 기본값이 yes이며 no로 설정할 시 화면을 확대 혹은 축소할 수 없다.

미디어 쿼리

이해

Media query는 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하게 하는 기술이다.

Media query를 이용해 사이트에 접속하는 디바이스의 타입과 해상도에 따라 다른 스타일 속성을 알맞게 적용하면 그 자체로 반응형 웹이 완성된다.

사용

Media query의 형식은 다음과 같다.

@media not|only mediatype and (media feature) and|or|not (media feature) {
  /* style */
}

Media query는 @media 로 시작하며, 여러 조건과 상태를 정의해 각 media query가 적용되는 기준을 세우면 된다. 이때 조건은 다음과 같다.

not | only

not은 뒤에 오는 모든 조건을 부정하며, only는 media query를 지원하는 기기만 media query를 해석하라는 의미이다.
mediatyle

Media query가 적용될 미디어 타입을 명시한다. 생략할 수 있으며, 이 경우 all로 인식한다. 생략하지 않을 경우 반드시 and 가 후행해야 한다. 사용할 수 있는 미디어 타입은 다음과 같다.

all 모든 장치
print 프린터기 등의 인쇄 장치
screen 모니터 등의 컴퓨터 화면 혹은 스마트 기기
speech 스크린 리더기 등의 페이지를 소리 내어 읽는 장치


all	모든 장치
print	프린터기 등의 인쇄 장치
screen	모니터 등의 컴퓨터 화면 혹은 스마트 기기
speech	스크린 리더기 등의 페이지를 소리 내어 읽는 장치

media feature

Media query가 적용될 미디어 조건을 명시하며, 종류가 18가지로 많지만 자주 쓰이는 것만 소개한다.


min-width	화면 너비	media query가 적용될 최소 너비
max-width	화면 너비	media query가 적용될 최대 너비
orientation	portrait	세로 모드, 뷰포트의 높이가 너비보다 큰 경우
orientation	landscape	가로 모드, 뷰포트의 너비가 높이보다 큰 경우

예시
1. 연습
```
@media only screen and (min-width: 360) and (max-width: 720px) {
  /*style*/
}
```
  이와 같은 media query의 실행 조건은 다음과 같다.
  1. only media query를 적용할 수 있는 디바이스 이면서
  2. screen 컴퓨터 화면 장치 혹은 스마트 기기 일 때
  3. and 그리고
  4. min-width 뷰포트의 최소 너비가 360px 일 때
  5. and 그리고
  6. max-width 뷰포트의 최대 너비가 720px 일 때
  또한 only 와 미디어 타입은 생략할 수 있으므로 다음과 같이 표현할 수 있다.
```
@media (min-width: 360) and (max-width: 720px) {
  /*style*/
}
```
2. 적용
```
div {
  width: 100px;
  height: 100px;
  background-color: blue;
  @media only all and (min-width: 420px) {
    div {
      background-color: tomato;
    }
  }
}
```
  이 코드와 같은 경우 뷰포트의 너비가 420px 이상일 때는 <div>가 상큼한 tomato색, 그렇지 않을 때는 파란색으로 표시된다.

단위

px, pt, cm, mm 와 같은 길이 단위들은 항상 절대적으로 값에 대한 길이 유지된다. 이를 절대 길이 단위라고 한다. 반응형 웹을 설계할 때는 다른 요소의 길이에 비례하여 유동적으로 길이가 조정되는 단위인 상대 길이 단위를 주로 사용한다.

vh, vw

1vh(Viewport Height)는 뷰포트 높이의 1%를 의미한다. 따라서 100vh는 전체 뷰포트 높이와 같다. vw(Viewport Width) 역시 동일하다.
vmin, vmax

vmin과 vmax는 각각 뷰포트 넓이와 높이 중 작은 쪽의 1%와 큰 쪽의 1%를 뜻한다.
%

%는 직관적으로 부모 요소에 대한 비율을 뜻한다. 예를 들어, 부모 요소의 width가 800px일 때, 자식 요쇼의 width에 50%를 적용한다면 그의 width는 400px이 되는 식이다.
em, rem

em은 상위 요소 크기의 몇 배인지를 정하는 단위이다.

다음과 같은 코드에서 부모 요소 .parent의 font-size가 20px이므로, 자식 요소 .child의 font-size는 20px의 0.2배 즉 4px이 될 것이다.
```
.parent {
  font-size: 20px;
}

.child {
  font-size: 0.2rem;
}
```
rem은 em에 root의 약자인 r이 붙은 것이다. 이처럼 기본적인 매커니즘은 em과 동일하나 rem은 최상위 요소인 <html>을 기준으로 해당 요소의 크기를 정하는 단위이다.

예를 들어 요소의 font-size가 16px일 때, font-size에 1rem이 적용된 요소의 font-size는 16px이 된다.

calc()

이해

calc() 함수는 CSS에서 사칙연산을 사용하여 길이를 동적으로 설정할 수 있게 한다. 이 함수를 사용하면 여러 단위, 즉 고정 길이 단위와 상대 길이 단위를 혼합하여 더 유연한 레이아웃을 만들 수 있다.
사용

다음 코드에서 .element의 width는 부모 요소의 전체 width에서 50px을 뺀 값이 설정된다. 또한 height는 뷰포트의 전체 높이에서 20px을 뺀 값이 설정된다.

또한 calc()에서 연산자와 피연산자 사이에는 반드시 공백이 있어야 한다.
```
.element {
  width: calc(100% - 50px); /*calc(100%-50px);  <-- 이건 안돼요*/
  height: calc(100vh - 20px);
}
```

언젠가만날날

이전 포스트

경사하강법 탐구하기

다음 포스트

Flex 해버렸지 뭐얌

🏗️ 레이아웃

🖼️ Flex

기초

구성 요소

레이아웃 확인 방법

속성

기본 속성

정렬 속성

🪟 Grid

기초

구성 요소

레이아웃 확인 방법

속성

기본 속성

정렬 속성

배치 속성

💥 반응형 웹?

뷰포트

미디어 쿼리

단위

calc()

경사하강법 탐구하기

돔? 참돔? 줄돔?

0개의 댓글