[CSS] image 다루기

이미지 색상 어둡게 / 밝게 만들기

 

 

 

 

img 태그 내에 이미지 밝기 설정을 해줄 수 있다. %가 낮을 수록 어둡고 흐려진다

 

filter: brightness(70%);

 

 

filter 속성값을 이용해 흑백으로 바꿀 수도 있다

 

filter: greyscale(100%);

 

 

 

 

filter brightness는 색감이 좀 흐려지면서 어두워지는 편이라 다른 방법을 생각해보았다

 

상위 div에 background-color를 설정하고 img의 opacity를 조절해주는 방식.

뒷 배경이 밝냐 어둡냐에 따라 색감이 조정된다

 

.parent_div {
    background: rgb(0, 0, 0);
}

.parent_div img {
   opacity: 0.7;
}

 

background: rgb(255, 255, 255);

background: rgb(0, 0, 0);

 

 

 

---

 

 

 

div 내 이미지 가운데 정렬 및 영역 바깥 숨기기

 

.parent div { 
    width: 120px;
    height: 120px;
    display: flex; # 내부 요소를 flex하게 만들고
    justify-content: center; # 가운데 정렬하도록 한다
    overflow: hidden; # 영역 외 숨기기
}

.img { # width, height 100%는 원하는 방향으로 설정!
    width: auto;
    height: 100%;
}

 

 

이 외에도 두 가지 방법이 더 있다!

[참고] : https://www.freecodecamp.org/korean/news/how-to-center-an-image-in-css/

CSS로 이미지를 중앙 정렬하는 방법