자기계발 캠퍼스

글을 시작하기에 앞서 먼저 주의사항 하나 짚고 넘어가자. Mdn에서 스크롤바를 조작하는 ::webkit-scrollbar는 표준이 아니기에 제품 출시에는 사용하지 않기를 권고한다. 실제 호환성을 살펴보면 보는 모든 브라우저를 지원하지는 않는다. 그렇다면 지원하는 브라우저가 뭔데?? 바로 webkit 계열의 브라우저들이다. Webkit 계열에 해당하는 브라우저들에는 뭐가 있을까? - 크롬 (Android 웹뷰 포함) - 엣지 - 사파리 - 삼성 인터넷 - 오페라 - 네이버 웨일 그렇다. 사실상 대부분의 브라우저들이다. 그렇기에 ::webkit-scrollbar는 웬만하면 모든 브라우저에서는 된다. 하지만 파이어폭스 유저들을 위한 서비스라면 호환이 안 되니 이 점은 참고하자. 먼저 스크롤바를 스타일링하기 위..

CSS에서 뒤에 땡땡 붙여서 쓸 수 있는 가상 요소 중 ::before와 ::after에 대해 알아보자. 사실 말 그대로 직독직해하면 된다. CSS 파일 안에서 이런 식으로 사용하게 되는데 선택한 Element의 앞에 어떤 걸 추가하고 싶으면 ::before 뒤에 어떤 걸 추가하고 싶으면 ::after 이렇게 활용하면 된다. 예를 들어 이런 식이면 태그 뒤에 "이거 무조건 있어야 됨"이라는 글자가 표현된다. 이렇게 content만 넣어주면 부모인 p태그의 css 특성을 그대로 따라가지만 content 뒤에 css 속성을 넣어주어 글자 색깔이나 배경색 등등 따로 적용가능하다. 여기서 중요한 점 이렇게 ::before이나 ::after를 쓰기 위해서 content 속성은 무조건 추가해줘야 된다. conten..