728x90 반응형 HTML, CSS13 [CSS] Carousel 정리하기 (2) - Overlap 안녕하세요. J4J입니다. 이번 포스팅은 Carousel 정리하기 마지막인 Overlap에 대해 적어보는 시간을 가져보려고 합니다. Overlap Carousel 원리 overlap carousel의 원리는 일반적인 carousel의 원리에서 조금 더 생각해봐야 할 부분이 있습니다. 기본적인 부분은 일반 carousel과 동일하지만 주목해야 할 차이점은 carousel에 보일 아이템들의 위치가 항상 사용자에게 보이는 화면에 위치한다는 것입니다. 그림으로 예를들면 다음과 같습니다. 위의 그림을 보면 사용자가 처음 화면에 접속했을 때나 오른쪽으로 리스트를 넘겼을 때나 동일하게 아이템들의 위치는 항상 사용자에게 보이는 화면에 위치하고 있습니다. 하지만 그와 달리 아이템을 덮고 있는 컨테이너들은 좌우 이동되는 .. 2023. 3. 12. [CSS] Carousel 정리하기 (1) - Drag 안녕하세요. J4J입니다. 이번 포스팅은 Carousel 정리하기 첫 번째인 Drag에 대해 적어보는 시간을 가져보려고 합니다. Carousel 원리 제가 생각하는 Carousel의 원리를 그림으로 표현하면 다음과 같습니다. 그림에 대해 설명을 해보면 기본적으로 carousel에는 보이고 싶은 아이템들을 일렬로 나열해 둡니다. 사용자가 페이지에 접근했을 때 carousel에 있는 여러 아이템들 중 하나만 보이도록 하고 나머지 아이템들은 화면에 보이지 않도록 해줍니다. 그리고 아이템을 선택하여 좌우로 드래그를 하게 되면 아이템을 담고 있는 목록의 X좌표를 움직이게 하여 옆에 있는 아이템들을 확인할 수 있는 애니메이션을 제공해 줄 수 있습니다. carousel을 구현하는 방법으로는 정말 다양하게 있습니다. .. 2023. 3. 8. [CSS] linear-gradient에 transition 적용하기 안녕하세요. J4J입니다. 이번 포스팅은 linear-gradient에 transition 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 일반적인 경우 linear-gradient에 transition을 적용한 결과물을 만들기 위해 일반적으로 다음과 같은 형태의 코드를 작성할 것입니다. See the Pen linearGradientTransition-problem by 김 성찬 (@ksccmp) on CodePen. 위의 코드는 버튼을 클릭할 때마다 배경색을 입혀주는 코드입니다. 배경색은 linear-gradient로 입혀주고 transition을 적용했기 때문에 일반적으로 위의 코드에서 결과물이 transition에 적용된 시간 동안 천천히 배경색이 입혀지는 것을 생각할 수 있습니다. 하지.. 2023. 1. 2. [CSS] radio 커스텀하기 안녕하세요. J4J입니다. 이번 포스팅은 radio 커스텀하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서... UI를 구성하면서 많이 사용되는 것 중 하나가 radio 버튼입니다. 하지만 우리가 늘 해왔던것처럼 input [type="radio"]를 사용하다 보면 알 수 있는 것 중 하나가 radio의 버튼 이미지를 input 자체에 style을 줌으로써 변경할 수 없다는 것입니다. 결국 이를 해결하기 위해서는 input에 style을 주는 방식이 아닌 다른 방식을 통해 radio를 구성해야 합니다. 여러 방법들이 있겠지만 그 중 제가 느끼기에 간편하다고 생각되는 방법에 대해 소개해드리겠습니다. radio 버튼의 아이콘들은 다음의 이미지를 사용하겠습니다. radio 커스텀 See t.. 2022. 9. 19. [CSS] checkbox 커스텀하기 안녕하세요. J4J입니다. 이번 포스팅은 checkbox 커스텀하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서... UI를 구성하면서 디자인을 많이 입혀야 하는 것들 중 하나라고 생각되는 것이 checkbox입니다. 하지만 checkbox의 문제점은 기존에 많이 사용되는 input [type="checkbox"]만 활용했을 때 checkbox의 체크 표시를 커스텀할 수가 없습니다. 그러므로 checkbox와 동일한 기능을 수행하며 또한 체크 표시를 커스텀할 수 있도록 추가적인 작업을 진행해줘야 합니다. 이번 글에서는 다음의 체크 박스 아이콘들을 사용할 예정입니다. 선택되지 않았을 땐 위에 있는 아이콘이 표시되도록 하고 선택했을 경우엔 아래 있는 아이콘이 표시되도록 하겠습니다. UI를.. 2022. 9. 13. [CSS] display: none이 transition으로 적용되지 않을 경우 안녕하세요. J4J입니다. 이번 포스팅은 display: none이 transition으로 적용되지 않을 경우 해결하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 발생되었던 상황 적용하고자 했던 css는 버튼을 클릭할 때 div 안에 포함되어 있는 모든 요소가 자연스럽게 화면에 보이지 않는 애니메이션을 적용하려고 했습니다. 간단하게 예시를 들어보면 다음과 같습니다. See the Pen displayNoneTransition-problem by 김 성찬 (@ksccmp) on CodePen. 위에서 toggle 버튼을 클릭하면 문구가 자연스럽게 사라지는 것을 확인할 수 있습니다. 하지만 문구가 있던 곳에 마우스를 가져다 대면 cursor: pointer을 적용했던 부분이 그대로 마우스에 표현되는 것.. 2022. 8. 29. [CSS] 2단 메뉴 드롭다운 CSS 안녕하세요. J4J입니다. 이번 포스팅은 2단 메뉴 드롭다운 CSS에 대해 적어보는 시간을 가져보려고 합니다. 산출물 2단 메뉴 드롭다운되는 방식은 어떻게 구성하고자 하냐에 따라 다른 결과물들이 나올 수 있습니다. 이번 글에서 산출되는 2단 메뉴 드롭다운의 형태는 다음과 같으니 해당 메뉴 구성이 필요하신 분만 참고하시면 될 것 같습니다. 2단 메뉴 구성 (1) - 1단 메뉴바 먼저 가장 기본적인 토대가 구성되어야 하는 1단 메뉴바를 만들어보겠습니다. 1단 메뉴를 구성할 때 저는 table을 사용합니다. 하지만 태그를 table를 사용하지는 않고 ul, li를 이용하지만 ul, li의 display를 각각 변경하여 table처럼 사용하고는 합니다. 간단하게 구현해보면 다음과 같이 구현될 수 있습니다. Se.. 2022. 4. 30. [CSS] 메뉴 밑줄 슬라이드 CSS 안녕하세요. J4J입니다. 이번 포스팅은 메뉴 밑줄 슬라이드 CSS에 대해 적어보는 시간을 가져보려고 합니다. 메뉴 밑줄 슬라이드 - 1 여러 웹 사이트 및 앱을 보면 메뉴 바를 많이 확인할 수 있습니다. 그중 몇몇 사이트 및 앱에서는 메뉴 바를 클릭하거나 슬라이드를 하면 메뉴 밑줄이 함께 움직이는 CSS를 봤던 경험이 있었습니다. 해당 디자인도 한번 구현해보고 싶다는 생각을 가지고 있었기에 코드를 짜 보게 되었고 구현한 코드들을 공유하기 위해 글을 남깁니다. 가장 먼저 간단하게 메뉴를 클릭할 경우에만 밑줄 슬라이드가 되도록 구현해보면 다음과 같습니다. (모바일에서 정상 동작되지 않으신 분들은 Rerun을 한번 눌러주시길 바랍니다 ㅠㅠ) See the Pen menu_underline_slide_1 by.. 2021. 12. 30. [CSS] 터치 슬라이드 CSS 안녕하세요. J4J입니다. 이번 포스팅은 터치 슬라이드 CSS에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 슬라이드 구현 원리에 대한 간단한 설명은 여기를 참고해주시면 됩니다. 터치 슬라이드 CSS 기본적인 슬라이드 구현은 위의 링크를 참고해주시면 되고 이곳에서는 웹 페이지에서 마우스를 클릭하여 슬라이드를 넘기거나 또는 모바일 웹 페이지에서 손으로 화면을 터치하여 슬라이드를 넘기는 CSS를 구현해보려고 합니다. 해당 기능을 구현하기 위해 필요한 이벤트는 각각 총 3가지입니다. 화면을 처음 클릭(터치)할 때 화면을 클릭(터치) 한 상태로 움직일 때 화면에서 클릭(터치)을(를) 멈출 때 화면을 처음 클릭(터치)할 때 필요한 것은 클릭(터치) 한 위치의 좌표값입니다. 좌표값을 구해서 저장해둔 뒤.. 2021. 9. 22. [CSS] 슬라이드 배너 CSS 안녕하세요. J4J입니다. 이번 포스팅은 슬라이드 배너 CSS에 대해 적어보는 시간을 가져보려고 합니다. 화면을 개발하다 보면 정말 자주 만드는 CSS 중 하나로 슬라이드가 있다고 생각합니다. 일반적인 광고 등의 목적을 위해 사용되는 배너역할로써도 사용되고 또한 모바일 웹 페이지를 개발할 때 손가락을 터치하여 좌/우로 넘기를 효과를 주기 위해서도 만들어지고는 합니다. 개인적으로 공부하면서도 자주 접하고 있는데 접할때마다 어떻게 만들었었는지 가끔씩 까먹을 때가 있어서 나중에 참고해보고자 알고 있는 내용을 간단히 적어보려고 합니다. 슬라이드 CSS 우선 가장 기본적으로 버튼을 클릭했을 때 좌우로 넘어가는 슬라이드를 만들어보려고 합니다. 구현하기 전 원리에 대해 간단하게 말씀드려 보겠습니다. 제가 생각하는 슬.. 2021. 9. 22. [CSS] 책장 넘기는 CSS 안녕하세요. J4J입니다. 이번 포스팅은 책장 넘기는 CSS에 대해 적어보는 시간을 가져보려고 합니다. 책장 넘기는 CSS 책장 넘기는 CSS를 한 번 구현해보고자 하는 마음에 여러 가지 검색을 해봤습니다. 그중 이렇게도 책장 넘기는 UI를 만들 수 있구나 하는 것을 발견해서 기록도 할 겸 블로그에 간단히 포스팅을 해보려고 합니다. See the Pen bookPage_1 by 김 성찬 (@ksccmp) on CodePen. 위에 구현해둔 소스는 마우스를 페이지에 올리면 책장 넘기는 효과를 제공해줍니다. 개인적으로 이 방법에서 포인트라고 할 만한 부분은 transform-origin과 perspective라고 생각합니다. transform-origin을 이용하여 페이지의 원점을 변경할 수가 있게 되어 페.. 2021. 8. 13. [CSS] 타이핑 치는 효과를 주는 CSS 안녕하세요. J4J입니다. 이번 포스팅은 타이핑 치는 효과를 주는 CSS에 대해 적어보는 시간을 가져보려고 합니다. 타이핑 치는 CSS 타이핑 치는 효과를 주는 방법에 대해 궁금증이 생겨 검색을 해봤을 때 정말 다양한 방법들을 발견할 수 있었습니다. 제가 해보고자 했던 것은 개행이 존재하는 장문의 글에 대해 타이핑 효과를 주며 화면에 보이게 하는 것이었는데 마땅한 레퍼런스를 찾지 못하다가 이런 방법도 있겠구나라는 생각을 가지며 한 번 구현해봤습니다. 기본적으로 해당 방법에서 메인 역할을 하는 것은 setInterval입니다. 조건에 도달할때까지 주기적으로 계속 반복하며 글자들을 하나씩 담아내는 방법을 사용해 봤습니다. See the Pen 타이핑 효과 by 김 성찬 (@ksccmp) on CodePen... 2021. 8. 9. [CSS] 특정 위치로 부드럽게 스크롤 이동시키기 안녕하세요. J4J입니다. 이번 포스팅은 특정 위치로 부드럽게 스크롤 이동시키는 방법에 대해 적어보는 시간을 가져보려고 합니다. 방법 1: scrollBy 첫 번째 방법은 scrollBy를 이용하는 방법입니다. 간단한 예시로 버튼을 누르게 되면 원하는 위치로 부드럽게 스크롤이 이동되는 코드를 짜 보겠습니다. Section1 페이지를 내리기 위한 구간 ... Section1 Title Section1 Description ... 위의 코드처럼 button1을 클릭할 때 window.scrollBy를 이용하여 스크롤이 부드럽게 이동될 수 있도록 처리해줄 수 있습니다. 해당 코드를 실행하면 다음과 같이 부드럽게 이동되는 것을 확인할 수 있습니다. 방법 2: scrollIntoView 두 번째 방법은 scrol.. 2021. 7. 24. 이전 1 다음 728x90 반응형
