๋ค์์ ์ฃผ์ด์ง ์์ด ํ
์คํธ๋ฅผ ํ๊ตญ์ด๋ก ๋ฒ์ญํ ๊ฒ์
๋๋ค:
์ด CSS ์ฝ๋๋ "Guardian Headline Full" ๊ธ๊ผด ํจ๋ฐ๋ฆฌ๋ฅผ ์ฌ๋ฌ ์คํ์ผ๊ณผ ๋๊ป๋ก ์ ์ํฉ๋๋ค. ๋ผ์ดํธ(300), ์ผ๋ฐ(400), ๋ฏธ๋์(500), ์ธ๋ฏธ๋ณผ๋(600) ๋ฒ์ ์ ํฌํจํ๋ฉฐ, ๊ฐ๊ฐ ์ผ๋ฐ ์คํ์ผ๊ณผ ์ดํค๋ฆญ ์คํ์ผ๋ก ์ ๊ณต๋ฉ๋๋ค. ๊ธ๊ผด ํ์ผ์ Guardian์ ์์ฐ ์๋ฒ์์ WOFF2, WOFF, TrueType ํ์์ผ๋ก ์ ๊ณต๋ฉ๋๋ค.
์ด CSS ์ฝ๋๋ Guardian Headline Full ๋ฐ Guardian Titlepiece ๊ธ๊ผด ํจ๋ฐ๋ฆฌ์ ๋ํ ์ฌ๋ฌ ๊ธ๊ผด ๋ฉด(font face)์ ์ ์ํฉ๋๋ค. ๊ฐ ๊ธ๊ผด ๋ฉด์ ๋ค๋ฅธ ๊ธ๊ผด ๋๊ป์ ์คํ์ผ(์ผ๋ฐ ๋๋ ์ดํค๋ฆญ)์ ์ง์ ํ๋ฉฐ, Guardian์ ์์ฐ ์๋ฒ์์ WOFF2, WOFF, TrueType ํ์์ ์์ค ํ์ผ์ ํฌํจํฉ๋๋ค. ๋๊ป๋ ๋ผ์ดํธ(300)๋ถํฐ ๋ธ๋(900)๊น์ง ๋ฒ์ํ๋ฉฐ, ํด๋นํ๋ ๊ฒฝ์ฐ ์ดํค๋ฆญ ๋ฒ์ ๋ ํฌํจ๋ฉ๋๋ค.
```css
@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;
}
@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;
}
```
์ด CSS ์ฝ๋๋ ์น์ฌ์ดํธ์ ๋ค์ํ ์น์
์ ๋ํ ๊ธ๊ผด ์คํ์ผ๊ณผ ๋ฐ์ํ ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ์ ์ํฉ๋๋ค. Guardian Headline ๋ฐ Guardian Titlepiece ๊ธ๊ผด์ ๋ํ ๊ธ๊ผด ํ์ผ๊ณผ ์คํ์ผ์ ์ง์ ํ๋ฉฐ, ๋ค์ํ ๋๊ป์ ์คํ์ผ์ ํฌํจํฉ๋๋ค. ๊ทธ๋ฆฌ๋ ๋ ์ด์์์ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ์กฐ์ ๋๋ฉฐ, ๋ชจ๋ฐ์ผ๋ถํฐ ๋ฐ์คํฌํฑ๊น์ง ๊ธฐ๊ธฐ์์ ์ต์ ์ ํ์๋ฅผ ์ํด ์ด ๊ตฌ์กฐ์ ์์ ๋ฐฐ์น๋ฅผ ๋ณ๊ฒฝํฉ๋๋ค. ๋ ํฐ ํ๋ฉด์ ๊ฒฝ์ฐ ์ค๋ฅธ์ชฝ ์ด์ ํฌํจํ๊ณ ํจ๋ฉ๊ณผ ์์ ์์น๋ฅผ ๊ทธ์ ๋ฐ๋ผ ์กฐ์ ํฉ๋๋ค.
ํน์ ์ฝํ
์ธ ์์ญ์์ ๋ชฐ์
ํ ์บก์
์ด ์๋ ์ธํฐ๋ํฐ๋ธ ๊ทธ๋ฆฌ๋ ๊ทธ๋ฆผ์ ๊ฒฝ์ฐ ์บก์
ํจ๋ฉ์ ์์ชฝ 4ํฝ์
, ๋ค๋ฅธ ๊ณณ์ 0์ผ๋ก ์ค์ ํฉ๋๋ค.
๋ค์ํ ์ฝํ
์ธ ์น์
์์ ์ธํฐ๋ํฐ๋ธ ๊ทธ๋ฆฌ๋ ๋ด์ "lines" ๋ฐ "meta" ์์๋ ๊ทธ๋ฆฌ๋์ 2ํ๋ถํฐ 5ํ, 1์ด๋ถํฐ 2์ด์ ๋ฐฐ์น๋ฉ๋๋ค. "lines" ์์๋ ์ฝํ
์ธ ์ ๋ง๋ ๋์ด์ 5ํฝ์
์ ์์ชฝ ์ฌ๋ฐฑ์ ๊ฐ์ง๋ฉฐ, "meta" ์์๋ 18ํฝ์
์ ์์ชฝ ์ฌ๋ฐฑ์ ๊ฐ์ง๋๋ค.
๋ ํฐ ํ๋ฉด(81.25em ์ด์)์์ ์ด๋ฌํ ์น์
์ ์ธํฐ๋ํฐ๋ธ ๊ทธ๋ฆฌ๋๋ 219px, 1px, 620px, 80px, 300px์ ํน์ ๋๋น๋ฅผ ๊ฐ์ง 5์ด ๋ ์ด์์์ ์ฌ์ฉํฉ๋๋ค.
iOS ๋ฐ Android ๊ธฐ๊ธฐ์ ๊ฒฝ์ฐ ๊ธฐ์ฌ ํค๋๋ ๋ง์ถคํ ์คํ์ผ์ ๊ฐ์ง๋๋ค:
- ์คํ ๋ํผ์คํธ ๋จ๋ฝ์ ๋ฏธ๋์ ๋๊ป์ Guardian Headline ๊ธ๊ผด ํจ๋ฐ๋ฆฌ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ์น์
ํค์ปค๋ ๋ธ๋ก์ผ๋ก ํ์๋๊ณ ์ฒซ ๊ธ์๋ฅผ ๋๋ฌธ์๋ก ํฉ๋๋ค.
- ํค๋ผ์ธ์ ์์ชฝ ํจ๋ฉ์ด 12ํฝ์
์
๋๋ค.
- ์์ฑ์ ๋ฐ์ด๋ผ์ธ์ ๋งํฌ๋ฅผ ํฌํจํ์ฌ ๊ตต์ Guardian Headline ๊ธ๊ผด์ ์ฌ์ฉํฉ๋๋ค.
- ์ด๋ฏธ์ง ๊ทธ๋ฆผ์ ๋ด๋ถ ๋์ด๊ฐ ์๋์ผ๋ก ์ค์ ๋ฉ๋๋ค.
- ์ํ ๋ฏน ๊ทธ๋ฆผ ๋ค์์ ๋จ๋ฝ์ ์์ชฝ ์ฌ๋ฐฑ์ด ์์ต๋๋ค.
๋ํ Guardian Headline Full ๊ธ๊ผด์ ๋ผ์ดํธ ๋ฐ ๋ผ์ดํธ ์ดํค๋ฆญ ๋ณํ์ผ๋ก ์ ์๋๋ฉฐ, woff2, woff, truetype ํ์์ ํน์ URL์์ ์์ฑ๋ฉ๋๋ค.
Guardian Headline Full ๊ธ๊ผด ํจ๋ฐ๋ฆฌ์๋ ๋ค์ํ ์คํ์ผ๊ณผ ๋๊ป๊ฐ ํฌํจ๋์ด ์์ผ๋ฉฐ, ๋ชจ๋ Guardian ์น์ฌ์ดํธ์์ ์ ๊ณต๋ฉ๋๋ค. ์ด๋ฌํ ์คํ์ผ์ ์ผ๋ฐ๋ถํฐ ๊ตต๊ฒ๊น์ง ๋ฒ์ํ๋ฉฐ, 400, 500, 600, 700์ ๋๊ป์์ ์ผ๋ฐ ๋ฐ ์ดํค๋ฆญ ๋ฒ์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๊ฐ ๊ธ๊ผด ํ์ผ์ ํธํ์ฑ์ ์ํด WOFF2, WOFF, TrueType ํ์์ผ๋ก ์ ๊ณต๋ฉ๋๋ค.
```css
@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-column--interactive:before {
border-left: 1px solid #dcdcdc;
z-index: -1;
left: -10px;
}
}
@media (min-width: 81.25em) {
.content__main-column--interactive:before {
border-left: 1px solid #dcdcdc;
left: -11px;
}
}
.content__main-column--interactive .element-atom {
margin-top: 0;
margin-bottom: 0;
padding-bottom: 12px;
padding-top: 12px;
}
.content__main-column--interactive p + .element-atom {
padding-top: 0;
padding-bottom: 0;
margin-top: 12px;
margin-bottom: 12px;
}
.content__main-column--interactive .element-inline {
max-width: 620px;
}
@media (min-width: 61.25em) {
figure[data-spacefinder-role="inline"].element {
max-width: 620px;
}
}
:root {
--dateline: #606060;
--headerBorder: #dcdcdc;
--captionText: #999;
--captionBackground: hsla(0, 0%, 7%, 0.72);
--feature: #c70000;
--new-pillar-colour: var(--primary-pillar, var(--feature));
}
.content__main-column--interactive .element.element-atom,
.element.element-atom {
padding: 0;
}
#article-body > div .element-atom:first-of-type + p:first-of-type,
#article-body > div .element-atom:first-of-type + .sign-in-ga {
/ ์ถ๊ฐ ์คํ์ผ์ด ์ง์ ๋์ง ์์ /
}
```
๊ธฐ์ฌ, ๋๊ธ, ํผ์ฒ ๋ฑ ๋ค์ํ ์ฝํ
์ธ ์น์
์ ์ฒซ ๋ฒ์งธ ๋จ๋ฝ์ 14ํฝ์
์ ์์ชฝ ํจ