๋ค์ ์์๋ค์ ์ฒ์์ ์จ๊ฒจ์ ธ ์์ต๋๋ค(ํฌ๋ช
๋ 0): .content--interactive, .content--interactive-grid, .furniture-wrapper, ๊ทธ๋ฆฌ๊ณ ํน์ ํค๋ div ๋ฐ h1 ์์๋ค. ๋ฃจํธ์ "interactive-loaded" ํด๋์ค๊ฐ ์ ์ฉ๋๋ฉด, ์ด๋ฌํ ์์๋ค์ด 0.3์ด์ ๋ถ๋๋ฌ์ด ํ์ด๋์ธ ํจ๊ณผ์ ํจ๊ป ๋ณด์ด๊ฒ ๋ฉ๋๋ค(ํฌ๋ช
๋ 1).
๋ํ, Guardian Headline Full ๊ธ๊ผด ํจ๋ฐ๋ฆฌ๋ ์ฌ๋ฌ ๊ฐ์ง ๋๊ป์ ์คํ์ผ(๋ผ์ดํธ, ๋ ๊ทค๋ฌ, ๋ฏธ๋์, ์ธ๋ฏธ๋ณผ๋, ๊ฐ๊ฐ ์ผ๋ฐ ๋ฐ ์ดํค๋ฆญ์ฒด ๋ณํ)๋ก ์ ์๋ฉ๋๋ค. ๊ฐ ๋ณํ์๋ Guardian์ ์์ฐ ์๋ฒ์ ํธ์คํ
๋ woff2, woff, ttf ๊ธ๊ผด ํ์ผ์ ๋ํ ๋งํฌ๊ฐ ํฌํจ๋ฉ๋๋ค. Guardian์ ํค๋๋ผ์ธ์ "Guardian Headline Full"์ด๋ผ๋ ๋ง์ถค ๊ธ๊ผด์ ์ฌ์ฉํฉ๋๋ค. ์ด ๊ธ๊ผด์ ๋ผ์ดํธ, ์ธ๋ฏธ๋ณผ๋, ๋ณผ๋, ๋ธ๋ ๋ฑ ๋ค์ํ ์คํ์ผ๊ณผ ๋๊ป๋ก ์ ๊ณต๋๋ฉฐ, ๊ฐ๊ฐ ์ผ๋ฐ์ฒด์ ์ดํค๋ฆญ์ฒด ๋ฒ์ ์ด ์์ต๋๋ค. ๊ธ๊ผด ํ์ผ์ ์ฌ๋ฌ ํ์(WOFF2, WOFF, TTF)์ผ๋ก ์ ๊ณต๋๋ฉฐ Guardian ์์ฒด ์๋ฒ์ ํธ์คํ
๋ฉ๋๋ค. ๋ํ ํน์ ์ฉ๋๋ฅผ ์ํด ๋ณผ๋ ๋๊ป์ "Guardian Titlepiece"๋ผ๋ ๋ณ๋์ ๊ธ๊ผด์ด ์์ต๋๋ค.
Guardian Headline Full ๊ธ๊ผด ํจ๋ฐ๋ฆฌ์๋ ์ฌ๋ฌ ์คํ์ผ์ด ํฌํจ๋์ด ์์ผ๋ฉฐ, ๊ฐ๊ฐ ์ฌ๋ฌ ํ์(WOFF2, WOFF, TTF)์ผ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค. ์คํ์ผ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- Regular (๋๊ป 400, ์ผ๋ฐ ์คํ์ผ)
- Regular Italic (๋๊ป 400, ์ดํค๋ฆญ ์คํ์ผ)
- Medium (๋๊ป 500, ์ผ๋ฐ ์คํ์ผ)
- Medium Italic (๋๊ป 500, ์ดํค๋ฆญ ์คํ์ผ)
- Semibold (๋๊ป 600, ์ผ๋ฐ ์คํ์ผ)
- Semibold Italic (๋๊ป 600, ์ดํค๋ฆญ ์คํ์ผ)
- Bold (๋๊ป 700, ์ผ๋ฐ ์คํ์ผ)
- Bold Italic (๋๊ป 700, ์ดํค๋ฆญ ์คํ์ผ)
- Black (๋๊ป 900, ์ผ๋ฐ ์คํ์ผ)
๊ฐ ๊ธ๊ผด ํ์ผ์ ์ง์ ๋ URL์ ํธ์คํ
๋ฉ๋๋ค.
@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;
}
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-column-gap: 0px;
grid-template-columns: 100%;
grid-template-areas:
"media"
"title"
"headline"
"standfirst"
"lines"
"meta"
"body";
}
@media (min-width: 30em) {
#article-body > div .content--interactive-grid figure.element--immersive figcaption,
.content--interactive > div .content--interactive-grid figure.element--immersive figcaption,
#comment-body .content--interactive-grid figure.element--immersive figcaption,
[data-gu-name=body] .content--interactive-grid figure.element--immersive figcaption,
#feature-body .content--interactive-grid figure.element--immersive figcaption {
padding: 0 20px;
max-width: 620px;
}
}
@media (min-width: 46.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 100%;
grid-column-gap: 10px;
grid-template-areas:
"title"
"headline"
"standfirst"
"media"
"lines"
"meta"
"body";
}
#article-body > div .content--interactive-grid #maincontent,
.content--interactive > div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: 80px;
}
}
@media (min-width: 61.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"title right-column"
"headline right-column"
"standfirst right-column"
"media right-column"
"lines right-column"
"meta right-column"
"body right-column"
". right-column";
}
#article-body > div .content--interactive-grid #maincontent,
.content--interactive > div .content--interactive-grid #maincontent,
#comment-body .content--interactive-grid #maincontent,
[data-gu-name=body] .content--interactive-grid #maincontent,
#feature-body .content--interactive-grid #maincontent {
padding-right: unset;
}
}
@media (min-width: 71.25em) {
#article-body > div .content--interactive-grid,
.content--interactive > div .content--interactive-grid,
#comment-body .content--interactive-grid,
[data-gu-name=body] .content--interactive-grid,
#feature-body .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"title border headline right-column"
". border standfirst right-column"
". border media right-column"
". border body right-column"
". border";
}
}
์ด๋ ์นํ์ด์ง, ์๋ง๋ The Guardian ์น์ฌ์ดํธ๋ฅผ ์คํ์ผ๋งํ๊ธฐ ์ํ CSS ์ฝ๋๋ก ๋ณด์
๋๋ค. ๋ ์ด์์, ๊ธ๊ผด, ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ๊ธฐ๊ธฐ์ ๋ํ ๋ฐ์ํ ๋์์ธ์ ์ํ ๊ท์น์ ํฌํจํฉ๋๋ค. ์ด ์ฝ๋๋ ๊ธฐ์ฌ ๋ณธ๋ฌธ, ์บก์
, ๊ทธ๋ฆฌ๋, ํ์ดํฌ๊ทธ๋ํผ์ ๊ฐ์ ์์๋ค์ ๋ํ ์คํ์ผ์ ์ ์ํ๋ฉฐ, ํน์ ๊ธ๊ผด ํจ๋ฐ๋ฆฌ์ ๋๊ป๋ฅผ ํฌํจํฉ๋๋ค. ๋ํ ๋ ํฐ ํ๋ฉด์ ๋ง๊ฒ ๋ ์ด์์์ ์กฐ์ ํ๊ธฐ ์ํ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ iOS ๋ฐ Android ๊ธฐ๊ธฐ๋ฅผ ์ํ ๋ง์ถค ์คํ์ผ๋ ํฌํจ๋์ด ์์ต๋๋ค.
@font-face {
font-family: Guardian Headline Full;
src: url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Light.ttf) format("truetype");
font-weight: 300;
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-LightItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-LightItalic.ttf) format("truetype");
font-weight: 300;
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-Regular.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Regular.ttf) format("truetype");
font-weight: 400;
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-RegularItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-RegularItalic.ttf) format("truetype");
font-weight: 400;
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-Medium.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.ttf) format("truetype");
font-weight: 500;
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-MediumItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.ttf) format("truetype");
font-weight: 500;
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-Semibold.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Semibold.ttf) format("truetype");
font-weight: 600;
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-SemiboldItalic.woff2) format("woff2"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.woff) format("woff"),
url(https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-SemiboldItalic.ttf) format("truetype");
font-weight: 600;
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-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;
}
The Guardian ์น์ฌ์ดํธ๋ ํค๋๋ผ์ธ๊ณผ ์ ๋ชฉ์ ๋ง์ถค ๊ธ๊ผด์ ์ฌ์ฉํฉ๋๋ค. ์ด๋ฌํ ๊ธ๊ผด๋ค์ ๋ค์ํ ํ์(WOFF2, WOFF, TTF)์ผ๋ก ํน์ URL์์ ๋ก๋๋๋ฉฐ, ์ ์๋ ๋๊ป์ ์คํ์ผ์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
๋ ์ด์์์ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ์กฐ์ ๋ฉ๋๋ค:
- ๋ ๋์ ํ๋ฉด์์๋ ๋ฉ์ธ ์ฝํ
์ธ ์ด์ ์ผ์ชฝ ์ฌ๋ฐฑ๊ณผ ์์ง ๊ฒฝ๊ณ์ ์ด ์์ต๋๋ค.
- atom, showcase, immersive ์ฝํ
์ธ ์ ๊ฐ์ ์์๋ค์ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ณ๊ฒฝ๋๋ ์ต๋ ๋๋น๋ฅผ ๊ฐ์ง๋๋ค.
- ๋ ์์ ํ๋ฉด์์๋ immersive ์์๋ค์ด ๋ทฐํฌํธ์ ์ ์ฒด ๋๋น๋ฅผ ์ฐจ์งํฉ๋๋ค.
- ๋ฌธ๋จ๊ณผ ๋ชฉ๋ก์ ๊ฐ๋
์ฑ์ ์ํด ์ต๋ ๋๋น๊ฐ ์ ํ๋ฉ๋๋ค.
- ๊ฐ๊ฒฉ๊ณผ ํจ๋ฉ์ ๊น๋ํ๊ณ ์ฒด๊ณ์ ์ธ ์ธ๊ด์ ์ ์งํ๊ธฐ ์ํด ์ ์ฉ๋ฉ๋๋ค.
์ธํฐ๋ํฐ๋ธ ์ฝํ
์ธ ๋ฅผ ์ํ ๋ฉ์ธ ์ด์ ์ธ๋ผ์ธ ์์๋ค์ 620ํฝ์
์ ์ต๋ ๋๋น๋ก ์ ํํฉ๋๋ค. 61.25em๋ณด๋ค ๋์ ํ๋ฉด์์๋ ์ธ๋ผ์ธ figure๋ค๋ 620ํฝ์
๋ก ์ ํ๋ฉ๋๋ค.
๋ฐ์ดํธ๋ผ์ธ, ํค๋, ์บก์
, ํผ์ฒ๋ ์ฝํ
์ธ ์ ๊ฐ์ ์์๋ค์ ์คํ์ผ๋งํ๊ธฐ ์ํด ์ฌ๋ฌ ์์ ๋ณ์๋ค์ด ์ ์๋ฉ๋๋ค. ์ธํฐ๋ํฐ๋ธ ์ฝํ
์ธ ์์ญ๋ค์ ๊ธฐ๋ณธ์ ์ผ๋ก ํจ๋ฉ์ด ์์ต๋๋ค.
ํน์ ์์๋ ์ํ ๊ตฌ๋ถ์ ๋ค์์ ์ค๋ ์ฒซ ๋ฒ์งธ ๋ฌธ๋จ์ 14px์ ์๋จ ํจ๋ฉ์ ๊ฐ์ง๋๋ค. ์ด๋ฌํ ๋ฌธ๋จ๋ค์ ์ฒซ ๊ธ์๋ ํน์ ๊ธ๊ผด๊ณผ ์์์ผ๋ก ํฐ, ๊ตต์, ๋๋ฌธ์ ๋๋กญ ์บก์ผ๋ก ์คํ์ผ๋ง๋๋ฉฐ, ์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ๊ณผ ํจ๊ป ์ผ์ชฝ์ผ๋ก ๋ ์์ต๋๋ค.
์ํ ๊ตฌ๋ถ์ ๋ฐ๋ก ๋ค์์ ์ค๋ ๋ฌธ๋จ๋ค์ ์๋จ ํจ๋ฉ์ด ์์ต๋๋ค. ์ง์