본문 바로가기
  • 바쁜 일상 속 작은 기억

CSS3

Animating Css Grid I'm pleased to shine a light on the fact that the CSS grid-template-rows and grid-template-columns properties are now animatable in all major web browsers! 나는 CSS grid-template-rows와 grid-template-columns 속성들이 이제 주요 웹 브라우저에서 애니메이션 가능해진 사실을 밝힐 수 있어서 기쁘다. Well, CSS Grid has technically supported animations for a long time, as it's baked right into the CSS Grid Layout Module Level 1 spec. 음, CSS gr.. 2023. 6. 7.
[CSS] CSS 초기화 CSS 초기화 (reset)는 기본으로 설정되어야 하는 규칙이며, 서로 다른 특성을 가진 브라우저에서 일관성 있는 사이트를 만들 수 있는 기반을 마련하게 도와준다. 여러 프로젝트에서 지속적으로 사용할 수 있는 자신만의 기본 스타일 세트를 만들어두는 것도 좋은데 귀찮으면 아래 코드를 사용하면 좋다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and s.. 2023. 3. 11.
[CSS] 1. 베이스 규칙 모든 프로젝트에서 어떤 형태가 되던 분류, 정리하는 것이 중요하다. 새로운 스타일을 생성할 때마다 파일의 맨 뒤에 코드를 붙여버린다면, 필요한 것을 찾기도 어렵고 협업하는데도 혼란을 줄 수 있다. ID 선택자(#), class 선택자(.) 등 사용할 수 있는 몇 가지 선택자 중에서 무엇을 사용할지는 어떻게 결정하는게 좋을까? 원하는 스타일을 적용 할 적절한 요소는 어떻게 선택해야 좋을까? 웹 사이트의 스타일을 이해하기 쉽게 정리하려면 어떻게 하면 좋을까? 이 때 필요한 것은 범주화(categorization)다. CSS 규칙을 범주화함으로써 규칙에서 패턴이 보이기 시작하고, 각 패턴을 더 적절하게 사용할 수 있게 된다. CSS 5개 규칙 베이스 (Base) 레이아웃 (Layout) 모듈 (Module) .. 2023. 3. 10.