프론트엔드

CSS의 레이아웃

도우 2025. 1. 22. 15:04
728x90

1. position 프로퍼티

position 프로퍼티는 HTML 요소의 위치를 결정하는 방식을 설정한다. 웹 페이지의 레이아웃을 구성할 때 필수적인 속성으로, 각 요소를 원하는 위치에 배치할 수 있게 해준다.

position 속성 값은 static, relative, absolute, fixed 네 가지가 있으며, 각각의 특성은 다음과 같다.

속성값 기준점 다른 요소에 영향 스크롤 시 동작

static 기본 문서 흐름 영향 있음 함께 스크롤
relative 원래 위치 영향 없음 함께 스크롤
absolute 상위 요소 영향 없음 함께 스크롤
fixed 뷰포트 영향 없음 고정 위치 유지

 

1) 정적 위치(static position) 지정 방식

static은 position 프로퍼티의 기본값이다. 다른 태그와의 관계에 의해 자동으로 배치되며, 임의로 위치를 설정할 수 없다. 기본적인 요소의 배치는 위에서 아래로, 왼쪽에서 오른쪽 순서로 이루어지며, 부모 요소 내에 자식 요소로 존재할 때는 부모 요소의 위치를 기준으로 배치된다.

<html>
  <head>
    <style>
      body {
        margin: 0;
      }
      .parent {
        width: 150px;
        height: 150px;
        background: #bcbcbc;
        border: 1px solid #bcbcbc;
      }
      .static-box {
        position: static;
        background: #2e303d;
        color: #e55c3c;
        font-weight: bold;
        text-align: center;
        line-height: 150px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="static-box">static box</div>
    </div>
  </body>
</html>

 

2) 상대 위치(relative position) 지정 방식

relative는 요소가 원래 있어야 할 위치를 기준으로 좌표를 지정할 수 있다. 특징적인 점은 요소가 이동하더라도 원래 위치의 공간이 그대로 유지된다는 것이다. 이는 다른 요소들의 배치에 영향을 주지 않으면서 특정 요소만 이동시키고 싶을 때 유용하다.

<html>
  <head>
    <style>
      body {
        margin: 0;
      }
      .parent {
        width: 150px;
        height: 150px;
        background: #bcbcbc;
        border: 1px solid #bcbcbc;
        margin: 50px;
      }
      .relative-box {
        position: relative;
        top: 50px;
        left: 50px;
        background: #2e303d;
        color: #e55c3c;
        font-weight: bold;
        text-align: center;
        line-height: 150px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="relative-box">relative box</div>
    </div>
  </body>
</html>

 

3) 절대 위치(absolute position) 지정 방식

absolute는 가장 가까운 position 속성이 static이 아닌 부모 요소를 기준으로 위치를 지정한다. 만약 그러한 부모 요소가 없다면 문서의 body를 기준으로 위치가 결정된다. absolute는 문서의 일반적인 흐름에서 제외되어 다른 요소들의 레이아웃에 영향을 주지 않는다.

<html>
  <head>
    <style>
      body {
        margin: 0;
      }
      .parent {
        width: 200px;
        height: 200px;
        background: #bcbcbc;
        border: 1px solid #bcbcbc;
        margin: 50px 0 0 300px;
        position: relative;
      }
      .absolute-box {
        position: absolute;
        height: 200px;
        width: 200px;
        top: 50px;
        left: 50px;
        color: #e55c3c;
        font-weight: bold;
        text-align: center;
        background: #2e303d;
        line-height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="absolute-box">absolute box (in parent)</div>
    </div>
    <div class="absolute-box">absolute box (no parent)</div>
  </body>
</html>

relative 프로퍼티와 absolute 프로퍼티의 차이점

두 속성의 가장 큰 차이는 기준점에 있다. relative는 항상 요소의 원래 위치를 기준으로 하지만, absolute는 상위 요소 중 static이 아닌 요소를 기준으로 한다. 이로 인해 absolute는 부모 요소의 영역을 자유롭게 벗어날 수 있는 반면, relative는 원래 위치를 기준으로 한 제한적인 이동만 가능하다.

💡 따라서 absolute 프로퍼티 요소는 부모 요소의 영역을 벗어나 자유롭게 어디든지 위치할 수 있다.

 

4) 고정 위치 (fixed position) 지정 방식

fixed는 브라우저의 뷰포트의 기준으로 위치를 지정한다. 스크롤을 하더라도 지정된 위치에서 움직이지 않는 특징이 있어, 웹사이트의 헤더나 사이드바 같이 항상 같은 위치에 노출되어야 하는 요소에 주로 사용된다.

<html>
  <head>
    <style>
      body {
        margin: 0;
      }
      .fixed-box {
        position: fixed;
        color: #e55c3c;
        font-weight: bold;
        text-align: center;
        background: #2e303d;
      }
      .sidebar {
        width: 50px;
        height: 100%;
        top: 0;
        right: 0;
        padding-top: 100px;
      }
      .footer {
        width: 200px;
        width: 100%;
        height: 50px;
        bottom: 0;
        left: 0;
        line-height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="fixed-box sidebar">fixed box (side-bar)</div>
    <div class="fixed-box footer">fixed box (footer)</div>
  </body>
</html>

 

 

2. display (block, inline, inline-block, flex, grid)

display 프로퍼티

display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다.

  • block : block 특성을 가지는 요소(block 레벨 요소)로 지정
  • inline : inline 특성을 가지는 요소(inline 레벨 요소)로 지정
  • inline-block : inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정
  • none : 해당 요소를 화면에 표시하지 않는다. (공간조차 사라짐)

 

1) block 레벨 요소

block 특성을 가지는 요소(block 레벨 요소 또는 block 요소)는 아래와 같은 특징을 갖는다

  • 항상 새로운 라인에서 시작한다
  • 화면 크기 전체의 가로폭을 차지한다. (width : 100%)
  • width, height, margin, padding 프로퍼티 지정이 가능하다
  • block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다.
  • 기본값으로 block 특성을 가지는 주요 HTML 태그는 다음과 같다. -> div, h1 ~ h6, p, ol, ul, li, hr, table, form
<html>
  <head>
    <style>
      div:nth-of-type(1) {
        background-color: #ffa07a;
        padding: 20px;
      }
      div:nth-of-type(2) {
        background-color: #ff7f50;
        padding: 20px;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>블록 레벨 요소</h2>
      <p>width, height 미지정 → width: 100%; height: auto;</p>
    </div>
    <div>
      <h2>블록 레벨 요소</h2>
      <p>width: 300px → width: 300px; height: auto;</p>
    </div>
  </body>
</html>

 

2) inline 레벨 요소

inline 특성을 가지는 요소(inline 레벨 요소 또는 inline 요소)는 아래와 같은 특징을 갖는다.

  • 새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다. 즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.
  • content의 너비만큼 가로폭을 차지한다.
  • width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. 상, 하 여백은 line-height로 지정한다.
  • inline 레벨 요소 뒤에 공백이 있는 경우, 정의하지 않은 space가 자동으로 지정된다.
  • inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다. inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.
  • 기본값으로 inline 특성을 가지는 주요 HTML 태그는 다음과 같다. -> span, a, strong, img, br, input, select, textarea, button
<html>
  <head>
    <style>
      span {
        background-color: red;
        color: white;
        padding: 10px;
        /* width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. */
        /* width: 200px; */
        /* margin: 10px; */
        /* 상, 하 여백은 line-height로 지정한다. */
        /* line-height: 50px; */
      }
    </style>
  </head>
  <body>
    <h1>My <span>Important</span> Heading</h1>
    <span>Inline</span>
    <span>Inline</span><span>Inline</span>
  </body>
</html>

 

3) inline-block 레벨 요소

block과 inline 레벨 요소의 특징을 모두 갖는다. inline 레벨 요소와 같이 한 줄에 표현되면서 widht, height, margin 프로퍼티를 모두 지정할 수 있다.

  • 기본적으로 inline 레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다.
  • block 레벨 요소처럼 width, height, margin, padding 프로퍼티를 모두 정의할 수 있다. 상, 하 여백을 margin과 line-height 두 가지 프로퍼티 모두를 통해 제어할 수 있다.
  • content의 너비만큼 가로폭을 차지한다.
  • inline-block 레벨 요소 뒤에 공백(엔터, 스페이스)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.
<html>
  <head>
    <style>
      .wrapper {
        font-size: 0; /*요소간 간격을 제거*/
      }
      .inline-block {
        display: inline-block;
        vertical-align: middle; /* inline-block 요소 수직 정렬 */
        border: 3px solid #73ad21;
        font-size: 16px;
      }
      .box1 {
        width: 300px;
        height: 70px;
      }
      .box2 {
        width: 300px;
        height: 150px;
      }
    </style>
  </head>
  <body>
    <div class="inline-block box1">inline-block height 70px</div>
    <div class="inline-block box2">inline-block height 150px</div>
    <div class="wrapper">
      <div class="inline-block box1">inline-block height 70px</div>
      <div class="inline-block box2">inline-block height 150px</div>
    </div>
  </body>
</html>

 

4) flex

Flexbox는 1차원(행 또는 열) 레이아웃 시스템을 제공하는 CSS 속성이다. 주로 요소들을 행이나 열방향으로 배치하고 정렬하는 데 사용된다.

출처 : https://studiomeal.com/archives/197

  • flex-direction
    • row : 가로 방향(기본값)
    • row-reverse : 역방향가로
    • column : 세로 방향
    • column-reverse : 역방향 세로
  • justify-content (주 축 정렬)
    • flex-start : 시작점 정렬
    • flex-end : 끝점 정렬
    • center : 중앙정렬
    • space-between : 요소 사이 균등 간격
    • space-around : 요소 주변 균등 간격
    • space-evenly : 모든 간격 동일
  • align-items (교차 축 정렬)
    • flex-start : 시작점 정렬
    • flex-end : 끝점 정렬
    • center : 중앙 정렬
    • baseline : 텍스트 베이스라인 기준
    • stretch : 컨테이너 높이에 맞춤
.container {
    display: flex;
    flex-direction: row;          /* 기본값: 가로 방향 */
    justify-content: space-between; /* 주 축 정렬 */
    align-items: center;          /* 교차 축 정렬 */
}

.item {
    flex: 1;               /* grow, shrink, basis 축약형 */
    align-self: center;    /* 개별 정렬 */
    order: 1;             /* 배치 순서 */
}

 

 

5) Grid Layout

Grid는 2차원 (행과 열) 레이아웃 시스템을 제공하는 CSS 속성이다. Grid는 복잡한 레이아웃을 구현하는데 용이하다. 콘텐츠 배치가 명시적이고 간격 관리가 용이함에 따라 반응형 디자인 구현에 많이 사용된다.

출처 :  https://studiomeal.com/archives/533

Grid 컨테이너 속성은 다음과 같다.

  • grid-template-columns : 열의 크기와 개수 정의
  • grid-template-rows : 행의 크기와 개수 정의
  • gap : 그리드 아이템 간의 간격 설정
  • grid-template-areas : 영역 이름으로 레이아웃 정의

기본구조

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;  /* 3열 */
    grid-template-rows: 100px 100px;           /* 2행 */
    gap: 20px;  /* 그리드 간격 */
}

/* Grid 아이템 속성 */
.item {
    grid-column: 1 / 3;     /* 열 위치 지정 */
    grid-row: 1 / 3;        /* 행 위치 지정 */
    grid-area: header;      /* 영역 지정 */
}

 

 

3. 참고 자료

https://studiomeal.com/blog

 

1분코딩 블로그

웹 창작자들을 위한 꿀정보들!

studiomeal.com

 

https://poiemaweb.com/

 

웹 프로그래밍 튜토리얼 | PoiemaWeb

Front-end Development Tutorial

poiemaweb.com

 

728x90