레이아웃

CSS 팟캐스트 - 009: 레이아웃 를 통해 개인정보처리방침을 정의할 수 있습니다.

개발자로 일하고 있다고 상상해 보세요. 디자이너 동료가 새 웹사이트 디자인을 건네줍니다. 디자인은 온갖 흥미로운 레이아웃과 구성을 가지고 있습니다. 표시 영역 너비와 높이를 고려한 2차원 레이아웃입니다. 유연하고 유연해야 하는 레이아웃도 지원합니다. CSS로 이러한 스타일을 지정하는 가장 좋은 방법은 어떻게 결정할까요?

CSS는 레이아웃 문제를 해결할 수 있는 다양한 방법을 제공합니다. 가로축, 세로축 또는 둘 다에 표시할 수 있습니다. 컨텍스트에 적합한 레이아웃 메서드를 선택하는 것은 어려울 수 있지만 문제를 해결하기 위해 둘 이상의 레이아웃 방법이 필요한 경우가 많습니다. 이를 돕기 위해 다음 모듈에서는 이러한 결정을 내리는 데 도움이 되는 각 CSS 레이아웃 메커니즘의 고유한 기능에 대해 알아봅니다.

레이아웃: 간략한 이력

웹 초창기에는 단순한 문서보다 더 복잡한 디자인은 <table> 요소로 배치되었습니다. 90년대 후반에 CSS가 브라우저에 널리 채택되었을 때 시각적 스타일에서 HTML을 더 쉽게 분리할 수 있었습니다. CSS는 개발자가 HTML을 손대지 않고도 웹사이트의 디자인과 분위기를 완전히 변경할 수 있는 가능성을 열었습니다. 이 새로운 기능은 The CSS Zen Garden, 는 더 많은 개발자가 CSS의 강력한 기능을 익히도록 장려하기 위해 만들어졌습니다.

웹 디자인 및 브라우저 기술에 대한 요구사항이 변화하면서 CSS도 발전했습니다. CSS 레이아웃과 레이아웃에 대한 Google의 접근 방식이 시간이 지남에 따라 어떻게 발전했는지 다음 페이지에서 확인할 수 있습니다. 이 기사에서 확인할 수 있습니다.

레이아웃: 현재와 미래

최신 CSS에는 놀라울 정도로 강력한 레이아웃 도구가 있습니다. 우리는 레이아웃을 위한 전용 시스템을 보유하고 있으며 우리가 사용할 수 있는 것을 대략적으로 살펴보고 확인하시기 바랍니다.

display 속성 이해

display 속성은 두 가지 작업을 실행합니다. 가장 먼저 할 일은 적용된 상자가 인라인으로 작동하는지, 아니면 차단으로 작동하는지 확인하는 것입니다.

.my-element {
  display: inline;
}

인라인 요소는 문장 내 단어처럼 동작합니다. 이 두 상자는 인라인 방향으로 나란히 놓여 있습니다. <span> 및 <strong>와 같은 요소 <p> (단락)과 같은 요소 내에서 일반적으로 텍스트에 스타일을 지정하는 데 사용됩니다. 기본적으로 인라인입니다. 또한 주변 공백도 보존합니다.

인라인 요소에는 명시적 너비와 높이를 설정할 수 없습니다. 블록 수준의 여백과 패딩은 주변 요소에 의해 무시됩니다.

.my-element {
    display: block;
}

블록 요소가 서로 나란히 배치되지 않습니다. 직접 새로운 라인을 만듭니다. 다른 CSS 코드에서 변경하지 않는 한 블록 요소는 인라인 크기의 크기로 확장되며 가로 쓰기 모드에서 전체 너비에 걸쳐 있습니다. 블록 요소의 모든 면에 있는 여백이 적용됩니다.

.my-element {
    display: flex;
}

display 속성은 요소의 하위 요소의 동작 방식도 결정합니다. 예를 들어 display 속성을 display: flex로 설정하면 상자가 블록 수준 상자로 바뀝니다. 하위 요소를 플렉스 항목으로 변환합니다. 이렇게 하면 정렬, 순서 및 흐름을 제어하는 가변형 속성을 사용할 수 있습니다.

Flexbox 및 그리드

여러 요소의 레이아웃 규칙을 만드는 두 가지 기본 레이아웃 메커니즘으로는 flexbox와 그리드가 있습니다. 두 유형은 유사점을 공유하지만, 서로 다른 레이아웃 문제를 해결하도록 설계되었습니다.

Flexbox

.my-element {
    display: flex;
}

Flexbox는 1차원 레이아웃을 위한 레이아웃 메커니즘입니다. 한 축에 가로 또는 세로로 배치합니다. 기본적으로 Flexbox는 요소의 하위 요소를 나란히 정렬합니다. 인라인 방향으로 블록 방향으로 늘이면 모두 동일한 높이가 됩니다.

항목은 같은 축에 있으며 공간이 부족해지면 래핑되지 않습니다. 대신 같은 선에 끼워 넣으려고 합니다. 이 동작은 align-items, justify-content, flex-wrap 속성을 사용하여 변경할 수 있습니다.

Flexbox는 하위 요소도 Flex 항목으로 변환합니다. 즉, 가변형 컨테이너 내에서 작동하는 방식에 대한 규칙을 작성할 수 있습니다. 개별 항목에서 정렬, 순서, 양쪽 맞춤을 변경할 수 있습니다. flex 속성을 사용하여 크기가 줄거나 커지는 방식을 변경할 수도 있습니다.

.my-element div {
    flex: 1 0 auto;
}

flex 속성은 flex-grow, flex-shrink, flex-basis의 약칭입니다. 위의 예를 다음과 같이 펼칠 수 있습니다.

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

개발자는 레이아웃이 어떻게 동작해야 하는지를 브라우저에 힌트를 주는 하위 수준 규칙을 제공합니다. 표시 영역 크기를 줄이면 안 됩니다. 이는 반응형 웹 디자인에 매우 유용한 메커니즘입니다.

그리드

.my-element {
    display: grid;
}

그리드는 여러 측면에서 flexbox와 유사합니다. 단일 축 레이아웃 (세로 또는 가로 공간) 대신 다중 축 레이아웃을 제어하도록 설계되었습니다.

그리드를 사용하면 display: grid이 있는 요소에 레이아웃 규칙을 작성할 수 있습니다. 레이아웃 스타일 지정을 위한 몇 가지 새로운 프리미티브를 소개합니다. (예: repeat(), minmax() 함수) 유용한 그리드 단위 중 하나는 남은 공간의 일부인 fr 단위입니다. 일반적인 12개 열 그리드를 빌드할 수 있습니다. 3개의 CSS 속성으로 각 항목 사이에 간격이 있습니다.

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

위의 이 예에서는 단일 축 레이아웃을 보여줍니다. Flexbox는 주로 항목을 그룹으로 취급하지만 그리드를 사용하면 2차원에서 위치를 정밀하게 제어할 수 있습니다. 이 그리드의 첫 번째 항목은 2개의 행과 3개의 열을 취한다고 정의할 수 있습니다.

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

grid-row 및 grid-column 속성은 그리드의 첫 번째 요소가 네 번째 열의 시작 부분까지 확장되도록 지시합니다. 이를 첫 번째 행부터 세 번째 행까지 확장합니다.

흐름 레이아웃

그리드 또는 Flexbox를 사용하지 않는 경우 요소가 일반적인 흐름으로 표시됩니다. 일반적인 흐름에서 항목의 동작과 위치를 조정하는 데 사용할 수 있는 다양한 레이아웃 메서드가 있습니다.

인라인 차단

주변 요소가 인라인 요소의 블록 여백 및 패딩을 어떻게 존중하지 않는지 기억하시나요? inline-block를 사용하면 이를 유도할 수 있습니다.

p span {
    display: inline-block;
}

inline-block를 사용하면 블록 수준 요소의 일부 특성이 있는 상자가 제공됩니다. 텍스트에 맞춰 흐르지 않습니다.

p span {
    margin-top: 0.5rem;
}

부동

이미지가 텍스트 단락 안에 있는 경우 이미지가 신문에서 보는 것처럼 이미지를 둘러싸면 편리할 수 있지 않을까요? 부동 소수점 수를 사용하면 됩니다.

img {
    float: left;
    margin-right: 1em;
}

float 속성은 요소에 '부동'하도록 지시합니다. 지정된 방향으로 이동합니다. 이 예의 이미지는 왼쪽으로 떠다니도록 지시되어 있습니다. 그러면 동위 요소가 '래핑'할 수 있습니다. 둘러싸고 있습니다. 요소에 left, right 또는 inherit를 플로팅하도록 지시할 수 있습니다.

다중 열 레이아웃

요소 목록이 너무 길면 전 세계 모든 국가의 목록, 사용자가 많은 스크롤과 시간을 낭비할 수 있습니다. 또한 페이지에 불필요한 공백이 생길 수도 있습니다. CSS 다중 열을 사용하면 이를 여러 열로 분할하면 이 두 가지 문제를 해결하는 데 도움이 됩니다.

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>

.countries {
    column-count: 2;
    column-gap: 1em;
}

이렇게 하면 긴 목록을 두 개의 열로 자동으로 분할하고 두 열 사이에 간격을 추가합니다.

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

콘텐츠가 분할되는 열의 수를 설정하는 대신 column-width를 사용하여 원하는 최소 너비를 정의할 수도 있습니다. 표시 영역에 더 많은 공간이 확보되면 더 많은 열이 자동으로 생성되고 공간이 줄어들면 열도 줄어듭니다 이는 반응형 웹 디자인 컨텍스트에서 매우 유용합니다.

포지셔닝

이 레이아웃 메커니즘 개요의 마지막에서 포지셔닝이 있습니다. position 속성은 요소가 문서의 정상적인 흐름에서 동작하는 방식을 변경합니다. 다른 요소와의 관계에 적용할 수 있습니다 사용 가능한 옵션은 relative, absolute, fixed, sticky이며 기본값은 static입니다.

.my-element {
  position: relative;
  top: 10px;
}

이 요소는 문서의 현재 위치를 기준으로 10픽셀 아래로 이동합니다. 자체에 상대적으로 배치되어 있기 때문입니다. 또한 요소에 position: relative를 추가하면 이 요소가 position: absolute가 있는 하위 요소의 포함 블록이 됩니다. 즉, 하위 요소가 이제 이 특정 요소로 재배치됩니다. 를 사용합니다.

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

position를 absolute로 설정하면 요소가 현재 문서 흐름에서 분리됩니다. 이는 다음 두 가지를 의미합니다.

1. 가장 가까운 상대 상위 요소에 top, right, bottom, left를 사용하여 원하는 위치에 이 요소를 배치할 수 있습니다.
2. 절대 요소를 둘러싼 모든 콘텐츠가 리플로우되어 해당 요소가 남긴 나머지 공간을 채웁니다.

position 값이 fixed인 요소는 absolute와 유사한 방식으로 동작합니다. 이 상위 요소는 루트 <html> 요소입니다. 고정된 위치 요소는 설정한 top, right, bottom, left 값에 따라 왼쪽 상단에서 고정된 상태로 유지됩니다.

앵커 광고, sticky를 사용하여 fixed의 고정된 측면과 relative의 더 예측 가능한 문서 흐름 준수 측면 이 값을 사용하면 표시 영역이 요소를 지나 스크롤될 때 설정한 top, right, bottom, left 값에 고정된 상태로 유지됩니다.

요약 정리

CSS 레이아웃에는 많은 옵션과 유연성이 있습니다. CSS Flexbox와 Grid의 기능에 대해 자세히 알아보려면 계속해서 다음 모듈을 진행하세요.

이해도 확인

레이아웃에 관한 지식 테스트