html&css (4)

목차

1. 인접한 엘리먼트 호출하기

2. 몇번째 엘리먼트 호출하기

3.label에 대해서 알기

1. 인접한 엘리먼트 호출하기

인접한 엘리먼트 호출하기

우리는 여러 가지 엘리먼트를 호출하는 방법을 알고 있다. 대표적으로 id/class이다.

그때 id/ class 외에 다른 방식으로 엘리먼트를 호출하는 방식이 있다.

<input type="checkbox" id="icon">
    <label for="icon">
        <span></span>
        <span></span>
        <span></span>
    </label>

이런 구문에서 label을 호출해야 할 때

#icon +label  { 
}

이런 식으로 호출이 가능하다.

2. 몇 번째 엘리먼트 호출하기

<input type="checkbox" id="icon">
    <label for="icon">
        <span></span>
        <span></span>
        <span></span>
    </label>

이 형식에서 우리는

모든 span에 각각 id와 class를 부여하여 호출할 수도 있겠지만

반대로 첫 번째 두 번째 세 번째 span을 나눠서 호출할 수도 있다.

그 방식은 다음과 같다.

#icon +label > span:last-child(1) {
}

3. label에 대해서 알기

<ul>
    <li><input type="radio" id="a" name="gender" checked="checked"><label for="a">남자</label></li>
    <li><input type="radio" id="b" name="gender"><label for="b">여자</label></li>
 </ul>

input에서 주로 쓰이는 label에 대해서 알아보려고 한다.

label은 그 체크 박스 외에 글자에서도 체크나, radio 변경이 가능하게 해주는 엘리먼트로 굉장히 유용하다

여기서 주의해야 할점은 하나다 바로 name이라는 속성이다.

우리가 여러 가지 input들을 볼 때 남/여와 같은 속성을 하나로 바꾸기 위해서(남을 체크하면 여자가 사라지고 여자를 체크하면 남자가 사라지는)는 name을 통해 input들을 하나의 그룹으로 묶어주면 된다