이 게시물에서는 상당한 작업을 수행하고 강력한 최신 레이아웃을 빌드하는 데 도움이 되는 몇 가지 강력한 CSS 라인을 강조 표시합니다.
최신 CSS 레이아웃을 사용하면 개발자가 몇 번의 키 입력만으로 의미 있고 강력한 스타일 지정 규칙을 작성할 수 있습니다. 위의 강연과 이 후속 게시물에서는 상당한 작업을 수행하는 강력한 CSS 10줄을 살펴봅니다.
이 데모를 따라 하거나 직접 사용해 보려면 위의 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;
}
이제 화면 크기를 늘리거나 줄이면 이러한 flex 항목이 모두 축소 및 확장됩니다.
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일 기존의 Holy Grail 레이아웃: 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;
}
이전 예에서 헤더와 바닥글의 콘텐츠 크기가 자동으로 조절되었듯이 여기서는 왼쪽과 오른쪽 사이드바의 크기가 하위 요소의 고유한 크기를 기반으로 자동으로 조절됩니다. 하지만 이번에는 세로 (높이)가 아닌 가로 (너비) 크기입니다.
06. 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;
}
07. RAM (반복, 자동, MinMax): 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));
}
repeat을 다시 사용하지만 이번에는 명시적인 숫자 값 대신 auto-fit 키워드를 사용합니다. 이렇게 하면 이러한 하위 요소를 자동으로 배치할 수 있습니다. 이러한 하위 요소의 기본 최솟값은 150px이고 최대값은 1fr입니다. 즉, 작은 화면에서는 전체 1fr 너비를 차지하고 각 너비가 150px에 도달하면 동일한 줄에 흐르기 시작합니다.
auto-fit를 사용하면 상자의 가로 크기가 150px를 초과하면 상자가 확장되어 남은 공간 전체를 채웁니다. 하지만 이를 auto-fill로 변경하면 minmax 함수의 기본 크기가 초과되더라도 늘어나지 않습니다.
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. 선호도: justify-content: space-between
다음 레이아웃에서 여기서 설명할 주요 사항은 justify-content: space-between입니다. justify-content: space-between는 첫 번째 및 마지막 하위 요소를 경계 상자의 가장자리에 배치하고 나머지 공간을 요소 간에 균등하게 분산합니다. 이러한 카드는 Flexbox 디스플레이 모드에 배치되며 flex-direction: column를 사용하여 방향이 열로 설정됩니다.
이렇게 하면 제목, 설명, 이미지 블록이 상위 카드 내의 세로 열에 배치됩니다. 그런 다음 justify-content: space-between를 적용하면 첫 번째 (제목) 요소와 마지막 (이미지 블록) 요소가 플렉스박스의 가장자리에 고정되고 그 사이의 설명 텍스트가 각 엔드포인트와 동일한 간격을 두고 배치됩니다.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style: 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)를 작성할 수 있습니다. 이 경우 제목의 font-size는 항상 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줄을 통해 이 여정을 함께해 주셔서 감사합니다. 자세한 내용은 전체 동영상을 시청하고 데모를 직접 사용해 보세요.