블로그 사용안내 - 이미지

figure > figcaption 구조

  
  {% include image.html url='/assets/images/mhead_bg.jpg' description='너비값(width)은 생략 가능' alt='' width='300' %}

왼쪽/오른쪽으로 띄우기

  
  {% include image.html url='/assets/images/mhead_bg.jpg' description='왼쪽으로 띄우려면 align="left"' alt='' width='300' align='left' %}

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat deserunt cumque at laboriosam alias, ab quaerat amet unde aliquam omnis commodi quia nobis nisi reprehenderit repudiandae mollitia perspiciatis inventore. Laborum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat deserunt cumque at laboriosam alias, ab quaerat amet unde aliquam omnis commodi quia nobis nisi reprehenderit repudiandae mollitia perspiciatis inventore. Laborum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat deserunt cumque at laboriosam alias, ab quaerat amet unde aliquam omnis commodi quia nobis nisi reprehenderit repudiandae mollitia perspiciatis inventore. Laborum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat deserunt cumque at laboriosam alias, ab quaerat amet unde aliquam omnis commodi quia nobis nisi reprehenderit repudiandae mollitia perspiciatis inventore.

  
  {% include image.html url='/assets/images/mhead_bg.jpg' description='오른쪽으로 띄우려면 align="right"' alt='' width='300' align='right' %}

p + em 구조

  ![alt text](/jekyll-theme-tidyred/assets/images/mhead_bg.jpg){:style="width:300px"}
  *너비값(width)은 생략가능*

alt text 너비값(width)은 생략가능

왼쪽/오른쪽으로 띄우기

  {:.float-left}
  ![alt text](/jekyll-theme-tidyred/assets/images/mhead_bg.jpg){:style="width:300px"}
  *왼쪽으로 띄우려면 .float-left 클래스 사용*

alt text 왼쪽으로 띄우려면 .float-left 클래스 사용

  {:.float-right}
  ![alt text](/jekyll-theme-tidyred/assets/images/mhead_bg.jpg){:style="width:300px"}
  *오른쪽으로 띄우려면 .float-right 클래스 사용*

alt text 오른쪽으로 띄우려면 .float-right 클래스 사용

다수 이미지

  <div class="page__image-container">
    
    {% include image.html url='/assets/images/mhead_bg.jpg' description='너비값(width)은 생략 가능' alt='' %}
    {% include image.html url='/assets/images/mhead_bg.jpg' description='너비값(width)은 생략 가능' alt='' %}
    {% include image.html url='/assets/images/mhead_bg.jpg' description='너비값(width)은 생략 가능' alt='' %}
    {% include image.html url='/assets/images/mhead_bg.jpg' description='너비값(width)은 생략 가능' alt='' %}
    {% include image.html url='/assets/images/mhead_bg.jpg' description='너비값(width)은 생략 가능' alt='' %}
    
  </div>

  {:.page__image-container}
  ![alt text](/jekyll-theme-tidyred/assets/images/mhead_bg.jpg){:style="max-height: 400px"}
  ![alt text](/jekyll-theme-tidyred/assets/images/mhead_bg.jpg){:style="max-height: 400px"}
  ![alt text](/jekyll-theme-tidyred/assets/images/mhead_bg.jpg){:style="max-height: 400px"}
  ![alt text](/jekyll-theme-tidyred/assets/images/mhead_bg.jpg){:style="max-height: 400px"}
  ![alt text](/jekyll-theme-tidyred/assets/images/mhead_bg.jpg){:style="max-height: 400px"}

alt text

p + em 구조의 경우 이미지에 em, figcaption 같은 설명 마크업 사용 불가 및 높이값은 inline styles로 정의.

Hero image from Wokandapix