반응형 프론트엔드/스타일링5 Material Design - The color system https://m2.material.io/design/color/the-color-system.html Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. m3.material.io 머티리얼 디자인의 컬러 시스템에 대해서 설명하고 있다. 어떤식으로 색상이 활용되는지 예시를 통해 설명하고 있고 관련된 도구를 제공한다.(Material palette generator) 머티리얼 디자인이 적용된 서비스들로 케이스 스터디 문서도 제공하는데 한번 .. 2023. 6. 17. canvas가 text-align 속성에 영향을 받는 이유 -상황- canvas가 왼쪽 오른쪽 마진이 엄청 들어가서 표시되는 문제 발생 보니까 뭔가 중앙에 표시되고 있는 것 같다. F12 누르고 이것저것 CSS를 막 넣었다 뺐다 해보다가 text-align:center라고 돼있는 부분을 빼니까 갑자기 제대로 나옴 왜지? 하고 찾아보니 canvas가 inline 요소이기 때문에 img, input 태그처럼 text-align에 영향을 받는다고 한다. https://stackoverflow.com/questions/45406873/why-does-text-align-have-an-effect-on-canvas Why does text-align have an effect on canvas? I have multiple canvases layered over each.. 2023. 6. 4. transition-timing-function으로 트랜지션 타이밍 조정하기 보호되어 있는 글 입니다. 2022. 12. 15. justify-content: space-around 중에 display:none 애니메이션 적용 display:flex를 여기저기 바르던 시절.... 메인 메뉴를 만들고 있었다. 메뉴가 닫힌 상태에서는 collapse 버튼이 안나오고 열린 상태에서만 나오도록 처리했다. 리액트를 사용중이므로 실제로 아이콘 버튼이 렌더 안되도록 처리해뒀는데 space-around 상태에서 아이템이 사라졌다 없어졌다 하니까 상태에 따라서 살짝 꿈틀 하는 문제가 있었다. {collapse? null : } display:none 처리하고 transition과 transition-timing-function의 step-end를 사용해서 해결하려고 했는데 .container{ display: flex; justify-content: space-around; .expandButton { transition: 0.5s; tran.. 2022. 12. 13. 그리드 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area https://studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “ studiomeal.com 2022. 11. 25. 이전 1 다음 반응형
