커뮤니티

고용노동부, 산업인력공단과 함께하는 강원도 유일한 기업중심 IT전문교육기관 ICT융합캠퍼스만의 특별한교육입니다.
공인 IT숙련기술인의 다양한 접근방법으로 전문가다운 실무교육을 받을 수 있습니다.

Category

교육강좌

클라이언트 겁나 빠른 웹 레시피 - 섬네일(Thumbnail)

페이지 정보

작성자 관리자 댓글 0건 조회 6,288회 작성일 20-06-02 16:39

본문

섬네일(Thumbnail)

소개

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

 

사용기술

  • html
  • css

관련 기술

 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>

 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

답변목록

등록된 답변이 없습니다.