이 게시물에서는 어려운 작업을 처리하고 강력한 최신 레이아웃을 빌드하는 데 도움이 되는 몇 가지 강력한 CSS 라인을 집중적으로 살펴봅니다.
최신 CSS 레이아웃에서는 개발자가 몇 번의 키 입력으로 의미 있고 강력한 스타일 지정 규칙을 작성할 수 있습니다. 앞서 살펴본 내용과 이 게시물에서는 어려운 작업을 수행하는 10가지 강력한 CSS 라인에 대해 살펴봅니다.
데모를 따라 하거나 직접 플레이하려면 위의 Glitch 삽입을 확인하거나 1linelayouts.glitch.me를 방문하세요.
01. 슈퍼 센터: place-items: center
첫 번째 '단일 줄' 이제 CSS에 관한 가장 큰 수수께끼인 중심 배치를 해결해 보겠습니다. place-items: center를 사용하면 생각보다 훨씬 쉬울 것입니다.
먼저 grid를 display 메서드로 지정한 후 동일한 요소에 place-items: center을 작성합니다. place-items는 align-items와 justify-items를 한 번에 모두 설정하는 약식 표현입니다. center로 설정하면 align-items와 justify-items가 모두 center로 설정됩니다.
.parent {
display: grid;
place-items: center;
}
이렇게 하면 본질적인 크기에 관계없이 콘텐츠가 상위 요소 내에서 완벽하게 중앙에 위치할 수 있습니다.
02. 디스트럭처드 팬케이크: flex: <grow> <shrink> <baseWidth>
다음으로 해체된 팬케이크를 준비했습니다. 이 레이아웃은 마케팅 사이트에서 일반적으로 이미지, 제품명, 제품의 특징을 설명하는 텍스트가 포함된 3개의 항목으로 구성된 행을 포함하는 마케팅 사이트에서 일반적으로 사용하는 레이아웃입니다. 모바일에서는 이러한 요소가 잘 쌓이고 화면 크기가 커짐에 따라 확장되어야 합니다.
이 효과에 Flexbox를 사용하면 화면 크기를 조절할 때 미디어 쿼리를 통해 이러한 요소의 위치를 조정할 필요가 없습니다.
flex 약어는 flex: <flex-grow> <flex-shrink> <flex-basis>의 약자입니다.
따라서 상자를 <flex-basis> 크기로 채우고 더 작은 크기로 축소하되 추가 공간을 채우도록 확장하지 않으려면 다음과 같이 작성합니다. flex: 0 1 <flex-basis> 이 경우 <flex-basis>은 150px이므로 다음과 같이 표시됩니다.
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
상자가 다음 줄로 래핑될 때 상자를 늘리고 공간을 채우도록 하려면 <flex-grow>를 1로 설정하여 다음과 같이 합니다.
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
이제 화면 크기를 늘리거나 줄임에 따라 이러한 플렉스 항목은 줄어들고 커집니다.
03. 사이드바 내용: grid-template-columns: minmax(<min>, <max>) …)
이 데모에서는 그리드 레이아웃에 minmax 함수를 사용합니다. 여기서 하는 작업은 최소 사이드바 크기를 150px로 설정하는 것입니다. 하지만 큰 화면에서는 이를 25%로 늘일 수 있습니다. 사이드바는 25%가 150px보다 작아질 때까지 항상 상위 요소의 가로 공간에서 25%를 차지합니다.
이 값을 다음 값을 갖는Grid-template-columns의 값으로 추가합니다.
minmax(150px, 25%) 1fr 첫 번째 열 (이 경우 사이드바)의 항목은 25%에서 150px의 minmax를 가져오고 두 번째 항목 (여기서 main 섹션)은 공간의 나머지 부분을 단일 1fr 트랙으로 차지합니다.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. 팬케이크 스택: grid-template-rows: auto 1fr auto
디스트럭처드 팬케이크와 달리 이 예에서는 화면 크기가 변경될 때 하위 요소를 래핑하지 않습니다. 고정 바닥글이라고 부르는 이 레이아웃은 웹사이트와 앱, 모바일 애플리케이션 (일반적으로 툴바) 및 웹사이트 (단일 페이지 애플리케이션에서는 이 전역 레이아웃을 사용하는 경우가 많음)에서 사용됩니다.
구성요소에 display: grid를 추가하면 단일 열 그리드가 제공되지만 기본 영역의 높이는 그 아래에 바닥글이 있는 콘텐츠의 높이에 불과합니다.
바닥글이 하단에 고정되도록 하려면 다음을 추가합니다.
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
이렇게 하면 하위 요소의 크기를 자동으로 가져오도록 머리글과 바닥글 콘텐츠가 자동으로 설정되고 남은 공간 (1fr)이 기본 영역에 적용됩니다. 반면 auto 크기의 행은 하위 요소의 최소 콘텐츠 크기를 사용하므로 콘텐츠의 크기가 커질수록 행 자체가 조정됩니다.
1일 고전적인 성배 레이아웃: grid-template: auto 1fr auto / auto 1fr auto
이 클래식한 성배 레이아웃에는 머리글, 바닥글, 왼쪽 사이드바, 오른쪽 사이드바, 기본 콘텐츠가 있습니다. 이전 레이아웃과 비슷하지만 이제 사이드바가 있습니다.
한 줄의 코드를 사용하여 전체 그리드를 작성하려면 grid-template 속성을 사용합니다. 이렇게 하면 행과 열을 동시에 설정할 수 있습니다.
속성 및 값 쌍은 grid-template: auto 1fr auto / auto 1fr auto입니다. 공백으로 구분된 첫 번째 목록과 두 번째 목록 사이의 슬래시는 행과 열 사이의 나누기입니다.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
마지막 예에서 머리글과 바닥글에 콘텐츠 크기가 자동 조절된 경우 왼쪽과 오른쪽 사이드바의 크기가 하위 요소의 고유한 크기에 따라 자동으로 조정됩니다. 그러나 이번에는 세로 (높이)가 아닌 가로 크기 (너비)입니다.
2006. 12 스팬 그리드: grid-template-columns: repeat(12, 1fr)
다음으로 또 다른 클래식한 12 스팬 그리드를 살펴보겠습니다. repeat() 함수를 사용하여 CSS에서 그리드를 빠르게 작성할 수 있습니다. 그리드 템플릿 열에 repeat(12, 1fr);를 사용하면 1fr 각각에 12개의 열이 생깁니다.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
이제 12개의 열 트랙 그리드가 만들어졌으므로 그리드에 하위 요소를 배치할 수 있습니다. 이렇게 하는 한 가지 방법은 그리드 선을 사용하여 배치하는 것입니다. 예를 들어 grid-column: 1 / 13는 첫 번째 줄부터 마지막 줄 (13번째)까지 걸쳐 있으며 12개 열에 걸쳐 있습니다. grid-column: 1 / 5;는 처음 4개에 걸쳐 있습니다.
이를 작성하는 또 다른 방법은 span 키워드를 사용하는 것입니다. span를 사용하면 시작 행을 설정한 다음 이 시작점부터 확장할 열 수를 설정합니다. 이 경우 grid-column: 1 / span 12는 grid-column: 1 / 13와 같고 grid-column: 2 / span 6는 grid-column: 2 / 8와 같습니다.
.child-span-12 {
grid-column: 1 / span 12;
}
2007. RAM (반복, 자동, 최소 최대): grid-template-columns(auto-fit, minmax(<base>, 1fr))
일곱 번째 예에서는 이미 배운 몇 가지 개념을 결합하여 자동으로 배치되고 유연한 하위 요소가 포함된 반응형 레이아웃을 만듭니다. 꽤 깔끔하네요. 여기서 기억해야 할 핵심 용어는 repeat, auto-(fit|fill), minmax()'이며 약어 RAM으로 기억합니다.
모두 합쳐지면 다음과 같은 형태가 됩니다.
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
반복을 다시 사용하지만 이번에는 명시적인 숫자 값 대신 auto-fit 키워드를 사용합니다. 이렇게 하면 이러한 하위 요소가 자동으로 배치될 수 있습니다. 이러한 하위 요소도 기본 최솟값은 150px이고 최댓값은 1fr입니다. 즉, 작은 화면에서는 전체 1fr 너비를 차지하며 너비가 각각 150px에 도달하면 같은 선으로 흐르기 시작합니다.
auto-fit를 사용하면 가로 크기가 150픽셀을 초과하여 남은 전체 공간을 채우므로 상자가 늘어납니다. 그러나 이를 auto-fill로 변경하면 minmax 함수에서 기본 크기를 초과할 때 확장되지 않습니다.
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
2008. 라인업: justify-content: space-between
여기서 보여주어야 할 다음 레이아웃의 주요 지점은 justify-content: space-between로, 첫 번째와 마지막 하위 요소를 경계 상자 가장자리에 배치하고 나머지 공간은 요소 사이에 균일하게 분산합니다. 이러한 카드는 Flexbox 표시 모드에 배치되며 방향은 flex-direction: column를 사용하여 열로 설정됩니다.
이렇게 하면 제목, 설명, 이미지 블록이 상위 카드 내부의 세로 열에 배치됩니다. 그런 다음 justify-content: space-between를 적용하면 첫 번째 (제목)와 마지막 (이미지 블록) 요소를 Flexbox의 가장자리에 고정하고 그 사이의 설명 텍스트는 각 끝점에 동일한 간격으로 배치됩니다.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
2009. 고정 스타일: clamp(<min>, <actual>, <max>)
여기서는 브라우저 지원이 적으면서 몇 가지 기법을 다루겠지만 레이아웃과 반응형 UI 디자인에 정말 흥미로운 의미가 있습니다. 이 데모에서는 클램프를 사용하여 너비를 다음과 같이 설정합니다. width: clamp(<min>, <actual>, <max>)
이는 절대 최소 및 최대 크기와 실제 크기를 설정합니다. 값을 사용하면 다음과 같이 표시될 수 있습니다.
.parent {
width: clamp(23ch, 60%, 46ch);
}
최소 크기는 23ch 또는 23자(영문 기준)이며 최대 크기는 46ch(영문 기준) 46자(영문 기준)입니다. 문자 너비 단위는 요소의 글꼴 크기 (특히 0 글리프의 너비)를 기준으로 합니다. '실제' 크기는 50%로, 이 요소의 상위 너비 중 50% 를 나타냅니다.
여기서 clamp() 함수가 하는 작업은 이 요소가 50% 가 46ch보다 크거나 (더 넓은 표시 영역의 경우) 23ch보다 작을 때 (작은 표시 영역에서는) 50% 너비를 유지하도록 하는 것입니다. 상위 요소 크기를 늘리거나 줄이면 이 카드의 너비가 고정된 최댓값까지 증가하고 고정된 최솟값으로 감소하는 것을 확인할 수 있습니다. 그러면 추가 속성을 적용하여 해당 요소를 중심에 맞추므로 상위 요소의 중앙에 계속 표시됩니다. 이렇게 하면 텍스트가 너무 넓거나 (46ch 초과) 너무 찌그러지거나 좁지 않으므로 (23ch 미만) 레이아웃을 더 쉽게 읽을 수 있습니다.
이는 반응형 서체를 구현하는 좋은 방법이기도 합니다. 예를 들어 다음과 같이 작성할 수 있습니다. font-size: clamp(1.5rem, 20vw, 3rem) 이 경우 광고 제목의 글꼴 크기는 항상 1.5rem과 3rem로 고정된 상태로 유지되지만 표시 영역의 너비에 맞도록 20vw 실제 값에 따라 커지거나 줄어듭니다.
이는 최소 및 최대 크기 값으로 가독성을 보장하는 데 유용한 기술이지만, 모든 최신 브라우저에서 지원되지는 않으므로 대체가 있는지 확인하고 테스트를 실행해야 합니다.
10. 관점 준수: aspect-ratio: <width> / <height>
마지막으로, 이 마지막 레이아웃 도구는 여러 가지 도구 중 가장 실험적인 도구입니다. 최근 Chromium 84에서 Chrome Canary에 도입되었으며, 이를 구현하기 위해 Firefox에서 적극적인 노력을 기울이고 있지만 현재 안정적인 브라우저 버전에서는 지원되지 않습니다.
하지만 이 문제는 자주 발생하는 문제이기 때문에 언급하고 싶습니다. 단지 이미지의 가로세로 비율을 유지하는 것입니다.
aspect-ratio 속성을 사용하면 카드 크기를 조절할 때 녹색의 시각적 블록이 이 16x9 가로세로 비율을 유지합니다. aspect-ratio: 16 / 9의 가로세로 비율을 준수합니다.
.video {
aspect-ratio: 16 / 9;
}
이 속성 없이 16x9 가로세로 비율을 유지하려면 padding-top 해킹을 사용하여 56.25% 패딩을 제공하여 상단 대 너비 비율을 설정해야 합니다. 곧 해킹을 방지하고 비율을 계산해야 하는 상황을 방지하기 위해 속성을 사용할 수 있게 됩니다. 1 / 1 비율로 정사각형을 만들고 2 / 1로 2:1 비율을 만들 수 있으며 설정된 크기 비율로 이미지를 조정하는 데 필요한 것은 무엇이든 가능합니다.
.square {
aspect-ratio: 1 / 1;
}
이 기능은 아직 최신 기능이긴 하지만, 특히 동영상 및 iframe과 관련하여 제가 여러 번 겪는 많은 개발자 갈등을 해결하므로 알아두면 좋은 기능입니다.
결론
효과적인 CSS 10가지를 살펴보며 이 여정을 함께해 주셔서 감사합니다. 자세히 알아보려면 전체 동영상을 시청하고 데모를 직접 사용해 보세요.