이 CSS 코드는 "Guardian Headline Full" 글꼴 패밀리를 다양한 스타일과 두께로 정의합니다. 라이트(300), 일반(400), 미디엄(500), 세미볼드(600) 버전을 각각 일반체와 이탤릭체 스타일로 포함하며, 글꼴 파일은 Guardian의 웹 자산에서 WOFF2, WOFF, TrueType 형식으로 제공됩니다.
이 CSS 코드는 Guardian 웹사이트를 위한 여러 글꼴 패밀리를 정의하며, 각각의 두께와 스타일에 해당하는 파일 형식(WOFF2, WOFF, TTF)을 지정합니다. 또한 반응형 디자인을 위한 미디어 쿼리를 포함해 스크립팅 상태, 사용자 모션 선호도, 화면 크기에 따라 스타일을 조정합니다. 추가로 색상 변수, 인터랙티브 요소를 위한 레이아웃 속성, 크레딧 카드와 영화 프로모션 같은 컴포넌트의 특정 스타일을 설정하여 기기 간 일관된 외관을 보장합니다.
크레딧 카드의 텍스트 요소는 특정 글꼴과 크기를 사용합니다. 크레딧 카드 내 링크와 단락은 인라인-블록으로 표시되며, 세리프 글꼴, 24px, 볼드 두께, 115% 행간, 하단 여백 20px, 콘텐츠에 맞는 최대 너비를 가집니다. 단락은 소문자로 설정되고 일반 자간을 사용합니다.
크레딧 카드 내 제목은 절대 위치로 중앙에 배치되며, 산세리프 글꼴, 14px, 대문자 텍스트, 2px 자간을 사용합니다. 카드 내 다른 단락들도 동일한 산세리프 글꼴과 크기를 사용하며, 일부는 대문자 스타일과 자간을 가집니다.
크레딧 카드의 링크는 세리프 글꼴, 크기, 두께, 행간, 여백, 최대 너비 속성을 공유하며, 흰색으로 표시되고 호버 시 밑줄이 없습니다. 마지막 링크는 하단 여백이 없습니다. 카드의 컨테이너는 절대 위치로 중앙에 배치되고, 플렉스박스를 사용해 항목을 수직으로 정렬합니다.
크레딧 카드 내 iframe은 뷰포트 너비의 85%, 16:9 종횡비, 최대 너비 680px, 하단 여백 12px을 가집니다.
인터랙티브 갤러리 래퍼는 최소 및 고정 높이가 뷰포트 높이로 설정되고, 어두운 배경, 중앙 정렬, 큰 화면 크기에서 조정되는 음수 여백을 가집니다. 고정 요소를 포함할 때 정렬이 재설정됩니다.
인터랙티브 갤러리 자체는 뷰포트를 기반으로 한 너비, 화면 크기에 따라 변경되는 최대 너비, 중앙 위치, 흰색 텍스트, 플렉스 디스플레이, 뷰포트 높이의 60% 최대 높이, 숨겨진 오버플로우, 테두리, 둥근 모서리를 가집니다. 하단에 그라데이션 오버레이를 포함하고 링크에 대한 포인터 이벤트를 비활성화합니다. 그림과 캡션은 성능에 최적화되어 있습니다.
갤러리의 내부 컨테이너는 상대 위치를 가지며 너비를 조정합니다. 고정 모드일 때는 전체 뷰포트를 검은색 배경으로 덮고, 고정 위치, 스크롤 활성화, 테두리나 둥근 모서리가 없습니다. 고정 모드 내 텍스트 요소는 특정 패딩, 최대 너비, 색상 설정을 가지며, 그림은 전체 크기로 조정되고 여백과 불투명도가 조정됩니다. 고정 모드의 이미지는 최대 너비 980px이며 중앙에 위치합니다.
이 CSS 코드는 인터랙티브 갤러리의 스타일을 정의합니다. 이미지와 비디오가 반응형 디자인으로 올바르게 표시되도록 보장하며, 다양한 화면 크기에 적응합니다. 제목과 캡션 같은 텍스트 요소는 일관성을 위해 특정 글꼴, 크기, 색상을 가집니다. 갤러리는 오버레이를 열고 닫는 버튼과 같은 인터랙티브 기능을 포함하며, 더 나은 사용자 경험을 위한 호버 효과가 있습니다. 비디오는 컨테이너를 완전히 덮도록 설정되고, 캡션은 명확하고 가독성 있게 스타일링됩니다. 레이아웃은 모바일과 데스크톱 뷰 모두에 최적화되어 깔끔하고 매력적인 프레젠테이션을 유지합니다.
이 CSS 코드는 비디오 배경과 텍스트 오버레이가 있는 전체 화면 인터랙티브 헤더의 스타일을 정의합니다. 요소들을 전체 뷰포트를 덮도록 위치시키고, 특정 컴포넌트를 숨기며, 다양한 화면 크기에 대해 여백과 패딩을 조정합니다. 헤더 텍스트는 반투명 배경과 함께 하단 중앙에 위치하며, 큰 화면에서 변경되는 특정 글꼴과 크기를 사용합니다. 헤드라인은 "인터뷰" 레이블을 포함하고, 부분으로 나뉘어 시각적 정렬을 위해 여백이 조정됩니다.
메인 인터랙티브 컬럼의 헤더에서, 헤드라인의 두 번째 부분은 17px 글꼴 크기, 125% 행간, 패딩 없음, 일반 글꼴 두께, 최대 너비 280px, 중앙 정렬을 가집니다. 46.25em보다 넓은 화면에서 글꼴 크기는 20px로 증가하고 최대 너비는 335px로 변경됩니다. 이 부분 내 이름들은 이탤릭체로 표시됩니다.
스탠드퍼스트 섹션은 패딩이 없으며, 그 단락들은 흰색입니다. 메타 섹션은 최대 너비가 없고, 소셜 링크와 버튼은 호버 시 검은색으로 변하며 밑줄이 없고, 아이콘도 검은색으로 변경됩니다. 댓글 기능은 숨겨지고, 바이라인 링크는 테두리가 없습니다.
앱 렌더링에서, 헤더 래퍼의 높이는 전체 뷰포트 높이로 설정됩니다. 비디오 커버 카드는 절대 위치로 전체 영역을 덮으며, 반투명 검은색 배경과 콘텐츠 배분을 위한 플렉스 레이아웃을 가집니다. 포스터 비디오는 50% 밝기로 어둡게 처리됩니다. 커버 콘텐츠는 중앙에 위치하며, 설명은 상하 여백과 최대 너비 80%(더 넓은 화면에서 400px)를 가집니다. 텍스트는 특정 산세리프 글꼴, 대문자에 자간, 흰색이며, 제목은 일반 두께를 가집니다. 타이틀은 중앙 정렬되고 흰색입니다.
비디오 컨트롤에는 원형 테두리가 있는 중앙 재생 버튼, 흰색 텍스트와 아이콘이 포함되며, 호버 시 어두운 텍스트로 변경됩니다. 스냅 비디오 래퍼는 상대 위치를 가집니다.
화면이 최소 740픽셀 넓을 때, 비디오 래퍼는 측면 여백이 없습니다. 내부 비디오 컨테이너는 0.5초 동안 부드럽게 페이드 인/아웃됩니다. 앱 디스플레이의 경우, 헤더와 비디오 래퍼 모두 전체 화면 높이로 설정되어 웹 및 iOS 뷰에 적응합니다.
페이지 네비게이션을 위한 점 세트는 오른쪽에 고정되어 수직 중앙에 위치하며, 작은 간격으로 열로 배열됩니다. 부드럽게 나타나고 다른 콘텐츠 위에 있습니다. 더 넓은 화면에서 그 위치는 콘텐츠 중앙에 정렬되도록 조정됩니다. 각 점은 작고 둥근 사각형이며, 호버 또는 활성 상태에서 색상이 변경됩니다.
네비게이션 화살표는 오른쪽 하단에 고정되지만 더 큰 화면에서만 표시됩니다. 흐림 효과가 있는 어두운 배경의 둥근 버튼으로 스타일링되며, 호버 시 외관이 변경됩니다. 그 위치도 화면 너비에 따라 이동하여 중앙에 유지됩니다.
갤러리 및 비디오 컨트롤을 위한 인터랙티브 버튼은 호버 시 색상이 밝아지고, 텍스트와 아이콘이 어두워집니다.
크레딧:
인터뷰 및 촬영: David Levene
멀티미디어 편집: Laurence Topham
디자인 및 개발: Harry Fischer와 Pip Lev
사진 편집: Matt Fidler
사진 총괄: Fiona Shields
"Love+War"는 2025년 11월 7일부터 Disney+와 National Geographic에서 이용 가능합니다.
2003-2004년 이라크 콘텐츠:
회고: "나는 너무 어리고 순진했습니다"
이라크와 아프가니스탄 취재 포함.
경고: 일부 이미지는 시청자에게 불편감을 줄 수 있습니다.
전체 화면 이미지:
1. 2003년 5월, 이라크 바스라에서 가스 공장 화재 연기 속에서 남편을 찾는 이라크 여성. 사진: Lynsey Addario.
2. 2004년 11월 13일, 팔루자 전투 중 발라드 병원에서 후송 비행기로 버스로 수송되는 부상당한 미군 병사들. 사진: Lynsey Addario/Getty Images.
3. 2007년 10월 23일, 아프가니스탄 코렝갈 계곡에서 173rd Battle Company의 부상당한 병사를 운반하는 미국 해병대원들. 사진: Lynsey Addario.
4. 2009년 11월, 아프가니스탄 바다흐샨 주에서 어머니와 함께 진통을 겪는 18세 Noor Nisa. 그녀 남편의 첫 번째 아내는 출산 중 사망했습니다. 아기가 예정일이어서, 그는 그녀를 마을에서 4시간 거리인 병원으로 차로 데려가려 했습니다. 빌린 차가 고장 나자, 제가 나서서 그들을 병원으로 데려갔고, Noor는 여아를 출산했습니다.
2010년 4월 29일, 아프가니스탄 헬만드 주 캠프 델리의 전방 작전 기지에서 돌아온 후 무기를 청소하는 24세의 HM2 군의관 Elena Woods와 함께 여성 교류 팀의 미국 해병대원들이 보여집니다. 이 팀들은 해병 보병대와 협력하여 아프가니스탄 여성들과 연결했습니다.
2010년 5월 3일, 아프가니스탄 남부 헬만드의 라카리 마을에서 의료 봉사 중 아프가니스탄 여성들의 생체 신호를 확인하는 Lisa Gardner 상병. 문화적 규범 때문에 헬만드의 많은 여성들은 집을 떠나거나 남자 의사를 만날 수 없어, Gardner는 그들의 증상을 기록하고 의사에게 정보를 전달해 기본 진단 후 약을 제공했습니다.
2013년 8월 21일, 수천 명의 시리아인들이 이라크 북부 다후크의 사헬라 국경 근처에서 이라크로 넘어왔습니다. UN 난민 기구는 그 주 전에 국경이 재개된 이후 30,000명 이상이 들어왔다고 보고했으며, 매일 3~4천 명이 넘어왔습니다. 대부분은 폭력, 경제적 어려움, 전기, 물, 식량 같은 필수품 부족에서 도망친 쿠르드 난민들이었습니다.
2004년부터 2009년까지 다르푸르에서 정부는 자신의 국민을 죽인 것으로 비난받았습니다.
2004년 8월 18일, 차드 바하이에서 차드 소녀들이 모래폭풍을 견딥니다. 수단 국경에서 약 7km 떨어진 곳입니다. 많은 난민들이 다르푸르 분쟁이 계속되는 동안 수단에서 차드로 도망쳤습니다.
Lynsey Addario는 2004년 8월 19일, 다르푸르의 일부를 통제하던 수단 해방군 반군들을 촬영했습니다.
2004년 8월 21일, SLA 병사들이 다르푸르에서 진흙에 빠진 트럭 옆에서 기다립니다. 그들은 민간인 공격에 항의하며 나이지리아에서의 평화 회담을 보이콧했고, 6개 마을에서 75명이 사망했다고 주장했습니다. 2003년 2월 분쟁이 시작된 이후 최대 5만 명이 사망했고, 100만 명 이상이 Janjaweed 민병대를 두려워해 집을 떠났습니다.
2004년 8월 24일, SLA 병사들이 다르푸르 파라와이야에서 민간인 공격으로부터 시체를 지나갑니다. 5개 마을의 남자들이 정부군이 지원하는 Janjaweed에 의해 살해된 것으로 알려진 후 협곡에서 16구의 시체가 발견되었습니다.
2005년 11월, 아프리카 연합 병사들이 니알라 북쪽에서 정부군이 지원하는 아랍 유목민들의 공격으로 한 주 이상이 지나도 아직 연기가 나는 타마 마을을 발견했습니다. AU는 순찰과 조사를 시도했지만, 생존자들은 인근 마을로 도망쳤고, 접근하는 차량에 총을 쏜 유목민들에 의해 차단되었습니다. 다르푸르의 수백 개 마을이 아랍 유목민들에 의해 불타고 약탈되었습니다.
2008년 2월 28일, 서다르푸르에서 수단 정부에 의해 최근 폭격되고 낙타, 말, 당나귀를 탄 Janjaweed에 의해 공격받은 실레아 마을. 폭격은 매복에 대한 대응이었습니다. 두 달 전, Justice and Equality Movement의 반군들이 통제권을 잡았고, 정보에 따르면 그들이 이 마을들에 살며 기지로 사용하고 있었습니다. 사진: Lynsey Addario/Getty Images
전체 화면으로 이미지 보기: 2008년 2월, 실레아 마을에서 국제 인도주의 기구들의 구호품을 기다리는 수단 여성들. 사진: Lynsey Addario
리비아 2011
'금속이 귀를 스치며 날아가는 소리를 들을 수 있었다'
경고: 다음 사진은 일부 시청자에게 불편감을 줄 수 있습니다
전체 화면으로 이미지 보기: 2011년 2월 26일, 리비아 벵가지에서 Muammar Gaddafi 대령에 반대하는 리비아인들의 시위. 반대 세력과 Gaddafi 충성파들 간의 충돌이 전국에서 계속되었습니다. 사진: Lynsey Addario for The New York Times
전체 화면으로 이미지 보기: 2011년 2월 28일, 동리비아 벵가지 인근에서 불타는 차 근처에서 놀고 있는 아이들. 반대 세력과 친 Gaddafi 세력 간의 위험한 대치가 계속되었습니다. 사진: Lynsey Addario for The New York Times
전체 화면으로 이미지 보기: 2011년 3월 4일, 리비아 브레가에서 Gaddafi 충성파 군대와 교전하는 반대군 병사들. 사진: Lynsey Addario/Getty Images
전체 화면으로 이미지 보기: 2011년 3월 5일, Ras Lanuf 서쪽에서 Gaddafi의 군대에서 도시를 탈환한 것을 축하하며 Gaddafi의 초상화를 쏘는 반대군 병사들. 사진: Lynsey Addario/Getty Images
전체 화면으로 이미지 보기: 2011년 3월 11일, Ras Lanuf 정유소 근처 주요 검문소에 정부 공중 폭격이 떨어
