이 게시물에서는 복잡한 작업을 처리하고 강력하고 현대적인 레이아웃을 빌드하는 데 도움이 되는 몇 가지 강력한 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개 항목으로 구성된 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;
}
이제 화면 크기를 늘리거나 줄일 때 이러한 Flex 항목이 줄어들고 늘어납니다.
03. 사이드바에 표시되는 내용: grid-template-columns: minmax(<min>, <max>) …)
이 데모는 그리드 레이아웃의 minmax 함수를 활용합니다. 여기서 하는 작업은 최소 사이드바 크기를 150px로 설정하지만 더 큰 화면에서는 25%까지 확장되도록 하는 것입니다. 사이드바는 25%가 150px보다 작아질 때까지 항상 상위 요소 가로 공간의 25%를 차지합니다.
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
Destructed Pancake와 달리 이 예에서는 화면 크기가 변경될 때 하위 요소를 래핑하지 않습니다. 흔히 고정 푸터라고 하는 이 레이아웃은 웹사이트와 앱, 모바일 애플리케이션 (일반적으로 툴바임)과 웹사이트 (단일 페이지 애플리케이션에서 이 전역 레이아웃을 사용하는 경우가 많음)에서 자주 사용됩니다.
구성요소에 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과 관련하여 제가 여러 번 경험했던 많은 개발자 문제를 해결하므로 알아두면 좋습니다.
결론
10가지의 강력한 CSS 라인을 따라해 주셔서 감사합니다. 자세히 알아보려면 전체 동영상을 시청하고 데모를 직접 사용해 보세요.