이 CSS 코드는 "Guardian Headline Full" 글꼴 패밀리를 다양한 두께와 스타일(라이트, 일반, 미디움, 세미볼드)로 정의하며, 각각 일반체와 이탤릭체 버전을 포함합니다. Guardian 서버에 호스팅된 WOFF2, WOFF, TrueType 형식의 글꼴 파일을 지정합니다.
이 CSS 코드는 "Guardian Headline Full"과 "Guardian Titlepiece" 글꼴 패밀리에 대한 여러 글꼴 면을 정의합니다. 각 글꼴 면은 다른 두께와 스타일(일반 또는 이탤릭)을 지정하고, 크로스 브라우저 호환성을 위해 여러 파일 형식(WOFF2, WOFF, TrueType)을 제공합니다. 두께는 라이트(300)에서 블랙(900)까지 범위하며, 해당하는 경우 해당 이탤릭 버전이 포함됩니다.
이 CSS 코드는 "Guardian Headline Full" 글꼴 패밀리에 대한 여러 글꼴 스타일을 정의합니다. 일반, 미디움, 세미볼드, 볼드, 블랙 등 다양한 두께와 스타일을 포함하며, 각각 일반체와 이탤릭체 버전이 있습니다. 각 스타일에 대해 Guardian의 자산 서버에서 WOFF2, WOFF, TrueType 형식의 글꼴 파일과 해당 글꼴 두께 및 스타일 속성을 지정합니다.
이 텍스트는 웹사이트, 아마도 The Guardian의 글꼴 스타일과 레이아웃 그리드를 정의하는 CSS 코드로 보입니다. 다양한 두께와 스타일에 대한 글꼴 파일을 지정하고, 다양한 화면 크기에서 변경되는 반응형 그리드 레이아웃을 설정합니다. 이 코드는 모바일에서 데스크톱 뷰까지 다양한 장치 너비에서 제목, 헤드라인, 미디어, 본문 텍스트와 같은 콘텐츠 영역이 배열되는 방식을 처리합니다.
특정 콘텐츠 영역에서 몰입형 캡션을 가진 인터랙티브 그리드 피규어의 경우, 캡션 패딩은 상단에 4픽셀, 다른 곳에는 0으로 설정됩니다.
다양한 콘텐츠 섹션에서 lines 및 meta에 대한 데이터 속성을 가진 요소는 그리드의 2행부터 5행, 1열부터 2열에 위치합니다. lines 요소는 내용에 맞는 높이와 5픽셀의 상단 여백을 가지며, meta 요소는 18픽셀의 상단 여백을 가집니다.
최소 너비 81.25em 이상의 큰 화면에서 이러한 콘텐츠 영역에 대한 그리드 레이아웃은 219px, 1px, 620px, 80px, 300px의 열을 사용합니다.
iOS 및 Android 장치의 경우, 기사 헤더는 특정 글꼴과 스타일을 사용합니다: standfirst 텍스트는 미디움 두께의 Guardian Headline 또는 유사한 세리프 글꼴을 사용하고, section kicker는 첫 글자를 대문자로 표시하는 블록으로 나타나며, keyline은 상단 패딩 12픽셀을 가지며, byline은 볼드 세리프 글꼴을 사용합니다. 기사 내 이미지는 높이를 자동으로 조정하며, atomic 요소 다음의 단락은 상단 여백이 없습니다.
Guardian Headline Full에 대한 글꼴 면은 라이트 및 라이트 이탤릭 두께로 정의되며, woff2, woff, ttf 파일에서 소싱됩니다.
이 텍스트는 다양한 스타일과 두께를 가진 "Guardian Headline Full"이라는 사용자 정의 글꼴 패밀리를 정의합니다. 일반, 미디움, 세미볼드, 볼드 버전을 포함하며, 각각 일반체와 이탤릭체 스타일을 가집니다. 글꼴 파일은 Guardian 웹사이트에서 WOFF2, WOFF, TrueType 형식으로 제공됩니다.
이 CSS 코드는 웹사이트의 글꼴 스타일과 레이아웃 조정을 정의합니다. Guardian 자산의 사용자 정의 글꼴(두께와 스타일 포함)을 지정하고, 다양한 화면 크기에 대한 반응형 디자인 규칙을 설정합니다. 레이아웃 규칙은 열, atoms, showcases, 몰입형 섹션과 같은 다양한 요소의 여백, 너비, 위치를 제어하여 장치 간 적절한 표시를 보장합니다. 또한 일관된 시각적 외관을 위한 색상 변수와 패딩 조정을 포함합니다.
기사 본문, 인터랙티브 콘텐츠, 댓글, 피처 등 다양한 콘텐츠 섹션의 첫 번째 단락은 상단 패딩 14픽셀을 가져야 합니다. 또한, 이러한 단락의 첫 글자는 특정 글꼴, 볼드 두께, 큰 크기, 대문자 텍스트, 변동 가능한 색상으로 스타일링되어야 하며, 왼쪽으로 떠서 여백을 가집니다.
수평선 다음의 단락에는 상단 패딩이 적용되지 않습니다. 이러한 섹션 내의 pullquote는 최대 너비 620픽셀로 제한됩니다.
showcase 요소에서 캡션은 정적으로 위치하며 최대 너비 620픽셀을 가집니다. 몰입형 요소는 스크롤바를 조정한 전체 뷰포트 너비를 차지하며, 71.24em보다 작은 화면에서는 978픽셀 너비로 제한되고 적절한 캡션 패딩을 가집니다.
이는 반응형 웹 디자인을 위한 CSS 코드로 보이며, 다양한 화면 크기에 대해 다른 스타일을 설정합니다. 모바일에서 데스크톱까지 장치 간 헤드라인, 이미지, 캡션과 같은 페이지 요소가 어떻게 나타나고 조정되어야 하는지 정의합니다. 이 코드는 뷰포트가 특정 너비 조건을 충족할 때 특정 레이아웃, 간격, 테두리, 그리드 구조를 적용하기 위해 미디어 쿼리를 사용합니다.
그리드 레이아웃은 제목, 헤드라인, standfirst 섹션에 대해 동일한 너비의 다섯 열을 사용한 다음, portrait 섹션에 대해 동일한 너비의 여덟 열을 사용합니다. 행은 제목, 헤드라인, standfirst, 메타 콘텐츠 영역에 대한 특정 높이로 정의됩니다.
메타 요소의 경우 620px의 고정 너비가 설정되고, standfirst 콘텐츠는 약간 왼쪽으로 오프셋됩니다. 제목 영역의 레이블은 작은 상단 패딩을 가집니다.
헤드라인은 볼드이며 최대 너비 620px과 32px 글꼴 크기를 가지며, 큰 화면에서는 50px로 증가하고 더 좁은 너비를 가집니다. 중간 화면에서는 lines의 오른쪽 여백이 제거되고, 더 넓은 디스플레이에서는 lines가 숨겨지며 색상은 헤더 테두리와 일치합니다.
메타 섹션도 중간 화면에서 오른쪽 여백을 잃고, 소셜 및 댓글 요소는 헤더 테두리 색상을 공유합니다. 일부 메타 구성 요소는 숨겨집니다.
Standfirst 콘텐츠는 들여쓰기되고 상대적으로 위치하며, 중간 화면에서 상단 패딩이 추가됩니다. 내부 단락은 일반 두께, 20px 크기이며 하단 패딩을 가집니다.
주요 미디어는 portrait 그리드 영역에 위치하며, 측면 여백 없이 전체 너비를 차지하고 큰 화면에서는 하단 여백이 없습니다. 작은 화면에서는 너비와 왼쪽 여백을 조정합니다.
캡션은 배경색과 텍스트 색상으로 하단에 위치하며, 전체 너비와 최소 높이를 가집니다. 첫 번째 span은 숨겨지고 두 번째는 보이며 90% 너비로 제한되며, 큰 화면에서 패딩이 증가합니다. 숨겨진 캡션은 투명합니다.
캡션 버튼은 오른쪽 하단에 원형 배경, 테두리 없음, 스케일된 아이콘으로 나타나며 큰 화면에서 더 오른쪽에 위치합니다.
인터랙티브 콘텐츠의 경우, 가장 큰 화면에서 의사 요소의 위치와 높이가 조정됩니다.
주요 열의 인터랙티브 제목은 최대 너비 620픽셀을 가집니다. iOS 및 Android 장치의 경우, 색상 구성표는 어두운 배경과 특정 액센트 색상을 사용하며, 다크 모드에서 조정됩니다. 이러한 모바일 플랫폼에서 기사 컨테이너의 특정 요소 다음 첫 번째 단락의 첫 글자는 보조 색상으로 스타일링되고, 기사 헤더는 숨겨집니다. Furniture wrapper는 최소 패딩을 받으며, 레이블은 지정된 pillar 색상을 사용한 볼드, 대문자 글꼴로 표시되고, 헤드라인은 강조를 위해 크고 볼드하며 어둡습니다.
iOS 및 Android 장치의 경우, 다음 스타일이 기사 컨테이너(피처, 표준, 댓글)에 적용됩니다:
- Furniture wrapper 내의 이미지 요소는 상대적으로 위치하며, 상단 여백 14px, 왼쪽 여백 -10px, 스크롤바 너비를 뺀 전체 뷰포트 너비를 차지합니다. 높이는 자동으로 조정됩니다.
- 내부 figure, 이미지, 링크 요소는 투명한 배경을 가지며, 스크롤바를 뺀 전체 뷰포트 너비와 일치하고 자동 높이를 유지합니다.
- Standfirst 섹션은 상단 패딩 4px, 하단 패딩 24px, 오른쪽 여백 -10px을 가집니다.
- Standfirst 내부의 단락은 Guardian Headline 또는 유사한 세리프 글꼴 패밀리를 사용합니다.
- Standfirst 내의 링크(목록 항목 내의 링크 포함)는 그에 따라 스타일링됩니다.
댓글 기사 컨테이너의 경우, standfirst의 링크는 특정 색상으로 스타일링되고 오프셋이 있는 밑줄이 그어지며 배경 이미지나 테두리가 없습니다. iOS 및 Android 장치에서 피처, 표준 또는 댓글 기사의 이러한 링크에 마우스를 올리면 밑줄 색상이 pillar 색상과 일치하도록 변경됩니다. 또한, 이러한 기사의 메타 섹션에는 여백이 없으며, byline 및 작성자 링크와 같은 요소는 텍스트에 pillar 색상을 사용합니다. 메타 miscellaneous 섹션에는 패딩이 없습니다.
iOS 및 Android 장치의 경우, 다음 스타일이 피처, 표준, 댓글 기사 컨테이너에 적용됩니다:
- 메타 miscellaneous 섹션의 SVG 아이콘은 새로운 pillar 색상을 stroke에 사용합니다.
- Showcase 요소의 캡션 버튼은 플렉스 컨테이너로 표시되며, 5px 패딩, 28px 크기로 중앙 정렬되고 오른쪽에서 14px 위치합니다.
- 기사 본문에는 12px 수평 패딩이 있습니다.
- 기사 본문의 썸네일이 아니고 몰입형이 아닌 이미지는 여백이 없으며, 뷰포트 너비에서 24px와 스크롤바 너비를 뺀 너비와 자동 높이를 가지며, 캡션에 패딩이 없습니다.
- 몰입형 이미지는 스크롤바 너비를 뺀 전체 뷰포트 너비를 차지합니다.
- Prose 섹션의 인용된 blockquote는 before 의사 요소가 그에 따라 스타일링됩니다.
iOS 및 Android 장치의 경우, 기사 내 인용 텍스트와 링크의 스타일링이 조정됩니다. 인용 텍스트는 특정 색상을 사용하며, 링크는 특정 색상으로 밑줄이 그어지고 마우스 오버 시 변경됩니다.
다크 모드에서 기사 헤더의 배경은 어두운 회색이 되고, 레이블, 헤드라인, standfirst 단락과 같은 텍스트 요소는 가독성을 위해 대비되는 색상을 채택합니다. 이러한 섹션 내의 링크와 작성자 이름도 일관성을 유지하기 위해 이 색상 구도를 따릅니다.
이 CSS 코드는 Android 및 iOS 장치의 다양한 기사 컨테이너에 대한 스타일을 정의합니다. 작성자 byline과 인용 텍스트의 색상을 특정 pillar 색상으로 설정하고, 동일한 색상을 SVG stroke에 적용하며, 이미지 캡션에 dateline 색상을 사용합니다. 또한 다양한 본문 요소의 배경을 높은 중요도로 어두운 배경으로 설정합니다.
이는 iOS 및 Android 장치의 다양한 기사 컨테이너 내 특정 요소 다음의 단락 첫 글자를 대상으로 하는 CSS 선택자로 보입니다. 이 선택자는 피처 기사, 표준 기사, 댓글 섹션과 같은 다양한 섹션에 적용되며, "element-atom" 클래스 또는 "sign-in-gate" ID와 같은 요소 다음에 오는 단락에 초점을 맞춥니다.
Android 및 iOS 장치의 경우, 다양한 기사 컨테이너 내 특정 요소 다음의 단락 첫 글자는 사용자 정의 색상 변수로 스타일링되며, 기본값은 흰색입니다.
Android 및 iOS 모두에서 댓글 기사의 경우, standfirst 섹션은 상단 패딩 24픽셀을 가지며 상단 여백이 없습니다. Prose의 2단계 제목은 24픽셀 크기로 설정됩니다.
피처, 표준, 댓글 기사의 캡션 버튼은 iOS(상단 6px, 측면 5px, 하단 0)와 Android(상단 및 측면 4px, 하단 0)에서 다른 패딩을 가집니다.
다크 모드에서 특정 색상이 팔로우 텍스트, 아이콘, standfirst 텍스트, 링크, byline에 적용되어 가시성을 향상시킵니다.
Furniture wrapper에 Guardian 조직 로고가 포함된 경우, 브랜딩 요소는 항상 표시됩니다. iOS 및 Android의 다양한 기사 유형의 콘텐츠 레이블과 헤드라인, 그리고 standfirst 단락은 미디움 글꼴 두께를 사용합니다.
주말 에세이의 페이지 배경은 연한 분홍색(#fff4f2)이며, 이는 기사 섹션과 서브 메타 배경에도 적용됩니다. Lines는 기본적으로 숨겨집니다.
Furniture wrapper는 상대적으로 위치하며 큰 화면에서 제목, 헤드라인, standfirst, 메타 섹션에 대해 정의된 행을 가진 그리드 레이아웃을 사용합니다.
기사 헤더 또는 제목 영역은 70픽셀의 고정 높이를 가지며 전체 높이를 차지하는 콘텐츠 레이블을 포함합니다. 장식용 책 GIF(70x70픽셀)가 오른쪽 하단에 나타나며, 더 넓은 화면에서는 110x110픽셀로 확대됩니다. 수평선은 콘텐츠 레이블의 하단을 가로지르며, 작은 화면에서는 스크롤바를 뺀 뷰포트 너비까지 확장되고 중간 화면에서는 738픽셀로 고정되며 왼쪽 들여쓰기를 가집니다.
71.25em보다 넓은 화면의 경우, furniture wrapper의 기사 헤더와 제목 요소는 80px 높이를 가지며, 81.25em 이상의 화면에서는 125px로 증가합니다. 이러한 큰 화면에서 헤드라인, 해당 데이터 속성 버전, 헤드라인 클래스는 상단 여백 -2px을 가집니다.
Furniture wrapper 내에서 헤드라인, 해당 데이터 속성 버전, 헤드라인 클래스는 모두 하단 패딩이 없는 내부 div를 가집니다. 해당 portrait 주요 미디어 헤드라인 wrapper는 전체 높이로 설정되고, 상대적으로 위치하며, 숨겨진 오버플로우, 24px 하단 패딩을 가집니다. 이러한 wrapper 내부의 헤드라인과 링크는 최대 너비가 없으며 2px 두께의 밑줄과 마우스 오버 시 6px 오프셋을 표시합니다.
Portrait 주요
