수량 특정 CSS 스타일 및 레이아웃 생성

Sep 16, 2025

어떻게

이 튜토리얼에서는 요소의 수에 따라 CSS 스타일의 요소를 변화시키는 방법을 바꾸는 방법을 살펴 보겠습니다. 또한 수량을 기반으로 요소의 레이아웃을 변경하는 방법을 볼 것입니다. 웹 사이트 레이아웃 그것은 공간을 더 잘 사용합니다.

CSS는 귀하의 웹 레이아웃에 혁명을 일으킬 수 있습니다

마지막으로 CSS 카운터의 사용을 다루기 위해 요소의 인덱스를 내부에 표시하고 부모 안의 총 수를 표시하는 것입니다. 이 모든 것은 JavaScript 또는 프레임 워크가 필요없이 순수한 CSS에서만 달성되므로 간단하고 효율적인 코드로 이어집니다.

끝없는 코드가 필요없이 사이트를 구축하려면 다음을 수행해야합니다. 웹 사이트 빌더 ...에 그리고 귀하의 사이트의 기능이 무엇이든, 웹 호스팅 서비스는 목적을 위해 적합합니다. 뭔가 다른 것을 위해, 당신을 얻으십시오 클라우드 스토리지 긁힌 자국.

단일 요소 선택기

CSS3에는 요소의 수량, 즉 : 자식 및 유형의 유형 선택기의 수량을 결정할 수있는 한 쌍의 선택기 만 있습니다. 이것이 말했듯이 요소가 자체적이거나 형제 자매가 있는지 여부를 정말로 결정할 수 있습니다. 다음 : 자식 선택기는 부모의 유일한 자식 인 요소와 일치하는 것만뿐입니다. 유형의 유형은 해당 유형의 유일한 요소입니다.

불행히도, 그것은 단일 선택기가가는 한 멀리 있지만 유사한 요소 집합에서 주문을 기반으로 요소를 타겟팅 할 수있는 몇 가지 다른 선택기가 있습니다. 이들은 다음과 같습니다 : n 번째 - 아동, : n 번째 유형, n 번째 유형의 n 번째 유형, 일반적으로 유사한 요소 집합에서 명령을 기반으로 요소를 타겟팅하는 데 사용되는 n 번째 마지막 -T 형입니다. 다음 : n 번째 마지막 자식 및 n 번째 마지막 유형 선택자는 마지막 요소에서 첫 번째 요소로 거꾸로 계산되는 요소의 순서를 결정하는 데 사용됩니다. 이들을 다른 선택기와 결합하면 수량을 기반으로 특정 요소를 대상으로하는보다 복잡한 체인을 구축 할 수 있습니다.

수량 별 선택기 체인

selector chains — 선택기 : 최초의 유형 : N 번째 마지막 유형 (3)과 일반 형제 조합기 ~ 3 개 중 첫 번째 및 모든 형제 자매를 목표로 결합하여 세 가지 세트에서 모두

앞에서 앞에있는 네 가지 선택기 중 우리 가이 튜토리얼에서 우리가 사용할 메인은 n 번째 마지막 유형입니다. 이 (듯이)과 N 번째 마지막 자녀 선택기의 차이점은 후자가 세트의 모든 요소의 형제를 포함하는 반면 전자는 동일한 HTML 유형의 요소 만 포함되므로 더 선택적입니다. 이 튜토리얼의 나머지 부분은 -of 유형 선택기를 사용하지만 -child 변형은 똑같이 유효합니다.

n 번째 마지막 유형은 인기있는 최초의 선택기와 함께 사용할 수 있으므로 원하는 수량의 세트에서 첫 번째 요소를 대상으로하는 체인을 만듭니다. 예를 들어, 우리는 다음과 같은 유형의 유형 : n 번째 마지막 유형 (3)을 사용하여 첫 번째와 세 번째 유형이 아니면 유형의 끝에서 또는 즉, 다른 말로하면 3의 집합입니다. 그런 다음 우리는 이것을 일반 형제 조합기로 확장 할 수 있습니다 ~ 3 세트의 첫 번째 세트를 따르는 모든 형제 자매를 선택합니다. 이 두 선택자 체인을 결합하여 3 개의 세 번째 요소 인 요소를 타겟팅하는 복잡한 선택기를 만들 수 있으므로 다음 유형의 모든 요소를 선택하여 세 세트의 모든 요소를 선택합니다.

 .Box : 첫 번째 유형 : n 번째 유형 (3),
.Box : 첫 번째 유형 : n 번째 유형 (3) ~ .Box

이 선택기 체인은 특정 수의 요소에 대해 작동 할뿐만 아니라 수량을 목표로 변경하도록 수정 될 수도 있습니다.

selector chain — 셀렉터는 nth-last-of-type (n + 2) 및 : n 번째 마지막 유형 (-n + 2)을 각각 두 개 이상이고 작은 세트의 요소를 타겟팅하는 데 사용할 수 있습니다.

우리가 특정 값 m보다 많거나 적은 양으로 세트의 요소를 타겟팅하려는 경우, 우리는 각각 (n + m) 및 (-n + m) 기술을 사용하여 체인을 사용할 수 있습니다. 예를 들어, 우리가 사용할 수있는 두 개 이상의 요소 집합의 모든 요소를 대상으로하려면 다음을 수행하십시오.

 .Box : 첫 번째 유형 : n 번째 유형 (n + 2),
.BOX : 첫 번째 유형 : n 번째 유형 (n + 2) ~ .BOX

마찬가지로, 우리는 다음을 사용하여 두 개 또는 적은 요소 집합의 모든 요소를 대상으로 할 수 있습니다.

.Box : 첫 번째 유형 : n 번째 유형 (-n + 2),
.Box : 첫 번째 유형 : n 번째 유형 (-n + 2) ~ .Box

볼 수 있으므로이 기능은 JavaScript 또는 다른 프레임 워크가 필요없이 매우 흥미롭고 유용한 것을 얻을 수있는 강력한 선택기 체인입니다. 요소 수에 따라 변경되는 적응 형 레이아웃을 만드는 경우 특히 유용합니다.

동적, 수량 특정 레이아웃

grid layouts with odd and even numbers — 짝수의 짝수의 숫자 그리드 레이아웃은 멋지지만 홀수의 경우는별로 없습니다.

2 열, 그리드 레이아웃에서 검색 또는 API 호출의 결과를 보여주는 상자 그룹을 표시하려고합니다. 문제는 결과가 외부 소스에서 나온 결과가 있으며 반환 될 결과의 수를 알 수 없으므로 우리는 몇 개의 상자가 생성 될 수 있는지 모릅니다. 그리드는 짝수 짝수에 겨울 수있는 상자에 멋지게 보이지만, 홀수에 적용될 때 마지막 상자는 단독으로 한 행에 앉아 있습니다 ... 잘, 홀수의 종류.

이는 마지막 요소가 행의 빈 공간으로 자라게되도록 FlexBox 항목을 사용하여 FlexBox 항목을 사용할 때 특히 문제가됩니다. 이것을 방지하는 한 가지 방법은 홀수 수의 상자를 첫 번째 상자에 100 %의 폭을 적용하여 완전한 행을 사용하여 전체 행을 사용하여 다음을 사용하여 다음을 사용합니다. nth-last-of-type (홀수). 이것은 처음이며, 따라서 가장 관련성이 높고 최근의 결과가 마지막 것보다 중요성을 부여하기 때문에 더 나은 레이아웃을 제공합니다.

수량이 33 %의 폭을 적용하여 그리드를 3 컬럼 레이아웃으로 변환하여 수량을 3으로 나눌 수있는 특별한 케이스를 추가 할 수 있습니다. 3 개의 세트가있는 세트에있는 상자와이를 따르는 모든 상자.

 .BOX {
  너비 : 50 %;
}

.BOX : 첫 번째 자식 : n 번째 - 마지막 유형 (홀수) {
  너비 : 100 %;
}

.Box : 첫 번째 자식 : nth-last-of-type (3N),
.Box : 첫 번째 자식 : n 번째 - 마지막 유형 (3N) ~ .Box {
  너비 : 33 %;
}

결론

different layouts — 레이아웃은 CSS 선택기 체인을 사용하여 요소 수에 따라 변경 될 수 있습니다.

우리가 보았 듯이, CSS 선택기는 요소의 양을 기준으로 변경되는 스타일과 적응 형 레이아웃을 적용하기 위해 다양한 흥미로운 방법으로 함께 연결될 수 있습니다. 선택기 체인은 부모의 전체 크기를 차지할 수있는 Pseudo-election을 사용하여 특정 수량의 요소 집합의 부모에게 스타일을 적용하는 데 사용될 수 있습니다. CSS 카운터와 결합 된이 의사 요소는 상위 요소의 총 자손의 총수와 자손의 양에 따라 변경되는 텍스트를 표시하는 데 사용할 수 있습니다.

이러한 기술은 알 수없는 요소 수를 처리 할 때 유용한 유용한 동적, 수량 기반 스타일 및 레이아웃을 만드는 데 유용한 방법을 제공합니다.

이 기사는 원래 308 호에 발표되었습니다 그물 웹 디자이너 및 개발자를위한 세계 최고의 잡지. 여기 문제를 구입하십시오 또는 여기를 구독하십시오 ...에

관련 기사:

슈퍼 패스트 CSS를위한 5 가지 팁
CSS 눈금으로 응답 성 레이아웃을 만듭니다
CSS 디스플레이 속성 이해

수량 특정 CSS 스타일 및 레이아웃 생성

단일 요소 선택기

수량 별 선택기 체인

동적, 수량 특정 레이아웃

결론

어떻게 - 가장 인기있는 기사

CSS가있는 SVG 필터 추가

ARTRAGE 5가있는 페인트 표현 초상화 아트

VR 아트 레벨 업

3D Apps에서 스냅이 작동하는 방식

iPad의 친 화성 사진으로 그리는 방법

JavaScript로 CSS 클래스를 관리하는 방법

기초가있는 카드 기반 UI를 구축하십시오

프랙탈로 디자인 시스템을 문서화하십시오

카테고리