이미지 스타일 지정 및 이미지 스타일 사용
많은 사람들이 텍스트, 글꼴, 색상, 크기 등을 조정하기 위해 CSS 를 사용합니다. 그러나 많은 사람들이 자주 잊어 버리는 한 가지 점은 이미지와 함께 CSS를 사용할 수 있다는 것입니다.
이미지 자체 변경하기
CSS를 사용하면 이미지가 페이지에 표시되는 방식을 조정할 수 있습니다. 이것은 페이지의 일관성을 유지하는 데 정말로 유용 할 수 있습니다. 모든 이미지에 스타일을 설정하여 이미지의 표준 모양을 만듭니다. 당신이 할 수있는 것들 중 일부 :
- 이미지 주변에 테두리 또는 외곽선 추가
- 연결된 이미지 주위의 색상 테두리 제거
- 이미지의 너비 및 / 또는 높이 조정
- 그림자 추가
- 이미지 회전
- 이미지 위에 마우스를 올리면 스타일 변경
이미지를 국경으로 넘기는 것은 시작하기에 좋은 곳입니다. 하지만 경계를 넘어서서 이미지의 전체 가장자리를 고려하고 여백과 패딩 을 조정해야합니다. 얇은 검은 색 테두리가있는 이미지는 멋지지만 테두리와 이미지 사이에 약간의 여백을 추가하면 더 잘 보일 수 있습니다.
img {
테두리 : 1 픽셀 단색 검정;
패딩 : 5px;
}
가능한 경우 항상 장식용이 아닌 이미지를 연결 하는 것이 좋습니다. 하지만 그렇게 할 때 대부분의 브라우저가 이미지 주위에 색이있는 경계선을 추가한다는 것을 기억하십시오. 위의 코드를 사용하여 테두리를 변경하더라도 링크에서 테두리를 제거하거나 변경하지 않으면 링크가이를 덮어 씁니다. 이렇게하려면 CSS 하위 규칙을 사용하여 링크 된 이미지 주위의 테두리를 제거하거나 변경해야합니다.
img> a {
국경 : 없음;
}
CSS를 사용하여 이미지의 높이와 너비를 변경하거나 설정할 수도 있습니다. 다운로드 속도로 인해 브라우저를 사용하여 이미지 크기를 조정하는 것은 좋지 않지만 이미지 크기를 조정하면 사진이 훨씬 좋아 지므로 이미지 크기를 조정하는 것이 좋습니다. CSS를 사용하면 이미지를 모두 표준 너비 또는 높이로 설정하거나 크기를 컨테이너에 상대적으로 설정할 수도 있습니다.
이미지의 크기를 조정할 때 최상의 결과를 얻으려면 한 치수 (높이 또는 너비) 만 조정해야합니다. 이렇게하면 이미지가 가로 세로 비율을 유지하므로 이상하게 보일 수 없습니다. 다른 값을 auto로 설정하거나 브라우저에 종횡비 일관성을 유지하도록 지정하십시오.
img {
너비 : 50 %;
높이 : 자동;
}
CSS3는 새로운 속성 인 object-fit 및 object-position으로이 문제에 대한 해결책을 제시합니다. 이러한 속성을 사용하여 정확한 이미지 높이와 너비 및 가로 세로 비율을 처리하는 방법을 정의 할 수 있습니다. 이렇게하면 이미지 주위에 레터 박스 효과가 생기거나 필요한 크기에 맞게 이미지를자를 수 있습니다.
CSS3 object-fit 및 object-position 속성은 아직 널리 지원되지 않지만 대부분의 최신 브라우저에서 잘 지원되는 다른 CSS3 속성이 이미지를 수정하는 데 사용할 수 있습니다. 대부분의 최신 브라우저에서 그림자, 둥근 모서리 및 이미지를 회전, 비뚤어지기 또는 이동하는 변환과 같은 것들이 현재 모두 작동합니다. 그런 다음 CSS 전환을 사용하여 마우스를 놓거나 클릭하거나 일정 시간이 지나면 이미지가 변경되도록 할 수 있습니다.
이미지를 배경으로 사용
CSS를 사용하면 이미지와 함께 멋진 배경을 쉽게 만들 수 있습니다.
전체 페이지 또는 특정 요소에 배경을 추가 할 수 있습니다. background-image 속성으로 페이지에 배경 이미지를 만드는 것은 쉽습니다.
몸 {
background-image : url (background.jpg);
}
페이지의 특정 요소로 바디 선택기를 변경하여 배경을 하나의 요소에만 배치하십시오.
이미지로 할 수있는 또 다른 재미있는 일은 나머지 페이지와 함께 스크롤하지 않는 배경 이미지 (예 : 워터 마크)를 만드는 것입니다. 당신은 스타일 배경 첨부를 사용합니다 : 고정; 당신의 배경 이미지와 함께. 배경에 대한 다른 옵션에는 background-repeat 속성을 사용하여 가로 또는 세로로 바둑판 식으로 배열하는 옵션이 있습니다.
background-repeat 쓰기 : repeat-x; 이미지를 수평으로 타일링하고 background-repeat : repeat-y; 수직으로 바둑판 식으로 배열한다. 그리고 배경 위치 속성을 사용하여 배경 이미지의 위치를 지정할 수 있습니다.
CSS3는 배경에 더 많은 스타일을 추가합니다. 원하는 크기의 배경에 맞게 이미지를 늘리 거나 창 크기로 배경 이미지를 크기 조절할 수 있습니다. 위치를 변경 한 다음 배경 이미지를자를 수 있습니다. 하지만 CSS3에 대한 가장 좋은 점 중 하나는 이제 여러 배경 이미지를 레이어하여 훨씬 더 복잡한 효과를 만들 수 있다는 것입니다.
HTML5 스타일 이미지 지원
HTML5의 FIGURE 요소는 문서 내에 단독으로 존재할 수있는 이미지 주위에 배치해야합니다. 그것에 대해 생각할 수있는 한 가지 방법은 이미지가 부록에 나타날 수 있다면 그것이 그림 요소 안에 있어야한다는 것입니다. 그런 다음 해당 요소와 FIGCAPTION 요소를 사용하여 이미지에 스타일을 추가 할 수 있습니다.