Tab Content

---

HTML

<h1>Tab Content</h1>

    <div class="container">
        <input type="radio" name="beer" id="tab1" checked>
        <label for="tab1">Guinness</label>
        <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, dicta harum consectetur et nisi possimus. Aut voluptatum voluptas, rerum veritatis 
            aspernatur possimus distinctio culpa dolor tempora, a aperiam eum vitae!
        </p>

        <input type="radio" name="beer" id="tab2">
        <label for="tab2">Heineken</label>
        <p class="content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, dicta harum consectetur et nisi possimus. Aut voluptatum voluptas, rerum veritatis 
            aspernatur possimus 
        </p>

        <input type="radio" name="beer" id="tab3">
        <label for="tab3">Budwiser</label>
        <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, dicta harum consectetur et nisi possimus. Aut voluptatum voluptas, rerum veritatis 
            aspernatur possimus distinctio adkeidlsjkdfklnlkwnkesdkjflksdkf
        </p>
    </div>

CSS

<style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        /* radio */
        input[type=radio] {
            display: none;
        }
        /* label */
        label {
            padding: 0.25rem;
        }
        input[type=radio]:checked + label {
            border-bottom: 2px solid skyblue;
            color: skyblue;
        }
        /* content */
        .content {
            display: none;
            flex-basis: 100%;
            order: 9;
        }
        input[type=radio]:checked + label + .content {
            display: block;
        }

    </style>

---

radio

• 정의
  -> 여러 개 항목 중 하나만 선택하도록 하는 동그란 버튼
  -> input 태그로 만듦

• 문법
  input type="radio" name="xxx" value="yyy" checked
  -> name="xxx" : name의 값이 같은 것 중에서 하나를 선택한다.
  -> value="yyy" : 선택했을 때 전달될 값
  -> checked : 선택된 상태로 만듦

!주의 ) 선택된 버튼은 해제될 수 없으니 초기화 버튼을 만들어 두는 것이 좋음

---

flex-basis

Flex 아이템의 기본 크기를 설정(flex-direction이 row일 때는 너비, column일 때는 높이)

들어갈 수 있는 값의 예시

.item {
	flex-basis: auto; /* 기본값 */ 
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

기본값인 auto로 설정하면 해당 아이템의 기본 width값이 사용됨

---

order

• 내용 변경 없이 순서를 설정
• 기본값은 0이고, 작은 값이 있는 요소부터 출력
• 값이 같다면 입력한 순서대로 출력
• order 속성의 값으로 음수도 가능, 특정 아이템을 앞으로 옮기고 싶을 때 유용