CSS5 [javascript] CSS 이미지 필터 (image filters) 참고: https://levelup.gitconnected.com/css-image-filters-e549271864f7 "필터" 라는 단어를 들으면 가장 먼저 떠오르는 것은 인스타그램 필터일 것 입니다. 아니면 당신을 코첼라 가는 강아지로 바꿔주는 스냅쳇 필터일 것 입니다. 이 포스트에서는 CSS를 사용하여 앱의 이미지에 매혹적이고 세련된 효과를 줄 수 있는 filter 속성에 대해 알아보겠습니다. 사용할 수 있는 필터는 다음 10 가지 입니다: grayscale() sepia() blur() invert() opacity() saturate() contrast() brightness() hue-rotate() drop-shadow() 위의 모든 메소드에서 Chrome 이나 Safari의 경우 -web.. 2023. 6. 21. [javascript] HTML 드롭다운 메뉴 만들기 (drop-down) 참고: https://www.freecodecamp.org/news/html-drop-down-menu-how-to-add-a-drop-down-list-with-the-select-element/ 드롭다운 메뉴는 다양한 웹 사이트, 응용프로그램, 웹 페이지에서 목록을 표시하기 위해 사용하고 있습니다. 이를 사용하여 네비게이션 메뉴, 양식 옵션 등을 만들 수 있습니다. 이러한 것 들을 보다보면 메뉴를 만드는게 얼마나 복잡할지 짐작할 수 있습니다. 사실 경우에 따라 조금 복잡한 경우도 있습니다. 드롭다운 메뉴는 사용자가 메뉴를 클릭하거나 마우스 커서를 올리면 아래로 쭉 펼쳐지는 옵션 목록입니다. 또한 이 메뉴는 사용자가 다시 클릭하거나 커서를 빼면 사라집니다. 이 포스트에서는 웹 페이지에 드롭다운 메뉴를 .. 2023. 5. 26. [javascript] CSS responsive grid (flexbox) 참고: https://medium.com/@mignunez/how-to-create-a-responsive-image-grid-gallery-with-html-css-flexbox-1a4ea78f1ab3 이 포스트에서는 반응형 이미지 그리드를 만드는 방법을 알아보겠습니다. 개괄적인 아이디어는 내부에 세 개의 열이 있는 하나의 컨테이너를 만드는 것 입니다. 각 열에는 자체 이미지 세트를 넣습니다. 열 내부의 이미지 정렬은 flexbox로 합니다. 아래서 보다시피 이미지는 마법 처럼 정렬되는 것이 아니라 전략적으로 그렇게 보이도록 만들어진 것 입니다. TL;DR 모든 코드와 데모는 codepen에서 확인할 수 있습니다. See the Pen image gallery by shinyks (@shinyks) o.. 2023. 5. 2. [javascript] CSS scroll indicator (수평 스크롤바) 참고: https://css-tricks.com/books/greatest-css-tricks/scroll-indicator/ JavaScript를 쓰지 않고 사용자가 페이지를 얼마나 스크롤 했는지 보여주는 진행 표시줄을 만드는 방법이 있습니다. 그래디언트와 포지셔닝을 잘 사용해서 말입니다. 이미 스크롤 위치를 표시하는 빌트인 브라우저 기능이 있습니다. 우측에 표시되는 스크롤 막대로 아주 잘 작동합니다. 또한 이 스크롤 바 스타일을 바꾸는 표준화된 방법까지도 있습니다. body { --scrollbarBG: #CFD8DC; --thumbBG: #90A4AE; scrollbar-width: thin; scrollbar-color: var(--thumbBG) var(--scrollbarBG); } 여기에 최.. 2023. 3. 12. [javascript] CSS transition 애니메이션 (타이밍 함수) 참고: https://zellwk.com/blog/css-transitions/ HTML 구성요소를 애니메이션화하는 가장 간단한 방법은 CSS transition을 사용하는 것 입니다. 이 포스트에서는 CSS transition이 어떻게 작동하는지, 또 이를 활용해 어떻게 애니메이션을 만드는지를 알아보겠습니다. transition은 CSS 속성이 일정한 기간동안 하나의 값에서 다른 값으로 변경될 때 발생합니다. 다음의 예와 같이 transition 속성을 사용하여 CSS transition을 생성할 수 있습니다: .selector { transition: property duration transition-timing-function delay; } transition 속성은 transition-prop.. 2022. 11. 25. 이전 1 다음
