겁나 빠른 웹 레시피

섬네일(Thumbnail)

소개

 아래와 같이 이미지의 일부를 표현해서 전체 이미지를 암시하는 방법을 섬네일이라고 합니다. 여기서는 아래와 같은 모양의 섬네일을 만드는 방법을 알아봅니다. 

 

사용기술

  • html
  • css

관련 기술

 예제

<!doctype html>
<html>
<head>
  <style>
    .thumbnail{
      background-color:gray;
      margin:10px;
      width:150px;
      height:150px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .thumbnail.round{
      border-radius: 10%;
    }
    .thumbnail.circle{
      border-radius: 100%;
    }
  </style>
</head>
<body>
  <div class="thumbnail" style="background-image:url('image/mountain.jpg')"></div>
  
  <div class="thumbnail round" style="background-image:url('image/mountain.jpg')"></div>
  
  <div class="thumbnail circle" style="background-image:url('image/mountain.jpg')"></div>
  
  <img src="image/mountain.jpg" alt="">
</body>
</html>

 

댓글

댓글 본문
작성자
비밀번호
  1. Nudger
    2016.10.04 봤어요~
  2. sugarui
    감사합니다!
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기