Web-app/CSS
-
CSS 기초, 기본 구성과 결합자 종류 알아보기Web-app/CSS 2023. 9. 28. 15:33
CSS 코드의 기본 구성 Selector는 tag, id, class 등 바꾸고자 하는 타겟 Properties는 바꾸고자 하는 옵션, Value는 그 옵션의 값 일반적으로 CSS는 부모의 스타일이 자식에게 상속 (inheritance) 여기에 다양한 Rules를 추가하면서 자연스럽게 충돌하게 되는데, 이걸 잘 설계해서 스타일이 잘 적용될 수 있도록 하는 것이 핵심 반영 순서 1) tag 2) class 3) id 4) inline style (html 코드에 직접 style 코드 넣기) 4로 갈수록 가장 먼저 적용 하지만 inline style의 경우 코드 유지 보수하기 힘듬 결합자 (Combinators) See the Pen CSS practice by woongwoongs (@woongwoongs..
-
CSS hover시 채워지는 메뉴 버튼 구현하기Web-app/CSS 2023. 9. 24. 14:49
React에서 Main Navigation을 구현 하던 중, menu 버튼에 마우스를 대면 색깔이 채워지는 효과를 만들고 싶었읍니다. React에서는 a태그 대신 NavLink를 넣으면 css에서 자동으로 a태그로 인식이 되어 사용하믄 됩니당 1. box shadow + inset을 활용한 구현 box shadow를 transition하면서 색을 채우는 방식, 어디서 부터 shadow를 채울지 지정해주고 shadow의 색을 원하는 색으로 채워줍니다. See the Pen a css hover example by woongwoongs (@woongwoongs) on CodePen. 2. css before 를 사용한 구현 See the Pen Untitled by woongwoongs (@woongwoon..