커스텀시트 만들기⑨:input[type="radio"]와 CSS

이번에 만들어 볼 것은 이런 것입니다. 수치가 그리 크지 않은(3~10 정도가 적당) 항목들을 게이지 바 형태로 체크해서, 시각적으로 한눈에 볼 수 있도록 강조할 때 사용하면 좋습니다.

See the Pen 9-1 by insane (@ztkzfeix) on CodePen.

먼저 원리를 설명하자면 이렇습니다. 투명한 input의 체크박스나 라디오박스를 만들어두고, 그것을 체크하면 CSS의 서식이 변화하도록 합니다. input:checked라는 가상 선택자를 사용하면 쉽게 구현할 수 있습니다.

See the Pen 9-2 by insane (@ztkzfeix) on CodePen.

앞에서 다른 코드를 짜면서 +형제 선택자와 ~인접 선택자를 사용했었는데, 기억하고 계신가요? 위와 같이 input과 span이 번갈아 가며 5개씩, 총 10줄의 코드를 작성했다고 했을 때 input:nth-child(3)+span이라고 쓰면, 3번째에 있는 input의 직후에 오는 span을 가리키는 것이겠죠.

See the Pen 9-3 by insane (@ztkzfeix) on CodePen.

반면, ~는 조금 더 복잡하게 동작합니다. input:nth-child(3)~span에 대해 서식을 지정했더니, 다음과 같이 여러 개의 span이 선택되었습니다. 3번째에 해당하는 input의 이후에 존재하는 모든 span이 선택된 것입니다. 그런데 여기서, 코드의 7번째 줄에 div를 하나 추가하면 어떻게 될까요?

See the Pen 9-4 by insane (@ztkzfeix) on CodePen.

8번째 줄이나 10번째 줄에 존재하는 input은, 7번째 줄에 존재하는 div로 인해서 5번째 줄의 input보다 한 수준 아래가 되었습니다. 코드 결과에서, 동그라미를 하나씩 눌러보세요. 수준이 다른 것은 인접 선택자로 선택되지 않는다는 것을 알 수 있습니다. 즉, A~B 인접 선택자란 동일한 수준에 존재하는, A 이후에 오는 모든 형제 요소 B를 선택하는 것이죠.

See the Pen 9-5 by insane (@ztkzfeix) on CodePen.

여기까지 이해했다면, 본격적으로 코드를 작성해봅시다. 10개의 input과 10개의 span을 번갈아 가며 만들어 봅시다. 이 때, input의 name은 모두 동일하고 value는 서로 달라야 합니다. 기본값으로 색칠된 모양을, 체크된 이후의 것을 비어있는 모양으로 하면 됩니다!

See the Pen 9-6 by insane (@ztkzfeix) on CodePen.

아까의 코드와 달라진 점이 보이시나요? html 코드가 sheet-container라는 div에 의해 감싸져 있습니다. 그리고 CSS에서는 position이라는 것이 지정되었죠. 우리가 앞서 display를 block으로 하건 inline으로 하건 inline-block으로 하건, 각 태그 요소들끼리는 서로의 존재를 인식하고 각각 차지하는 자리만큼 떨어져서 배치해 주었습니다. 그런데 이 position을 absolute로 하게 되면, 그렇지 않은 것들을 무시해요. 그래서 input들이 span의 존재를 무시하고 다닥다닥 붙어 있고, span들도 input의 존재를 모른 척 하고 자기들끼리만 있는 것처럼 배열되어 있죠. 그런데 이것들끼리 서로 무시된다고 하더라도, 그 상위 div는 position이 relative이기 때문에 그 밖으로 빠져나가지는 않게 됩니다. 그렇지 않으면 이 absolute된 요소는 페이지의 최상단 왼쪽에 붙어있게 되어버려요.

See the Pen 9-7 by insane (@ztkzfeix) on CodePen.

이번에는 무엇이 달라진 것 같나요? CSS코드에서 absolute로 지정된 것이, input이 아니라 span이 되었습니다. input에 의해 span의 글자가 가려지지 않은 이 형태가 우리가 최종적으로 보고 싶은 모양이겠죠. 하지만 input이 아래에 깔려 있어서 마우스를 눌러서 선택할 수 없습니다. input과 span이 만약 겹겹이 쌓인 레이어(층)의 형태라면, input이 더 위에 있어야 한다는 생각이 들지요.

See the Pen 9-8 by insane (@ztkzfeix) on CodePen.

이것을 z-index라는 속성으로, 값이 높을수록 더 위에 있다고 간주시켜 줍니다. 값이 낮은 span이 밑에 깔려 있는 것처럼 보이게 하고, opacity라는 속성을 0으로 설정하면 투명도가 0%가 되어 존재하지만 보이지 않게 됩니다. opacity는 1이라면 100%, 0.5라면 50%라고 생각하시면 됩니다.