본문 바로가기
터치 디바이스(핸드폰/패드) 마우스 hover 해결방법 pc에서 마우스 hover 가상 클래스를 이용해서 이펙트를 주는 경우가 정말 많다.근데 핸드폰이나 패드 같은 "터치" 디바이스에서 제대로 작동하지 않는다는 문제가 존재한다.이를 해결하기 위해서 해결방법을 작성해 본다.https://ykwan0714.github.io/%ED%84%B0%EC%B9%98-%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4-%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%97%90%EC%84%9C-hover-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0/ 터치 디바이스, 모바일에서 hover 제거하기 | 잡다한 개발 이야기모바일에서 클릭시 hover 효과가 나타난다. 이를 제거해 보자.ykwan0714.github.io(관련글)핵심핵심은.. 2024. 10. 31.
미디어 쿼리란? 기초부터 실전까지 미디어 쿼리란 "반응형 웹 디자인"을 위한 훌륭한 명령어라고 생각하면 편하다.인터페이스는 각각 "데스크톱 / 태블릿 / 핸드폰"으로 아주 크게 나눌 수 있다. 근데 이 인터페이스의 크기는 서로 각각 다르며 같은 종류의 장치라도 넓이와 높이가 다르다. (예를 들어 아이폰 12 pro와 갤럭시 s8의 넓이는 다르다.)즉, 다른 사이즈의 디바이스이지만.. 우리는 "동일한 유저 경험"을 제공해야 하지 않겠는가. 이것을 위해서는 미디어 쿼리는 필수라고 볼 수 있다.("동일한 유저 경험" ... 이게 진짜 생각보다 만만치 않다. 어찌 보면 챌린지에 가깝다.)아무튼. 이에 대한 영상을 참고하길 바란다.https://youtu.be/hltvPyLHKPk?si=-xFzEhdmT87IYFEX 2024. 10. 9.
프드프 구매 현황 따라해봄. https://pudufu.co.kr/ 프드프상위 1%만 아는 고급 스킬을 알려드립니다. - 돈버는방법, 창업, 돈버는법, 쇼핑몰제작, 위탁판매, 인터넷투잡, 남자소자본창업, 상가분양, 자기계발, 전자책, ebookpudufu.co.kr유명한 사이트까지는 아니지만, 자기계발하시는 분들에게는 조~금 유명할 사이트인(?) 프드프 사이트입니다.그중 "구매 현황"이라는 카테고리를 한번 따라 해서 만들어봤습니다.  (이걸 구현한다는 뜻.)완전 구현은 아니지만, 핵심적인 요소. 즉, 아래에서 위로 무한히 계속되는 애니메이션이 들어가 있습니다.마지막 리스트부분과 첫 리스트 부분에는 약간의 mask가 들어가 있습니다.관련된 코드는 다음 깃허브 페이지에 들어가면 볼 수 있습니다.https://github.com/kss2.. 2024. 9. 23.
CSS에서 반응형 웹페이지를 object-fit 속성으로 컨텐츠 제어하기 object-fit 이란? object-fit은 이미지나 비디오와 같은 대체 요소를 부모 요소 크기에 맞게 조절하는 속성이다. 이 속성은 다양한 값들을 통해 콘텐츠의 크기와 비율을 유연하게 제어할 수 있어, 반응형 레이아웃에 많이 활용되는 속성이다.https://dev-chim.tistory.com/entry/CSS-object-fit [CSS] 반응형 웹페이지, object-fit 속성으로 미디어 컨텐츠를 완벽히 제어하기반응형 디자인은 현대 웹 개발에서 필수적인 요소로 자리 잡았습니다. 다양한 디바이스와 화면 크기에 맞게 웹 페이지를 최적화하는 것은 사용자 경험을 향상하는 중요한 과제 중 하나입니다.dev-chim.tistory.comhttps://www.daleseo.com/css-object-fit.. 2024. 9. 4.
CSS 애니메이션 사이트 https://youtu.be/OWaHfpHxgb8?si=NxfAguBRGPu8U2Lx(사용방법)https://animista.net/play Animista - On-Demand CSS Animations LibraryAnimista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.animista.net(사이트) 2024. 9. 3.
CSS 전체적인 복습 (시작하기에 앞서서, 짐코딩님의 무료 강의를 참고하였음을 알림)https://github.com/gymcoding/learn-html-css GitHub - gymcoding/learn-html-cssContribute to gymcoding/learn-html-css development by creating an account on GitHub.github.com(오픈 소스는 다음과 같음. 고마워요 짐코딩!!) HTML/CSS 강의 www.youtube.com  CSS란? CSS란?Cascading Style Sheets의 약자로, HTML문서를 꾸밀 때 사용하는 스타일을 잘 정리한 시트(문서)이다. HTML로 웹 페이지의 뼈대를 만들고, CSS로 웹 페이지를 예쁘게 꾸미는 역할을 한다.CSS 구조C.. 2024. 8. 28.
CSS Flexbox / Grid css에서 Flexbox 와 Grid는 정말 중요한 개념이다. 이에 대한 설명은 밑의 영상을 참고하자. (아, 그리고 "절대 하나 하나 처 외우지 말 것)https://youtu.be/7neASrWEFEM?si=LVytunQ_Ozp0U2Ww플렉스박스https://youtu.be/nxi1EXmPHRs?si=TLNpAK_XtDSRaKXD그리드알아두면 좋은 사이트 (플레스 박스 / 그리드)https://codepen.io/enxaneta/full/adLPwv/(플렉스 박스 레이아웃 체킹) Flexbox playground...codepen.iohttps://www.joshwcomeau.com/css/interactive-guide-to-grid/(그리드 작동 원리) An Interactive Guide to .. 2024. 7. 12.

티스토리툴바