이 CSS 코드는 "Guardian Headline Full" 글꼴 패밀리를 다양한 두께와 스타일(라이트, 일반, 미디움, 세미볼드)로 정의하며, 각각 일반체와 이탤릭체 버전을 포함합니다. 글꼴 파일은 Guardian 서버에 호스팅된 WOFF2, WOFF, TrueType 형식으로 지정됩니다.
이 CSS 코드는 Guardian Headline 및 Guardian Titlepiece 글꼴에 대한 여러 글꼴 패밀리를 정의하고, 글꼴 두께와 스타일과 함께 다양한 형식(WOFF2, WOFF, TTF)의 소스를 지정합니다. 또한 인터랙티브 레이아웃에서 메인 콘텐츠 열에 대한 반응형 디자인 규칙을 포함하여 뷰포트 크기에 따라 여백, 너비 및 위치를 조정합니다. 예를 들어, 더 넓은 화면에서는 왼쪽 여백과 테두리를 추가하고, 더 작은 화면에서는 요소를 전체 너비로 확장하고 가운데 정렬합니다. 이 스타일은 atom, 쇼케이스, 몰입형 요소와 같은 다양한 콘텐츠 유형에 대해 최대 너비를 설정하여 기기 간 적절한 서식을 보장합니다.
인터랙티브 콘텐츠 열의 경우, 요소 앞에 왼쪽 테두리가 추가되고 왼쪽으로 11픽셀 위치합니다. 이러한 열 내에서 atom(요소)에는 상하 여백이 없지만 상하에 12픽셀의 패딩이 포함됩니다. 단락이 atom 다음에 올 경우 패딩이 제거되고 대신 12픽셀의 여백이 적용됩니다. 인라인 요소는 최대 620픽셀 너비로 제한되며, 더 넓은 화면(61.25em 초과)에서는 특정 역할을 가진 인라인 figure도 이 너비 제한을 따릅니다.
다양한 요소(날짜 줄, 헤더, 캡션, 피처 등)에 대한 색상 변수가 정의되며, 기본 피처 색상은 빨간색으로 설정됩니다. 메인 열 및 기타 위치의 atom에는 패딩이 없습니다.
특정 규칙이 다양한 콘텐츠 영역(기사 본문, 인터랙티브 콘텐츠, 댓글, 피처)에서 특정 요소 또는 수평 구분선 다음의 첫 번째 단락에 적용되어 14픽셀의 상단 패딩을 추가합니다. 추가적으로, 이러한 단락의 첫 글자는 특정 서체로 크고 굵은 대문자로 스타일링되며, 변수에 따라 색상이 지정되고 왼쪽으로 떠있으며 여백이 있습니다.
이러한 섹션에서 단락 앞에 오는 수평 구분선에는 상단 패딩이 없습니다. 특정 콘텐츠 영역 내의 끌어온 인용문은 최대 620픽셀 너비로 제한됩니다.
다양한 기사 컨테이너의 쇼케이스 요소에서 캡션은 620픽셀까지 전체 너비로 정적으로 위치합니다.
몰입형 요소는 스크롤바 너비를 뺀 전체 뷰포트 너비를 차지합니다. 71.24em 너비까지의 화면에서 이러한 요소는 978px 너비로 제한되며 캡션 패딩은 10px입니다. 30em에서 71.24em 사이에서는 캡션 패딩이 20px로 증가합니다. 46.25em에서 61.24em 사이의 화면에서는 최대 너비가 738px이 됩니다. 46.24em 미만에서는 몰입형 요소가 왼쪽 가장자리에 정렬되고 조정된 여백을 가지며 30em에서 46.24em 사이에서는 20px 캡션 패딩을 유지합니다.
가구 래퍼(furniture wrapper)는 61.25em 이상의 화면에서 반응형 그리드 레이아웃을 사용하여 제목, 헤드라인, 메타 정보, 스탠드퍼스트(standfirst), 및 초상화 섹션을 구성합니다. 헤드라인에는 상단 테두리가 있고, 메타 섹션에는 상단 패딩이 있으며, 스탠드퍼스트 텍스트에는 사용자 정의 밑줄이 있는 목록과 링크에 대한 특정 스타일링이 포함되며, 밑줄 색상은 호버 시 변경됩니다. 스탠드퍼스트의 첫 번째 단락은 더 큰 화면에서 상단 테두리를 가지지만 71.25em 이상에서는 제거됩니다.
가구 래퍼 내의 figure는 왼쪽 정렬 여백을 가지며 인라인 요소는 630px 너비로 제한됩니다. 71.25em 이상에서는 그리드 레이아웃이 초상화 콘텐츠를 위한 더 많은 열을 수용하도록 조정됩니다.
레이아웃은 다양한 화면 크기에 대해 특정 열과 행을 가진 그리드를 사용합니다. 더 작은 화면의 경우, 그리드는 세 개의 열과 자동으로 조정되는 행을 가지며, 제목 및 초상화 영역에 대해 80px 고정 높이를 가집니다. 메타 섹션 위에 얇은 선이 나타나고, 스탠드퍼스트 섹션에는 왼쪽에 수직선이 있습니다.
더 큰 화면에서 그리드는 유연성을 위해 분수 단위를 사용하여 더 많은 열과 행으로 확장됩니다. 메타 섹션의 상단 선이 넓어지고, 스탠드퍼스트의 수직선이 약간 이동합니다. 헤드라인은 최대 너비와 글꼴 크기를 가지며 더 큰 화면에서 증가하는 반면, 일부 요소(예: 선)는 다양한 중단점에서 숨겨지거나 여백이 조정됩니다.
메타 섹션의 소셜 및 댓글 요소는 동일한 테두리 색상을 공유하며, 일부 구성 요소는 표시되지 않습니다. 스탠드퍼스트 텍스트는 줄어든 왼쪽 여백과 패딩, 그리고 글꼴 속성으로 특정 스타일링을 가집니다. 메인 미디어 요소는 상대적으로 위치하며, 다양한 기기에서 전체 너비와 조정된 여백을 가지며, 캡션은 사용자 정의 배경 및 텍스트 색상으로 하단에 절대적으로 위치합니다.
이 CSS 코드는 가구 래퍼 구성 요소에 대한 스타일을 정의하며, 레이아웃, 색상 및 다양한 화면 크기에서의 반응형 동작을 포함합니다. 다크 모드와 같은 테마에 대해 CSS 사용자 정의 속성을 사용하여 배경 색상, 텍스트 색상 및 테두리 스타일을 설정합니다. 래퍼는 더 큰 화면에서 여백, 패딩 및 위치를 조정하며, 캡션 및 버튼과 같은 요소를 숨기거나 표시하는 규칙을 포함합니다. 헤드라인과 메타 정보는 특정 글꼴과 색상으로 스타일링되며, 소셜 미디어 버튼은 모양을 변경하는 호버 효과를 가집니다. 미디어 쿼리는 디자인이 다양한 기기에 적응하도록 보장합니다.
이 CSS 코드는 웹페이지의 furniture-wrapper 클래스에 대한 스타일을 정의하며, 메타 정보 및 스탠드퍼스트 섹션과 같은 요소에 중점을 둡니다. 텍스트 색상을 밝은 회색(#dcdcdc)으로 설정하고 링크 색상을 변수 기반 색조로 설정하며, 텍스트 장식 색상을 변경하는 호버 효과를 가집니다. 스탠드퍼스트 영역의 링크는 특정 오프셋을 가진 밑줄과 테두리가 없으며, 단락과 목록 항목도 밝은 회색을 채택합니다.
더 큰 화면(최소 너비: 61.25em)의 경우, 스탠드퍼스트의 첫 번째 단락은 상단 테두리를 가지며, 더 큰 화면(71.25em)에서는 제거됩니다. 코드는 또한 뷰포트 크기에 따라 너비가 조정되는 의사 요소(:before 및 :after)를 사용하여 장식용 사이드바를 생성하며, 어두운 배경과 테두리 가장자리를 특징으로 합니다. 추가적으로, 스트로크 색상으로 SVG 요소와 메타 섹션 내의 소셜 미디어 또는 댓글 아이콘을 스타일링합니다.
댓글 섹션은 헤더의 테두리 색상과 일치하는 테두리 색상을 가집니다.
기사에서 본문 내의 두 번째 수준 제목(h2)은 200의 가벼운 글꼴 두께를 가집니다. 그러나 h2가 strong 요소를 포함하는 경우 700의 굵은 글꼴 두께를 사용합니다.
Guardian Headline Full 글꼴 패밀리는 WOFF2, WOFF 및 TrueType 형식의 특정 파일 소스를 가진 다양한 스타일과 두께를 포함합니다:
- Light (두께 300, 일반 스타일)
- Light Italic (두께 300, 이탤릭 스타일)
- Regular (두께 400, 일반 스타일)
- Regular Italic (두께 400, 이탤릭 스타일)
- Medium (두께 500, 일반 스타일)
- Medium Italic (두께 500, 이탤릭 스타일)
- Semibold (두께 600, 일반 스타일)
- Semibold Italic (두께 600, 이탤릭 스타일)
이 CSS 코드는 "Guardian Headline Full" 글꼴 패밀리에 대해 세미볼드(600)부터 블랙(900)까지 다양한 두께와 스타일(일반 및 이탤릭)을 가진 여러 글꼴 면(font face)을 정의합니다. 각 글꼴 면은 Guardian의 자산 서버에서 WOFF2, WOFF 및 TrueType 형식의 소스 파일을 지정합니다.
또한 다른 하위 도메인에서 유사한 파일 형식을 사용하여 굵은 두께(700)와 일반 스타일을 가진 "Guardian Titlepiece" 글꼴을 정의합니다.
코드는 iOS 및 Android 기기에서 다크 모드에 대한 색상 구성표를 위한 CSS 사용자 정의 속성(변수)을 포함합니다. 어두운 배경 색상, 라이트 및 다크 모드용 피처 색상을 설정하고, 사용자의 선호 색상 구성표에 따라 기둥 색상(pillar color)을 조정하기 위해 미디어 쿼리를 사용합니다.
추가적으로, iOS 및 Android 기기에서 기사 컨테이너의 단락 첫 글자에 대한 특정 스타일링 규칙이 있으며, atom, 로그인 게이트 또는 특정 게이트 요소와 같은 특정 요소 다음에 올 때 적용됩니다.
Android 기기의 경우, 표준 및 댓글 기사의 첫 번째 단락의 첫 글자는 보조 기둥 색상으로 스타일링됩니다. iOS와 Android 모두에서 기사 헤더는 숨겨지고, 가구 래퍼에는 특정 패딩이 있습니다. 이러한 래퍼 내의 레이블은 새로운 기둥 색상을 가진 헤드라인 스타일의 굵고 대문자화된 글꼴을 사용합니다. 헤드라인은 32px, 굵게, 하단 패딩 및 어두운 색상으로 설정됩니다. 가구 래퍼의 이미지는 상대적으로 위치하며, 스크롤바를 뺀 뷰포트 너비를 차지하고 높이를 자동으로 조정합니다.
Android 기기의 경우, 기사 컨테이너 내의 이미지는 투명한 배경을 가지도록 설정되고, 스크롤바를 뺀 전체 뷰포트 너비를 차지하며 높이를 자동으로 조정합니다.
iOS와 Android 모두에서, 기사의 스탠드퍼스트 섹션은 각각 4px과 24px의 상하 패딩을 가지며 오른쪽 여백 오프셋이 -10px입니다. 내부 텍스트는 Guardian Headline 글꼴 패밀리 또는 대체 세리프 글꼴을 사용합니다.
두 플랫폼 모두에서 스탠드퍼스트 내의 링크는 특정 색상으로 스타일링되고 6px 오프셋으로 밑줄이 그어지며, 지정된 색상이 밑줄에 사용되며 호버 시 변경됩니다. 배경 이미지와 하단 테두리는 제거됩니다.
추가적으로, iOS와 Android 모두에서 기사의 메타 섹션은 피처, 표준 및 댓글 컨테이너에 대해 일관되게 스타일링됩니다.
Android 기기의 경우, 표준 및 댓글 기사 컨테이너의 메타 요소에서 여백을 제거합니다.
iOS 기기의 경우, 피처, 표준 및 댓글 기사 컨테이너의 바이라인 및 작성자 요소의 색상을 새로운 기둥 색상으로 설정합니다. 또한 메타 기타 요소에서 패딩을 제거하고 그 내부의 SVG 아이콘의 스트로크를 새로운 기둥 색상으로 설정합니다. 추가적으로, 쇼케이스 요소의 캡션 버튼을 특정 표시, 패딩, 정렬 및 크기로 스타일링합니다.
iOS와 Android 모두에서, 피처, 표준 및 댓글 기사 컨테이너에서 기사 본문 패딩을 측면 0, 상하 12px로 설정합니다.
iOS 및 Android 기기의 경우, 피처, 표준 및 댓글 기사 컨테이너에서, 기사 본문 내의 썸네일이 아니고 몰입형이 아닌 이미지는 여백이 없고, 전체 뷰포트 너비에서 24픽셀과 스크롤바 너비를 뺀 너비와 자동 높이를 가집니다. 그들의 캡션에는 패딩이 없습니다.
이러한 컨테이너의 몰입형 이미지는 스크롤바 너비를 뺀 전체 뷰포트 너비를 차지합니다.
기사 본문의 인용된 blockquote는 새로운 기둥 색상을 사용하여 색상 표시기를 표시합니다.
기사 본문의 링크는 기본 기둥 색상으로 스타일링되고 오프셋으로 밑줄이 그어지며, 밑줄에 헤더 테두리 색상을 사용합니다. 호버 시 밑줄 색상이 새로운 기둥 색상으로 변경됩니다.
다크 모드에서 가구 래퍼의 배경은 어두운 회색(#1a1a1a)이 됩니다.
iOS 및 Android 기기의 경우, 다음 스타일이 피처, 표준 및 댓글 기사 컨테이너에 적용됩니다:
- 콘텐츠 레이블은 새로운 기둥 색상을 사용합니다.
- 헤드라인에는 배경이 없고 텍스트에 헤더 테두리 색상을 사용합니다.
- 스탠드퍼스트 단락과 링크는 헤더 테두리 색상을 사용합니다.
- 작성자 바이라인과 그들의 링크는 새로운 기둥 색상을 사용합니다.
- 기타 메타데이터 아이콘은 새로운 기둥 색상으로 스트로크됩니다.
- 쇼케이스 이미지 캡션은 날짜 줄 색상을 사용합니다.
- 기사 본문의 인용된 blockquote는 새로운 기둥 색상으로 스타일링됩니다.
iOS 및 Android 기기의 경우, 기사 본문의 인용 블록의 텍스트 색상은 특정 기둥 색상으로 설정됩니다.
추가적으로, iOS와 Android 모두에서 다양한 기사 본문 섹션의 배경 색상은 어두운 배경으로 변경되어 다른 스타일을 재정의합니다.
더 나아가, iOS에서 기사 본문의 특정 요소 다음의 첫 글자에 대해 특별한 스타일링이 적용되지만, 정확한 효과는 여기에 지정되지 않았습니다.
이는 iOS 및 Android 플랫폼에서 다양한 기사 컨테이너(표준, 피처, 댓글)의 특정 요소 다음에 오는 단락의 첫 글자를 대상으로 하는 CSS 선택자로 보입니다. 이 선택자는 다양한 기사 유형에 적용되며 요소 사이에 나타날 수 있는 로그인 게이트를 고려합니다.
이 CSS 코드는 Android 및 iOS 기기에서 특정 요소에 대한 스타일을 정의합니다. 특정 단락의 첫 글자 색상을 변수 색상으로 설정하고, 댓글 기사의 스탠드퍼스트 요소에 대한 패딩과 여백을 조정하며, 24px 글꼴 크기로 제목을 스타일링합니다.
캡션 버튼의 경우 iOS와 Android에서 다른 패딩 값을 적용합니다. 다크 모드에서 다양한 색상 변수를 더 어두운 색조로 변경하여 가독성을 높이고 어
