iOS ๋ฐ Android์์ ๊ธฐ์ฌ ์ฝํ
์ธ ๋ ๋ ์ด์ ์คํฌ๋กค ๊ฐ๋ฅํ ์ค๋ฒํ๋ก์ฐ๊ฐ ์์ผ๋ฉฐ, ๊ฐ๋ก ์ค๋ฒํ๋ก์ฐ๋ ์๋ฆฝ๋๋ค. Android์์๋ ์งํ ํ์์ค ๋ํผ๊ฐ ์๋จ์์ 58px ์์น์ ๋ฐฐ์น๋ฉ๋๋ค.
์งํ ํ์์ค ๋ํผ(ํด๋์ค `svelte-6atxfw`)๋ ํ์ด์ง ์๋จ์ ๊ณ ์ ๋๋ฉฐ, ์๋จ์์ 1px ์๋์์ ์์ํฉ๋๋ค. ๋ทฐํฌํธ ์ ์ฒด ๋๋น์ ๊ฑธ์ณ ์์ผ๋ฉฐ, ์ํ ์ฌ๋ฐฑ์ -24px, ์ข์ฐ ์ฌ๋ฐฑ์ -10px, ํ๋จ ์ฌ๋ฐฑ์ 14px์
๋๋ค. ์ฒ์์๋ ๋ณด์ด์ง ์๋ค๊ฐ(opacity 0) 0.5์ด์ ๊ฑธ์ณ ์์ํ ๋ํ๋ฉ๋๋ค. z-index๋ 25์
๋๋ค.
ํ๋ฉด ๋๋น๊ฐ 30em ์ด์์ผ ๋, ์ข์ฐ ์ฌ๋ฐฑ์ -21px๋ก ๋ณ๊ฒฝ๋ฉ๋๋ค. 41.25em์์๋ ๋ํผ ๋๋น๊ฐ 620px๊ฐ ๋ฉ๋๋ค. 46.25em์์๋ 740px, 61.25em์์๋ 980px, 71.25em์์๋ 1140px๊ฐ ๋๋ฉฐ ์ผ์ชฝ ์ฌ๋ฐฑ์ -180px๋ก ๋ณ๊ฒฝ๋ฉ๋๋ค. 81.25em์์๋ 1300px๊ฐ ๋๊ณ ์ผ์ชฝ ์ฌ๋ฐฑ์ -260px์
๋๋ค.
์งํ ํ์์ค ์์ฒด(ํด๋์ค `svelte-6atxfw`)๋ ๋์ด๊ฐ 6px์ด๋ฉฐ, ๋๋น๊ฐ 0์์ ์์ํ๊ณ ๋ฐฐ๊ฒฝ์์ผ๋ก ๊ธฐ๋ณธ ๊ธฐ๋ฅ ์์์ ์ฌ์ฉํฉ๋๋ค. ๋ํผ์ `active` ํด๋์ค๊ฐ ์์ผ๋ฉด ์์ ํ ํ์๋ฉ๋๋ค.
๋ค์ ๊ธ๊ผด ํจ๋ฐ๋ฆฌ๋ "Guardian Headline Full"์ ๋ํด ๋ค์ํ ๋๊ป์ ์คํ์ผ๋ก ์ ์๋๋ฉฐ, ๋ชจ๋ Guardian์ ์์
์๋ฒ์์ ๊ฐ์ ธ์ต๋๋ค:
- Light (300), ์ผ๋ฐ ์คํ์ผ
- Light Italic (300), ์ดํค๋ฆญ ์คํ์ผ
- Regular (400), ์ผ๋ฐ ์คํ์ผ
- Regular Italic (400), ์ดํค๋ฆญ ์คํ์ผ
- Medium (500), ์ผ๋ฐ ์คํ์ผ
- Medium Italic (500), ์ดํค๋ฆญ ์คํ์ผ