[CSS] 7. 가상 클래스와 가상 요소(2) - 요소 상태에 따른 가상 클래스 2

 

 

 

○ :checked - "선택한 항목"에 대해서 스타일을 적용

 

우리가 어떤 form의 라디오 버튼, 체크 박스에서 특정 항목을 선택할 경우 이 요소에는 checked라는 속성이 추가됩니다. 그래서 이러한 checked 속성이 부여된 요소에 스타일을 적용할 때는 :checked선택자를 사용하게 됩니다. 

 

'라디오 버튼을 클릭했을 때 레이블에 적용된 스타일을 변경한다'라고 정의하게 되면, 다음 예시와 같이 사용하게 됩니다. 참고로 이번 예시에서는 adjacent selector(인접 형제 선택자)를 사용하게 됩니다. 이 선택자의 정의가 기억나지 않으신다면, 아래 아티클에서 다시 복습하시기 바랍니다. 

 

 

[CSS] 6. 고급 선택자(1) - 연결 선택자 2

 

 

#signup input:checked + label {  /* input 요소에 checked 속성이 추가되었을 때 label 요소의 스타일 */
    color:red;  /* 글자색 */
    font-weight:bold;  /* 글자 굵게 */
}

 

위와 같이 스타일이 지정되었습니다. 위에서 설명되어 있듯이, input이 checked 속성을 갖게 되었을 때 바로 다음에 위치하게 되는 형제 요소의 label에 스타일이 적용된다는 의미입니다. 

 

<!-- 생략 -->
   <form id="signup">    
      <fieldset>
        <legend>개인 정보</legend>
        <ul>
          <li>
            <label for="fullname">이름</label>
            <input id="fullname" name="fullname" type="text" required>
          </li>
          <li>
            <label for="tel">연락처</label>
            <input id="tel" name="tel" type="tel">
          </li>          
        </ul>
      </fieldset>
      <fieldset>  
        <legend>객실 형태</legend>
        <ul>
          <li>
            <input type="radio" name="room" id="basic">
            <label for="basic">기본형(최대 2인)</label>
          <li>      
          <li>
            <input type="radio" name="room" id="family">
            <label for="family">가족형(최대 8인)</label>
          </li>          
        </ul>
      </fieldset>
      <button type="submit"> 제출 </button> 
    </form>

 

 

 

---

 

 

 

○ :not - 특정 요소를 제외하고 스타일을 적용

 

not은 말 그대로, '스타일을 적용하지 말 것'이라는 조건입니다. 예를 들어, input에 세 가지 속성이 있는데 이 중 2개에만 특정 스타일을 적용한다고 가정해 봅시다. 그러면 스타일 지정 방식은 크게 두 가지가 생깁니다. 바로 '2개를 지정하여 스타일 적용하기'가 있고, '1개 제외하고 모두를 지정하여 스타일 적용하기'가 있습니다.

 

방법은 작성자가 편의에 따라 사용하면 됩니다. 예를 들어서 input 타입 속성 text, tel, radio 세 개가 있을 때 text와 tel에만 특정 스타일을 적용하고 싶다면 두 가지 방법이 적용 가능합니다. 

 

#signup input[type=text], input[type=tel] {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    width: 200px;
}

OR

#signup input:not([type=radio]) {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    width: 200px;
}