프레임워크/CSS66 [CSS] transform: translte(x, y) + transition을 사용한 우측 고정 미니 배너 구현하기 앞서 테스트 구현한 다락에서 추가로 구현해보고 싶은 UI가 있어서 window.outerHeight / window.innerHeight / window.scrollY를 활용하여 구현하였다. 예제 사이트 화면 아래 화면에서 우측에 있는 "신규 지점 오픈특가 알림" 팝업창이 스크롤을 내려도 스무스하게 이동하면서 고정되는 UI가 마음에 들어서 구현해 보았다. 나에게 딱 맞는 보관공간 찾아보기 '미니창고 다락' 1인가구 원룸부터 4인가구이상의 아파트까지, 레고나 피규어 수집가에게 딱 맞는 크기부터 캠핑, 골프 등의 취미생활에도 딱 맞는 맞춤형 사이즈를 제안해드려요. 이용 시작시 다락이 대신 짐을 www.dalock.kr 구현 코드 및 실행 화면 스크롤 내렸을 때 화면 우측에 팝업창을 고정하려면 transfor.. 2023. 6. 8. [CSS] animation : running로 컨텐츠 반복 애니메이션 구현하기 현생에 치여 살다가 흥미로운 css 개념을 알게 되어서 기능 테스트 해보고 복습할 겸 블로그를 작성해 본다. 예제를 찾다가 다락 공홈 하단에 다락 이용 후기가 생각하던 기능이어서 바로 구현해 보았는 데 animation / animation-play-state / @keyframe을 다뤄볼 수 있어서 좋았다. 예제 사이트 화면 서두에서도 언급했듯이 다락 메인 화면에 다락 이용 후기 UI 코드를 참고하여 애니메이션 기능을 테스트해 보았다. 나에게 딱 맞는 보관공간 찾아보기 '미니창고 다락' 1인가구 원룸부터 4인가구이상의 아파트까지, 레고나 피규어 수집가에게 딱 맞는 크기부터 캠핑, 골프 등의 취미생활에도 딱 맞는 맞춤형 사이즈를 제안해드려요. 이용 시작시 다락이 대신 짐을 www.dalock.kr 구현 .. 2023. 6. 8. [CSS] @container @container란? * Container Queries : 아직 모든 브라우저에서는 지원하지 않고 있고, experiment 실험 모드에서 테스트만 가능합니다. @media(Media Query) vs @container(Container Query) Container Queries는 Media Queries와 매우 비슷한데 @media는 전체적인 window 사이즈에 의거해서 요소들이 어디에 들어 있는지 전혀 신경 쓰지 않고 window 사이즈가 변경되어야지만 요소들을 재배치할 수 있다는 큰 단점을 가지고 있습니다. 이를 보완하기 위해 나온 기능이 container queries입니다! @container는 window 사이즈에 의거하지 않고, 각각 개별적인 부모 요소에 의거해서 부모 요소의 사이즈.. 2022. 6. 8. [CSS] Cascade Layers Cascade Layers * Control of the cascade, simplified style ordering (캐스케이드, 단순화된 스타일 순서 제어) : 스타일링의 순서를 심플하게 만들어 주는 기능으로써 모든 브라우저에서 지원합니다! CSS를 설명하는 단어 중 가장 중요한 Cascading은 폭포수가 흘러가듯이 우선순위가 정해지는 것을 말합니다. 그중에서 개발자는 "구체적 실렉터"와 "선언된 순서" 이 두 가지만 알고 있으면 됩니다. (그만큼 저 두가지가 개발자에게는 중요하다는 의미) 예를 들어 부트스트랩과 같은 프레임워크 CSS를 사용하는 데 프로젝트 CSS를 사용하여 프레임워크의 스타일을 덮어 씌우고 싶을 때는 어떻게 해야 할까요? 1) 최대한 구체적으로 이름을 정의한다. 2)! impo.. 2022. 6. 8. [CSS] Input 태그 > 자동완성 해제 및 입력 기록 제거 [ html ] Input 태그의 자동완성 기능 해제하기, input 입력 기록 제거 자동완성 기능을 해제하는 방법은 아주 간단! autocomplete="off" 속성을 사용해주면 input 태그의 자동완성 기능을 해제할 수 있다. 다른 방법도 있다. input 태그가 포함되어 있는 form 태그에서 비활성 harrydony.tistory.com react-datePicker 라이브러리를 사용한 Calendar의 버전 2를 만들면서 자동완성 기능을 없애는 방법에 대해 찾아보게 되었다. 생각보다 어렵지 않아서 정리를 하지 않을까 하다가 미래의 내가 언제든 지 쉽게 찾아볼 수 있도록 간단하게 정리하였다.😎 위 블로그에서 2가지 방법을 참고하여 현재 만들고 있던 기능에 적용하였다. 첫 번째 방법 autoCo.. 2022. 4. 15. [CSS] text 마우스 드래그 시 CSS 설정 (::selection) [HTML/CSS] 텍스트 마우스 드래그시 색상 변경방법, ::selection CSS에는 다양한 선택자가 존재합니다. 선택자 중에는 pseudo 선택자가 존재하는데 오늘은 이 중에서 ::selection 선택자에 대하여 알아보려합니다. webisfree.com input 태그에 text나 p, span 태그의 text 등등 사용자가 웹 페이지에서 특정 text를 드래그할 때 드래그를 못하는 기능도 있지만, 또 다른 방법으로는 드래그 시 CSS를 커스텀하는 방법도 있다. 특정 text 드래그 CSS 커스텀 하기 테스트를 진행하기 위해 p 태그를 생성하고, text를 삽입 해줬다. 이제 ::selection 선택자를 사용해서 drag 시 p 태그의 CSS를 커스텀해준다. p::selection { back.. 2022. 4. 15. [CSS] Pretendard 웹폰트 적용하는 방법 프리텐다드(Pretendard) 글꼴 웹폰트 적용 방법 프리텐다드 웹폰트 일반적인 경우에는 아래의 코드를 각각 CSS 와 HTML 중에 선택해서 적용하면 된다. CSS @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');.. creativestudio.kr 2022. 4. 7. [CSS] display: none vs visibility: hidden display: none 항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지한다. width, height를 지정하여 가로, 세로 폭을 조절 할 수 있다. div 태그는 display 속성의 기본값으로 block을 가진다. display: none와 visibility: hidden 차이점 둘 다 요소를 보이지 않게 하는 속성이라는 점에서는 동일하지만, UI 측면에서 볼 때 둘은 완전히 다르다. display: none은 화면 상에 어떤 영역을 차지 하지 않고 완전히 삭제된 것처럼 보이게 한다. 그에 반해 visibility: hidden은 해당 요소가 보이지 않을 뿐 요소가 존재하는 영역은 확실히 보여준다. 기본 모양은 아래와 같다. display: none 과 visibili.. 2022. 3. 8. [CSS] Next.js에서 svg 사용하는 방법 svg를 적용하는 방법에는 크게 두가지가 있다. 1. svg 코드를 HTML 부분에 삽입한다. 2. svg 파일을 생성하고 svg 코드를 삽입한 후 해당 .svg를 import 받아 삽입한다. 이 과정에서 발생한 오류은 아래에서 정리했다. 1, 2번 공통 오류 선과 배경색이 black으로 설정 되어 있어서 구분이 안갔는 데 strock(선 속성) 사용해서 해결했다. [HTML기초문법] 15강 SVG태그 Stroke속성 - 오쌤의 니가스터디 1. SVG 태그란? - SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미합니다. - SVG태그는 SVG그래픽을 담기 위한 요소입니다. - SVG태그 내부에 담을 수 있는 ossam5.tistory.. 2022. 2. 24. 이전 1 2 3 4 ··· 8 다음 728x90
