이 CSS 코드는 "Guardian Headline Full"이라는 사용자 정의 글꼴 패밀리를 정의하며, 여러 글꼴 두께와 스타일을 포함합니다. 라이트, 레귤러, 미디엄, 세미볼드 두께가 각각 일반체와 이탤릭체 변형으로 제공됩니다. 글꼴은 가디언 서버에서 WOFF2, WOFF, TrueType 세 가지 파일 형식으로 로드됩니다.
@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 (scripting: enabled) {
main {
opacity: 0;
}
main.is-loaded {
opacity: 1;
}
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
main.is-loaded {
transition: opacity .3s ease-in-out;
}
}
:root {
--overlay-fade: rgba(0, 0, 0, .6);
--caption: #707070;
--light-type: #fff;
--dark-bg: #1a1a1a;
}
:root[data-app-os=android] {
--androidTop: 58px;
}
:root[data-app-os=ios] {
--iosBottomToolbar: 50px;
--iosTopToolbar: 20px;
--iosLvh: calc(100vh - var(--iosTopToolbar));
}
@media (min-height: 670px) {
:root[data-app-os=ios] {
--iosBottomToolbar: 84px;
--iosTopToolbar: 44px;
}
}
@media (min-height: 800px) {
:root[data-app-os=ios] {
--iosTopToolbar: 94px;
}
}
:root:root {
--byline: var(--media-200);
--byline-anchor: var(--media-200);
--share-button: var(--media-200);
--article-link-text: var(--media-200);
--article-link-hover: var(--media-200);
--article-link-text-hover: var(--media-200);
--article-link-border-hover: var(--media-200);
--block-quote-fill: var(--media-200);
--block-quote-text: var(--media-200);
--pullquote-icon: var(--media-200);
--pullquote-text: var(--media-200);
--textblock-bullet-background: var(--media-200);
--sub-meta-text: var(--media-200);
--sub-meta-text-hover: var(--media-text);
--design-tag-text: var(--media-text);
--design-tag-background: var(--media-tag);
--follow-icon-fill: var(--media-200);
--follow-icon-background: var(--media-200);
--series-title-text: var(--media-200);
}
:root:root [data-component=series] {
--carousel-active-dot: var(--media-200);
}
:root:root gu-island[name=ListenToArticle] {
--follow-icon-background: var(--media-text);
}
article [data-gu-name=body] h2 {
font-weight: 600;
--subheading-text: var(--media-200);
}
article .first-headline,
article .second-headline,
article .inter {
/ 원본 텍스트가 여기서 갑자기 끝납니다. /
}이 CSS 코드는 아티클 레이아웃을 위한 스타일을 정의하며, 타이포그래피와 반응형 디자인에 중점을 둡니다. 헤드라인은 특정 글꼴을 사용하며, 큰 화면에서 36px에서 50px로 크기가 조정됩니다. 라벨과 링크는 구별되는 색상과 호버 효과로 스타일링됩니다. 스탠드퍼스트 텍스트와 바이라인은 정의된 글꼴 크기와 색상을 가지며, 다양한 화면 너비에 맞게 조정됩니다.
미디어 섹션의 경우, 레이아웃이 브레이크포인트에 따라 크게 변경됩니다. 모바일에서는 전체 너비를 차지하며 배경색과 전체 뷰포트 높이 영역을 가집니다. 큰 화면에서는 두 개의 열 그리드로 전환되며, 제목, 인터뷰이 정보, 미디어 컨테이너에 대한 특정 배치가 적용됩니다. 배경 테두리와 너비는 중앙에 프레임된 모습을 만들기 위해 중간 및 대형 기기에서 조정됩니다.
추가 스타일은 캡션, 특수 타이포그래피가 적용된 인용구, 드롭 캡과 같은 장식적 요소를 처리합니다. 디자인은 색상에 CSS 사용자 정의 속성을 사용하여 테마 일관성을 유지합니다.@media (min-width: 81.25em) {
[data-gu-name=media] {
--body-width: 1298px;
}
}
[data-gu-name=media] [data-gu-name=title] {
margin: 0 10px 4px;
width: fit-content;
background-color: var(--design-tag-background, var(--media-tag));
padding: 4px 6px;
}
@media (min-width: 30em) {
[data-gu-name=media] [data-gu-name=title] {
margin: 0 20px 8px;
}
}
@media (min-width: 61.25em) {
[data-gu-name=media] [data-gu-name=title] {
margin: 8px 20px;
}
}
[data-gu-name=media] [data-gu-name=title] > div > div {
padding: 0;
background-color: transparent;
}
[data-gu-name=media] [data-gu-name=title] > div > div a:only-of-type {
margin: 0;
}
@media (max-width: 61.24em) {
[data-gu-name=media] [data-gu-name=title] {
grid-area: mobile-furniture-wrapper;
}
}
article .content--interactive-grid {
grid-template-areas:
"media"
"meta"
"standfirst"
"body";
}
@media (min-width: 61.25em) {
article .content--interactive-grid {
grid-template-columns: 620px 300px;
grid-template-areas:
"media media"
"meta ."
"standfirst ."
"meta ."
"body ."
". .";
}
}
@media (min-width: 71.25em) {
article .content--interactive-grid {
grid-template-columns: 140px 1px 620px 300px;
grid-template-areas:
"media media media media"
"meta border standfirst ."
"meta border body ."
". border . .";
}
}
@media (min-width: 81.25em) {
article .content--interactive-grid {
grid-template-columns: 219px 1px 620px 80px 300px;
grid-template-areas:
"media media media media media"
"meta border standfirst . ."
"meta border body . ."
". border body . ."
". border . . .";
}
}
article .content--interactive-grid [data-gu-name=standfirst] {
margin-top: 8px;
}
article .content--interactive-grid [data-gu-name=lines] {
display: none;
}
article .content--interactive-grid .header-caption,
article .content--interactive-grid .video-caption {
margin-bottom: 10px;
}
article .content--interactive-grid .header-caption svg,
article .content--interactive-grid .video-caption svg {
fill: var(--caption);
width: 14px;
float: left;
margin-right: 4px;
}
article .content--interactive-grid .header-caption i,
article .content--interactive-grid .video-caption i {
font-style: italic;
}
article .content--interactive-grid .header-caption {
padding: 4px 0;
}
article .content--interactive-grid .header-caption > p:nth-of-type(2) span:has(svg) {
display: none;
}
article .content--interactive-grid .header-caption > p:nth-of-type(2) {
display: block;
padding-top: 4px;
}
gu-island[name=ListenToArticle] button {
margin-top: 4px;
margin-bottom: 4px;
}
.pin-spacer {
pointer-events: none;
}
.pin-spacer * {
pointer-events: auto;
}
header {
position: relative;
z-index: 20;
}
[data-rendering-target=apps] article div:has([data-gu-name=dateline]),
[data-rendering-target=apps] article [data-gu-name=dateline] {
margin-bottom: 0;
}
@media (orientation: landscape) and (max-width: 700px) {
[data-gu-name=media] {
grid-template-columns: 5fr 5fr;
grid-template-rows: .1fr .1fr .2fr 1fr .2fr;
gap: 4px;
grid-template-areas:
"title media-container"
"interviewee media-container"
". media-container"
"headline-container media-container"
". media-container";
}
[data-gu-name=media] [data-gu-name=title] {
grid-area: title;
margin: 8px 20px;
}
}
:root[data-app-os=ios] .Static-header [data-gu-name=media]:before,
:root[data-app-os=ios] .Static-header [data-gu-name=media]:after,
:root[data-app-os=ios] .Video-header [data-gu-name=media]:before,
:root[data-app-os=ios] .Video-header [data-gu-name=media]:after {
display: none;
}
@media (scripting: none) {
[data-gu-name=media] {
margin-left: unset;
width: 100%;
}
}
@media (scripting: none) and (min-width: 30em) {
[data-gu-name=media] {
margin-left: unset;
width: 100%;
}
}
@media (scripting: none) and (min-width: 61.25em) {
[data-gu-name=media] {
height: unset;
display: block;
}
[data-gu-name=media] > div {
max-width: unset;
}
}
@media (scripting: none) {
article .content--interactive-grid {
grid-template-areas:
"headline"
"title"
"media"
"meta"
"standfirst"
"body";
}
}
@media (scripting: none) and (min-width: 61.25em) {
article .content--interactive-grid {
grid-template-areas:
"headline ."
"title ."
"media media"
"meta ."
"standfirst ."
"body .";
}
}
@media (scripting: none) and (min-width: 71.25em) {
article .content--interactive-grid {
grid-template-areas:
"headline headline headline headline"
"media media media media";
}
}이 CSS 코드는 반응형 아티클 레이아웃을 위한 스타일을 정의합니다. 스크립팅이 비활성화되고 화면 너비가 최소 81.25em일 때, 아티클 콘텐츠 그리드는 헤드라인, 미디어, 제목, 테두리, 스탠드퍼스트, 메타 정보, 본문에 대한 특정 영역으로 구성됩니다.
"screen-reader-only" 클래스를 가진 요소는 스크린 리더에만 접근 가능하도록 화면 밖에 배치됩니다. 주요 인터랙티브 열 내의 지원 그림은 너비가 75%이며, 스타일링은 다양한 화면 크기에 맞게 조정되며, 큰 화면에서는 캡션이 정적이 되고 너비가 설정 해제됩니다.
중간 화면의 몰입형 요소에는 음수 오른쪽 여백이 적용됩니다. 헤더 캡션은 상단 패딩을 가지며, 비디오 트랜스크립트가 뒤따를 때 여백이 조정됩니다. 정적 및 비디오 헤더의 헤드라인 컨테이너와 인터뷰이 섹션은 수평 패딩을 가지며, 큰 화면에서 증가합니다.
이러한 헤더의 미디어 컨테이너는 전체 그리드 영역을 차지하며, 모바일에서는 고정된 이미지 래퍼가 있고 큰 화면에서는 상대적이 됩니다. 내부 이미지는 컨테이너를 덮도록 설정되며, 특정 인접 요소는 숨겨집니다. 두 번째 이미지 레이어는 절대 위치로 지정됩니다.
모바일 퍼니처 래퍼는 작은 화면에서 하단에 고정되며, 유연한 열 레이아웃과 배경색을 가지며, 큰 화면에서는 일반 콘텐츠 흐름의 일부가 됩니다. 작은 기기에서는 시각적 효과를 위한 그라데이션 오버레이를 포함합니다.최대 46.24em 화면의 경우, 정적 및 비디오 헤더는 전체 높이를 차지합니다. 이 크기의 iOS 기기에서는 레이아웃이 뷰포트 높이에 대한 변수를 사용하며, 인터뷰이 섹션에 iOS 툴바를 수용하기 위해 하단에 추가 패딩을 포함합니다.
최대 61.24em의 Android 기기의 경우, 헤더 높이는 전체 뷰포트 높이에서 상단 툴바 높이를 뺀 값으로 계산되며, 모바일 퍼니처 래퍼에는 Android 상단 바를 위한 패딩이 포함됩니다.
최대 700px 너
