์ด์ ๊ธ(CSS๋ก checkbox ๊พธ๋ฏธ๊ธฐ)์์ CSS๋ก checkbox๋ฅผ ๊พธ๋ช๋๋ฐ ์ ๊ทผ์ฑ์์ ๋ฌธ์ ๋ฅผ ๋ฐ๊ฒฌํ๋ค.
๋ฐ๋ก "ํค๋ณด๋์ tabํค๋ก ์ฌ์ดํธ๋ฅผ ํ์(Tabbing Navigation)"ํ ๋ ๋ก๊ทธ์ธ ์ํ์ ์ง๋ focus ํ์ง ์๊ณ ์ง๋์น๋ ๊ฒ์ด์๋ค. ์ด๋ ๊ฒ ๋๋ฉด ์๊ฐ์ฅ์ ์ธ๋ค์ ๋ก๊ทธ์ธ ์ํ๋ฅผ ์ ์งํ ์๊ฐ ์์ด์ ๋งค๋ฒ ์์ด๋์ ๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํด์ผ ํ๊ธฐ ๋๋ฌธ์ ๋ง์ด ๋ถํธํ ๊ฒ์ด๋ค.
๊ฒ์ ๊ฒฐ๊ณผ, stack overflow์์ ํด๊ฒฐ์ ๋์๋ ๋งํ ๋ต๋ณ์ ์ฐพ์ ์ ์์๋ค.
์์ธ์ ์ฒดํฌ๋ฐ์ค์ ๋ชจ์์ ๊ฐ์์์๋ก ๋์ฒดํ๊ธฐ ์ํด <input>
์ display: none;
์์ฑ์ ๋ถ์ฌํ ๊ฒ์ด์๋ค.
<label>
์ด focus๋ฅผ ๋ฐ์ผ๋ฉด ํด๋น <label>
๊ณผ ์ฐ๊ฒฐ๋ <input>
์ผ๋ก focus๊ฐ ๊ฐ๊ฒ ๋๋ค. ํ์ง๋ง ๋๋ <input>
์ display
์์ฑ์ none
์ผ๋ก ๋ถ์ฌํ๋ค. display: none;
์์ฑ์ ๋ถ์ฌ๋ฐ์ ์์๋ ๋ ๋ ํธ๋ฆฌ์์ ์ ์ธ๋๊ธฐ ๋๋ฌธ์ ํ๋ฉด์์ ๋ณผ ์๋ ์๊ณ ์กด์ฌํ์ง๋ ์๋ ์์๊ฐ ๋๋ค. ๊ทธ๋ฌ๋ฏ๋ก focusing์ด ๋ ์๊ฐ ์์ด์ ๋ค์ focusableํ ์์๋ก ๋์ด๊ฐ ๊ฒ์ด์๋ค.
ํฌ์ปค์ค ์๊ฐ
๋ ๋๋ง ํธ๋ฆฌ ์์ฑ, ๋ ์ด์์ ๋ฐ ํ์ธํธ
display:none;
์ด ์๋ ๋ค๋ฅธ ๋ฐฉ์์ผ๋ก ์จ๊ธฐ๊ธฐdisplay: none;
์ ์ฐ๊ธฐ๋ณด๋ค ์คํฌ๋ฆฐ๋ฆฌ๋ ์ ์ฉ ํ
์คํธ๋ฅผ ์จ๊ธธ ๋ ์์ฃผ ์ฐ์ด๋ ๋ฐฉ์์ ์ฌ์ฉํ๋ฉด focus๊ฐ ์๋๋ ๊ฑธ ๋ง์ ์ ์๋ค.
visibility: hidden;
์ ๋ ์ฌ๋ฆด ์๋ ์์ง๋ง ์์๋ฅผ ๋จ์ํ ์ ๋ณด์ด๊ฒ(ํฌ๋ช
ํ๊ฒ) ํ ๋ฟ, ํด๋น ์์น์ ์๋ฆฌ๋ฅผ ์ฐจ์งํ ์ ์๊ฒ ํ๋ ์์ฑ์ด๊ธฐ ๋๋ฌธ์ ์ ํฉํ์ง ์๋ค.
HTML
<input type="checkbox" id="keepLoggedIn" class="form-login__checkbox-keepLoggedIn"/>
<label for="keepLoggedIn">๋ก๊ทธ์ธ ์ํ ์ ์ง</label>
CSS
.form-login__checkbox-keepLoggedIn {
width: 0;
height: 0;
margin: -1px;
position: absolute;
}
์ด์ tabํค๋ก focus๊ฐ ๋๊ณ spacebar๋ก ์ฒดํฌ๋ฅผ ํ ์ ์๊ฒ ๋์์ง๋ง focus ๋ ์์๋ค์๊ฒ ์๊ธฐ๋ outline์ด ์์ด์ focus๊ฐ ๋์๋์ง ์ก์์ผ๋ก ํ์ธํ ์๊ฐ ์๋ค.
๊ทธ๋์ <input>
์ด focus๋ฅผ ๋ฐ์์ ๋, <label>
์๊ฒ outline
์ ์ฃผ๋๋ก CSS๋ฅผ ์์ฑํ๋ค.
border
๋ ์๋ฆฌ๋ฅผ ์ฐจ์งํ๊ธฐ ๋๋ฌธ์ ์ผ์ชฝ, ์๋์ชฝ์ผ๋ก 2px์ฉ ๋ฐ๋ ค๋๊ฒ ๋๋ฏ๋ก outline
์ ์ฃผ๋ ๊ฒ์ด ์ ์ ํ๋ค.
CSS
.form-login__checkbox-keepLoggedIn:focus + label {
outline: 2px solid black;
border-radius: 5px;
}
์ ๊ทผ์ฑ์ ์ธ์ธํ๊ฒ ์๊ฐ ํ์ จ๋ค์ ์ ๋ ํด๋ด์ผ๊ฒ ์ด์ !