이 CSS 코드는 다양한 두께와 스타일을 가진 "Guardian Headline Full" 글꼴 패밀리를 정의하며, 각 변형에 대해 WOFF2, WOFF, TTF와 같은 여러 파일 형식을 제공하여 다양한 브라우저 간 호환성을 보장합니다.
이 CSS 코드는 Guardian Headline 및 Guardian Titlepiece 글꼴에 대한 여러 글꼴 패밀리를 정의하고, WOFF2, WOFF, TrueType 형식의 소스와 함께 글꼴 두께 및 스타일을 지정합니다. 또한 뷰포트 크기에 따라 여백, 너비 및 위치를 조정하여 인터랙티브 레이아웃에서 메인 콘텐츠 열에 대한 반응형 디자인 규칙을 포함합니다. 예를 들어, 더 넓은 화면에서는 왼쪽 여백과 테두리를 추가하고, 더 작은 화면에서는 요소 너비와 위치를 디스플레이에 맞게 조정합니다. 이러한 스타일은 단락, 목록 및 몰입형 구성 요소와 같은 요소가 다양한 기기에서 적절하게 적응하도록 합니다.
인터랙티브 메인 열의 경우 콘텐츠 앞에 왼쪽 테두리가 추가되며, 왼쪽으로 11픽셀 위치합니다. 이 열 내부의 요소는 위아래 여백이 없지만 위아래 모두 12픽셀의 패딩을 포함합니다. 단락 뒤에 요소가 오는 경우 패딩이 제거되고 대신 12픽셀의 여백이 적용됩니다. 인라인 요소는 최대 너비 620픽셀로 제한되며, 61.25em보다 넓은 화면에서는 특정 역할을 가진 인라인 피규어도 이 너비 제한을 따릅니다.
데이트라인, 헤더 테두리, 캡션 텍스트 등 다양한 요소에 대한 색상 변수가 정의되며, 피처 색상은 빨간색으로 설정되고 새로운 필라 색상은 기본 필라 또는 피처 색상을 기본값으로 합니다.
'element-atom' 클래스를 가진 요소에는 패딩이 없습니다. 특정 조건은 다양한 콘텐츠 영역에서 특정 요소나 수평 구분선 뒤에 오는 첫 번째 단락에 적용되어 위쪽 패딩 14픽셀을 추가합니다. 또한, 이러한 단락의 첫 글자는 특정 색상의 크고 굵은 대문자 글꼴로 스타일링되며, 왼쪽으로 떠서 여백을 가집니다.
이러한 영역에서 단락 앞에 오는 수평 구분선에는 위쪽 패딩이 없습니다. 특정 콘텐츠 영역 내의 풀쿼트는 최대 너비 620픽셀로 제한됩니다.
메인 기사, 피처, 표준 기사 및 댓글의 쇼케이스 요소의 경우 캡션은 정적으로 위치하며 최대 620픽셀까지 전체 너비를 가집니다.
몰입형 요소는 스크롤바 너비를 제외한 전체 뷰포트 너비를 차지합니다. 71.24em 너비까지의 화면에서 이러한 요소는 978px로 제한되며 캡션 패딩은 10px입니다. 30em에서 71.24em 사이에서는 캡션 패딩이 20px로 증가합니다. 중간 화면(46.25em ~ 61.24em)의 경우 최대 너비는 738px입니다. 더 작은 화면(46.24em 이하)에서는 몰입형 요소가 왼쪽 가장자리에 맞춰지고 여백과 패딩이 조정됩니다.
가구 래퍼는 더 큰 화면(61.25em 이상)에서 그리드 레이아웃을 사용하여 제목, 헤드라인, 메타 정보, 스탠드퍼스트 및 초상화 섹션을 구성합니다. 헤드라인에는 위쪽 테두리가 있고, 메타 섹션에는 위쪽 패딩이 있으며, 스탠드퍼스트 텍스트에는 링크와 테두리에 대한 특정 스타일이 포함됩니다. 래퍼 내의 피규어는 왼쪽 여백이 없으며 인라인일 때 최대 너비 630px입니다. 매우 큰 화면(71.25em 이상)에서는 그리드 열이 다른 레이아웃을 위해 재구성됩니다.
레이아웃은 다양한 화면 크기에 대해 특정 열과 행을 가진 그리드를 사용합니다. 더 작은 화면의 경우 그리드는 고정 및 자동 높이를 가진 세 개의 열과 행을 가집니다. 얇은 선이 메타 섹션 위에 나타나며, 스탠드퍼스트 섹션에는 왼쪽에 수직선이 있고 단락에는 위쪽 테두리가 없습니다.
더 큰 화면에서는 그리드가 더 많은 열과 비율 행 높이로 확장됩니다. 메타 선이 넓어지고 스탠드퍼스트의 수직선이 약간 왼쪽으로 이동합니다. 헤드라인은 최대 너비와 글꼴 크기를 가지며 더 큰 화면에서 증가하며, 가장 큰 화면에서는 50px 글꼴이 표시됩니다.
선 및 소셜 댓글 기능과 같은 일부 요소는 중간 및 큰 화면에서 숨겨지거나 조정됩니다. 스탠드퍼스트 섹션에는 음수 여백과 패딩이 있으며, 특정 글꼴 스타일과 단락 아래 패딩이 있습니다.
메인 미디어 이미지는 상대적으로 위치하며 전체 너비를 차지하고 화면 크기에 따라 여백을 조정하며, 캡션은 사용자 정의 배경 및 텍스트 색상으로 하단에 절대적으로 위치합니다.
이 CSS 코드는 가구 래퍼 구성 요소의 스타일을 정의하며, 레이아웃, 색상 및 다양한 화면 크기에서의 반응형 동작을 포함합니다. 다크 모드와 같은 테마에 대해 CSS 사용자 지정 속성을 사용하여 배경 색상, 텍스트 색상 및 테두리 스타일을 설정합니다. 래퍼는 더 큰 화면에서 여백, 패딩 및 위치를 조정하며, 캡션 및 소셜 미디어 버튼과 같은 요소를 숨기거나 표시하는 규칙을 포함합니다. 헤드라인과 메타 정보는 특정 글꼴과 색상으로 스타일링되며, 인터랙티브 요소에는 사용자 참여를 위한 호버 효과가 있습니다. 미디어 쿼리는 모바일에서 데스크톱 뷰까지 디자인이 적응하도록 보장합니다.
이 CSS 코드는 "furniture-wrapper" 클래스를 가진 컨테이너 내부의 요소에 대한 스타일을 정의합니다. 메타 요소와 스탠드퍼스트 단락에 대해 연한 회색(#dcdcdc)으로 텍스트 색상을 설정하고, 다크 모드 또는 필라 테마에 적응하는 링크 색상에 사용자 지정 속성을 사용합니다. 스탠드퍼스트 섹션의 링크는 특정 오프셋과 색상으로 밑줄이 그어지며, 테두리와 배경 이미지가 제거됩니다.
더 큰 화면(min-width: 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" 글꼴 패밀리에 대한 여러 글꼴 면을 정의하며, 각각 semibold(600)에서 black(900)까지 다양한 두께와 스타일(일반 및 이탤릭)을 가집니다. 각 글꼴에 대해 WOFF2, WOFF, TrueType 형식의 소스 URL을 지정합니다. 또한 "Guardian Titlepiece" 글꼴을 굵은 두께(700)와 일반 스타일로 정의합니다.
코드는 또한 사용자의 선호 색상 구성표 또는 iOS 또는 Android 기기에서 사이트를 볼 때를 기준으로 조정되는 다크 모드 배경 및 피처 색상에 대한 CSS 사용자 지정 속성(변수)을 설정합니다. iOS 및 Android 플랫폼에서 아톰이나 사인인 게이트와 같은 특정 요소 뒤에 오는 기사 컨테이너 내 단락의 첫 글자에 대한 특정 스타일링을 포함합니다.
Android 기기의 경우 표준 및 댓글 기사의 첫 번째 단락의 첫 글자는 보조 필라 색상으로 스타일링됩니다. iOS와 Android 모두에서 기사 헤더는 숨겨지고, 가구 래퍼에는 특정 패딩이 있습니다. 가구 래퍼 내의 레이블은 헤드라인 스타일의 굵고 대문자화된 글꼴을 새로운 필라 색상으로 사용합니다. 헤드라인은 32px, 굵게, 아래쪽 패딩 및 어두운 색상으로 설정됩니다. 가구 래퍼의 이미지는 상대적으로 위치하며, 여백과 너비가 조정되고, 내부 요소, 이미지 및 링크가 그에 따라 스타일링됩니다.
Android 기기의 경우 기사 컨테이너 내의 이미지는 투명한 배경을 가지도록 설정되며, 스크롤바를 제외한 전체 뷰포트 너비를 차지하고 높이를 자동으로 조정합니다.
iOS와 Android 모두에서 기사 요약 섹션에는 각각 4px과 24px의 위아래 패딩이 있으며, 오른쪽 여백 오프셋은 -10px입니다.
이러한 요약의 텍스트는 Guardian Headline 글꼴 패밀리 또는 유사한 세리프 글꼴을 사용합니다.
요약 내의 링크는 특정 색상으로 스타일링되며 6px 오프셋으로 밑줄이 그어지고, 밑줄에 지정된 색상을 사용하며 배경 이미지나 테두리가 제거됩니다. 호버 시 밑줄 색상이 링크 색상과 일치하도록 변경됩니다.
또한, 두 운영 체제의 기사 내 메타데이터 섹션에는 일관된 스타일링이 있습니다.
Android 기기의 경우 표준 및 댓글 기사 컨테이너의 메타 섹션에는 여백이 없습니다.
iOS 기기의 경우 피처, 표준 및 댓글 기사의 바이라인과 작성자 정보는 새로운 필라 색상을 사용합니다. 이는 Android 기기의 피처 기사에도 적용됩니다.
iOS와 Android 모두에서 피처, 표준 및 댓글 기사의 기타 메타 섹션에는 패딩이 없으며, SVG 아이콘은 새로운 필라 색상을 사용합니다.
iOS와 Android의 피처, 표준 및 댓글 기사에서 쇼케이스 요소의 캡션 버튼은 플렉스 컨테이너로 표시되며, 5px 패딩, 28px 너비와 높이로 중앙에 위치하며 오른쪽에서 14px 떨어져 있습니다.
iOS와 Android의 피처, 표준 및 댓글 기사의 기사 본문에는 왼쪽과 오른쪽에 각각 12px 패딩이 있습니다.
iOS 및 Android 기기의 경우 피처, 표준 및 댓글 기사 컨테이너에서 썸네일이나 몰입형이 아닌 이미지는 여백이 없으며, 전체 뷰포트 너비에서 24px와 스크롤바 너비를 뺀 너비와 자동 높이를 가집니다. 캡션에는 패딩이 없습니다.
이러한 컨테이너의 몰입형 이미지는 스크롤바 너비를 제외한 전체 뷰포트 너비를 차지합니다.
기사 본문의 인용 블록쿼트는 새로운 필라 색상을 사용하는 색상 마커를 표시합니다.
기사 본문 내의 링크는 기본 필라 색상으로 스타일링되며 오프셋으로 밑줄이 그어지고, 밑줄에 헤더 테두리 색상을 사용합니다. 호버 시 밑줄 색상이 새로운 필라 색상으로 변경됩니다.
다크 모드에서 가구 래퍼 배경은 어두운 회색(#1a1a1a)으로 설정됩니다.
iOS 및 Android 기기의 경우 피처, 표준 및 댓글 기사 컨테이너에 다음 스타일이 적용됩니다:
- 콘텐츠 레이블은 새로운 필라 색상을 사용합니다.
- 헤드라인에는 배경이 없으며 헤더 테두리 색상을 사용합니다.
- 스탠드퍼스트 단락과 링크는 헤더 테두리 색상을 사용합니다.
- 메타 섹션의 작성자 이름과 링크는 새로운 필라 색상을 사용합니다.
- 메타 섹션의 아이콘은 새로운 필라 색상의 스트로크를 가집니다.
- 쇼케이스 이미지의 캡션은 데이트라인 색상을 사용합니다.
- 기사 본문의 인용 블록쿼트...
iOS 및 Android 기기의 경우 기사 본문의 인용 블록 텍스트 색상은 새로운 필라 색상으로 설정됩니다.
또한, iOS와 Android의 다양한 기사 본문 섹션에 대한 배경 색상이 어두운 배경으로 변경되며, 다른 스타일을 재정의하도록 important 플래그가 사용됩니다.
더 나아가, iOS의 기사 본문에서 특정 요소 뒤에 오는 첫 글자에 대해 특별한 스타일링이 적용되지만, 정확한 스타일은 여기에 지정되지 않았습니다.
이는 iOS 및 Android 플랫폼의 다양한 기사 컨테이너에서 특정 요소 뒤에 오는 단락의 첫 글자를 대상으로 하는 CSS 선택자로 보입니다. 선택자는 기사 본문, 피처 본문, 댓글 섹션 및 인터랙티브 콘텐츠 영역과 같은 다양한 섹션에 적용되며, "element-atom" 클래스를 가진 요소나 사인인 게이트 뒤에 오는 단락을 특정히 찾습니다.
이 CSS 코드는 Android 및 iOS 기기의 특정 요소에 대한 스타일을 정의합니다. 특정 요소 뒤에 오는 단락의 첫 글자 색상을 흰색이나 사용자 지정 변수 색상으로 설정합니다. 또한 댓글 기사의 스탠드퍼스트 요소에 대한 패딩과 여백을 조정하고, h2 제목의 글꼴 크기를 설정하며, 캡션 버튼의 패딩을 수정합니다.
다크 모드의 경우 텍스트와 아이콘 색상을 더 밝은 색조로 변경하고 어두운 배경 색상을 정의합니다. 또한 기사 헤더를 완전히 투명하게 만들어 숨기고 가구 래퍼에 스타일을 적용하지만, 후자에 대한 코드는 불완전합니다.
iOS 및 Android 기기의 경우 기사 컨테이너의 가구 래퍼에는 여백이 없습니다. 이 래퍼 내에서 피처, 표준 및 댓글 기사의 콘텐츠 레이블은 새로운 필라 색상 변수로 정의된 색상을 사용하며, 다크 모드 피처 색상을 기본값으로 합니다.
이러한 기사의 헤드라인은 연한 회색(#dcdcdc)으로 설정되고 important로 표시됩니다.
기사 헤더의 링크나 제
