Image

Image

Image 요소는 페이지에서 이미지를 다양한 형태와 크기로 표시해요. 아바타, 테두리, 유동(fuild) 너비, 둥근·원형 처리, 정렬, 크기 등 여러 변형을 제공해요.

출처: Image

본문

Types

Image

기본 이미지예요

Image Link

이미지는 다른 콘텐츠로 연결되도록 포맷할 수 있어요

States

Hidden

이미지는 숨길 수 있어요

Disabled

이미지는 비활성화되어 선택할 수 없다는 것을 보여줄 수 있어요

Variations

Avatar

이미지는 텍스트와 함께 인라인으로 나타나는 아바타로 포맷될 수 있어요

Username

Bordered

이미지는 흰색 또는 투명 콘텐츠의 가장자리를 강조하기 위해 테두리를 포함할 수 있어요

Fluid

이미지는 컨테이너의 너비만큼 차지할 수 있어요

Rounded

이미지는 둥글게 나타날 수 있어요

Circular

이미지는 원형으로 나타날 수 있어요

Vertically Aligned

이미지는 수직 정렬을 지정할 수 있어요

Top Aligned
    
    
    Middle Aligned
    
    
    Bottom Aligned

Centered

이미지는 콘텐츠 블록의 중앙에 나타날 수 있어요

Spaced

이미지는 주변 콘텐츠와 분리되도록 추가 간격이 필요함을 지정할 수 있어요

Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.

Floated

이미지는 다른 콘텐츠의 왼쪽이나 오른쪽에 위치할 수 있어요

Size

이미지는 다양한 크기로 나타날 수 있어요

Class Name
          Size
        
      
      
        
          Mini
          35px
        
        
          Tiny
          80px
        
        
          Small
          150px
        
        
          Medium
          300px
        
        
          Large
          450px
        
        
          Big
          600px
        
        
          Huge
          800px
        
        
          Massive
          960px

Groups

Size

이미지 그룹은 모두 동일한 크기로 포맷될 수 있어요.

더 알아보기

Image는 콘텐츠에서 이미지를 깔끔하게 다루기 위한 요소예요. 크기와 정렬 변형을 활용하면 아바타부터 배너까지 다양한 용도로 유연하게 쓸 수 있어요.