CSS만으로 체크박스 구현하기

html에서 제공되는 체크박스의 모양이 아니라, 원하는 이미지를 사용하고 싶을 때 CSS만을 이용해서 체크박스를 구현해보자.

기본적인 원리는 이러하다.

checkbox타입인 input의 label을 눌러도 체크박스를 클릭한것과 같은 효과를 이용한다.
우선 체크박스에 blind클래스를 주어서 화면상에서는 보이지 않게 한다.

그리고 라벨에 가상요소를 이용하여 before에 원하는 이미지를 백그라운드로 삽입한다.

체크박스가 선택되었을 때(:checked) 인접 형제 선택자를 이용하여 선택되었을 때의 이미지를 삽입한다.

<input type="checkbox" id="chkbox" name="checkbox" class="btn-stay blind">
<label for="chkbox" class="btn-stay">로그인 상태유지</label>

.btn-stay {
    display: inline-block;
    margin-bottom: 21px;
    color: #767676;
}

.btn-stay::before {
    display: inline-block;
    content: '';
    width: 22px;
    height: 22px;
    background-image: url(../check-box-unchecked.png);
    background-size: 22px;
    vertical-align: middle;
    margin-right: 8px;
}
.btn-stay:checked + .btn-stay::before {
    background-image: url(../check-box-checked.png);
}

이 방법을 사용하려면, label이 input의 뒤에 오게 되는데, 마크업 구조상 맞는지 잘 모르겠다😅

Flex

<ul class="container">
  <li class="item">
    <a href="#">list1</a>
  </li>
  <li class="item">  
    <a href="#">list2</a>
  </li>
  <li class="item">  
    <a href="#">list3</a>
  </li>
  <li class="item">
    <a href="#">list4</a>
  </li>
</ul>

.container {
  display: flex;
}

display: flex; 를 해주면 블록요소도 인라인처럼 컨텐츠의 너비만큼만 너비를 가지게 된다.

display: flex;는 직계 자식에게 까지만 적용이 됩니다.

flex-basis

기본 크기를 지정해줍니다. flex-direction과 연관이 있습니다.

row라면 너비를, column이라면 높이를 지정해줍니다.
item에 써주어야 합니다.

만약, width, flex-basis가 둘 다 선언되었다면,
flex-basis가 적용이 됩니다.

또 만약, flex-basis의 크기가 max-width값을 넘긴다면,
max-width가 적용됩니다(min-width또한 마찬가지입니다.)

flex-grow

남은 공간을 채울때 사용합니다.
지정해주는 숫자만큼 비율을 차지합니다.

.item:nth-child(1) { flex-grow: 1;}
.item:nth-child(2) { flex-grow: 2;}
.item:nth-child(3) { flex-grow: 1;}
.item:nth-child(4) { flex-grow: 1;}

지정해준 숫자의 크기만큼 컨테이너의 남은 공간을 나눠 가지게 됩니다.

남은 공간을 나누어 가지는 것입니다!!!!

grow + basis

하나의 상황을 가정해봅시다.
flex-basis가 200px인 아이템이 4개있습니다.
flex-grow는 각각 1로 주었습니다.
이 상태로 웹에서 확인해보면, 양옆으로 가득차게 나옵니다.(grow가 있으니)

창 크기를 줄여나가다 보면 799px인 지점에서 4번째 아이템이 밑으로 내려가게 됩니다.
그리고, 그 마지막 아이템은 grow때문에 한 줄을 다 차지합니다.

또 줄이다보면, 599px인 지점에서 3번째 아이템이 밑으로 내려갑니다.

또 399px에서는 2번째 아이템이 내려갑니다.
지금부터는 모든 아이템의 너비가 200px을 넘긴 모양입니다.

이처럼 grow와 basis가 혼합된 상황에서는 가변적인 레이아웃이 잡히게 됩니다.

margin-right: auto;

상단(헤더)의 메뉴를 보면 일반적으로 로고가 왼쪽 끝에 있고, 메뉴바가 오른쪽에 붙어있습니다. 이를 flex상황에서 쉽게 처리할 수 있습니다.
로고의 클래스에 margin-right: auto;를 주는 것입니다.
이 때, flex-grow값이 있다면 남은 공간을 다 차지해버릴테니, 있어서는 안됩니다.