์ด CSS ์ฝ๋๋ "Guardian Headline Full"์ด๋ผ๋ ์ฌ์ฉ์ ์ ์ ๊ธ๊ผด ํจ๋ฐ๋ฆฌ๋ฅผ ์ ์ํ๋ฉฐ, ์ฌ๋ฌ ๊ธ๊ผด ๋๊ป์ ์คํ์ผ์ ํฌํจํฉ๋๋ค. ๋ผ์ดํธ, ๋ ๊ทค๋ฌ, ๋ฏธ๋์, ์ธ๋ฏธ๋ณผ๋ ๋๊ป๊ฐ ๊ฐ๊ฐ ์ผ๋ฐ์ฒด์ ์ดํค๋ฆญ์ฒด ๋ฒ์ ์ผ๋ก ์ ๊ณต๋ฉ๋๋ค. ๊ฐ ์คํ์ผ์ ๋ํด ๊ฐ๋์ธ ์๋ฒ์ ํธ์คํ
๋ ์ธ ๊ฐ์ง ๋ค๋ฅธ ๊ธ๊ผด ํ์ผ ํ์(woff2, woff, ttf)์ ์ง์ ํ์ฌ ๊ด๋ฒ์ํ ๋ธ๋ผ์ฐ์ ํธํ์ฑ์ ๋ณด์ฅํฉ๋๋ค.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BoldItalic.ttf) format("truetype");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.ttf) format("truetype");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-BlackItalic.ttf) format("truetype");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: Guardian Titlepiece;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-titlepiece/noalts-not-hinted/GTGuardianTitlepiece-Bold.ttf) format("truetype");
font-weight: 700;
font-style: normal;
}
@media (min-width: 71.25em) {
.content__main-column--interactive {
margin-left: 160px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive {
margin-left: 240px;
}
}
.content__main-column--interactive .element-atom {
max-width: 620px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-atom {
max-width: 100%;
}
}
.content__main-column--interactive .element-showcase {
margin-left: 0;
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-showcase {
max-width: 620px;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-showcase {
max-width: 860px;
}
}
.content__main-column--interactive .element-immersive {
max-width: 1100px;
}
@media (max-width: 46.24em) {
.content__main-column--interactive .element-immersive {
width: calc(100vw - var(--scrollbar-width));
position: relative;
left: 50%;
right: 50%;
margin-left: calc(-50vw + var(--half-scrollbar-width)) !important;
margin-right: calc(-50vw + var(--half-scrollbar-width)) !important;
}
}
@media (min-width: 46.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(-20px);
width: calc(100% + 60px);
}
}
@media (max-width: 71.24em) {
.content__main-column--interactive .element-immersive {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 71.25em) {
.content__main-column--interactive .element-immersive {
transform: translate(0);
width: auto;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive .element-immersive {
max-width: 1260px;
}
}
.content__main-column--interactive p,
.content__main-column--interactive ul {
max-width: 620px;
}
.content__main-column--interactive:before {
position: absolute;
top: 0;
height: calc(100% + 15px);
min-height: 100px;
content: "";
}
@media (min-width: 71.25em) {
.content__main-c์ธํฐ๋ํฐ๋ธ ์ฝํ
์ธ ์นผ๋ผ์๋ ํน์ ์์น์ z-index๋ก ์ผ์ชฝ ํ
๋๋ฆฌ๊ฐ ์ถ๊ฐ๋ฉ๋๋ค. ๋ ํฐ ํ๋ฉด์์๋ ํ
๋๋ฆฌ ์์น๊ฐ ์ฝ๊ฐ ์กฐ์ ๋ฉ๋๋ค. ์ด๋ฌํ ์นผ๋ผ ๋ด์์ ์ํฐ ์์์๋ ์ํ ์ฌ๋ฐฑ์ด ์์ง๋ง ํจ๋ฉ์ด ํฌํจ๋ฉ๋๋ค. ์ํฐ ์์ ๋ค์ ๋จ๋ฝ์ด ์ค๋ ๊ฒฝ์ฐ ํจ๋ฉ์ด ์ ๊ฑฐ๋๊ณ ๋์ ์ฌ๋ฐฑ์ด ์ถ๊ฐ๋ฉ๋๋ค. ์ธ๋ผ์ธ ์์๋ ์ต๋ ๋๋น๋ก ์ ํ๋ฉ๋๋ค.
์ธ๋ผ์ธ ์ญํ ์ ํ๋ ํผ๊ท์ด์ ๊ฒฝ์ฐ ์ค๊ฐ ํฌ๊ธฐ ์ด์์ ํ๋ฉด์์๋ ์ต๋ ๋๋น๋ฅผ ๊ฐ์ง๋๋ค.
์ฌ์ฉ์ ์ ์ ์์ฑ์ ๋ฐ์ดํธ๋ผ์ธ, ํค๋, ์บก์
, ํผ์ฒ ๋ฑ ๋ค์ํ ์์์ ์์์ ์ ์ํฉ๋๋ค. ๊ธฐ๋ณธ ํ๋ฌ ์์์ ์ค์ ๋์ง ์์ ๊ฒฝ์ฐ ํผ์ฒ ์์์ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ฌ์ฉํฉ๋๋ค.
์ธํฐ๋ํฐ๋ธ ์นผ๋ผ ๋ด ๋๋ ์ผ๋ฐ์ ์ผ๋ก ์ํฐ ์์์๋ ํจ๋ฉ์ด ์์ต๋๋ค. ๋ค์ํ ์ฝํ
์ธ ๋ณธ๋ฌธ์์ ํน์ ์์๋ ์ํ์ ๋ค์ ์ค๋ ์ฒซ ๋ฒ์งธ ๋จ๋ฝ์ ์ถ๊ฐ ์๋จ ํจ๋ฉ์ ๋ฐ์ต๋๋ค.
๋ํ, ์ด๋ฌํ ๋จ๋ฝ์ ์ฒซ ๊ธ์๋ ํน์ ๊ธ๊ผด, ํฌ๊ธฐ, ๋๊ป ๋ฐ ์์์ผ๋ก ๋๋กญ ์บก ์คํ์ผ์ด ์ง์ ๋๋ฉฐ, ์์ ์ง์ ์๋ ์ฌ์ฉ์ ์ ์ ์์ฑ์ด ์ฌ์ฉ๋ฉ๋๋ค.ํน์ ์ฝํ
์ธ ์์ญ์์ ์ํ์ ๋ค์ ์ค๋ ๋จ๋ฝ์ ๊ฒฝ์ฐ ์๋จ ํจ๋ฉ์ ์ ๊ฑฐํฉ๋๋ค.
์ํฐํด, ์ธํฐ๋ํฐ๋ธ, ์ฝ๋ฉํธ, ํผ์ฒ ๋ณธ๋ฌธ ๋ด ํ์ฟผํธ ๋๋น๋ฅผ 620px๋ก ์ ํํฉ๋๋ค.
๋ฉ์ธ ์ฝํ
์ธ ๋ฐ ์ํฐํด ์ปจํ
์ด๋ ๋ด ์ผ์ผ์ด์ค ์์ ์บก์
์ ๊ฒฝ์ฐ ์์น๋ฅผ ์ ์ ์ผ๋ก, ๋๋น๋ฅผ 100%, ์ต๋ ๋๋น๋ฅผ 620px๋ก ์ค์ ํฉ๋๋ค.
์ด๋จธ์๋ธ ์์๋ ์คํฌ๋กค๋ฐ๋ฅผ ์ ์ธํ ์ ์ฒด ๋ทฐํฌํธ ๋๋น๋ฅผ ์ฐจ์งํด์ผ ํฉ๋๋ค. 71.24em ์ดํ ํ๋ฉด์์๋ ๋๋น๋ฅผ 978px๋ก ์ ํํฉ๋๋ค. ์ด๋ฌํ ํ๋ฉด์ ์บก์
์๋ 10px์ ์ํ ํจ๋ฉ์ ์ถ๊ฐํ๊ณ , 30em์์ 71.24em ์ฌ์ด์ ํ๋ฉด์์๋ 20px๋ก ์ฆ๊ฐ์ํต๋๋ค.
์ค๊ฐ ๋ฒ์ ํ๋ฉด(46.25em ~ 61.24em)์์๋ ์ด๋จธ์๋ธ ์์๋ฅผ 738px๋ก ์ ํํฉ๋๋ค. ๋ ์์ ํ๋ฉด(46.24em ์ดํ)์์๋ ์ผ์ชฝ ์ฌ๋ฐฑ์ ์ ๊ฑฐํ๊ณ ์ผ์ชฝ ๊ฐ์ฅ์๋ฆฌ์ ์ ๋ ฌํ๋ฉฐ 10px์ ์์ ์ผ์ชฝ ์ฌ๋ฐฑ์ ์ถ๊ฐํฉ๋๋ค(30em ์ด์ ํ๋ฉด์์๋ 20px). ์ด๋ฌํ ๋ ์์ ํ๋ฉด์ ์บก์
์๋ 20px์ ์ํ ํจ๋ฉ์ด ์ ์ฉ๋ฉ๋๋ค.
ํฐ ํ๋ฉด(61.25em ์ด์)์ ๊ฐ๊ตฌ ๋ํผ์ ๊ฒฝ์ฐ ์ ์๋ ์ด๊ณผ ํ์ด ์๋ CSS ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํฉ๋๋ค. ํค๋๋ผ์ธ์ ์ฒซ ๋ฒ์งธ ์์์ ์๋จ ํ
๋๋ฆฌ๋ฅผ ์คํ์ผ๋งํฉ๋๋ค. ๋ฉํ ์น์
์ ์๋์ ์ผ๋ก ์์น์ํค๊ณ ์๋จ ํจ๋ฉ์ ์ ์ฉํ๋ฉฐ ์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ์ ์์ต๋๋ค. ์คํ ๋ํผ์คํธ ์น์
์์๋ ํ๋จ ์ฌ๋ฐฑ์ ์กฐ์ ํ๊ณ ๋ชฉ๋ก ํญ๋ชฉ ๊ธ๊ผด ํฌ๊ธฐ๋ฅผ 20px๋ก ์ค์ ํ๋ฉฐ ๋งํฌ์ ๋ฐ์ค์ ์คํ์ผ๋งํฉ๋๋ค(ํธ๋ฒ ์ ๋ณ๊ฒฝ๋๋ ์ฌ์ฉ์ ์ ์ ์์ ์ฌ์ฉ). ์คํ ๋ํผ์คํธ์ ์ฒซ ๋ฒ์งธ ๋จ๋ฝ์๋ ์๋จ ํ
๋๋ฆฌ๊ฐ ์๊ณ ํ๋จ ํจ๋ฉ์ด ์์ง๋ง, ์ด ํ
๋๋ฆฌ๋ ๋งค์ฐ ํฐ ํ๋ฉด(71.25em ์ด์)์์ ์ ๊ฑฐ๋ฉ๋๋ค.
๋ํ, ๋ํผ ๋ด ํผ๊ท์ด์ ๊ฒฝ์ฐ ์ผ์ชฝ ์ฌ๋ฐฑ์ ์ ๊ฑฐํ๊ณ ์ธ๋ผ์ธ ์์์ ์ต๋ ๋๋น๋ฅผ 630px๋ก ์ค์ ํฉ๋๋ค. ๊ฐ์ฅ ํฐ ํ๋ฉด(71.25em ์ด์)์์๋ ๊ทธ๋ฆฌ๋ ํ
ํ๋ฆฟ ์ด์ด ์ ๋ชฉ, ํค๋๋ผ์ธ, ๋ฉํ ์น์
๋ถํฐ ์ ์๋ฉ๋๋ค.๋ ์ด์์์ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ๋ํด ์ ์๋ ์ด๊ณผ ํ์ด ์๋ ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋ ํฐ ํ๋ฉด์์๋ ์ ๋ชฉ, ํค๋๋ผ์ธ, ๋ฉํ ์น์
์ ๋ํด ์ธ ๊ฐ์ ์ด, ์คํ ๋ํผ์คํธ์ ๋ํด ๋ค์ฏ ๊ฐ์ ์ด, ํฌํธ๋ ์ดํธ์ ๋ํด ์ฌ๋ ๊ฐ์ ์ด์ด ์๋ ๊ทธ๋ฆฌ๋๋ฅผ ๊ฐ์ง๋ฉฐ, ํ ํฌ๊ธฐ๋ ๋น๋ก์ ์ผ๋ก ์กฐ์ ๋ฉ๋๋ค. ์ค๊ฐ ํ๋ฉด์์๋ ๊ทธ๋ฆฌ๋๊ฐ ๊ฐ๊ฐ ๋ ๊ฐ, ๋ค์ฏ ๊ฐ, ์ผ๊ณฑ ๊ฐ์ ์ด๋ก ์กฐ์ ๋๋ฉฐ ํน์ ํ ๋์ด๋ฅผ ๊ฐ์ง๋๋ค.
์คํ์ผ๋ง์๋ ๋ฉํ ์น์
์ ์๋จ ํ
๋๋ฆฌ์ ์คํ ๋ํผ์คํธ์ ์ผ์ชฝ ํ
๋๋ฆฌ๊ฐ ํฌํจ๋๋ฉฐ, ๋ ๋ค ์ฌ์ฉ์ ์ ์ ์์ ๋ณ์๋ฅผ ์ฌ์ฉํฉ๋๋ค. ํค๋๋ผ์ธ์ ์ต๋ ๋๋น์ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ณ๊ฒฝ๋๋ ๊ธ๊ผด ํฌ๊ธฐ๋ฅผ ๊ฐ์ง๋ฉฐ, ๋ ๋์ ํ๋ฉด์์๋ ๋ ์ปค์ง๋๋ค. ์์
๊ณต์ ๋ฐ ๋๊ธ ์น์
๊ณผ ๊ฐ์ ์ผ๋ถ ์์๋ ํค๋ ์์๊ณผ ์ผ์นํ๋ ํ
๋๋ฆฌ๋ฅผ ๊ฐ์ง๋ฉฐ, ๋ค๋ฅธ ์์๋ ํน์ ์ฅ์น์์ ์จ๊ฒจ์ง๋๋ค.
์คํ ๋ํผ์คํธ ํ
์คํธ์๋ ํน์ ํจ๋ฉ๊ณผ ๊ธ๊ผด ์์ฑ์ด ์์ผ๋ฉฐ, ๋ฉ์ธ ๋ฏธ๋์ด ์์ญ์ ๊ทธ๋ฆฌ๋ ๋ด์ ์์นํ๋ฉฐ, ๋๋น๋ ๋ ์์ ํ๋ฉด์์ ์คํฌ๋กค๋ฐ์ ์ฌ๋ฐฑ์ ๊ณ ๋ คํ์ฌ ์กฐ์ ๋ฉ๋๋ค. ์บก์
์ ์ ๋์ ์ผ๋ก ์์นํฉ๋๋ค.๊ฐ๊ตฌ ๋ํผ์ ํผ๊ท์ด ์บก์
์ ํ๋จ์ ์ ๋์ ์ผ๋ก ์์นํ๋ฉฐ ํ๋จ ์ฌ๋ฐฑ์ด ์๊ณ , ํจ๋ฉ, ๋ฐฐ๊ฒฝ์ ๋ฐ ํ
์คํธ ์์์ ํน์ง์ผ๋ก ํฉ๋๋ค. ๋๋น๋ 100%๋ก ์ค์ ๋๊ณ ์ต์ ๋์ด๋ 46ํฝ์
์
๋๋ค. ์บก์
๋ด์์ ์ฒซ ๋ฒ์งธ ์คํฌ์ ์จ๊ฒจ์ง๊ณ ๋ ๋ฒ์งธ ์คํฌ์ ํ์๋๋ฉฐ ์ต๋ ๋๋น์ 90%๋ก ์ ํ๋ฉ๋๋ค. ์บก์
์ ํ
์คํธ์ SVG ์์ด์ฝ์ ํน์ ์์ ๋ณ์๋ฅผ ์ฌ์ฉํฉ๋๋ค.
30em๋ณด๋ค ๋์ ํ๋ฉด์์๋ ์บก์
์ ์ํ ํจ๋ฉ์ด ์ฆ๊ฐํฉ๋๋ค. ์ ์ฉ ์บก์
๋ฒํผ์ ํ๋จ ์ค๋ฅธ์ชฝ์ ์ ๋์ ์ผ๋ก ์์นํ๋ฉฐ, ์ํ ๋ฐฐ๊ฒฝ๊ณผ ํฌ๊ธฐ ์กฐ์ ๋ SVG ์์ด์ฝ์ ๊ฐ์ง๋ฉฐ, ๋ ํฐ ํ๋ฉด์์๋ ์ค๋ฅธ์ชฝ ์์น๊ฐ ์กฐ์ ๋ฉ๋๋ค.
๋งค์ฐ ๋์ ํ๋ฉด์ ์ธํฐ๋ํฐ๋ธ ๋ฉ์ธ ์นผ๋ผ์ ๊ฒฝ์ฐ ์์ฌ ์์๊ฐ ์๋จ๊ณผ ๋์ด๋ฅผ ์กฐ์ ํฉ๋๋ค. ์ด๋ฌํ ์นผ๋ผ ๋ด์ ์ ๋ชฉ์ ์ต๋ ๋๋น๋ฅผ ๊ฐ์ง๋๋ค.
iOS์ Android์์๋ ๋คํฌ ๋ชจ๋ ์์ ๋ณ์๊ฐ ์ ์๋์ด ์์ผ๋ฉฐ, ๋คํฌ ๋ชจ๋์์ ๋ณ๊ฒฝ๋๋ ํผ์ฒ ์์์ ํฌํจํฉ๋๋ค. ์ด๋ฌํ ํ๋ซํผ์ ํน์ ์ํฐํด ์ปจํ
์ด๋๋ ํน์ ์์ ๋ค์ ์ฒซ ๋ฒ์งธ ๋จ๋ฝ์ ์ฒซ ๊ธ์๋ฅผ ๋ณด์กฐ ์์์ผ๋ก ์คํ์ผ๋งํ๊ณ , ์ํฐํด ํค๋ ๋์ด๋ฅผ 0์ผ๋ก ์ค์ ํ๋ฉฐ, ๊ฐ๊ตฌ ๋ํผ์ ํจ๋ฉ์ ์กฐ์ ํ๊ณ , ๊ทธ ์์ ์ฝํ
์ธ ๋ ์ด๋ธ์ ์จ๊น๋๋ค.iOS ๋ฐ Android ๊ธฐ๊ธฐ์ ํผ์ฒ, ์คํ ๋ค๋, ์ฝ๋ฉํธ ์ํฐํด ์ปจํ
์ด๋์ ๋ค์ ์คํ์ผ์ด ์ ์ฉ๋ฉ๋๋ค:
- **๋ ์ด๋ธ**: ๊ฐ๋์ธ ํค๋๋ผ์ธ ๋๋ ์ธ๋ฆฌํ ์์ฒด์ ๊ตต์ ๋๋ฌธ์ ๊ธ๊ผด์ ์ฌ์ฉํ๋ฉฐ, ์๋ก์ด ํ๋ฌ ์์ ๋ณ์๋ก ์์์ด ์ง์ ๋ฉ๋๋ค.
- **ํค๋๋ผ์ธ**: 32px, ๊ตต๊ฒ, ํ๋จ ํจ๋ฉ 12px, ์ง์ ํ์(#121212)์ผ๋ก ์ค์ ๋ฉ๋๋ค.
- **์ด๋ฏธ์ง**: ์๋์ ์ผ๋ก ์์นํ๋ฉฐ, ์๋จ ์ฌ๋ฐฑ 14px, ์์ ์ผ์ชฝ ์ฌ๋ฐฑ 10px์ ๊ฐ์ง๋๋ค. ๋๋น๋ ์ ์ฒด ๋ทฐํฌํธ(์คํฌ๋กค๋ฐ ๊ณ ๋ ค)๋ฅผ ์ฐจ์งํ๋ฉฐ ๋์ด๋ ์๋์ผ๋ก ์กฐ์ ๋ฉ๋๋ค. ํผ๊ท์ด ๋ด๋ถ ์์, ์ด๋ฏธ์ง ๋ฐ ๋งํฌ๋ ํฌ๋ช
ํ ๋ฐฐ๊ฒฝ์ ๊ฐ์ง๋ฉฐ, ์๋ ๋์ด์ ํจ๊ป ์ ์ฒด ๋ทฐํฌํธ ๋๋น์ ์ผ์นํฉ๋๋ค.
- **์คํ ๋ํผ์คํธ(์ํฐํด ์์ฝ)**: ์๋จ ํจ๋ฉ 4px, ํ๋จ ํจ๋ฉ 24px, ์์ ์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ 10px์ ํฌํจํฉ๋๋ค. ์คํ ๋ํผ์คํธ ๋ด๋ถ์ ๋จ๋ฝ์ ์ด๋ฌํ ์ปจํ
์ด๋ ์คํ์ผ์ ์์๋ฐ์ต๋๋ค.CSS ์ฝ๋๋ iOS ๋ฐ Android ๊ธฐ๊ธฐ์์ ์ํฐํด ์คํ ๋ํผ์คํธ์ ๋ฉํ๋ฐ์ดํฐ์ ๋ํ ํน์ ์คํ์ผ์ ์ค์ ํฉ๋๋ค. ์คํ ๋ํผ์คํธ ํ
์คํธ์ ๋ํ ๊ธ๊ผด ํจ๋ฐ๋ฆฌ๋ฅผ ์ ์ํ๊ณ ๋งํฌ ๋ชจ์์ ์ฌ์ฉ์ ์ ์ํ๋ฉฐ, ์์, ๋ฐ์ค ์คํ์ผ ๋ฐ ํธ๋ฒ ํจ๊ณผ๋ฅผ ํฌํจํฉ๋๋ค. ๋ํ ๋ฉํ๋ฐ์ดํฐ ์น์
์ ์ฌ๋ฐฑ์ ์กฐ์ ํ๊ณ ๋ค์ํ ์ํฐํด ์ ํ์์ ๋ฐ์ด๋ผ์ธ ๋ฐ ์์ฑ์ ๋งํฌ์ ๋ํ ์ผ๊ด๋ ์คํ์ผ์ ๋ณด์ฅํฉ๋๋ค.๊ฐ๊ตฌ ๋ํผ์ ๋ฉํ ์น์
์ ์๋ ์์ฑ์ ์ด๋ฆ๊ณผ ๊ด๋ จ ๋งํฌ ๋ฐ ์คํฌ์ Android ๊ธฐ๊ธฐ์ ์คํ ๋ค๋ ๋ฐ ์ฝ๋ฉํธ ์ํฐํด ๋ชจ๋์์ ์๋ก์ด ํ๋ฌ ์์์ ์ฌ์ฉํด์ผ ํฉ๋๋ค. iOS์ Android์์ ํผ์ฒ, ์คํ ๋ค๋, ์ฝ๋ฉํธ ์ํฐํด์ ๋ฉํ ๊ธฐํ ์น์
์๋ ํจ๋ฉ์ด ์์ด์ผ ํ๋ฉฐ, ๋ด๋ถ์ SVG ์์ด์ฝ์ ์๋ก์ด ํ๋ฌ ์์์ผ๋ก ์คํธ๋กํฌ ์คํ์ผ์ด ์ง์ ๋์ด์ผ ํฉ๋๋ค.
iOS์ Android์ ํผ์ฒ, ์คํ ๋ค๋, ์ฝ๋ฉํธ ์ํฐํด ๋ด ์ผ์ผ์ด์ค ์์์ ๊ฒฝ์ฐ ์บก์
๋ฒํผ์ด ํ๋ ์ค ์ปจํ
์ด๋๋ก ํ์๋์ด์ผ ํฉ๋๋ค. 5px ํจ๋ฉ์ผ๋ก ๊ฐ์ด๋ฐ ์ ๋ ฌ๋์ด์ผ ํ๋ฉฐ, ์ํ ๋ฐ ์์ง์ผ๋ก ์ ๋ ฌ๋๊ณ , ํฌ๊ธฐ๋ 28x28ํฝ์
์ด๋ฉฐ, ์ค๋ฅธ์ชฝ์์ 14px ์์น์ ์์ด์ผ ํฉ๋๋ค.
iOS์ Android์ ํผ์ฒ, ์คํ ๋ค๋, ์ฝ๋ฉํธ ์ํฐํด ๋ด ์ํฐํด ๋ณธ๋ฌธ์ ์ผ์ชฝ๊ณผ ์ค๋ฅธ์ชฝ์ 12px ํจ๋ฉ์ ๊ฐ์ ธ์ผ ํฉ๋๋ค. ์ํฐํด ๋ณธ๋ฌธ ๋ด์์ ์ธ๋ค์ผ์ด๋ ์ด๋จธ์๋ธ๊ฐ ์๋ ์ด๋ฏธ์ง ํผ๊ท์ด๋ ์ฌ๋ฐฑ์ด ์์ด์ผ ํฉ๋๋ค. ๋๋น๋ ์ ์ฒด ๋ทฐํฌํธ ๋๋น์์ 24px๊ณผ ์คํฌ๋กค๋ฐ ๋๋น๋ฅผ ๋บ ๊ฐ์ด์ด์ผ ํ๋ฉฐ ๋์ด๋ ์๋์
๋๋ค. ์ด๋ฌํ ์ด๋ฏธ์ง์ ์บก์
๋ ์ด๋ฌํ ๊ท์น์ ๋ฐ๋ผ์ผ ํฉ๋๋ค.iOS ๋ฐ Android ๊ธฐ๊ธฐ์ ํผ์ฒ, ์คํ ๋ค๋, ์ฝ๋ฉํธ ์ํฐํด ๋ด ์ด๋จธ์๋ธ ์ด๋ฏธ์ง๋ ์คํฌ๋กค๋ฐ๋ฅผ ๊ณ ๋ คํ์ฌ ์ ์ฒด ๋ทฐํฌํธ ๋๋น๋ฅผ ์ฐจ์งํด์ผ ํฉ๋๋ค.
์ํฐํด ๋ณธ