알아두면 좋을 CSS

1. overflow-x/ overflow-y

내용이 넘치는 경우 x축,y축에 어떻게 보일지 선택하는 css

overflow속성

visible/hidden/scroll/auto

visible 기본값. 내용값이 잘리지 않고 넘치는 내용은 밖으로 흘러내림
hidden 내용이 잘려서 나옴.(스크롤바는 나타나지 않음)
scroll 내용이 잘림. (스크롤바가 나타남)
auto 내용이 잘림. 필요시 스크롤바가 나타남

2. user-select

유저가 드래그 할 수 없도록 설정할 수 있다

user-select속성

auto/none

auto 기본값. 유저가 드래그 할 수 있다
none 유저가 드래그 할 수 없도록 설정

user-drag

유저가 마우스로 클릭하여 드래그 되는 현상을 제어할 수 있다

• 앞에 공급업체 접두사를 붙여주어야 한다

user-drag속성

auto/none

auto 기본값. 유저가 드래그 할 수 있다
none 유저가 드래그 할 수 없도록 설정

• 접두사를 이용해 브라우저간 호환성 적용 가능
  -webkit- : Chrome, Safari와 같은 웹킷 기반 브라우저에 사용
  -khtml- : KHTML 렌더링 엔진으로 사용하는 Konqueror 브라우저에 사용
  -moz- : Mozilla Firefox에 사용
  -o- : Opera 브라우저에 사용

3. backdrop-filter

뒤 배경 필터 효과를 줄 수 있다

backdrop-filter속성

blur/invert/sepia

blur 블러 효과를 준다(px로 입력)
invert 색상 반전의 효과를 준다(%로 입력)
sepia 현상된 흑백필름을 컬러필름 인화기에 집어넣고 돌린 색상(%로 입력)

list-style

보통 ol(order list) 태그와 함께 쓰이며 앞에 번호나 숫자...을 붙여준다

list-style속성