[Web 부트캠프 2023] 8. 반응형 CSS 및 Flexbox

Flexbox가 대체 뭐야?

페이지의 콘텐츠 상자 안에 아이템을 배치하는 데 쓰이는 일련의 속성이자 도구

일반적으로 컨테이너를 만들고 그 안에서 공간을 배분할 때 사용한다.

이 때, 창의 크기가 달라짐에 따라 유동성 있게 공간 배분의 법칙을 적용하는 것이 Flexbox이다.

Flexbox를 이용하면 하나의 컨테이너 안에서 다양한 요소를 보기 좋게 배열하면서 레이아웃을 유연하게 조정할 수 있다. 컨테이너 안의 상자와 요소가 유연하게 변화하는 것이다.

css 내에서 특정 컨테이너에 flexbox 속성을 부여하려면 다음과 같이 display 속성에 flex 값을 주면 된다.

 

기본 flexbox - 창 크기에 따라 유동적으로 div의 크기가 달라짐.

---

The Flex Model

flexbox에는 다음과 같이 두 개의 축이 존재한다.

주축(main axis)의 기본 방향은 왼쪽에서 오른쪽이며, 따라서 콘텐츠가 왼쪽에서 오른쪽으로 정렬된다.

---

 

Flex-Direction

flex-direction은 컨테이너 내에서 콘텐츠의 방향을 결정하는 속성이다.

1. row(기본값) - 가로 정렬, 왼 ▶ 오 (주축의 기본)
2. row-reverse - 가로 정렬, 오 ▶ 왼 (주축의 반전)
3. column - 세로 정렬, 상 ▶ 하 (주축이 시계 방향으로 90도 돈 것과 같음)
4. column-reverse - 세로 정렬, 하 ▶ 상

 

/* 1. row(기본값) */
flex-direction: row;

/* 2. row-reverse */
flex-direction: row-reverse; 

/* 3. column */
flex-direction: column;

/* 4. column-reverse */
flex-direction: column;

row, row-reverse

column, column-reverse

 

---

Justify-Content

주축을 기준으로 컨테이너 내에서 요소와 컨텐츠를 어떻게 배치할 지 결정하는 속성이다. 컨텐츠의 정렬 방향은 주축의 방향(flex-direction의 값)에 의해 결정된다.

1. flex-start(기본값) - 컨텐츠를 주축의 시작점 기준으로 정렬
2. flex-end - 컨텐츠를 주축의 끝점 기준으로 정렬
3. center - 컨텐츠를 중앙 정렬
4. space-between - 요소 사이에 간격을 띄워 요소와 컨테이너 사이에 사실상의 공백이 없게 하는 것
5. space-around - 요소 바깥에 똑같은 크기의 여백을 주는 것
6. space-evenly - 요소 사이 뿐만 아니라, 요소와 컨테이너 사이에도 동일한 크기의 여백을 주는 것

 

(주축이 row일 때) flex-start, flex-end, center

(주축이 row일 때) space-between, space-around, space-evenly

 

---

Flex-Wrap

교차축(cross-axis)

교차축은 주축의 방향에 따라 결정되는 또 다른 축이다.

주축이 수평(가로 정렬)인 경우에는 교차축이 수직이 되고, 주축이 수직(세로 정렬)인 경우 교차축은 수평이 된다.

교차축의 기본 방향은 수평인 경우 왼 ▶ 오, 수직인 경우 상 ▶ 하이다.

 

Flex-wrap은 교차축의 방향을 결정하여 요소 정렬에 반영하는 속성이다. 주축이 수평일 때는 새로운 행을, 수직일 때는 새로운 열을 만드는 방식이다.

1. wrap - 교차축 방향이 기본값임
2. wrap-reverse - 교차축 방향이 반전됨
3. nowrap - flex-wrap 속성을 적용하지 않음

아래는 순서대로 flex-direction 값이 row일 때의 wrap, wrap-reverse를 적용한 모습이다.

wrap의 경우, 주축의 방향이 왼 ▶ 오이므로, 교차축의 방향이 상 ▶ 하인 모습이다.

wrap-reverse의 경우, 위의 기본 방향에서 반전되므로 하 ▶ 상으로 배치된 것을 확인할 수 있다.

 

컨테이너의 크기가 충분히 크면 wrap 속성에 상관없이 기본 flex-direction 값에 맞추어 새로운 행, 열을 생성하지 않고 일반적으로 정렬이 된다.

 

---

Align-Items

교차축을 기준으로 컨테이너 내에서 요소와 컨텐츠를 어떻게 배치할 지 결정하는 속성이다. justify-content와 유사하나, 기준 축이 다르다는 차이점이 있다.

1. flex-start - 컨텐츠를 교차축의 시작점을 기준으로 정렬
2. flex-end - 컨텐츠를 교차축의 끝점을 기준으로 정렬
3. center - 컨텐츠를 중앙 정렬 (요소의 종류나 크기에 상관없이 중앙을 기준으로 정렬된다.)
4. baseline - 요소 내 텍스트의 기준선에 맞춰 정렬 (각 글자를 잇는 밑줄을 긋는다고 생각하면 편하다.)

baseline의 정렬은 각 요소 내의 텍스트를 잇는 밑줄을 긋고, 그 밑줄에 맞추어 요소를 정렬한다고 생각하면 편하다. 요소의 높이가 제각기 다를 때 유용히 쓰인다.

아래는 flex-direction: row이고 flex-wrap: wrap이 적용되었을 때의 align-items 예시들이다.

 

순서대로 flex-start, flex-end

center, baseline

 

---

Align-Content & Align-Self

Align-Content

행이나 열이 여러 개일 때, 교차축을 기준으로 정렬하는 속성이다.

줄 바꿈 없이 단일 행 또는 단일 열인 경우 적용되지 않는다.

그렇기 때문에 보통 flex-wrap 속성을 지정한 뒤에 align-content 속성을 사용한다.

1. flex-start - 컨텐츠를 교차축의 시작점 기준으로 정렬
2. flex-end - 컨텐츠를 교차축의 끝점 기준으로 정렬
3. center - 컨텐츠를 중앙 정렬
4. space-between - 요소 사이에 간격을 띄워 요소와 컨테이너 사이에 사실상의 공백이 없게 하는 것
5. space-around - 요소 바깥에 똑같은 크기의 여백을 주는 것
6. space-evenly - 요소 사이 뿐만 아니라, 요소와 컨테이너 사이에도 동일한 크기의 여백을 주는 것

아래는 flex-direction: column이고 flex-wrap: wrap이 적용되었을 때의 align-content 예시들이다.

 

아무런 적용 하지 않았을 때

순서대로 flex-start, flex-end, center

space-between, space-around, space-evenly

---

Align-Self

align-items와 유사하나, 단일 요소에 사용하거나 flex 컨테이너에서 두 개 이상의 요소에 직접적으로 사용하는 속성이다.
컨테이너 자체에 쓰이는 속성이 아니며, 교차축을 기준으로 배열된 단일 요소의 위치를 각각 바꿀 수 있다.

1. flex-start - 컨텐츠를 교차축의 시작점 기준으로 정렬
2. flex-end - 컨텐츠를 교차축의 끝점 기준으로 정렬
3. center - 컨텐츠를 중앙 정렬

아래는 flex-direction: row이고 flex-wrap: wrap이 적용되었을 때의 align-self 예시이다.

div:nth-of-type(1) {
  align-self: flex-start;
}

div:nth-of-type(2n) {
  align-self: center;
}

div:nth-of-type(3) {
  align-self: flex-end;
}

 

---

Flex Sizing Properties

flex 컨테이너의 각 아이템에 관련된 세 가지의 특성(Flex-Basis, Flex-Grow, Flex-Shrink)과, 어떻게 공간이 늘어나고 줄어드는지 알아보자.

Flex-Basis

flex 컨테이너에 추가되기 전 시작점, 즉 요소가 배치되기 전에 요소의 최초 크기를 결정하는 속성이다.

width를 그냥 지정해도 되는데 왜 굳이?

flex-basis는 주축에 걸쳐서 결정되는 크기이다. 즉, 주축의 방향에 따라 너비도 될 수 있고, 높이도 될 수 있기 때문에 유연하다.

 

주축의 방향이 가로일 때, flex-basis는 width 무시하고 적용됨

주축의 방향이 세로일 때, flex-basis는 height 무시하고 적용됨

---

Flex-Grow

컨테이너 내부에 남은 공간이 있을 때, 해당 요소가 그 공간을 얼마나 차지할지 정하는 속성이다.
어떤 요소에든 부여할 수 있으며, 요소들이 커지는 비율을 통제한다.

아래와 같이 요소들에 부분적으로 flex-grow를 적용한 경우, flex-grow가 적용된 요소들만 남은 공간을 모두 차지한다.
이 때, 옆에 붙는 값은 커지는 비율이다.

컨테이너 공간이 충분해서 두 번째 사진처럼 적용된 요소들이 한 줄에 있을 때, 둘 다 값이 1이므로 동일한 비율로 공간을 차지하게 된다.

브라우저 창을 줄이는 등 컨테이너 공간이 부족해지는 경우 wrap 속성이 있으면 다음 줄로 요소가 내려가 공간을 차지하게 된다.

#container div {
  width: 150px;
  height: 150px;
  flex-basis: 150px; 
}

div:nth-of-type(1) {
  flex-grow: 1;
}

div:nth-of-type(5) {
  flex-grow: 1;
}

공간이 충분하지 않은 경우와 충분한 경우

 

아래는 값(늘어날 비율)을 다르게 지정한 것이다.

초록색 영역보다 보라색 영역이 2배 더 크게 늘어나는 것을 확인할 수 있다.

div:nth-of-type(1) {
  flex-grow: 1;
}

div:nth-of-type(5) {
  flex-grow: 2;
}

---

#container div {
  width: 150px;
  height: 150px;
  flex-basis: 150px; 
  flex-grow: 1;
}

모든 요소들에 flex-grow를 적용한 경우에는 컨테이너 공간이 충분할 때, 공간을 요소들이 균등하게 차지하게 된다.

---

#container div {
  width: 150px;
  height: 150px;
  max-width: 200px;
  flex-basis: 150px; 
  flex-grow: 1;
}

max-width 옵션으로 늘어날 수 있는 최대 크기를 정할 수도 있다.

 

---

Flex-Shrink

컨테이너에 충분한 공간이 없을 때, 요소들이 줄어드는 비율을 통제한다. 다른 요소에 비해 얼마나 더 줄어들지 설정하는 것이다.

아래는 첫번째, 다섯 번째 요소에 flex-shrink를 적용한 모습이다.

flex-grow와 미묘하게 다른 점은 철저히 다른 요소를 기준으로 하기 때문에, 값이 1인 경우 flex-shrink가 적용되지 않은 요소들과 동일하다.

#container div {
  width: 150px;
  height: 150px;
  flex-basis: 400px; 
}

div:nth-of-type(1) {
  flex-shrink: 2;
}

div:nth-of-type(5) {
  flex-shrink: 1;
}

---

Flex Shorthand

위의 세 가지 특성을 보다 간단하게 작성할 수 있는 flex 속기법이 존재한다.

세 가지 값의 순서는 flex: 1. flex-grow | 2. flex-shrink | 3. flex-basis 순서이다.
두 가지 값만 있다면 (1. flex-grow | 2. flex-shrink)와 (1. flex-grow | 2. flex-basis)인 경우가 있다. 보통 px, em 등의 단위가 붙는 경우 후자(flex-basis에 단위가 사용되기 때문)이다.
숫자가 아닌 값 1개나 단위가 없는 숫자라면 기본적으로 flex-grow이다.

 

MDN CSS Flex

https://developer.mozilla.org/ko/docs/Web/CSS/flex

flex - CSS: Cascading Style Sheets | MDN

---

반응형 디자인(responsive design) 및 미디어 쿼리

반응형 디자인

다양한 화면 크기와 기기의 특징에 따라 다르게 반응하도록 웹 사이트나 애플리케이션을 제작하는 작업

pc 웹 사이트와 모바일 웹 사이트가 따로인 경우가 다수 있다. - Ex. 구글: (PC)google.com / (모바일) m.google.com

두 사이트는 마크업과 구조가 완전히 다른 별개의 사이트이다.

반응형 디자인은 미디어 쿼리를 통해 작업할 수 있다.

 

미디어 쿼리

반응형 웹 사이트 스타일을 변경하고 매개변수에 따라 새로운 스타일을 넣을 수 있다. 보통 화면 너비나 기기 종류, 기기가 움직이는 방향에 맞추어 스타일을 조정한다.

기본형은 @media로 시작하며, 괄호 안에 미디어 기능(media features)을 다양하게 매개변수로서 넣을 수 있다.

가장 많이 사용하는 미디어 기능은 너비이며, 가끔 높이를 쓴다고 한다.

여기서 언급하는 너비는 뷰포트(viewport) 너비이다. 뷰포트는 컴퓨터 그래픽에 있는 폴리곤 영역을 뜻하며, 브라우저 창이나 화면을 통해 보고 있는 문서를 뜻한다.

 

아래는 너비가 정확히 500px일 때만 h1의 컬러 속성이 보라색이 되도록 작성한 미디어 쿼리이다.

@media (width: 500px) {
  h1 {
    color: purple;
  }
}

 

너비가 정확히 500px 일때만 적용된다.

---

아래는 min-width(최소 너비), max-width(최대 너비)를 적용한 예시이다.

최소 너비를 500px로 설정함으로써, 500px 이상인 경우에만 보라색이 적용된다.

그리고 최대 너비를 700px로 설정함으로써, 700px 미만인 경우에만 보라색이 적용된다.

보통 width보다 min-width, max-width를 더 자주 사용한다.

@media (min-width: 500px) {
  h1 {
    color: purple;
  }
}

@media (max-width: 700px) {
  h1 {
    color: purple;
  }
}

---

and를 사용해서 서로 다른 미디어 기능을 복합적으로 사용할 수도 있다.

아래의 경우 500px 이상, 800px 미만인 경우에 보라색이 적용된다.

@media (min-width: 500px) and (max-width: 800px){
  h1 {
    color: purple;
  }
}

 

그리고 미디어 쿼리를 여러 개 나열해서 사용할 수도 있다.

아래의 쿼리를 적용하면 기본 글씨 색은 빨강색이며, 너비가 500px 이상이면 오렌지색, 1000px 이상이면 노란색, 1500px 이상이면 초록색이 적용된다.

이 때는 CSS의 Cascading 속성을 유의하여 미디어 쿼리 순서를 정하고 나열해야 한다. 순서가 바뀌면 원하는 결과가 나오지 않을 수도 있음에 유의.

h1 {
    color: red;
}

@media (min-width: 500px) {
  h1 {
    color: orange;
  }
}

@media (min-width: 1000px) {
  h1 {
    color: yellow;
  }
}

@media (min-width: 1500px) {
  h1 {
    color: green;
  }
}

---

아래는 orientation 기능을 이용함으로써, 화면이 가로(landscape) 방향일 때 배경 색상을 핑크색으로 적용하는 미디어 쿼리이다.

보통 모바일 환경에서 유용하게 사용되는 기능이다.

@media (orientation: landscape) {
  body {
    background-color: pink;
  }
}

아이폰 12 프로 해상도 기준에서의 세로와 가로 화면

---

 

MDN CSS Using Media Queries

https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

 

---

예제: 반응형 내비게이션 바 제작하기

지금까지 배운 모든 flexbox 관련 속성과 미디어 쿼리를 복습하는 중첩 flex 컨테이너 예제이다.

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Queries</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="app.css">
</head>

<body>
    <nav>
        <a href="#home">Home</a>
        <ul>

            <li>
                <a href="#Home">Learn More</a>
            </li>
            <li>
                <a href="#Home">About</a>
            </li>
            <li>
                <a href="#Home">Contact</a>
            </li>

        </ul>
        <a href="#signup">Sign Up</a>
    </nav>
    <h1>Media Queries</h1>

</body>

</html>

---

body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    font-size: 6em;
    text-align: center;
}
nav {
    font-size: 1.5em;
    display: flex;
    justify-content: space-between;
}

/*css에서 순서는 매우 중요- ul, li 스타일과 ul 스타일 작성된 순서 바뀌면 적용되지 않음*/
ul,li {
    display: inline;
    margin: 0;
    padding: 0;
}
ul {
    flex: 1;
    max-width: 50%;
    display: flex;
    justify-content: space-evenly;
}


@media (max-width: 768px){
    h1 {
        font-size: 4em;
    }
    nav, nav ul {
        flex-direction: column;
        align-items: center;
    }
  
}

@media (max-width: 576px){
    h1 {
        font-size: 3em;
    }
}

---

위 css 코드 내의 미디어 쿼리에 의해, 뷰포트 너비가 768px 이하인 경우 내비게이션 바의 모양이 우측 사진과 같이 바뀐다.

뷰포트 너비에 따른 내비게이션 바 모양의 반응성