반응형

개요.

CSS의 역할 중 하나로 HTML 요소를 적절하게 배치하는 것이 있다. 

[ 요소를 배치 ] 하는 것을 레이아웃이라고 부르며 CSS의 레이아웃 시스템의 변화 역사가 있다. 

과거에는 float를 사용해서 레이아웃을 구현하고 이후 flex 레이아웃이 등장하면서 점차 float를 사용하지 않게 되었다. 

마지막으로 제일 나중에 grid가 등장하였으며, grid가 제일 마지막에 등장했다고 grid만 사용하는 것이 아닌 상황에 따라 flex와 grid를 혼용한다. 

 

※ flex와 grid는 상황에 따라 혼용해서 사용하는데 왜 float는 사용하지 않을까? 

여러가지가 있겠지만 반응형 웹에 적합하지 않기 때문이다. 

 

과거 PC를 통해서만 웹 사이트를 접근하는 상황에선 반응형이 중요하지 않았지만 최근에는 모바일, 테블릿 등 

홈페이지를 접근하는 기기의 종류가 많아지는 상황에 대한 처리는 어려워지면서 사용을 하지 않게 되었다. 

 

※ 그렇다면 이제 float를 알 필요는 없을까? 

float를 사용해서 레이아웃을 구성하는 빈도가 줄어들면 몰라도 상관 없다고 생각할 수 있지만

아직 옛날에 작업한 홈페이지들이 많이 남아 있고 그때 사용한 float를 읽고 이해할 수 있어야 하므로 필요하다. 

 

float 레이아웃

과거 PC의 레이아웃을 구성할 때 사용하던 속성이다. 하지만 반응형 웹이 생기면서 점차 사용하지 않는 추세이다. 

 

float 

HTML 요소를 일반적인 흐름으로부터 벗어나서 특정 컨테이너의 좌측 혹은 우측을 감싸는 형태로 배치하는 속성이다.

float: none
float: left
float: right

 

값으로는 left, right 또는 none이 있으며, none이 기본 속성이다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .float-left {
        float: left;

        width: 200px;
        height: 300px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="float-left"></div>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat quia
      illo obcaecati quasi, minima eaque cum neque vel rem, commodi laboriosam
      facilis, assumenda natus! Commodi vero ad corporis veniam similique?
    </p>
  </body>
</html>

 

div는 block 요소이기 때문에 width가 100%가 아니더라도 본인이 속한 라인에 다른 요소가 오지 못한다. 

하지만 float 속성을 준다면 강제로 배치할 수 있다. 

뉴스나 잡지 같은 레이아웃으로 컴포넌트가 만들어졌다. 

right 속성을 준다면 파란색 박스가 오른쪽으로 가는 레이아웃으로 변경될 것이다. 

 

clear

float가 적용된 요소에게 추가로 설정할 수 있는 속성으로 float의 영향력을 해당 요소에 한해 해제한다. 

clear: none
clear: left
clear: right
clear: both

 

float: left를 해제하고 싶다면 clear: left를 float와 동일한 방향의 설정을 해제하고 싶은 경우에 사용하거나 

양쪽 모두 float를 해제하고 싶다면 float: both를 사용하면 된다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .float-left {
        float: left;

        width: 200px;
        height: 300px;
        background-color: aqua;
      }

      .float-right {
        float: right;

        width: 200px;
        height: 100px;
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div class="float-left"></div>
    <div class="float-right"></div>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat quia
      illo obcaecati quasi, minima eaque cum neque vel rem, commodi laboriosam
      facilis, assumenda natus! Commodi vero ad corporis veniam similique?
    </p>
  </body>
</html>

 

float: left 말고 float: right 요소까지 추가하였다. 

이렇게 작업하면 양쪽에 Box 요소가 존재하고 가운데 텍스트가 있는 레이아웃이 만들어진다. 

이때 텍스트가 float 설정을 무시하고 싶은 경우에 clear 속성을 사용하면 된다. 

먼저 left를 무시하고 싶다면 아래와 같이 사용하면 된다. 

clear: left

왼쪽 요소의 높이가 더 높기 때문에 보이는 형식은 텍스트 요소가 아에 float 속성에서 탈출한 것처럼 보이게 된다. 

하지만 실제로는 float: left 속성만 탈출하였다. 

float: right;

 

float: right 속성을 사용하면 해당 영역만 탈출하는 것이 더 확실하게 구분할 수 있다. 

양쪽 속성을 다 해제하고 싶을 때는 both 속성을 사용하면 해제가 가능하다. 

 

flex 레이아웃

flex는 레이아웃 배치 전용 기능으로 고안되어서 float에 비해 훨씬 편리하다. 

레이아웃을 만들기 위한 HTML 구조도 간단한데 일반적으론 다음과 같다 : 

<div class="container">
  <div class="item">박스1</div>
  <div class="item">박스2</div>
  <div class="item">박스3</div>
</div>

 

부모 요소는 container, 자식 요소는 item이다. 

앞으로 부모 요소를 Flex Container, 자식 요소를 Flex item이라고 부르겠다. Container는 Flex의 영향을 받는 공간이며, 

이 공간 내에 아이템들이 배치된다고 보면 된다. 

 

Flex의 속성 

flex가 적용된 요소는 Flexible Box의 정렬 기준인 중심축과 교차축이 생긴다. 

붉은 선이 중심축, 푸른 선이 교차축이 된다. 축들은 설정에 따라 서로 바뀔 순 있는 부분이다. 

 

flex에 적용할 수 있는 속성은 크게 2개로 나뉜다. 

  • 컨테이너에 적용하는 속성
  • 아이템에 적용하는 속성 

컨테이너에 적용하는 속성

  • display: flex 
  • flex-direction ( 배치 방향 설정 )
    • row : 중심축을 가로 방향으로 배치한다. 
    • column : 중심축을 세로 방향으로 배치한다. 
    • reverse-row : 중심축을 가로 방향으로 배치하고 정렬을 반대로한다. 
    • reverse-column : 중심축을 세로 방향으로 배치하고 정렬을 반대로 한다. 
  • justify-content ( 중심축 방향 정렬 )
    • flex-start ( 기본값 )
    • flex-end
    • center
    • space-between
    • space-around
    • space-evenly
  • align-items ( 교차축 방향 정렬 )
    • stretch ( 기본값 )
    • flex-start
    • flex-end
    • center
  • flex-wrap
    flex-item이 여러 개일때, item들의 줄바꿈을 허용할 것인지 결정한다. 
    만약 허용하지 않으면 item은 아무리 많아져도 한줄에 들어간다. 
    • nowrap ( 기본값 )
      item의 줄바꿈을 허용하지 않는다. 
    • wrap
      item의 가로 사이즈가 container의 가로 사이즈를 넘겼을 때, 자연스럽게 다음 줄로 넘어간다. 

※ align-items와 flex-wrap

align-items는 한 줄일 때 정렬을 설정해주는 속성이다. 

하지만 flex-wrap을 사용한다면 두줄, 세줄이 될 수 있는 경우가 발생한다. 

 

align-items를 사용했을 땐 한 줄인 경우의 정렬을 사용할 수 없다. 

<div
  style="
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 900px;
    background-color: blue;
  "
>
  <div style="width: 50%; height: 100px; background-color: red"></div>
  <div style="width: 50%; height: 100px; background-color: red"></div>
  <div style="width: 50%; height: 100px; background-color: red"></div>
  <div style="width: 50%; height: 100px; background-color: red"></div>
  <div style="width: 50%; height: 100px; background-color: red"></div>
</div>

간단하게 5개의 요소가 있고 부모 div의 속성으로 인해 한 줄에 2개의 요소밖에 나오지 않는다. 

여러 라인의 요소를 전부 가운데 정렬을 하고 싶은 경우 align-items를 사용했다. 

 

하지만 실제로 적용된 속성을 확인했을 땐 속성대로 적용되지 않는 것을 확인할 수 있다. 

붉은 요소들이 가운데 모이지 않는 것을 확인할 수 있다. 

이것을 가운데 정렬하기 위해서 align-content 속성을 사용하면 원하는 정렬이 가능해진다. 

<div
  style="
    display: flex;
    flex-wrap: wrap;
    align-content: center;          <=== 변경
    height: 900px;
    background-color: blue;
  "
>
  <div style="width: 50%; height: 100px; background-color: red"></div>
  <div style="width: 50%; height: 100px; background-color: red"></div>
  <div style="width: 50%; height: 100px; background-color: red"></div>
  <div style="width: 50%; height: 100px; background-color: red"></div>
  <div style="width: 50%; height: 100px; background-color: red"></div>
</div>

 

align-content에 사용하는 값은 기존 정렬들과 동일하게 사용할 수 있다. 

실제 적용된 것을 확인하면 가운데 정렬이 된 것을 확인할 수 있다. 

 

flex item 속성

flex container에 줄 수 있는 속성에 대해서 알아봤는데, flex item에게도 줄 수 있는 속성이 있다. 

 

※ flex item

display flex 속성이 적용된 부모 요소는 flex container 

부모 요소의 자식 요소들은 flex item 

  • order : item의 순서를 지정한다. 
  • flex-basis : item의 기본 사이즈를 지정한다. 
  • flex-shrink : 설정된 숫자값에 따라 flex container 요소 내부에서 flex item 요소의 크기가 축소된다. 
  • flex-grow : flex item 요소가 flex container 요소 내부에서 할당 가능한 공간의 정도를 선언한다. 

grid 레이아웃

flex 레이아웃은 row 혹은 column의 배치 방향을 선택해 결정할 수 있는 방식으로 1차원적인 구조를 가지고 있다.

하지만 grid 레이아웃은 2차원적인 구조를 가지고 있다. 

 

grid의 요소는 다음과 같은 명칭을 가지고 있다. 

  • grid-container : grid가 적용된 요소 
  • grid-item : grid가 적용된 요소의 자식 요소들
  • grid-line : grid-item 사이의 경계
  • grid-number : 해당 grid-line이 몇 번째 line인지 의미 

해당 요소들을 가지고 grid 속성을 적용할 때 참고해서 작업한다. 

 

grid 속성

grid-template 

grid의 행과 열의 개수 및 크기를 지정할 수 있다. 

grid-template-row : 1fr 1fr 1fr
grid-template-column : 2fr 200px

 

row는 행의 템플릿을, column은 열의 템플릿을 지정한다. 

 

※ 단위 

grid에서는 fr이라는 단위를 사용할 수 있는데, fr은 fraction(분수)의 약자이다. 

grid-template에서 사용할 수 있는 비율 단위로 다음과 같이 적용이 된다 : 

 

grid-template에는 repeat 이라는 반복 함수도 쓸 수 있다. 

repeat(a, b)라고 하면, b규격의 grid-template을 a개 생성한다는 의미가 된다. 

grid-template-columns: repeat(4, 1fr);
===
grid-template-columns: 1fr 1fr 1fr 1fr;

 

grid-column & grid-row

grid-column과 grid-row는 grid-item에 줄 수 있는 속성이다. 

각각의 grid-item이 열과 행 방향으로 얼마만큼의 영역을 차지할 지 정의할 수 있다. 

 

이때, 값이 시작되는 grid-number와 종료 지점이 되는 grid-number를 입력한다. 

grid-column: 1 / 4;
grid-row: 2 / 3;

 

 

지금까지 float, flex, grid에 대해서 쭉 정리하였다. 

대부분 아는 정보이긴 하지만 정리하면서 개념을 제대로 알 수 있을 것이며 속성을 제대로 사용할 수 있게 되었다. 

반응형
저작자표시 비영리 변경금지

'Web' 카테고리의 다른 글

웹사이트 로그인의 역사  (1) 2024.10.02
3D 애니메이션 심화  (2) 2024.09.08
CSS 3D  (2) 2024.05.08
CSS 선택자  (2) 2024.05.05
Animation - frame by frame  (3) 2024.05.01

티스토리툴바