젊은리버럴: 새 문서: {{설명문서 안내}} {{틀|{{BASEPAGENAME}}}} 틀은 이미지를 일부 잘라내 표시해주는 기능을 합니다. 다만, 전체 크기의 이미지가 백과사전에 좀 더 부합할 수 있습니다. 표시되지 않는 부분에 대한 데이터도 전송됩니다.(=잘라낸 이미지를 새 파일로 올리는 것이 좋습니다.) === 사용 방법 ===

 {{CSS image crop |Image = 파일 이름 |bSize = 원본 이미지의 너비 |cWidth = 잘라낼 이미...

2024-07-19T11:34:44Z

새 문서: {{설명문서 안내}} {{틀|{{BASEPAGENAME}}}} 틀은 이미지를 일부 잘라내 표시해주는 기능을 합니다. 다만, 전체 크기의 이미지가 백과사전에 좀 더 부합할 수 있습니다. 표시되지 않는 부분에 대한 데이터도 전송됩니다.(=잘라낸 이미지를 새 파일로 올리는 것이 좋습니다.) === 사용 방법 === <pre> {{CSS image crop |Image = 파일 이름 |bSize = 원본 이미지의 너비 |cWidth = 잘라낼 이미...

새 문서

{{설명문서 안내}}
{{틀|{{BASEPAGENAME}}}} 틀은 이미지를 일부 잘라내 표시해주는 기능을 합니다.

다만, 전체 크기의 이미지가 백과사전에 좀 더 부합할 수 있습니다. 표시되지 않는 부분에 대한 데이터도 전송됩니다.(=잘라낸 이미지를 새 파일로 올리는 것이 좋습니다.)

=== 사용 방법 ===
<pre>
{{CSS image crop
|Image = 파일 이름
|bSize = 원본 이미지의 너비
|cWidth = 잘라낼 이미지의 너비
|cHeight = 잘라낼 이미지의 높이
|oTop = 위쪽에서 부터 잘라내기할 시작 위치 지정, 생략시 기본값=0
|oLeft = 왼쪽에서 부터 잘라내기할 시작 위치 지정, 생략시 기본값=0
|Location = 문서에 이미지를 둘 위치를 지정. right, left, center, none
Description(설명)을 사용하면 오른쪽에 정렬되고, 그렇지 않은 경우에는 왼쪽에 정렬됨.
|Description = 이미지에 대한 설명, 섬네일 형식으로 표시되면서 설명이 표시됨.
|Link = 링크, 링크를 클릭하였을 때 연결될 문서를 지정.
|Alt = 이미지 대체 설명(Alternative text)
|Page = The page of the file, if there are multiple pages (such as pdf files).
|magnify-link = The image to be linked by the magnify icon (Use if the Image parameter is set to
{{Annotated image}} or the Link parameter leads to something other than the image).
}}
</pre>

=== 예시 ===
* 다음 사진을 잘라내 물방울 하나만 표시할 수 있다.
** '''시작할 위치''': <code>oTop</code> 과 <code>oLeft</code> 위쪽과 왼쪽에서 각각 잘라내기를 시작할 위치를 지정
** '''자르기''': <code>cWidth</code> 과 <code>cHeight</code> 잘라낼 이미지의 크기를 지정
** '''기본 크기''': 잘라내기를 시작할 위치와 자르기하여 보여줄 이미지의 크기를 지정할 때 기본 크기를 바탕으로 함<code>bSize</code>
[[파일:Dew on grass Luc Viatour.jpg|400px|섬네일|원본]]

{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
<div style="float: left; width: 300px; margin:;">
<pre>
{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
</pre>
</div>

{{clear}}

* 위치를 지정하거나, 설명을 추가할 수 있다.
** <code>Description=</code> 설명 추가.
** <code>Location=</code> 위치를 지정(center, right, left, none)

{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 120
|cHeight = 100
|oTop = 180
|oLeft = 60
|Location = center
|Description = 잎새 위 물방울(center)
}}
<div style="float: left; width: 300px; margin:;">
<pre>{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 120
|cHeight = 100
|oTop = 180
|oLeft = 60
|Location = center
|Description = 잎새 위 물방울(center)
}}</pre>
</div><includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox |
| 
[[분류:그래픽에 관한 틀]]
}}</includeonly>

{{퍼온문서|틀:CSS image crop|||한국어 위키백과|https://ko.wikipedia.org/wiki/%ED%8B%80:CSS_image_crop}}

틀:CSS image crop/설명문서 - 편집 역사