CSS 2 [Next] Tailwind CSS 도입 및 세팅(feat.Next 12) Tailwind CSS 란? 공식홈페이지의 설명을 살펴보겠습니다. "HTML에서 떠나는 일 없이 빠르게 모던한 웹사이트를 빌드해줄수 있게 하는 프레임워크" 라는 설명으로 시작합니다. 어떤걸 보여주는가 | BEM 전통적인 방식의 CSS 중에 유명한 것으로는 BEM이 있습니다. BEM은 Block, Element, Modifier의 앞글자들을 합친것으로 각각 __와 --로 구분합니다. .header__navigation--navi-text { color: red; } 이렇게 class를 통해 스타일을 정의하고 각각의 HTML element에 입히게 되는 구조입니다. 따라서 어떻게 보이는가 보다는 "어떤걸 보여주는가" 에 초점을 맞춘 방법론입니다. 예를 들자면 위의 CSS는 header 블록의 navigati.. 2022. 1. 5. [자바스크립트] 스크롤에 연동되는 fade 효과를 구현하는 3가지 방법 요새 css와 자바스크립트를 이용해서 interactive webpage에 대해 관심을 가지고 공부하고 있다. 특히 유튜버 중에 Interactive Developer 이분을 보면서 수준 차이를 확실히 느끼고 있다. Interactive Developer 코드로 만드는 애니메이션, 영감, 실리콘밸리의 생활과 해외취업에 대해 이야기 합니다. https://blog.cmiscm.com/ www.youtube.com 이런 와중에 이분의 포트폴리오 사이트를 보게되었고, 초라한 내 포폴 사이트에 디자인적 요소를 하나씩 추가해보면 어떨까 싶어서 시간 날 때마다 추가하고 있다. 저번에는 버튼 클릭시 소리가 나는 기능을 추가해봤고, 이번에는 스크롤에 따라 fade in, out이 되는 기능을 추가해보려고 한다. 그럼 .. 2021. 7. 22. 이전 1 다음
