CSS 이미지 스타일 설정
- 이전 페이지 CSS 툴팁
- 다음 페이지 CSS object-fit
CSS로 이미지 스타일을 설정하는 방법을 배웁니다。
둥근 이미지
사용 border-radius 속성을 사용하여 원형 이미지를 생성합니다：
축소판 이미지
사용 border 속성을 사용하여 축소판을 생성합니다。
축소판：
실례
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Paris">
응답형 이미지
응답형 이미지는 자동으로 화면 크기에 맞게 조정됩니다。
이미지를 필요에 따라 축소하고 원래 크기를 초과하지 않기를 원한다면 다음 코드를 추가하세요：
실례
img {
max-width: 100%;
height: auto;
}
팁:우리의 CSS RWD 강의 응답형 웹 디자인에 대해 더 많은 지식을 학습하십시오。
이미지 중앙 정렬
이미지를 가운데 정렬하려면, 왼쪽과 오른쪽 외곽 여백을 설정하세요： auto 그리고 그를 블록 요소로 설정하세요：
실례
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입니다. 값이 낮을수록 투명합니다:
opacity 0.2
opacity 0.5
opacity 1(기본)
실례
img {
opacity: 0.5;
}
이미지 텍스트
이미지 내에서 텍스트를 위치시키는 방법:
실례
직접 테스트해 보세요:
이미지 필터
CSS filter 이 속성은 요소에 시각적 효과(예: 흐림과 부饱和도)를 추가합니다.
주의:Internet Explorer 또는 Edge 12는 filter 속성을 지원하지 않습니다.
실례
모든 이미지의 색상을 흑백(100% 회색)으로 변경하세요:
img {
filter: grayscale(100%);
}
팁:우리의 사이트를 방문하여: CSS 필터 참조 매뉴얼CSS 필터에 대한更多信息을 알아보세요.
이미지 마우스 오버 추가 효과
마우스 오버 시 추가 효과를 생성하려면:
반응형 이미지 라이브러리
CSS를 사용하여 반응형 이미지 라이브러리를 만들 수 있습니다.
이 예제에서는 미디어 쿼리를 사용하여 다양한 화면 크기의 이미지를 재정렬하는 방법을 설명합니다. 브라우저 창 크기를 조정하여 효과를 확인해 주세요:
실례
.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%;
}
}
팁:저희 CSS RWD 강의 중에서 반응형 웹 디자인에 대해 더 많은 지식을 배울 수 있습니다.
이미지 모달(Image Modal)
이는 CSS와 JavaScript가 어떻게 협력하여 작동하는지 보여주는 예제입니다.
먼저, CSS를 사용하여 모달 창(대화 상자)을 만들고 기본적으로 숨기도록 설정합니다.
그런 다음, 사용자가 이미지를 클릭할 때 JavaScript를 사용하여 모달 창을 표시하고 모달 내부에 이미지를 표시합니다:
- 이전 페이지 CSS 툴팁
- 다음 페이지 CSS object-fit
