본문 바로가기
반응형

Style Sheets/CSS3

[CSS] Reset.css 와 Normalize.css란? 등장 배경 브라우저마다 제공하는 user agent style이라는 게 존재하는데, 말 그대로 브라우저별 스타일 기본값이라고 생각하면 된다. 브라우저 별로 모두 일관된 스타일을 제공해줘야 하는 입장에서 이 기본 스타일이 브라우저별로 다르다는 점은 참으로 불안한 상황이다. 그래서 나온 전략으로 reset.css 와 normalize.css라는 게 등장하였다. reset.css 이름 그대로 모든 브라우저의 형태에서 기본으로 제공하는 스타일을 전부 없애버린 초기화 기법이다. 아무래도 가장 유명한 기법이었는데, 마지막 업데이트 날짜가 2011년인 것을 보면 오래된 자료이기도 하고, 유용한 스타일까지도 초기화해서 비효율적이다 라는 말이 많이 나온다. Eric Meyer의 reset.css normalize.css.. 2022. 6. 13.
[CSS] 사용자 지정 변수(Variable) 사용하기 CSS에서도 사용자 지정 변수를 사용할 수 있는데, 이는 JS 같은 곳과 마찬가지로 문서 전반적으로 재사용할 임의의 값을 변수에 담아 사용하는 것과 동일하다. CSS에서 변수를 사용하는것도 처음부터 가능했던 건 아니라, CSS preprocessor(전처리기)의 등장으로 변수를 많이들 사용하다 보니까 이게 CSS 표준으로 들어오게 된 것이다. 아마 추후에는 전처리기에서 사용하는 기능들이 하나씩 표준으로 들어오지 않을까 생각된다. 이제 예제를 통해 사용법을 하나씩 알아보자. 1. 기본 사용법 사용자 지정 변수는 두 개의 붙임표(--)로 시작하는 속성의 이름과 함께, 유효한 CSS 값이라면 아무거나 그 값으로 지정해 선언한다. Here is id div-01 Here is class div-03 Here i.. 2022. 6. 11.
[CSS] 스크롤바 스타일 커스텀하기 CSS를 통해 스크롤바 스타일을 커스텀하는 방법에 대해 알아보자. 스크롤바 스타일에 대한 웹표준은 존재하지 않으며 webkit 브라우저에 한해서 커스텀이 가능하며, 스크롤을 커스텀하는데 주로 아래 3가지를 사용한다. ::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 그 외에도 몇가지가 존재하는데 자세한것은 본문 하단에 참고 사이트를 확인해보고, 이제 저 3가지를 활용한 예제 코드를 살펴보자. /* 스크롤바 설정*/ .box2::-webkit-scrollbar{ width: 6px; } /* 스크롤바 막대 설정*/ .box2::-.. 2022. 6. 8.
반응형
TOP