CSS - 스타일 이미지
안녕하세요, 웹 디자인을 꿈꾸는 분들! 오늘 우리는 CSS 이미지 스타일링의 흥미로운 세계로 출발합니다. 여러분의 친절한 이웃 컴퓨터 선생님이자, 저는 이 모험을 안내해 드리게 되어 기쁩니다. 기억해 두세요, 자전거 타는 것을 배우는 것처럼, CSS를 마스터하려면 연습이 필요하지만,Fun이 될 것이라고 약속합니다!
CSS 스타일 이미지 - 둥근 이미지
simple하지만 훌륭한 것으로 시작해 보겠습니다: 둥근 이미지. 우리는 삶에서 모서를 부드럽게 하는 것을 좋아하는데, 이미지에도 그렇게 할 수 있습니다!
<img src="cute_puppy.jpg" alt="귀여운 강아지" class="rounded-image">.rounded-image {
border-radius: 25px;
}이 예제에서 우리는 브라우저에게 이미지의 모서를 25ピクセル로 둥글게 하도록 지시하고 있습니다. 이미지에 약간의 헤어컷을 주는 것입니다! 이 값을 조정하여 모서를 더 둥글게或者더 날카롭게 할 수 있습니다.
CSS 스타일 이미지 - 원형 이미지
이제 한 단계 더 나아가 우리의 이미지를 완벽한 원으로 만들어 보겠습니다. 이는 프로필 사진이나 중앙에 집중하고 싶은 모든 이미지에 좋습니다.
<img src="profile_pic.jpg" alt="프로필 사진" class="circle-image">.circle-image {
border-radius: 50%;
width: 200px;
height: 200px;
object-fit: cover;
}이제 마법이 일어납니다: border-radius: 50%는 우리의 사각형 이미지를 원형으로 만듭니다. 고정된宽度和高度를 설정하고, object-fit: cover는 이미지가 원형 안에 잘 맞도록 확장하지 않습니다.
CSS 스타일 이미지 - 썸네일 이미지
썸네일은 이미지 세계의 영화 트레일러와 같습니다 - 전체 이미지의 맛을 보여주는 작은 미리보기입니다. 우리가 몇 가지 만들어 보겠습니다!
<img src="landscape.jpg" alt="아름다운 풍경" class="thumbnail">.thumbnail {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
}이 CSS는 작은 정사각형 썸네일을 만들고, 깨끗한 테두리를 추가합니다. object-fit: cover 속성은 이미지가 썸네일 영역을 왜곡 없이 채우도록 합니다.
CSS 스타일 이미지 - 썸네일 이미지를 링크로
우리의 썸네일을 클릭할 수 있게 만들어 보겠습니다! 이는 이미지 갤러리나 제품 목록에 완벽합니다.
<a href="full_image.jpg">
<img src="thumbnail.jpg" alt=" 클릭하여 확대" class="thumbnail-link">
</a>.thumbnail-link {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: transform 0.3s ease;
}
.thumbnail-link:hover {
transform: scale(1.1);
}여기서 우리는 썸네일에 cool한 hover 효과를 추가했습니다. 썸네일에 마우스를 올리면 약간 확대되어 인터랙티브한 느낌을 줍니다.
CSS 스타일 이미지 - 반응형 이미지
오늘날 다양한 기기에서 이미지를 보여야 하므로, 우리의 이미지가 모든 화면 크기에서 잘 보이도록 만들어야 합니다. 우리의 이미지를 반응형으로 만들어 보겠습니다!
<img src="scenery.jpg" alt="아름다운 풍경" class="responsive-image">.responsive-image {
max-width: 100%;
height: auto;
}이 간단한 CSS는 우리의 이미지가 컨테이너보다 넓지 않도록 하고, 높이는 비례적으로 조정됩니다. 어떤 상황에서도 행동하는 것을 알아차리는 것처럼!
CSS 스타일 이미지 - 이미지 중앙 정렬
이미지를 중앙에 정렬하는 것은 까다로운 일이지만, 저는 당신에게 훌륭한 팁이 있습니다. 이미지가 무대 중앙에 서는 것처럼!
<div class="image-container">
<img src="centered_image.jpg" alt="중앙 정렬된 이미지" class="center-image">
</div>.image-container {
text-align: center;
}
.center-image {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}이 방법은 인라인과 블록 레벨 이미지 모두에 작동합니다. 컨테이너의 text-align: center은 인라인 이미지를 중앙에 정렬하는 데 도움이 되고, margin: auto는 블록 레벨 이미지를 중앙에 정렬합니다.
CSS 스타일 이미지 - 폴라로이드 이미지 / 카드
폴라로이드 카메라를 기억하시나요? CSS로 그 고전적인 모습을 재현해 보겠습니다!
<div class="polaroid">
<img src="vacation.jpg" alt="여행 기억">
<div class="caption">2023년 여름</div>
</div>.polaroid {
width: 250px;
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);
margin-bottom: 25px;
}
.polaroid img {
width: 100%;
}
.caption {
text-align: center;
padding: 10px 20px;
}이 CSS는 이미지 주위에 하얀 테두리를 만들고, 미세한 그림자를 추가하여 3D 효과를 줍니다. 캡션은 이미지 아래에 배치됩니다.
CSS 스타일 이미지 - 투명한 이미지
occasionally, we want our images to be see-through. It's like giving your image a ghost-like quality!
<img src="logo.png" alt="Company logo" class="transparent-image">.transparent-image {
opacity: 0.5;
}The opacity property ranges from 0 (completely transparent) to 1 (fully opaque). You can adjust this value to get the desired level of transparency.
CSS 스타일 이미지 - 이미지에 텍스트 중앙 정렬
Let's put some text right in the middle of an image. It's like creating your own motivational poster!
<div class="image-text-container">
<img src="background.jpg" alt="Background image">
<div class="centered-text">Your text here</div>
</div>.image-text-container {
position: relative;
text-align: center;
color: white;
}
.centered-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}This CSS uses positioning to place the text exactly in the center of the image. The transform property ensures it's centered both vertically and horizontally.
CSS 스타일 이미지 - 필터
CSS filters are like Instagram for your web images. Let's play around with some!
<img src="landscape.jpg" alt="Landscape" class="filtered-image">.filtered-image {
filter: grayscale(100%) brightness(150%) contrast(120%);
}This example applies multiple filters: it turns the image grayscale, increases brightness, and enhances contrast. You can mix and match different filters to create unique effects!
Here's a table of some common CSS image filters:
| Filter | Description | Example |
|---|---|---|
| grayscale() | Converts image to grayscale | filter: grayscale(100%); |
| sepia() | Converts image to sepia | filter: sepia(60%); |
| saturate() | Saturates the image | filter: saturate(200%); |
| hue-rotate() | Applies a hue rotation | filter: hue-rotate(90deg); |
| invert() | Inverts the image colors | filter: invert(75%); |
| opacity() | Sets the opacity of the image | filter: opacity(25%); |
| brightness() | Adjusts the brightness | filter: brightness(150%); |
| contrast() | Adjusts the contrast | filter: contrast(200%); |
| blur() | Applies a blur effect | filter: blur(5px); |
CSS 스타일 이미지 - Fade In 오버레이
Let's create a cool effect where text fades in when you hover over an image. It's like revealing a secret message!
<div class="image-overlay">
<img src="product.jpg" alt="Product image">
<div class="overlay">
<div class="text">Product Description</div>
</div>
</div>.image-overlay {
position: relative;
width: 50%;
}
.image-overlay img {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}
.image-overlay:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}This CSS creates a dark overlay that fades in when you hover over the image, revealing the text.
CSS 스타일 이미지 - 슬라이드 인 효과
Now, let's create a slide-in effect for our image caption. It's like pulling back a curtain to reveal the star of the show!
<div class="slide-container">
<img src="nature.jpg" alt="Nature scene" class="slide-image">
<div class="slide-caption">Beautiful Nature</div>
</div>.slide-container {
position: relative;
overflow: hidden;
}
.slide-image {
display: block;
width: 100%;
height: auto;
}
.slide-caption {
position: absolute;
bottom: 0;
left: 100%;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
transition: 0.5s ease;
width: 100%;
}
.slide-container:hover .slide-caption {
left: 0;
}This CSS hides the caption off-screen and slides it in from the right when you hover over the image.
CSS 스타일 이미지 - 이미지 뒤집기
Let's add some pizzazz with a flip effect! It's like giving your image a backstage pass to show off its reverse side.
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="front.jpg" alt="Front side">
</div>
<div class="back">
<img src="back.jpg" alt="Back side">
</div>
</div>
</div>.flip-container {
width: 300px;
height: 200px;
perspective: 1000px;
}
.flipper {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-container:hover .flipper {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}This CSS creates a 3D flip effect when you hover over the container. The front image flips to reveal the back image.
CSS 스타일 이미지 - 반응형 이미지 갤러리
Let's put our skills together and create a responsive image gallery. It's like curating your own mini art exhibition!
<div class="gallery">
<img src="img1.jpg" alt="Gallery image 1">
<img src="img2.jpg" alt="Gallery image 2">
<img src="img3.jpg" alt="Gallery image 3">
<img src="img4.jpg" alt="Gallery image 4">
</div>.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.gallery img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
@media screen and (min-width: 600px) {
.gallery img {
width: 49%;
margin: 0.5%;
}
}
@media screen and (min-width: 1000px) {
.gallery img {
width: 24%;
margin: 0.5%;
}
}This CSS creates a flexible gallery that adjusts based on screen size. On small screens, images stack vertically. On medium screens, they form two columns, and on large screens, they create four columns.
CSS 스타일 이미지 - 이미지 모달
Finally, let's create a modal that pops up when you click an image. It's like giving your images their own spotlight moment!
<img src="thumbnail.jpg" alt="Click to enlarge" class="modal-trigger" onclick="openModal(this)">
<div id="imageModal" class="modal">
<span class="close" onclick="closeModal()">×</span>
<img class="modal-content" id="modalImage">
</div>.modal-trigger {
cursor: pointer;
transition: 0.3s;
}
.modal-trigger:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}function openModal(img) {
var modal = document.getElementById("imageModal");
var modalImg = document.getElementById("modalImage");
modal.style.display = "block";
modalImg.src = img.src;
}
function closeModal() {
document.getElementById("imageModal").style.display = "none";
}This combination of HTML, CSS, and JavaScript creates a modal that opens when you click on an image, displaying a larger version of the image.
And there you have it, folks! We've journeyed through the wonderful world of CSS image styling. Remember, the key to mastering these techniques is practice. So go ahead, play around with these examples, mix and match, and create something uniquely yours. Happy coding!
Credits: Image by storyset