Display 순수 css body { display: flex; } tailwind - display tailwind에서 display는 class에 display 값만 입력하면 적용이 된다. display: inline flex-basis css 속성 중에서는 flex 아이템의 초기 크기를 설정하는 속성이 flex-basis이다. box-sizing을 따로 지정하지 않을 경우 사용된다. /* 원본 크기 키워드 */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* 플렉스 아이템 내용 크기에 따라 조절 */ flex-basis: content; tailwind - flex-basis..
CSS animation으로 채팅창 끄고 키기 구현 처음에 무비앱을 제작하면서 채팅창을 끄고 킬 때 useState를 사용하여 채팅창을 나타나고 사라지게 구현했다. 내가 원했던 방식은 CSS 애니메이션으로 채팅창을 나타나게 했다가 자연스럽게 사라지는 transition 효과를 주고 싶었다. 해결 이전 채팅창의 모습 const [isActive, setIsActive] = useState(false); const handleToggle = () => { setIsActive(prev => !prev); }; return ( {!isActive ? ( ... ) : ( 실시간 채팅 ... ... )} ); 하지만 채팅창을 띄울 때에는 CSS가 반영되었지만 닫을 때에는 반영되지 않았다. 이에 대한 해결방법은 ..
font-variant-numeric font-variant-numeric은 css 속성 중 하나로, 숫자, 분수 등의 숫자 형태를 글리프 비율을 조절한다. (글리프란 모바일, 웹 플랫폼 등과 같이 모든 아이디어 창작물에서 나타내는 그래픽 이미지를 말한다.) 단, 이 속성은 오픈타입 (.otf) 글꼴에만 적용이 가능하므로 사용하는 글꼴 타입이 오픈타입인지 확인을 하고 사용해야 한다. font-variant-numeric: tabular-nums 그 중에서 tabular-nums는 이 그리프를 같은 사이즈로 정렬하여 어떤 숫자여도 같은 자간의 차이를 두도록 설정한다. 더보기 출처 및 참고자료 1. https://velog.io/@focusonmx/HIG-Glyph%EB%9E%80 [HIG] Glyph란? ..
html의 요소를 나타나게 하고 사라지게 하는 속성으로는 visibility와 display 두 가지가 있다. 비슷한 역할을 하는 것처럼 보이지만 두 속성에는 다른 차이가 존재한다. 이에 대해 기억하기 위하여 정리한다. visibility: hidden 해당 요소가 보이지 않으며 layout에 영향을 미친다. 다시 말해, 보이지 않지만 width와 height가 설정되어있다면 공간은 그대로 유지된다. display: none 해당 요소가 보이지 않으며 layout에 영향을 주지 않는다. 다시 말해, 보이지 않으면서 동시에 width와 height로 구분된 공간도 사라진다. 간단하게 visibility는 hidden이므로 해당 공간을 숨기는 것이지만, display는 none, 즉 없다는 의미이므로 공간 ..
프로그래머스 FE 채용으로 배우는 자바스크립트를 배우는 과정에서 :root를 사용하게 되어 이것에 대해 정리해보려고 한다. 해당 강의에서는 자바스크립트를 이용해서 브라우저를 다크모드로 변경하기 위하여 해당 css 속성을 사용하였다. setColorMode(isDarkMode) { document.documentElement.setAttribute( "color-mode", isDarkMode ? "dark" : "light" ); } JS 파일에는 이와 같이 document 요소에서 attribute에 "color-mode"라는 변수를 지정해주었다. 그리고 이렇게 js에 지정한 변수를 css에서도 사용할 수 있도록 하는 것이 :root 가상 클래스의 역할 중 하나이다. 또한, :root 가상 클래스는 h..
