css작성하면 부모를 선택할수 있는 방법은 없을까 불편함을 느끼곤 했는데 부모를 선택할 수있는 css 속성이 생겼다.has() 이번에 작업을 하면서 포커스 된 인풋의 부모에 스타일을 줘야하는 경우가 생겼는데 focus, blur 이벤트 없이 css has 속성으로만 처리할 수 있었다.  넘나 간편하고 좋군이번기회에 새로나온 css 속성을 한번 훝어봐야겠다

확장되는 ui에 css 애니메이션을 주고싶을때 height값을 변경하는데 변경될 값이 auto등 값이 들어가지 않으면 애니메이션이 작동하지 않는다. [as is] height: 0 [to be] height: auto 추가로 display: none, block 도 애니메이션 적용이 안되는데 display: none 값은 렌더트리에서 아예 그리지도 않는값이기 때문에 block으로 변경하면 이전 위치를 알 수 없기 때문이다.

html에 태그에 넣어둔 data 값을 가져와서 scss에서 content로 사용할 수 있다. // html 50000 // scss .currency { display: block; &:before { margin-right: 1px; content: attr(data-currency); } }

아이폰 safe area 대응을 해야할 경우가 있었는데 요렇게 선언을 해도 안먹는 경우가 있었다. top: env(safe-area-inset-bottom) viewport 에 viewport-fit 을 적용하지 않아서 난 이슈였다. viewport-fit=cover 을 적용하니 해결됨

디자인 요구사항 중 한글, 영문 폰트 다르게 적용해 달라는 요청이 들어왔다. 이런경우 한글, 영문 폰트의 @font-face로 unicode-range 적용을 하면된다. @font-face 텍스트를 표시할 사용자 정의 글꼴을 지정한다. 사용자의 컴퓨터에서 찾을 글꼴 이름을 지정하고 사용자 에이전트가 일치 항목을 찾으면 로컬 글꼴이 사용된다. 그렇지 않으면 url() 함수를 사용하여 지정한 글꼴 리소스를 다운로드하여 사용한다. unicode-range @font-face 속성 중 unicode-range를 사용하여 특정 폰트를 필터하고 적용할 수있다. 숫자, 영문폰트, 한글폰트를 유니코드를 이용해 필터할 수 있다. 유니코드란? 유니코드(Unicode)는 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 ..

부정 가상선택자 :not은 익스를 지원하지 않는다. 사용법 p:not(.box) { color: red; } // box클래스를 제외 한 p태그 선택 body :not(p) { color: red; } // body안에 p태그를 제외한 태그 선택