[CSS 공부] 레이아웃

CSS 레이아웃은 웹 페이지의 구조를 설계하는 방법입니다. 웹 페이지는 여러 요소로 구성되며, 이들 요소의 위치, 크기, 배치 등을 조절하는 것이 CSS 레이아웃입니다. 여기에는 Normal Flow, Floats, Positioning, Flexbox (Flexible Box), Grid Layout, Multi-column Layout, Table Layout, Box Model 등의 기술요소가 있습니다. 여기에 대해서 알아보겠습니다.

CSS의 레이아웃(layout) 기술

CSS 레이아웃은 웹 페이지의 구조를 설계하는 방법을 말합니다. 웹 페이지는 여러 요소로 구성되며, 이들 요소의 위치, 크기, 배치 등을 조절하는 것이 CSS 레이아웃입니다.

CSS에서 사용할 수 있는 주요 레이아웃 기술은 다음과 같습니다:

1. Normal Flow: HTML 문서의 기본적인 레이아웃 형태로, 문서가 위에서 아래로 흐르며 왼쪽에서 오른쪽으로 흐르는 방식입니다. 각 요소는 이전 요소 다음에 나타나고, 새로운 줄은 이전 줄 아래에 나타납니다.
2. Floats: Float 속성은 이미지와 같은 요소를 텍스트나 다른 인라인 요소 주위에 “떠” 있게 하는 데 사용됩니다. float: left; 또는 float: right;를 사용하면 해당 요소가 좌우 어느 한 쪽으로 밀려나고, 그 공간을 차지하던 다른 인라인 요소들이 그 주위를 감싸게 됩니다.
3. Positioning: Position 속성(static, relative, absolute, fixed, and sticky)을 사용하여 개별적으로 위치를 지정할 수 있습니다.
4. Flexbox (Flexible Box): Flexbox는 일차원(행 혹은 열) 레이아웃 모델로, 아이템 간 공간 분배와 정렬을 유연하게 조절할 수 있습니다.
5. Grid Layout: Grid는 이차원(행과 열 모두) 레이아웃 모델로 복잡한 디자인을 구현하기 위해 제공됩니다. Grid 시스템을 사용하면 웹 페이지 내에서 2차원 격자 형태의 영역을 생성하고 그 안에 아이템들을 배치할 수 있습니다.
6. Multi-column Layout: 멀티 컬럼 레이아웃은 텍스트 콘텐츠를 여러 컬럼으로 분리하여 보여주기 위한 방법입니다. column-count나 column-width 속성을 사용해 컬럼의 수나 너비를 지정할 수 있습니다.
7. Table Layout: 웹 페이지에서 데이터를 표 형식으로 표시할 때 사용하는 레이아웃입니다. HTML의 <table> 요소와 유사하지만, CSS를 사용하면 보다 복잡한 스타일과 레이아웃을 적용할 수 있습니다.
8. Box Model: 모든 HTML 요소는 사각형 박스로 간주되며, 이 박스는 content, padding, border 그리고 margin으로 구성됩니다. Box model은 이들 각 섹션의 동작과 크기 조절 방법을 정의합니다.

각 레이아웃 기술은 다른 목적과 상황에 따라 사용됩니다. 예를 들어, Flexbox와 Grid는 복잡한 인터페이스와 반응형 디자인에 매우 유용하며, Positioning과 Floats는 좀 더 구체적인 위치 조정에 사용됩니다.

Normal Flow는 CSS의 기본 레이아웃 모델입니다. 이 모델에서는 각 HTML 요소가 자신의 natural position에 따라 배치됩니다.

1. Normal Flow

Normal Flow에서는 두 가지 유형의 요소가 있습니다: block-level 요소와 inline-level 요소.

• Block-level 요소: 이들은 항상 새로운 줄에서 시작하며, 가능한 한 넓은 영역을 차지합니다. 예를 들어, <div>, <h1>~<h6>, <p>, <form> 등이 있습니다.
• Inline-level 요소: 이들은 새로운 줄을 시작하지 않고, 필요한 만큼의 넓이만 차지합니다. 예를 들어, <span>, <a>, <img> 등이 있습니다.

예시:

위 코드에서 div와 p는 블록 수준 요소로 각각 새로운 줄에서 시작하고 전체 넓이를 차지합니다. 반면에 span은 인라인 수준 요소로 같은 줄에 위치하며 필요한 만큼의 넓이만 차지합니다.

Normal Flow 내에서도 position 속성을 사용하여 relative나 absolute positioning을 할 수 있으나, 그러면 해당 요소는 Normal Flow에서 벗어나게 됩니다.

2. Floats 속성

CSS의 float 속성은 원래 이미지를 텍스트 주위로 “띄우는” 데 사용되었습니다. float 속성이 적용된 요소는 페이지의 좌측 또는 우측으로 이동하고, 그 주위의 인라인 요소들이 그 주위를 감싸게 됩니다.

다음과 같은 값들을 가질 수 있습니다:

• left: 요소를 왼쪽으로 부동시킵니다.
• right: 요소를 오른쪽으로 부동시킵니다.
• none: float를 적용하지 않습니다. (기본값)
• inherit: 부모 요소로부터 float 값을 상속받습니다.

예시:

<div style="width: 200px; height: 200px; background-color: red; float: left;">
    This is a floated box.
</div>

<p>
    This is a long paragraph that will wrap around the floated box. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
</p>

이 예제에서, div는 왼쪽으로 float 되며, 그 다음에 오는 p 태그 내용은 이 div 주변을 감싸게 됩니다.

주의할 점은 float된 요소가 normal flow에서 벗어나게 되므로 다른 요소들과 겹치거나 예상치 못한 방식으로 배치될 수 있다는 것입니다. 이런 문제를 해결하기 위해 종종 “clearfix” 해결법이 사용되곤 합니다.

더욱 복잡한 레이아웃을 구현하기 위해서는 Flexbox 나 Grid와 같은 기능을 사용하는 것이 좋습니다.

3. Positioning 속성

CSS의 position 속성은 요소의 위치를 결정하는 데 사용됩니다. 다음과 같은 값들을 가질 수 있습니다:

• static: 기본값입니다. 이 값을 가진 요소는 normal flow에 따라 배치됩니다.
• relative: 이 값을 가진 요소는 자신이 static positioning에서 차지하던 위치를 기준으로 상대적으로 배치됩니다.
• absolute: 이 값을 가진 요소는 가장 가까운 positioned ancestor(즉, position 속성이 static이 아닌 요소)나, 만약 그런 것이 없다면 initial containing block을 기준으로 절대적인 위치에 배치됩니다.
• fixed: 이 값을 가진 요소는 viewport를 기준으로 고정된 위치에 배치되며 스크롤과 무관하게 항상 같은 곳에 보여집니다.
• sticky: 이 값은 relative와 fixed positioning 사이에서 변합니다. 스크롤 위치에 따라서 “붙어있게” 동작합니다.

예시:

<div style="position: relative; left: 10px; top: 20px;">
    This is a relatively positioned box, moved 10 pixels to the right and 20 pixels down from its normal position.
</div>

<div style="position: absolute; right: 0; bottom: 0;">
    This is an absolutely positioned box, placed at the bottom-right corner of its nearest positioned ancestor or the initial containing block.
</div>

<div style="position: fixed; right: 0; top: 0;">
    This is a fixed box that always stays at the top-right corner of the viewport, regardless of scrolling.
</div>

위 예제에서 첫 번째 div는 relative로 설정되어 있으므로 원래의 위치로부터 오른쪽으로 10px, 아래로 20px 옮겨져 있습니다. 두 번째 div는 absolute로 설정되어 있으므로 최근의 포지셔닝 조상(또는 초기 포함 블록)의 오른쪽 하단 모서리에 배치됩니다. 세 번째 div는 fixed로 설정되어 있으므로 항상 viewport의 오른쪽 상단 모서리에 고정되어 보여집니다.

z-index 속성과 함께 사용하면, 여러 개의 포지셔닝된 요소들 사이에서 어떤 것이 다른 것 위에 표시될 지 제어할 수도 있습니다.

4. Flexbox (Flexible Box)

CSS Flexbox, 즉 Flexible Box Model은 컨테이너 내부의 아이템 간 공간 배분과 정렬을 유연하게 관리할 수 있는 1차원 레이아웃 모델입니다.

Flexbox는 다음과 같은 특징을 가집니다:

1. 항목의 크기가 고정되지 않아도 됩니다: Flexbox를 사용하면 항목들이 자동으로 빈 공간을 채우거나, 필요에 따라 축소됩니다.
2. 항목의 순서를 변경할 수 있습니다: HTML 소스에서 실제 순서와 상관 없이 항목들을 재배치 할 수 있습니다.
3. 세로 정렬이 용이합니다: 기존 CSS에서 세로 중앙 정렬은 어려웠지만, Flexbox에서는 간단한 명령으로 가능합니다.

Flexbox를 사용하는 기본적인 예시는 다음과 같습니다:

<div style="display: flex; justify-content: space-between;">
    <div style="width: 100px; height: 100px; background-color: red;"></div>
    <div style="width: 100px; height: 100px; background-color: blue;"></div>
    <div style="width: 100px; height: 100px; background-color: green;"></div>
</div>

위 예시에서 부모 div에 display:flex 속성을 부여하여 flex container로 만들었습니다. 그 후 justify-content 속성으로 자식 요소들 사이에 균등한 여백(space-between)을 설정하였습니다.

각 자식 div는 flex item으로 동작하며, 이 경우 모든 항목은 동일한 높이를 가지고 부모 컨테이너의 넓이를 균등하게 나누어 차지합니다.

Flexbox는 그 자체로 매우 강력하지만 복잡한 두 차원 레이아웃(예 : grid)에 대해서는 CSS Grid Layout가 더 적합할 수 있습니다.

5. Grid Layout

CSS Grid Layout은 웹페이지의 2차원 레이아웃을 위한 강력한 도구입니다. 그리드는 행과 열의 시스템을 사용하여 요소를 배치하고, 복잡한 디자인을 구현할 수 있습니다.

Grid Layout의 주요 특징은 다음과 같습니다:

1. 2차원 레이아웃: Flexbox와 달리 Grid는 행과 열 모두에 대해 정렬과 배치를 제어할 수 있습니다.
2. 항목의 크기와 위치 제어: Grid를 사용하면 항목의 크기와 위치를 pixel, percentage, fraction 등 다양한 단위로 정확하게 제어할 수 있습니다.
3. 항목 순서 변경: HTML 소스 코드 순서와 상관 없이 항목들을 재배치 할 수 있습니다.

Grid Layout 사용 예시는 다음과 같습니다:

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
    <div style="width: 100px; height: 100px; background-color: red;"></div>
    <div style="width: 100px; height: 100px; background-color: blue;"></div>
    <div style="width: 100px; height: 100px; background-color: green;"></div>
</div>

위 예시에서 부모 div에 display: grid 속성을 부여하여 그리드 컨테이너로 만들었습니다. grid-template-columns 속성으로 세 개의 동일한 너비(1fr)를 가진 열을 생성하였고, gap 속성으로 그리드 항목 사이에 간격을 설정하였습니다.

각 자식 div는 그리드 아이템으로 동작하며, 이 경우 모든 아이템은 동일한 넓이를 가지고 부모 컨테이너의 넓이를 균등하게 나누어 차지합니다.

Grid layout은 복잡한 인터페이스 디자인 및 반응형 웹 디자인에 매우 유용합니다.

6. Multi-column Layout

CSS Multi-column Layout은 텍스트나 리스트 항목 등의 콘텐츠를 여러 열로 나누는 데 사용되는 기술입니다.

Multi-column Layout의 주요 특징은 다음과 같습니다:

1. 열 분할: column-count 속성을 사용하여 내용을 원하는 수의 열로 분할할 수 있습니다.
2. 열 너비 제어: column-width 속성을 사용하여 각 열의 최적 너비를 설정할 수 있습니다.
3. 열 간격과 구분선 제어: column-gap 과 column-rule 속성으로 열 사이의 간격과 구분선 스타일, 너비, 색상을 제어할 수 있습니다.

Multi-column Layout 사용 예시는 다음과 같습니다:

<div style="column-count: 3; column-gap: 20px; column-rule: 1px solid black;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent libero. Sed cursus ante dapibus diam.</p>
    <p>Sed nisi nulla, ultrices non dolor quis, porttitor convallis lorem. Cras suscipit lacus vitae justo consequat mollis.</p>
</div>

위 예시에서 div에 column-count, column-gap, column-rule 속성을 부여하였습니다. 이렇게 하면 div 내부의 콘텐츠가 세 개의 열로 나뉘며, 각 열 사이에는 20px 간격이 생기고 검은색 선으로 구분됩니다.

단, Multi-column layout은 아직 모든 브라우저에서 완벽하게 지원되지 않으므로 실제 웹사이트에 적용하기 전에 꼭 호환성을 확인해야 합니다.

7. Table Layout

CSS Table Layout은 HTML 테이블의 레이아웃 방식을 따르는 CSS 레이아웃 모델입니다.

Table Layout의 주요 특징은 다음과 같습니다:

1. 열 너비 자동 조절: 각 열의 너비는 그 열에 있는 셀의 내용에 따라 자동으로 조절됩니다.
2. 행과 열로 구성된 레이아웃: 테이블 레이아웃을 사용하면 웹 페이지를 행과 열로 쉽게 구성할 수 있습니다.
3. 수직 정렬: 테이블 셀 내에서 수직 정렬을 손쉽게 할 수 있습니다.

Table Layout 사용 예시는 다음과 같습니다:

<div style="display: table; width: 100%;">
    <div style="display: table-row;">
        <div style="display: table-cell; border: 1px solid black;">Cell 1</div>
        <div style="display: table-cell; border: 1px solid black;">Cell 2</div>
    </div>
    <div style="display: table-row;">
        <div style="display: table-cell; border: 1px solid black;">Cell 3</div>
        <div style="display: table-cell; border: 1px solid black;">Cell 4</div>
    </div>
</div>

위 예시에서 가장 바깥쪽 div에 display:table 속성을 부여하여 이를 하나의 ‘테이블’로 만들었습니다. 그 안에 display:table-row 속성을 가진 div들은 각각 하나의 ‘행’으로 동작하며, 이 ‘행’ 안에 있는 display :table-cell 속성을 가진 div들은 각각 하나의 ‘셀’로 동작합니다.

그러나 현대 웹 디자인에서는 일반적으로 Flexbox와 Grid와 같은 더 유연하고 강력한 CSS 레이아웃 기술들을 선호합니다. Table layout은 주로 실제 데이터 표현(예 : 데이터 격자, 스프레드시트 등)에 사용되며, 일반적인 페이지 레이아웃 구조를 위해 사용하는 것은 권장되지 않습니다.

8. Box Model

CSS Box Model은 웹페이지의 모든 요소를 사각형 박스로 간주하는 레이아웃 개념입니다. 이 박스는 padding, border, margin 그리고 내부의 실제 콘텐츠로 구성되며, 이들 각 부분의 크기와 위치를 조정하여 웹페이지의 레이아웃을 구성합니다.

Box Model의 주요 특징은 다음과 같습니다:

1. 콘텐츠: 이 부분은 실제 보여지는 텍스트나 이미지 등을 포함합니다.
2. 패딩(padding): 패딩은 콘텐츠와 테두리(border) 사이에 있는 공간입니다.
3. 테두리(border): 테두리는 콘텐츠와 패딩을 둘러싸며, 필요에 따라 스타일링할 수 있습니다.
4. 마진(margin): 마진은 box 와 box 사이에 있는 공간으로서, 주변 요소와의 거리를 만듭니다.

Box Model 사용 예시는 다음과 같습니다:

<div style="width: 200px; padding: 10px; border: 2px solid black; margin: 20px;">
    Hello, World!
</div>

위 예시에서 div 요소는 width, padding, border, margin 속성을 가지고 있습니다. 여기서 width는 콘텐츠 영역의 넓이를 지정하고, padding은 콘텐츠와 테두리 사이의 간격을 지정하며, border는 테두리 선의 굵기(그리고 스타일과 색상)를 지정하고 마지막으로 margin은 div box 와 주변 요소 사이의 간격을 지정합니다.

CSS Box Model 은 웹 페이지 내에서 개별적인 요소들에 대한 위치 설정과 크기 조절에 필수적인 기본 개념입니다.

CSS의 박스 모델에 대해서는 아래 링크에 보다 상세한 설명이 있습니다, 참고 바랍니다.

CSS의 컨테이너(Container)

CSS에서 컨테이너(container)는 일반적으로 다른 요소들을 포함하고 그룹화하는 역할을 하는 요소를 말합니다. 이는 HTML의 <div>, <section>, <article> 등의 태그로 생성될 수 있으며, CSS 스타일링을 통해 레이아웃과 디자인을 제어합니다.

컨테이너는 주로 다음과 같은 목적으로 사용됩니다:

1. 레이아웃 구성: 웹 페이지의 구조를 정의하고, 페이지 내부의 영역들을 분리합니다.
2. 스타일 그룹화: 특정 스타일 규칙을 여러 요소에 적용하기 위해 그룹화하는 역할을 합니다.
3. Flexbox와 Grid 레이아웃 사용: Flexbox나 Grid와 같은 CSS 레이아웃 시스템에서 컨테이너는 flex container나 grid container로서 동작하여, 자식 요소들(flex items, grid items)의 배치와 정렬을 제어합니다.

예를 들어, 아래 코드에서 div는 컨테이너 역할을 하며 내부에 있는 p 태그들에 대한 배치와 스타일링을 담당합니다:

<div style="display: flex; justify-content: space-between;">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</div>

위 예제에서 div 컨테이너는 display: flex; 속성으로 인해 flex container가 되고, 내부에 있는 각각의 p 태그(즉, flex items)를 수평 방향으로 나열하며 사이에 공간(justify-content: space-between) 을 만듭니다.

컨테이너 사용 예시

CSS 컨테이너는 웹 페이지의 레이아웃을 제어하고, 스타일링을 그룹화하는데 주로 사용됩니다.

1. 레이아웃 제어

: 컨테이너를 사용하면 웹 페이지의 구조를 정의하고, 요소들을 그룹화하여 배치할 수 있습니다. 예를 들어, 헤더, 메인 콘텐츠, 사이드바, 푸터 등 웹 페이지의 주요 영역들은 각각 별도의 컨테이너로 구성되며 이들 컨테이너는 전체 레이아웃을 형성합니다.

<div id="header">...</div>
<div id="main-content">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>

2. Flexbox와 Grid 레이아웃

: Flexbox나 Grid 레이아웃 시스템에서는 컨테이너가 중요한 역할을 합니다. 이 경우에는 컨테이너가 flex container나 grid container 역할을 하여 자식 요소들(flex items 혹은 grid items)의 배치와 정렬을 제어합니다.

<!-- Flexbox 예시 -->
<div style="display: flex; justify-content: space-between;">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<!-- Grid 예시 -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

3. 스타일 그룹화

: 특정 스타일 규칙을 여러 요소에 일괄적으로 적용하기 위해 컨테이너다른 것으로 그룹화하는 경우도 있습니다.

<div style="background-color: lightblue; padding: 10px;">
    <p>This paragraph inherits the background color and padding from the parent container.</p>
    <p>This one too!</p>
</div>`

위 예시에서 background-color와 padding 속성은 부모 div(컨테이너다른 것)로부터 모든 자식 p 태그에게 상속됩니다.

컨테이너에 대한 추가 설명

컨테이너는 다른 물건을 담을 수 있는 그릇의 의미를 가지고 있습니다. css 에서는 다른 구성요소를 포함 할 수 있는 박스영역으로 이해할 수 있습니다.

예를 들어 앞의 1컬럼 예시에서 중앙의 메인 콘텐츠 영역이 상품정보를 보여주기 위해 동일한 크기의 박스 10개로 구성되어야 한다고 할 때 콘텐츠 영역을 10개 박스로 배치하는것 보다는 하나의 박스를 만들고 그안에 10개를 넣어 구성하는 것이 좋습니다. 이처럼 다른 박스를 담을 수 있는 박스를 컨테이너 라고 합니다.

실제 구현상에는 <div> 속에 다른 <div> 가 들어가는 형태로 이해할 수 있습니다.

<div class="container">
  <div class="header">
  </div>
    <div class="contents">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
  <div class="footer">
  </div>
</div>

• container : class는 header, contents, footer 를 가지는 컨테이너 입니다.
• contents : class는 box 클래스 요소를 가지는 컨테이너 입니다.

---