다음 요소들은 처음에 숨겨져 있습니다(투명도 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의 상단 패딩을 가집니다. 이러한 문단들의 첫 글자는 특정 글꼴과 색상으로 큰, 굵은, 대문자 드롭 캡으로 스타일링되며, 오른쪽 여백과 함께 왼쪽으로 떠 있습니다.
수평 구분선 바로 다음에 오는 문단들은 상단 패딩이 없습니다. 지정
