[css] input css 디자인 하기(input 디자인 코드펜)

https://codepen.io/kkcong/pen/MWzRKZy

 

<div class="radio">

  <input type="radio" name="item" id= "first" class="radio__input">

  <label for="item" class="radio__label">

    <div class="radio__txt">

      <div>1.</div>

      <div>첫번째 옵션</div>

    </div>

  </label>

 

  <input type="radio" name="item" id="second" class="radio__input">

  <label for="item" class="radio__label">

    <div class="radio__txt">

      <div>2.</div>

      <div>두번째 옵션</div>

    </div>

  </label>

</div>

radio 버튼 디자인

코드를 작성하면서, 코드의 구조를 어떻게 짜야하는 가에 대한 고민이 되었다.

 

1. div로 각각 묶어줄까?

<div class="radio">
  <input type="radio" name="item" id= "first" class="radio__input">
  <label for="item" class="radio__label"></label>
</div>

<div class="radio">
  <input type="radio" name="item" id="second" class="radio__input">
  <label for="item" class="radio__label"></label>
</div>

2. 한개의 div로만 묶어줄까?

<div class="radio">
  <input type="radio" name="item" id= "first" class="radio__input">
  <label for="item" class="radio__label"> </label>

  <input type="radio" name="item" id="second" class="radio__input">
  <label for="item" class="radio__label"> </label>
</div>

* 위의 고민에 대한 답변
답변자 : 바보 슈슈슉/FE첫번째 방법, 두번째 방법 둘다 결과물은 같네여!
그러면 저라면 두번째 방법으로 할래요.
이유는 코드 가독성이 좋고 불필요한 div 요소가 반복되지 않아서요