이미지

이미지가 기본 콘텐츠 열보다 넓은 경우(작은 화면에서 자주 발생) DevSite는 자동으로 열 너비로 제한합니다. 그러나 이미지에 width 및 height 속성이 모두 설정된 경우 너비만 크기가 조절되어 이미지가 왜곡됩니다. 따라서 이미지의 height를 설정하지 마세요. 즉, 이미지 로드가 느려 페이지가 다시 그려질 수 있습니다 (이로 인해 화면이 깜박임). 하지만 화면에 맞지 않는 이미지보다는 낫습니다.

이미지에 class="screenshot"를 적용하여 주변 텍스트에서 이미지를 오프셋하는 테두리를 지정할 수 있습니다. 이는 일반적으로 흰색 배경이 있고 그렇지 않으면 페이지에서 사라지는 스크린샷에 사용됩니다. 필요하지 않은 이미지에는 사용하지 마세요.

텍스트 옆에 배치

오른쪽 이미지에는 class="attempt-right"도 있습니다. 이 속성은 큰 화면에서는 이미지를 오른쪽으로 플로팅하지만, 작은 화면(태블릿 및 그 이하)에서는 오른쪽으로 플로팅하면 문제가 발생하므로 이미지를 세로 레이아웃으로 강제합니다. class="attempt-left"도 사용할 수 있습니다. attempt-left와 attempt-right를 함께 사용하려면 attempt-left 요소가 먼저 나오도록 합니다.

이미지가 플로팅된 경우 열 너비의 50% 를 초과할 수 없습니다. 그렇다면 크기가 조정됩니다.

<img src="/path/to/image.png" alt="Alert dialog"
     class="screenshot attempt-right">

동일한 클래스를 사용하여 이미지와 자막이 모두 포함된 <figure>와 같은 다른 요소를 플로팅할 수도 있습니다.

<figure class="attempt-right">
  <img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
  <figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>

플로팅 텍스트 지우기

텍스트가 플로팅된 요소를 둘러싸지 않고 기본 너비로 표시되지 않도록 하려면 플로팅된 요소 뒤에 오는 영향을 받는 요소에 clear 클래스를 추가하면 됩니다.

<p class="clear">Hello world.</p>

clear 클래스의 예

이 예시에서 두 번째 단락에는 clear 클래스가 포함되어 있습니다.

이 단락은 플로팅된 이미지를 중심으로 줄바꿈됩니다 . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

이 단락에는 명확한 클래스가 있으며 플로팅된 이미지를 둘러싸지 않습니다. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

clear 클래스가 없는 예

이 예에서는 두 단락 모두 플로팅된 이미지를 중심으로 줄바꿈됩니다.

이 단락은 플로팅된 이미지를 중심으로 줄바꿈됩니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

이 단락은 플로팅된 이미지를 중심으로 줄바꿈됩니다. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

어두운 테마 이미지

DevSite는 어두운 테마가 사용 설정된 경우 이미지에 적용하여 모양을 수정할 수 있는 클래스 이름을 제공합니다.

이미지 어둡게 처리

기본적으로 SVG 파일을 제외한 모든 이미지는 어두운 테마에서 약간 어두워집니다.

어두운 테마가 사용 설정된 경우 이미지에서 기본 어둡게 처리를 삭제하려면 이미지에 no-filter 클래스를 추가합니다.

<img src="/path/to/image.jpg" class="no-filter" alt="">

이미지 반전

검은색 또는 어두운 모노크롬 색상 팔레트가 있는 이미지의 경우 이미지에 invert 클래스를 추가하여 어두운 테마에서 흰색/밝은 색상으로 표시되도록 합니다.

<img src="/site-assets/logo-github.png" class="invert" alt="">

_index.yaml 페이지의 경우 행 항목의 classname 필드에 invert를 추가합니다.

- items:
  - classname: invert
    icon:
      path: /site-assets/logo-github.png

별도의 어두운 테마 변형 이미지

어두운 테마가 사용 설정된 경우에만 표시되는 별도의 이미지를 제공하려면 기존 <img> 요소를 <picture> 요소로 래핑하고 어두운 테마 변형에 <source> 요소를 추가합니다.

아래 예시에서는 <picture> 요소 내에 Google 워드마크의 SVG 파일이 두 개 있습니다. 어두운 테마가 사용 중지되면 <img> 요소 내의 이미지 파일이 표시되어 Google 브랜드 색상 4가지로 구성된 워드마크를 보여줍니다. 어두운 테마가 사용 설정되면 <source> 요소 내의 이미지 파일이 표시되며, 이때 워드마크는 완전히 흰색이고 브랜드 색상이 없습니다.

예

코드

<picture>
  <source
    srcset="/devsite/images/google-dark-theme.svg"
    media="(prefers-color-scheme: dark)"
    class="devsite-dark-theme"
    alt="">
  <img src="/devsite/images/google.svg" alt="">
</picture>

참고

어두운 테마는 기능 플래그 뒤에서 사용 설정되므로 <source> 요소의 속성에 관해 다음 사항에 유의하세요.

<source> 요소에는 DevSite 프런트엔드가 사용자가 선택한 어두운 테마 옵션(light, dark, device)에 따라 미디어 속성과 값을 업데이트할 수 있는 후크를 제공하는 devsite-dark-theme 클래스가 포함되어야 합니다. media 속성의 값에는 (prefers-color-scheme: dark) 미디어 쿼리가 포함되어야 합니다. 미디어 속성에 media 쿼리가 있는 <source> 요소가 이미 있는 경우 기존 미디어 쿼리에 and (prefers-color-scheme: dark)를 추가하거나 미디어 속성 값이 (prefers-color-scheme: dark)인 새 <source> 요소를 추가합니다. media 쿼리 및 값은 사용자가 선택한 어두운 테마 옵션에 따라 삭제되거나 대체됩니다. srcset 속성의 어두운 테마 변형 이미지의 파일 이름은 기술적으로 무엇이든 될 수 있지만 기존 이미지의 파일 이름에 -dark-theme를 추가하는 것이 좋습니다.