[TIL] 1118 LikeLion๐Ÿฆ FES 14

cnsrn1874ยท2021๋…„ 11์›” 18์ผ
1

์›น์ ‘๊ทผ์„ฑ ๊ณ ๋ คํ•œ checkbox ๊พธ๋ฏธ๊ธฐ


๋ฌธ์ œ ํƒ์ƒ‰

์ด์ „ ๊ธ€(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ํ•œ ์š”์†Œ๋กœ ๋„˜์–ด๊ฐ„ ๊ฒƒ์ด์—ˆ๋‹ค.

ํฌ์ปค์Šค ์†Œ๊ฐœ
๋ Œ๋”๋ง ํŠธ๋ฆฌ ์ƒ์„ฑ, ๋ ˆ์ด์•„์›ƒ ๋ฐ ํŽ˜์ธํŠธ


ํ•ด๊ฒฐ ๊ณผ์ •

1. 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๊ฐ€ ๋˜์—ˆ๋Š”์ง€ ์œก์•ˆ์œผ๋กœ ํ™•์ธํ•  ์ˆ˜๊ฐ€ ์—†๋‹ค.

2. outline ์ ์šฉํ•˜๊ธฐ

๊ทธ๋ž˜์„œ <input>์ด focus๋ฅผ ๋ฐ›์•˜์„ ๋•Œ, <label>์—๊ฒŒ outline์„ ์ฃผ๋„๋ก CSS๋ฅผ ์ž‘์„ฑํ–ˆ๋‹ค.
border๋Š” ์ž๋ฆฌ๋ฅผ ์ฐจ์ง€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์™ผ์ชฝ, ์•„๋ž˜์ชฝ์œผ๋กœ 2px์”ฉ ๋ฐ€๋ ค๋‚˜๊ฒŒ ๋˜๋ฏ€๋กœ outline์„ ์ฃผ๋Š” ๊ฒƒ์ด ์ ์ ˆํ•˜๋‹ค.

CSS

.form-login__checkbox-keepLoggedIn:focus + label {
    outline: 2px solid black;
    border-radius: 5px;
}

3. ์™„์„ฑ

profile
๋‹น์‹ ์„ ํ•œ ์ค„๋กœ ์†Œ๊ฐœํ•ด๋ณด์„ธ์š”

1๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2021๋…„ 11์›” 19์ผ

์ ‘๊ทผ์„ฑ์„ ์„ธ์„ธํ•˜๊ฒŒ ์ƒ๊ฐ ํ•˜์…จ๋„ค์š” ์ €๋„ ํ•ด๋ด์•ผ๊ฒ ์–ด์š” !

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ