๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋กradiobutton (1)

Hi-๋žŒ๐Ÿ‘‹ High-๋žŒโ˜€๏ธ

[React] RadioButton ์ปค์Šคํ…€ํ•˜๊ธฐ with styled-components

๊ธฐ์กด Input์—์„œ ์ œ๊ณตํ•˜๋Š” RadioButton์—์„œ ์ƒ‰๋งŒ ๋ฐ”๊พธ๊ณ  ์‹ถ์—ˆ์„ ๋ฟ์ธ๋ฐ, ์ƒ๊ฐ๋ณด๋‹ค ์ž๋ฃŒ๋“ค์ด ๋งŽ์ง€ ์•Š์•˜๋‹ค. ์ปค์Šคํ…€ํ–ˆ๋‹ค๋Š” ๋‚ด์šฉ์„ ์‚ดํŽด๋ณด๋ฉด radio ํŠน์œ ์˜ ๋™๊ทธ๋ผ๋ฏธ 2๊ฐœ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ์–‘๋ณด๋‹ค, ์•„์˜ˆ ์ƒˆ๋กœ์šด ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋Œ€๋‹ค์ˆ˜์˜€๋‹ค. ๊ทธ๋ž˜์„œ ๋‚˜์ฒ˜๋Ÿผ ๊ณ ๋ฏผํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์„ ์œ„ํ•ด RadioButton ์ปค์Šคํ…€ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ •๋ฆฌํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค! ๋จผ์ €, ๋‚ด๊ฐ€ ๋งŒ๋“ค๊ณ ์ž ํ•˜๋Š” ๋ชจ์–‘์€ ๋‹ค์Œ๊ณผ ๊ฐ™์•˜๋‹ค. ๊ณ ๋ คํ•ด์•ผ ํ•  ์ ์€ ์„ ํƒ๋˜์—ˆ์„ ๋•Œ 1. ๋‚ด๋ถ€์— ๋™๊ทธ๋ผ๋ฏธ๊ฐ€ ์ƒ๊ฒจ์•ผ ํ•˜๋ฉฐ 2. icon์˜ ์ƒ‰๊ณผ label์˜ ์ƒ‰์ƒ์ด ๋ฐ”๋€Œ์–ด์•ผ ํ•œ๋‹ค ๋Š” ๊ฒƒ์ด๋‹ค. ๋‹ค๋ฅธ ๊ฒƒ๋ณด๋‹ค ๋‚˜๋Š” css์— ๋Œ€ํ•ด ์ž˜ ๋ชจ๋ฅด๊ณ  ์žˆ์–ด์„œ, 1๋ฒˆ์„ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•ด์•ผ ํ•˜๋Š”์ง€ ๋ง‰๋ง‰ํ–ˆ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ css์— ๋Œ€ํ•ด ์•„๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค. ๊ฐ€์ƒ ์„ ํƒ์ž :after ์„ ํƒํ•œ..

React 2023. 10. 27. 17:40