이것저것 잡다한 블로그

CSS에서 Class Selector를 사용하다 보면 하나의 Element에 여러가지 Class Type을 붙여 쓸때가 있다. 이 때, 여러 클래스가 동일한 속성에 대한 값을 가지고 있다면 어떤식으로 처리될까? 아래의 코드를 예로 들어보자. p.test { color: lime; } .p { color: orange; } 위쪽은 p 태그에서만 사용할수 있는 test라는 class이고, 아래쪽은 모든 태그에서 사용가능한 p라는 클래스이다. 이 class들을 p 태그에 같이 적용하면 어떻게 될까? 결과만 얘기하자면, p.test 클래스의 color 값이 표시된다. CSS는 상위 트리의 내용을 먼저 적용하고 하위 트리의 내용은 나중에 적용하도록 되어있다. 두 클래스의 경우 .p가 더 상위개념이기 때문에 먼저 ..

배경이나 컨텐츠에 이런 저런 효과를 주기 위해 필터를 적용할때가 있다. 블러라든지 기타등등.... 그런데 적용할 Element에 Border-radius 적용할 경우 코드 순서에 따라 Border-radius가 적용되지 않는 경우가 있다. 예를 들어, .test { border-radius: 5px; overflow: hidden; filter: blur(5px); } 이 경우 Border-radius는 적용되지만, .test { filter: blur(5px); border-radius: 5px; overflow: hidden; } 이 경우에선 적용되지 않는다. 아마 버그로 생각되지만, 일단 머리속에 필요한 속성을 먼저 설정한 후에 필터를 나중에 설정하는 걸로 외워두면 될것 같다.