움직이지 않는 header을 만드려 할때
position : sticky
top : 0px
=> 이때 주의할 것은 고정된 값, 좌표를 넣어놔야 한다는것! 그래야 딱 붙어있을 위치를 찾을 수 있게 된다.
맨날 까먹고 위치를 지정해주지 않고 외않되,,, 이러고 있다...ㅋㅋㅋㅋ
sticky 속성은 static과 fixed을 합쳐놓은 것.
즉, 영역의 위치값이 설정한 위치에 도달하기 전까지는 static,
도달 이후에는
sticky 영역의 x 또는 y 위치값이 설정한 위치에 도달하기 전까지는 static, 도달 이후에는 fixed처럼 행동하게 된다.
즉, 설정한 위치에 도달하기 전까지는 다른 값들과 상관 없이 화면에 고정되어있고, 그 자리에 도달하게 되면 그 특정 좌표에 있게 된다.
css 접두어
-webkit-
-moz-
-ms-
-o-
요런건 브라우저 접두어라고 한다.
브라우저 접두어란 ? css 표준으로 인정되지는 않았지만 도입되는 중에 브라우저 접두어를 사용해서 브라우저마다 테스트 기간에 접두어를 사용한다.
표준으로 만들어지기 전에 일어날 문제들을 사전에 막기 위한 것!!
브라우저 접두어를 앞쪽에 쓰고, 맨 마지막에 표준 속성을 쓰면 위에서부터 읽으면서 접두어를 사용하는 브라우저는 접두어버전을 읽고 아니면 무시한다.
표준을 지원하는 애들은 표준 속성을 실행한다..
요러케 있다가 브라우저가 업데이트하면서 표준 속성을 쓰게 됐다?
=> 접두어를 지워두면 된다! 하지만 브라우저를 업데이트 하지 않는 사용자를 위해서 걍 냅두는 것도 괜찮다구 한다
border-radius 같은 경우에도 지금은 그냥
한줄만 쓰지만 예전엔 다 접두어를 붙여서 썼다구 한다..
css 스크롤바 꾸미기
스크롤바 스타일에 관한 웹표준은 존재하지 않지만
다만 webkit 브라우저(크롬, 사파리, 오페라)에 한해 가상요소를 사용해 스타일을 적용할 수 있다.
::-webkit-scrollbar : 스크롤바 전체
::-webkit-scrollbar-thumb : 스크롤 막대
::-webkit-scrollbar-track : 스크롤 막대 외부
이걸 가지고 꾸밀 수 있다!
