[CSS] Box Shadow, Opacity, Overflow, Visibility

hyesom·2021년 12월 6일
0

CSS

목록 보기
14/18
post-thumbnail

1. box shadow

  • 요소에게 그림자를 줄 때 사용
  • neumorphism.io 사이트 참고
p {
 box-shadow: x y 흐린정도 그림자사이즈 색상
}

2.Opacity : 투명도

  • 0(투명) ~ 1(불투명)

3. Overflow

width와 height를 가진 요소안의 자식요소들이 크기를 벗어났을 때 어떻게 처리할 것인가?
overflow: *visible | auto | scroll | hidden
(1) visible : 기본값, 그냥 벗어난 것을 그대로 보여주는 것
(2) auto, scroll : 넘쳐흐른것들은 스크롤로 바꾼다.(둘이별차이가없음)
(3) hidden : 넘쳐흐른것들은 스크롤도 안생기고 다 없애버린다.

개별적으로 줄 수 있다.
overflow-x: scroll; (가로에 스크롤줄때)
overflow-y: hidden;
가로로는 스크롤을 주지만 y축으로는 넘쳐흐르는것들은 숨긴다.

4. Visibility

요소를 보여줄 것 인지 숨길 것 인지 지정
visibility: *visible | hidden

  • hidden = opaicty:0 과 비슷함
  • hidden을 하여도 숨겨진 자리가 계속 유지됨
    vs display: none; 숨겨진 자리가 유지가 안됨(존재하지않음)
profile
✨프론트엔드 개발자가 되기 위한 독학러✨

0개의 댓글