CSS 스타일링 이미지
CSS를 사용하여 이미지 스타일을 지정하는 방법을 배웁니다.
둥근 이미지
속성을 사용 border-radius하여 둥근 이미지를 만듭니다.
예시
둥근 이미지:
img {
border-radius: 8px;
}
예시
동그라미 이미지:
img {
border-radius: 50%;
}
썸네일 이미지
border속성을 사용 하여 축소판 이미지를 만듭니다.
썸네일 이미지:
예시
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg"
alt="Paris">
링크로 썸네일 이미지:
예시
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0
2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
<img src="paris.jpg" alt="Paris">
</a>
반응형 이미지
반응형 이미지는 화면 크기에 맞게 자동으로 조정됩니다.
효과를 보려면 브라우저 창의 크기를 조정합니다.
이미지를 축소해야 하는 경우 축소하되 원래 크기보다 크게 확대하지 않으려면 다음을 추가하세요.
예시
img {
max-width: 100%;
height:
auto;
}
팁: CSS RWD 튜토리얼 에서 반응형 웹 디자인에 대해 자세히 읽어보세요 .
이미지 중앙에 맞추기
이미지를 가운데에 맞추려면 왼쪽 및 오른쪽 여백을 로 설정 auto하고 block요소로 만듭니다.
예시
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
폴라로이드 이미지 / 카드
다섯 땅
북극광
예시
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,
0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
투명한 이미지
opacity속성은 0.0 - 1.0 사이의 값을 가질 수 있습니다 . 값이 낮을수록 더 투명해집니다.
불투명도 0.2
opacity 0.5
opacity 1
(default)
Example
img {
opacity: 0.5;
}
Image Text
How to position text in an image:
Example
Try it Yourself:
Image Filters
The CSS filter property adds visual effects (like blur and saturation) to an element.
Note: The filter property is not supported in Internet Explorer or Edge 12.
Example
Change the color of all images to black and white (100% gray):
img {
filter: grayscale(100%);
}
Tip: Go to our CSS filter Reference to learn more about CSS filters.
Image Hover Overlay
Create an overlay effect on hover:
Example
Fade in text:
Example
Fade in a box:
Example
Slide in (top):
Example
Slide in (bottom):
Example
Slide in (left):
Example
Slide in (right):
Flip an Image
Move your mouse over the image:
Example
img:hover {
transform: scaleX(-1);
}
Responsive Image Gallery
CSS can be used to create image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect:
Example
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and
(max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px
0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.
Image Modal (Advanced)
This is an example to demonstrate how CSS and JavaScript can work together.
First, use CSS to create a modal window (dialog box), and hide it by default.
Then, use a JavaScript to show the modal window and to display the image inside the modal, when a user clicks on the image:
Example
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it
inside the modal - use its "alt" text as a caption
var img =
document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick =
function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span =
document.getElementsByClassName("close")[0];
// When the user clicks
on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}