태양계와 마찬가지로 주기율표는 CSS에서 여러 번 수행되었습니다. 하지만 제가 보여드리려는 것처럼 간단하게 수행된 적은 없습니다.

몇 가지 기본적인 의미 체계 마크업부터 시작해 보겠습니다.

  

    H
  

우리는 순서가 지정된 목록,

을 사용합니다. 이는 요소의 순서가 지정된 시스템입니다.

그런 다음 각 요소에 대한

1. 태그와 태그가 있습니다.

   요소의 이름은 "abbreviation"이라는 단어의 약어인데 귀엽네요.
   — 헤이든 피커링.

   이제 각 원소의 원자 질량을 검색하는 대신 ChatGPT에 나머지 마크업을 작성하도록 요청하면 됩니다. 또한 각 요소에 요소가 어떤 유형인지 나타내는 3글자 클래스를 추가하도록 요청합니다. "희귀한 가스"(class="nbl") 등 — 그리고 우리는 118개의 요소를 얻습니다:
   

   
     
   
       H
     
     
   
       He
     
     
   
       Li
     
    
     
   
   

   아직 좋아 보이지는 않습니다. 이는 요소에 대한 약어가 포함된 번호가 매겨진 목록일 뿐입니다.
   

   1. H
   2. He
   3. Li
   etc.
   

   목록을 18x10 격자로 바꿔 보겠습니다.
   

   ol {
     all: unset;
     container-type: inline-size;
     counter-reset: element;
     display: grid; 
     font-size: 2cqi;
     gap: 1px;
     grid-template-columns: repeat(18, 1fr);
     grid-template-rows: repeat(10, 1fr);
   }
   

   이제 각

2. 를 정사각형 상자로 설정하고 왼쪽 상단에 원자 번호, 오른쪽 상단에 질량(data-mass), 아래에 태그를 배치하는 내부 그리드를 만듭니다. :
   

   li {
     aspect-ratio: 1 / 1;
     background: #EEEEEE;
     counter-increment: element;
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
     padding: .25ch;
     transition: scale .125s ease-in;
     &::before {
       content: counter(element);
     }
     &::after {
       content: attr(data-mass);
       grid-area: 1 / 2 / 2 / 2;
       justify-self: end;
     }
     &::before, &::after {
       font-size: .33em;
     }
   }
   

   우리가 성취한 것을 보기 전에 ChatGPT에 이전에 추가한 "요소 유형" 클래스에 몇 가지 색상을 추가하도록 요청해 보겠습니다. 이제 우리는 다음을 얻습니다:

   

   멋져 보이지만 학교에서 배운 주기율표와 똑같지는 않습니다. 그리드 마법을 추가해 보겠습니다.

   헬륨의 경우 마지막 열로 푸시되기를 원합니다. 그리드의 너비가 18열이라는 것을 알고 있으므로 간단히 다음을 추가합니다.
   

   li {
     &:nth-of-type(2) { grid-column: 18; }
   }
   

   이것은 순서가 지정된 목록이므로 n번째 유형 값은 항상 각 요소의 원자 번호에 해당합니다. Boron 및 알루미늄을 열 13:
   로 이동하려고 합니다.

   li {
     &:nth-of-type(5), &:nth-of-type(13) { grid-column: 13; }
   

   확인해 보겠습니다:

   

   확실히 개선되었지만 그리드 컬럼은 그리드를 앞으로 밀어내는 것이므로 어떻게 요소 58-71 및 90-103(라테니드 및 악티나이드)을 그리드 흐름에서 완전히 제거할 수 있습니까 메인 그리드 아래의 2개 행에 추가하시겠습니까?

   이를 위해 다음을 정의하는 그리드 영역을 사용할 수 있습니다.

   행 시작 / 열 시작 / 행 끝 / 열 끝

   이 경우에는 다음과 같습니다.
   

   li {
      /* Lanthenides */
     &:nth-of-type(58) { grid-area: 9 / 4 / 9/ 4; }
     &:nth-of-type(59) { grid-area: 9 / 5 / 9/ 5; }
     &:nth-of-type(60) { grid-area: 9 / 6 / 9/ 6; }
     /* etc. */
   
     /* Actinides */
     &:nth-of-type(90) { grid-area: 10 / 4 / 10 / 4; }
     &:nth-of-type(91) { grid-area: 10 / 5 / 10 / 5; }
     &:nth-of-type(92) { grid-area: 10 / 6 / 10 / 6; }
     / etc. */
   }
   

   그리고 이제 다음을 얻습니다(명확하게 하기 위해 개발자 도구' 그리드 시각화 도구를 활성화했습니다):

   

   흐름 밖으로 이동한 요소 뒤에 있는 그리드 요소가 어떻게 기본 흐름에서 계속되는지 확인하세요!

   필터링

   ---

   이제 이전에 ChatGPT에서 생성한 "원소 유형" 클래스를 사용하여 주기율표를

   필터

   하도록 하겠습니다. 먼저 몇 가지 기본 HTML을 추가해 보겠습니다.

   
   

   필터

   알칼리 금속

   Filter

   Alkali Metals

   필터링하려면 많은 JavaScript가 필요합니다. 그렇죠? 아니요, 일반 CSS로 이 작업을 수행할 수 있습니다.

   
   body:has(#alk:checked) li:not(.alk) { 불투명도: 0.2; }

   body:has(#alk:checked) li:not(.alk) { 
     opacity: 0.2;
   }
   

   없는

   모든

3. 요소에 적용됩니다. 알크 클래스. 모든 유형과 클래스에 대해 반복합니다.

   "metalloids"를 클릭해 봅시다:

   정말 멋지죠?

   이것으로 이 튜토리얼이 끝났습니다. 하지만 잠깐만요... Heisenberg 필터의 기능은 무엇입니까? ChatGPT 필터 목록에 없었나요?

   ---

   클릭해 보세요:

   …이제 내가 가장 좋아하는 TV 쇼를 알게 되셨군요!

   데모

   여기 Codepen이 있습니다. 완벽하게 반응하지만 더 큰 화면에서 보는 것이 좋습니다.