@resistanHyunjin Cho ๋ฏธํฌ๋ฐ์ด์๋ ์กฑ๋ณด๊ฐ ์์๋๊ฐ์โฆ!? ๋๋ฌด ์ค๋๋์ด์ ๊ธฐ์ต์ด ๊ฐ๋ฌผ๊ฐ๋ฌผโฆ
Hyunjin Cho
@resistan@hackers.pub ยท 4 following ยท 6 followers
๐ฏ๏ธ๋ฐ๋ผ๋ ๊ฑด ํ๋ฑํ ๋ฏผ์ฃผ ์ธ์.
ํด์จ ๊ฑด A11Y, HTML, CSS. ์์ฆ์ ๋ค์ ํฌ์.
@hongminheeๆดช ๆฐๆ (Hong Minhee) ์ด์ฐฝ๊ธฐ ์ด๋๊ถ ๊ธฐ๋ฐ์ด๋ ์์ ์ ๋ณธ ๊ธฐ์ต์ด ์์ด์. ์ ์ญ์ ๊ฐ๋ฌผ๊ฐ๋ฌผโฆ :)
<select> ์ด์ CSS๋ก ์ปค์คํฐ๋ง์ด์ง ๊ฐ๋ฅ
------------------------------
- Chrome 135๋ถํฐ <select>
์์์ ๋ํด ์ ๊ทผ์ฑ ํ์ค์ ์ ์งํ๋ฉด์๋ CSS ์ปค์คํฐ๋ง์ด์ง์ด ๊ฐ๋ฅํ ์๋ก์ด ๊ธฐ๋ฅ ์ง์ ์์
- ์๋
๊ฐ์ ์ฌ์ ์กฐ์จ ๋ฐ ๊ฐ๋ฐ ๋์, ์ค๋๋ ๋ธ๋ผ์ฐ์ ์์๋ ๊นจ์ง์ง ์๋ ๊ฐ๋ ฅํ ๊ตฌ์ฑ ์์๋ก ์ ๊ณต๋จ
- HTML ์ฝํ
์ธ ๋ ํฌํจ ๊ฐ๋ฅํ๋ฉฐ, appearance: base-select
๊ฐ ์ถ๊ฐ๋๋ฉด์ ์ ๋๋ฉ์ด์
,โฆ
------------------------------
https://news.hada.io/topic?id=19998&utm_source=googlechat&utm_medium=bot&utm_campaign=1834
๊ฐ์ธ์ ์ผ๋ก bootstrap์ด๋ tailwind๋ฅผ ์ข์ํ์ง ์๋๋ค. ์ด๋ฐ CSS ํ๋ ์์์ด ๊ต์ฅํ ์์ ๋จ์(์ผ๋ฐ์ ์ผ๋ก ์ปดํฌ๋ํธ)์ ์คํ์ผ์ ํด๋์ค ์งํฉ์ผ๋ก๋ง ์ปจํธ๋กค ํ๋ ค๊ณ ํ๊ธฐ ๋๋ฌธ์ด๋ค.
CSS(Cascading Style Sheets)๋ ๊ทธ ์ด๋ฆ์์ ์ ์ ์๋ฏ์ด ๊ณ์ธต ๊ตฌ์กฐ๋ฅผ ๊ธฐ์ค์ผ๋ก ๋์ํ๋ค. ๋ถ๋ชจ ์์์์ ์์ ์์๋ก ์คํ์ผ์ ์์ํ๋ ๊ฒ ์ค์ํ ๊ฐ๋ ์ค ํ๋์ด๊ณ ์ด๊ฑธ ์ด์ฉํ๋ฉด ์ฌ๋ฌ ํ์ด์ง ๋จ์์ ์คํ์ผ์ ์ผ๊ด์ฑ ์๊ฒ ์ก์ ์ ์๋ค. ๋ฌผ๋ก , ๊ฐ๋ฐ์์ ํน์ ํด๋์ค๋ฅผ ๋ฐ๋ณต ์ถ๋ ฅํ๋ ๊ฒ๋ ๊ฒฐ๊ณผ๋ ๊ฐ์ ์ ์๊ฒ ์ง๋ง, ๊ฐ๋ฐ ํธ์๋ฅผ ์ํด CSS ๊ท์น์ ๊นก๊ทธ๋ฆฌ ๋ฌด์ํ๋ ๋ฐฉ์์ด tailwind ๊ฐ์ ๊ฑฐ๋ผ๊ณ ๋ณด๋ ์ ์ฅ์ด๋ค.
์ด์ฐจํผ ๊ณตํต ์คํ์ผ์ ํ์ํ์ง ์๋. ๊ทธ๋์ ์ปดํฌ๋ํธ๋ฅผ ์ฐ๋๋ผ๋ ๊ธ๋ก๋ฒ ์คํ์ผ์ ๋ฐ๋ก ์ ์ธํด๋๊ณ ์์ธ๋ฅผ CSS-in-JS๋ก ์ฒ๋ฆฌํ๋ ๊ฒ์ด ๋ง๋ค๊ณ ๋ณธ๋ค.
Lobsters์ ์ฌ์ฉ์ ํธ๋ฆฌ์ ์๊ฐ ๋ฐ์์ Hackers' Pub์๋ ์ ์ฒด ์ฌ์ฉ์ ์ด๋ ์กฑ๋ณด(๋ก๊ทธ์ธ ํ์)๋ฅผ ๋ง๋ค์์ต๋๋ค. ๋ง ๊ทธ๋๋ก ๋๊ฐ ๋๊ตฌ๋ฅผ ์ด๋ํ๋์ง ์ผ๋ชฉ์์ฐํ๊ฒ ๋ณด์ฌ์ฃผ๋ ์กฑ๋ณด์ ๋๋ค.
์ฐธ๊ณ ๋ก ์ด๋์ฅ์ ์ ์ฐ๋ฉด ๋ ๋์ด๋์ง ์์ง๋ง, ์ฐ๋ฉด ๋ค์ ๊ธ๋ฐฉ ์ฑ์์ง๋๋ค. (์ด๊ฒ ์์ฒด๋ฅผ ์ ๊ฐ ์๋์ผ๋ก ํ๊ณ ์์ง๋ง์โฆ)
@hongminheeๆดช ๆฐๆ (Hong Minhee) ๋ฏธํฌ๋ฐ์ด๊ฐ ์๊ฐ๋๋ ๊ฑด ์์ผ๊น์ ^^;
DEI ์ค์ ์ ๊ทผ์ฑ์ I์ ๊ฐ๊น๊ฒ ์ง๋ง, ๊ฐ๋ฐ์ ์ค์ ๊ด์ฌ ์๋ ์ฌ๋์ ์ ์ ๋ฏ.
๊ณต๋ ์์ ์ ์ํ ์ ์ฅ์ ๊ณ์ ์ ๋ฐ๋ก ๋ง๋ค๊ณ , ๊ฐ์ธ ๊ณ์ ์ ํ์ ์๋ก ๋ฑ๋กํด์ ์์ ์ ํ๊ณ ๋ ์๋๋ฐ...
- ์์งํ ์ ๋ณด๋ ๋ง๊ณ ,
- ๊ฐ๊ฐ์ธ์ ๊ด์ฌ์ฌ๋ ๋ค๋ฅด๊ณ ,
- ๊ฐ์ ์ฌ์ฉ ๊ฐ๋ฅํ ์๊ฐ๋ ๋ค๋ฅผํ ๊ณ ,
- ํจ๊ป ํด์คฌ์ผ๋ฉด ํ๋ ์ ๋ฌธ๊ฐ๋ค์ด ์์ง๋ง ๋ง ๊บผ๋ด๊ธฐ๋ ์ฝ์ง ์๋ค.
์ ๋ณ์ ๋ํ๊ณ ์ถ๊ณ , ํ ๋ก ์ ์ฅ๋ ๋ง๋ค์์ผ๋ฉด ์ข๊ฒ ๊ณ , ํ๊ณ ์ถ์ ๊ฒ๋ ๋ง๊ณ . ๊ทธ๋ฌ๋ ๋ ์ญ์ ํ์์ ๋ฌธ์ ๊ฐ ์ฌ์ ํ๋ค.
ํ์ฌ๊น์ง ์งํํ ์์ (์ธ๋ถ ๋งํฌ๋ ์๋). astro์ starlight์ ์ฌ๋ ค๋ณด๋ ค๊ณ ๊ณ ์ฌ ์ค.
DEI ์ค์ ์ ๊ทผ์ฑ์ I์ ๊ฐ๊น๊ฒ ์ง๋ง, ๊ฐ๋ฐ์ ์ค์ ๊ด์ฌ ์๋ ์ฌ๋์ ์ ์ ๋ฏ.
๊ณต๋ ์์ ์ ์ํ ์ ์ฅ์ ๊ณ์ ์ ๋ฐ๋ก ๋ง๋ค๊ณ , ๊ฐ์ธ ๊ณ์ ์ ํ์ ์๋ก ๋ฑ๋กํด์ ์์ ์ ํ๊ณ ๋ ์๋๋ฐ...
- ์์งํ ์ ๋ณด๋ ๋ง๊ณ ,
- ๊ฐ๊ฐ์ธ์ ๊ด์ฌ์ฌ๋ ๋ค๋ฅด๊ณ ,
- ๊ฐ์ ์ฌ์ฉ ๊ฐ๋ฅํ ์๊ฐ๋ ๋ค๋ฅผํ ๊ณ ,
- ํจ๊ป ํด์คฌ์ผ๋ฉด ํ๋ ์ ๋ฌธ๊ฐ๋ค์ด ์์ง๋ง ๋ง ๊บผ๋ด๊ธฐ๋ ์ฝ์ง ์๋ค.
์ ๋ณ์ ๋ํ๊ณ ์ถ๊ณ , ํ ๋ก ์ ์ฅ๋ ๋ง๋ค์์ผ๋ฉด ์ข๊ฒ ๊ณ , ํ๊ณ ์ถ์ ๊ฒ๋ ๋ง๊ณ . ๊ทธ๋ฌ๋ ๋ ์ญ์ ํ์์ ๋ฌธ์ ๊ฐ ์ฌ์ ํ๋ค.
์ ๊ทผ์ฑ ํ ์คํธ ๊ธฐ๋ฅ์ด ๊ถ๊ธ.
์ ํ ์๊ฐ์ง ๋ชปํ๋ ๊ฟํ์ ๋ฐฐ์ ๋ค. ์ปค๋ฐ๋ฉ์์ง๋ ai๊ฐ ์๋์ผ๋ก ํด์ฃผ๋๊ตฌ๋. copilot๋ ๋๋ฆ ์ธ๋งํจ https://d2.naver.com/helloworld/6615449
ARIA in HTML ๊ฐ์ ๊ถ๊ณ ์์ด ๋ฐํ๋์์ต๋๋ค. ํฐ ๋ณํ๋ ์๋ ๊ฒ ๊ฐ์ง๋ง, ์์ธํ ์ฌํญ์ ์ดํด๋ณธ ํ์ ๋ค์...
Hyunjin Cho shared the below article:
Hacker's Pub์ ์ ๋ฌธํ ํ๊ตญ์ด๊ถ ์ฌ๋ฌ๋ถ์ ์ํ ์๋ด์

Jaeyeol Lee @kodingwarrior@hackers.pub
๋จผ์ ํฐ๋ฅผ ์ก์ ์ฌ๋์ผ๋ก์ Hacker's Pub์ ์ค์ ์ฌ๋ฌ๋ถ๋ค์ ํ์ํฉ๋๋ค. ํ์ฌ ์ถ์ ํ๊ฑด๋ฐ 150๋ช ์ด ๋๋ ๋ถ๋ค๊ป์ Hacker's Pub์ ๋ค์ด์ค๊ณ ๊ณ์ ๊ฒ ๊ฐ์๋ฐ์. ๋ฌผ์ด ๋ค์ด์ค๋ฉด.... ๋ ธ๋ฅผ ์ ๋๊ฒ ์ธ์ง์์ ์ด๊ฒ ์ฃ ? ์ด ์๋น์ค๊ฐ ๋ง๋ค์ด์ง ์ด๊ธฐ๋ถํฐ ๊ด์ฌ์ ๊ฐ์ ธ์๊ณ , ์ด ์๋น์ค์ ๊ฐ๋ฅ์ฑ์ ๋ฏฟ๋ ์ฌ๋์ผ๋ก์ ์ฌ๋ฌ๋ถ์๊ฒ ์๋ด๋ฅผ ๋๋ฆฌ๊ณ ์ ํฉ๋๋ค.
Hacker's Pub์ ๋ฌด์์ ํ๋ ๊ณณ์ธ๊ฐ์?
Hacker's Pub์ ์ํํธ์จ์ด ์ ๊ณ์ ๋ชธ์ ๋ด๊ณ ์๋ ์ฌ๋ฌ๋ถ๋ค์ ์ฐฐ๋์ ์๊ฐ, ํน์ ์ฅ๋ฌธ์ ์ ์ ๋ ์๊ฐ๋ค์ ์์ ๋กญ๊ฒ ๊ฐ์ํ ์ ์๋ ์์ ๋คํธ์ํฌ ์๋น์ค์ด์, ๋ธ๋ก๊น ํ๋ซํผ์ ๋๋ค. ์ฌ๋ฌ๋ถ์ ๊ทธ๋๊ทธ๋ ๋๋ ์๊ฐ๋ค์ ์ฌ๋ ค์ ๋ค๋ฅธ ์ฌ๋๋ค๊ณผ ์์ ๋กญ๊ฒ ์ํต์ด ๊ฐ๋ฅํฉ๋๋ค.
Hacker's Pub ์ด๋ผ๋ ์ด๋ฆ์ ์ค์์ ์ธ ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค.
- ActivityPub ํ๋กํ ์ฝ์ ์ง์ํ๋ ํด์ปค๋ค์ ์ํ ์ปค๋ฎค๋ํฐ
- Hacker's + Pub - ํด์ปค๋ค์ด ์์ ๋กญ๊ฒ ์๊ณ ๋ ๋ค ์ ์๋ ์ฃผ์
Hacker's Pub์ด๋ผ๋ ์ปค๋ฎค๋ํฐ์ ์ ์ ์ ๊ฐ์ง๊ณ ์๋ ์ ๋ก์๋, ์ฌ๊ธฐ์ ๋ค์ด์ค์๋ ๋ชจ๋ ๋ถ๋ค์ด Pub์ ๋ค๋ ธ๋ค๊ฐ ๊ฐ๋ ๊ฒ์ฒ๋ผ ํธ์ํ ๊ณต๊ฐ์ผ๋ก ๋๊ปด์ง์๊ธธ ๋ฐ๋๋๋ค. ์ฐ๋ฆฌ ๋ชจ๋๊ฐ ํธ์ํจ ๊ฒฝํ์ ๋๋ฆด ์ ์๋๋ก ์ด๋์ ๋ก ์ด์์ด ๋๊ณ ์์ต๋๋ค. ๋ํ, ์ฌํ์ ํฉ์๋ก์ ํ๋๊ฐ๋ น๋ ๋ง๋ จ๋์ด ์์ผ๋ ํ๋ฒ ์ฐธ๊ณ ํด๋ณด์๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
ActivityPub ํ๋กํ ์ฝ์ด๋ ๋ฌด์์ธ๊ฐ์?
Hacker's Pub์ ActivityPub ํ๋กํ ์ฝ์ ์ง์ํ๋ ์ปค๋ฎค๋ํฐ์๋น์ค์ ๋๋ค. ๊ทธ๋ ๋ค๋ฉด, ActivityPub์ ๋ฌด์์ผ๊น์? ActivityPub์ ์น ์์ ๋ถ์ฐํ ์์ ๋คํธ์ํฌ๋ฅผ ๊ตฌํํ๊ธฐ ์ํ ๊ตญ์ ํ์ค ํ๋กํ ์ฝ๋ก, W3C์์ ํ์คํ๋์์ต๋๋ค. Mastodon, Misskey, Pleroma ๋ฑ ๋ค์ํ SNS ์๋น์ค๋ค์ด ์ด ํ๋กํ ์ฝ์ ๊ธฐ๋ฐ์ผ๋ก ์ํธ ํธํ๋๋ฉฐ ์์ ๋กญ๊ฒ ์ํตํ ์ ์๋๋ก ์ง์ํฉ๋๋ค. ์ฝ๊ฒ ๋งํด, ์ด๋ค SNS๋ฅผ ์ฌ์ฉํ๋๋ผ๋ ๊ฒฝ๊ณ๋ฅผ ๋์ด ์๋ก ์ํตํ ์ ์๋๋ก ๋๋ ๊ฒ์ด ActivityPub์ ํต์ฌ์ ๋๋ค.
ActivityPub์ ๋ํ ์์ธํ ์ค๋ช ์ ์ฌ๊ธฐ๊ฐ ์ ๋ง ์ ๋์ด ์์ผ๋ ๊ด์ฌ์๋ ๋ถ๋ค์ ํ๋ฒ ์ ๋ ํด๋ณด์๋๊ฑธ ๊ถ์ฅ๋๋ฆฝ๋๋ค.
Hacker's Pub์ ์ด์ฉํ๋ ์ฌ๋ฌ๋ถ๋ค์ ActivityPub ํ๋กํ ์ฝ์ ์ฌ์ฉํ๋ ๋ชจ๋ SNS ์๋น์ค(Mastodon, Misskey ๋ฑ)์ ์ฌ๋๋ค๊ณผ ์ฐ๊ฒฐ์ด ๋์ด ์์ผ๋ฉฐ, ์ฌ์ง์ด Bluesky์ ์๋ ์ฌ๋๋ค๊ณผ ์ฐ๊ฒฐ์ด ๋์ด ํ๋ซํผ์ ๊ฒฝ๊ณ๊ฐ ํ๋ฌผ์ด์ ธ ์๋, ์ฌ์ค์ ์ด์ฐ๊ฒฐ์ ์ธ ์ฌํ์ ๊ฒฝํ์ ๋๋ฆด ์ ์์ต๋๋ค.
Hacker's Pub ์ํ๊ณ์ ๊ธฐ์ฌํ๊ธฐ
Hacker's Pub์ ์์ง Early Stage ๋จ๊ณ์ด๋ฉฐ, ์ฌ์ ํ ๊ฐ์ ํ๊ณ ๋ฐ์ ํด์ผ ํ๋ ์ฌ์ง๋ ์์ต๋๋ค. Hacker's Pub์ ๋ชจ๋ ๊ฒ์ด ์คํ์์ค๋ก ๊ฐ๋ฐ๋๋, ์ ์ ์ผ๋ก ๊ฐ๋ฐฉ๋ ์ปค๋ฎค๋ํฐ ์๋น์ค์ด๊ธฐ ๋๋ฌธ์ ์ฌ๋ฌ๋ถ๋ ์ํ๊ณ์ ๋ฐ์ ์ ๊ธฐ์ฌํ ์ ์์ต๋๋ค. ํด์ปค๋ค์ ์ํ ๊ณต๊ฐ์ด๋๋งํผ, ์ด๋ ๋๊ตฌ์๊ฒ๋ ๊ธฐ์ฌ๋ ์ด๋ ค์์ต๋๋ค. ์ฌ๋ฌ๋ถ์ ์ฌ๊ธฐ์์ ์ค์๊ฐ์ผ๋ก ๊ธฐ์ฌ์ ์ฐธ์ฌํ์ค ์ ์์ต๋๋ค.
๊ฒฝ์ฐ์ ๋ฐ๋ผ์๋ Hacker's Pub์ ๋น์ฅ์ ๊ธฐ์ฌํ๊ธฐ๊ฐ ์ด๋ ค์ธ ์๋ ์์ต๋๋ค. ActivityPub ํ๋กํ ์ฝ์ ๋ํ ์ฌ์ ์ง์์ด๋ผ๋๊ฐ ํน์ ์๋น์ค๊ฐ ๋ง๋ค์ด์ง ๊ธฐ์ ์คํ์ ๋ํ ์ฌ์ ์ง์ ๊ฐ์ ๊ฒ๋ค์ด ์ง์ ์ฅ๋ฒฝ์ด ๋ ์๋ ์์ ๊ฒ์ด๊ฑฐ๋ ์. ๊ทธ๋ ๋ค๊ณ ํด๋ ๊ด์ฐฎ์ต๋๋ค. ActivityPub์ ๋ํ ์ดํด๋ ํ๊ตญ ์ฐํฉ์ฐ์ฃผ ๊ฐ๋ฐ์ ๋ชจ์์์ ํจ๊ป ์ปค๋ฎค๋ํฐ ์ฐจ์์์ ํจ๊ป ์์๊ฐ๋ฉด ๋ฉ๋๋ค.
๋๋ถ์ด, ์๊ฐ์ด ์ง๋๋ฉด Hacker's Pub ์ฃผ๋ณ ์ํ๊ณ๋ ๋๋์ฑ ๋ฐ์ ํ ์ ์์ ๊ฒ์ด๋ผ ๋ฏฟ์ต๋๋ค. ๋น์ฅ์ ์๋ฒ์ ํด๋ผ์ด์ธํธ๊ฐ ํฉ์ณ์ ธ์ ๊ฐ๋ฐ๋๊ณ ์๋ ํํ์ด์ง๋ง, ์กฐ๋ง๊ฐ ์๋ฒ์ ํด๋ผ์ด์ธํธ๊ฐ ๋ถ๋ฆฌ๋์ด์ ๊ฐ๋ฐ๋ ์์ ์ด๊ณ , Mastodon/Misskey ๊ฐ์ ๋ค๋ฅธ ActivityPub ๊ธฐ๋ฐ์ ์๋น์ค๊ฐ ๊ทธ๋์๋ฏ, ์ฐ๋ฆฌ๋ง์ Hacker's Pub ํด๋ผ์ด์ธํธ๋ฅผ ๋ง๋ค๊ฒ ๋๋ ๋ ๋ ์ฌ ๊ฒ์ ๋๋ค.
Hashnode ์ฒ๋ผ Hacker's Pub ๋ธ๋ก๊ทธ ํ ํ๋ฆฟ ๊ฐ์ ๊ฒ์ด ๋ง๋ค์ด์ง๋ ๋ฏธ๋, ๊ธฐ๋๋์ง ์๋์?
ํจ๊ป ๋ง๋ค์ด๊ฐ๋ Hacker's Pub
Hacker's Pub์ ํด์ปค๋ค์ ์ํ ๊ณต๊ฐ์ธ ๋์์, ๋ชจ๋ ๋ถ๋ค์ด ๊ฐ์์ ์๊น๊ณผ ์๊ฐ์ ๋ง์๊ป ํํํ ์ ์๋ ์ด๋ฆฐ ๋ฌด๋์ ๋๋ค. ์ฐ๋ฆฌ ์ปค๋ฎค๋ํฐ๋ ์ํธ ์กด์ค๊ณผ ์ ๋ขฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ๋ฉฐ, ์ด๋ฅผ ์ํด ๋ง๋ จ๋ ํ๋๊ฐ๋ น์ ์ค์ํ๋ ๋์์, ์ฐ๋ฆฌ ๋ชจ๋์ ๋ค์ํ ์๊ฒฌ๊ณผ ํผ๋๋ฐฑ์ด ์กด์ค๋ ์ ์๋ ๊ณต๊ฐ์ ๋๋ค. ๋ง์ฝ ์๋ก์ด ์์ด๋์ด๋ ๊ฐ์ ์ฌํญ์ด ์๋ค๋ฉด ์ธ์ ๋ ์ง ์๊ฒฌ์ ๊ณต์ ํด๋ ๋ฉ๋๋ค. ์ฐ๋ฆฌ ๋ชจ๋์ ์ฐธ์ฌ๊ฐ ๋ฐ๋ก Hacker's Pub์ ๋ฏธ๋๋ฅผ ๋ฐ๊ฒ ๋ง๋๋ ์๋๋ ฅ์ ๋๋ค.