[UI/UX]패스트캠퍼스 챌린지 44일차 - css filter / 웹 이미지 종류
오늘은 44일차
바로 데스데이(??)
css가 확실히 필기하고 올리기엔 좋은 듯(?)
오늘배운 부분은 디자인적인 느낌이 강하다
이래서 css가 디자인에 요소라고 하셨나보다 ㅇㅅㅇ..
이제 다시 코딩 강의도 다들어가니,,
다음 강의는 다시 피그마의 차례인가 보다 ,,^_^
오늘 회사에서 피그마로 만들려다가 걍 포기하고 다시 xd로 간 1人..
Filters
효과 주기
- blur
: 이미지에 블러처리를 해주는 효과, px의 단위 사용
- grayscale
: 흑백으로 바꿔주는 효과, 단위 딱히 사용 필요 없음
- invert
: 색을 반전해주는 효과
+)여러개의 효과 동시에 사용 가능, filter안에 다 넣으면 된다.
*css에서 .container .item img에서 괄호 안의 width는 가로뿐만 아니라 세로도
조절을 같이해준다.
html
<div class="container">
<div class="item">
<img src="https://static.wikia.nocookie.net/kpop/images/3/33/%EB%B8%94%EB%9E%99%ED%95%91%ED%81%AC_The_Album_%EC%BB%A8%EC%85%89_%EC%82%AC%EC%A7%84_1.png/revision/latest/scale-to-width-down/333?cb=20201104084409&path-prefix=ko" alt="jenny">
</div>
<div class="item">
<img src="https://static.wikia.nocookie.net/kpop/images/3/33/%EB%B8%94%EB%9E%99%ED%95%91%ED%81%AC_The_Album_%EC%BB%A8%EC%85%89_%EC%82%AC%EC%A7%84_1.png/revision/latest/scale-to-width-down/333?cb=20201104084409&path-prefix=ko" alt="jenny">
</div>
<div class="item">
<img src="https://static.wikia.nocookie.net/kpop/images/3/33/%EB%B8%94%EB%9E%99%ED%95%91%ED%81%AC_The_Album_%EC%BB%A8%EC%85%89_%EC%82%AC%EC%A7%84_1.png/revision/latest/scale-to-width-down/333?cb=20201104084409&path-prefix=ko" alt="jenny">
</div>
</div>
css
.container .item img{
width:130px;
}
.container .item : nth-child(1) img{
filter :grayscale();
}
.container .item : nth-child(2) img{
filter:blur(4px);
}
.container .item : nth-child(3) img{
filter:invert();
}
원래는 아주 간단한 코드가 이미지 링크 덕에 아주 길어지는 현상 ㅋㅅㅋ
css가 비교적 간단해보이는 이유는 (?)
띄어쓰기 잘못해서 왜안되지 한참 고민한...
코딩은 역시 인내심인가..
그럼 이렇게 제니의 3필터가 나온당
흑백이 역시 갬성있고 좋다 ㅎㅎㅎ
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.