겁나 빠른 웹 레시피

섬네일(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. jeisyoon
    2021.06.29 Thumbnail - OK
  2. 늦은나이가아님
    2020.12.15 감사합니다
  3. 알파고잉
    쉬우면서도 학습의 효과가 두드러지는 좋은 예제입니다!
    복잡함에 좌절감을 느끼시는 분들은 여기서 힘을 얻고 가세요~^^
  4. Nudger
    2016.10.04 봤어요~
  5. sugarui
    감사합니다!
버전 관리
egoing@gmail.com
현재 버전
선택 버전
graphittie 자세히 보기