- React-transition-group: CSSTransition 햄버거 버튼을 클릭했을 때, 메뉴가 부드럽게 뜨고, 메뉴 외부를 누르면 메뉴가 부드럽게 사라진다. 효과가 없다면 이런 느낌일 것이다. 일반 CSS에서 애니메이션을 적용하기 위해선 애니메이션 클래스를 생성해두고 컴포넌트가 업데이트가 될 때 className을 적용하면 된다. 이 로직을 적용시키는 게 까다롭거나 귀찮다면 react-transition-group 라이브러리를 사용하면 된다. react-transition-group에는 한 개의 컴포넌트에게 transition을 적용시키는 CSSTransition, router 혹은 여러 컴포넌트한테 transition을 적용시키는 TransitionGroup 등이 있다. 이번 예제에서는 C..
postCSS를 사용한다면 필요 없는 기능이지만, 바닐라 CSS를 사용 중일 경우에는 CSS 호환성을 위해 벤더 프리픽스를 추가해주어야 한다. (하지만 주요 웹 브라우저의 최신 CSS 표준 지원이 빨라지고 있으며 웹 브라우저 시장에서 구글 크롬의 사용률이 크기 때문에 벤더 프리픽스의 필요성도 줄어들고 있다.) 브라우저별 벤더 프리픽스 브라우저 벤더 프리픽스 파이어폭스 -moz- 사파리 -webkit- 크롬 -webkit- 오페라 -o- 인터넷 익스플로러 -ms 이에 관련된 플러그인도 있지만(projects.verou.me/prefixfree/) Prefix free: Break free from CSS vendor prefix hell! -prefix-free lets you use only unpref..
- 절대값으로 사용 됨- 뷰포트 크기 상관 x- 고정된 값으로 렌더링 된다.- 루트 엘리먼트의 폰트 사이즈를 기준으로 적용된다.- 크기가 변하는 곳(ex. media query)에 사용하면 편리- 상위 엘리먼트의 폰트 크기를 기준으로 적용된다.ex).main { font-size: 2.5rem; height: 3em;} - height는 2.5rem의 3배가 된다.
예시는 여기서.positionThe position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.developer.mozilla.orgposition의 default(기본값)은 static이다.● position: relative원래 있던 자리를 유지하되, 상대적으로 사용자가 지정한 포지션(top, right, bottom, left) 만큼 이동한다.● position: absolute근접한 부모 중에 static이 아닌 부모의 기준에서 움직인다.● position..
[한글 버전] https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com CSS의 flex 속성을 게임으로 쉽게 이해할 수 있다. 이 속성을 이용해 개구리를 원래의 연못으로 옮기는 게임이다.
Absolute Centering in CSS If you want to center something horizontally in CSS you can do it just by, using the text-align: center; (when working with inline… medium.com parent 요소를 position:relative로 하고, child 요소를 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 로 한다. OR flexbox를 사용하는 방법도 있다. 위 블로그 글 참고.
미디어 쿼리를 만드는 중이다.@media (min-width: 992px){...}@media (min-width: 768px){...}@media (min-width: 576px){...} ..등등그런데 값 적용이 아무리 안 되는 것이다.알고보니 순서가 중요했다...^^min-width를 오름차순으로 해야한다.@media (min-width: 576px){...}@media (min-width: 768px){...}@media (min-width: 992px){...}운 좋게 이때까지 올바른 순서로 했었는데 이번에 반대로 하면서 깨닫게 되었다.정말 이런 기본도 몰랐다니 반성하게 된다.
developer.mozilla.org/en-US/docs/Web/CSS/--* Custom properties (--*): CSS variables - CSS: Cascading Style Sheets | MDN Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function. Custom properties are scoped to the element(s) they are declared on, and part developer.mozilla.org w..
- block의 경우 (예를 들어, div) margin: auto로 수평 center 가능하다. (수직으로는 불가능) - text-align의 경우 요소를 수평 center 가능하지만 수직으로는 불가능하다. 블록 요소에는 적용이 안 된다. -transform: translate(50%, 50%) translate(x축, y축)이다. 50씩 이동하므로 완전한 center. -텍스트인 경우 text-align: center line-height: __px (__에는 부모 상자의 height 만큼 넣어주면 된다.) 그냥 justify-content를 사용하도록 하자... developer.mozilla.org/en-US/docs/Web/CSS/justify-content justify-..
커서를 가져다대면 나타나는 메뉴를 제작하고 싶었다. jquery나 js를 사용해야하는건지 머릿속이 복잡했다. 하지만 css만으로 가능했다. How TO - Hoverable Dropdown How TO - Hoverable Dropdown ❮ Previous Next ❯ Learn how to create a hoverable dropdown menu with CSS. Dropdown A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: Hover Me Try it Yourself » Create A Hoverable Dropdown Create a dropdown menu..