본문 바로가기

HTML, CSS/CSS6

스크롤 움직임에 맞춰 곡선 그리기 2022. 4. 10.
CSS Page transition 예제 2 _ 책갈피 형식의 페이지 전환 사용 스택 React, SCSS/SASS 2022. 3. 24.
CSS Page transition 예제 1 _ 슬라이드 형식으로 페이지 넘기기 사용 스택 React, SCSS/SASS 2022. 3. 24.
CSS 초기화 CSS 속성 작업을 하기 전에 태그의 불릿기호와 같은 필요없는 요소들을 삭제하거나 필요없는 여백을 없애고 폰트 등을 통일하는 작업이 필요하다. CSS 초기화를 위한 방법은 여러가지가 있으나 나는 아래와 같이 단순하게 여백을 없애고 정말 불필요한 요소들만 지우는 식으로 초기화를 하고 코드를 작성한다. body, div, ul, li, dl, dd, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form, figure, figcaption { margin: 0; padding: 0; } /* a 태그 초기화 */ a { color: #8f8f8f; text-decora.. 2022. 1. 21.
CSS 속성 pointer-events: none; 설명 해당 엘리먼트가 포인트 이벤트 핸들러의 대상이 되는지의 여부를 결정 어떤 엘리먼트를 생성하고 그 위에 이미지를 오버레이했을 때 오버레이된 이미지가 클릭에 반응하지 않도록 하고 싶을 때 사용 지원 IE 11 이상에서 지원 예제 https://codepen.io/improvise0828/pen/jOGBeZY 더보기 // HTML pointer-events: auto; (기본값) Click Here!! Overlay 클릭한 대상 pointer-events: none; Click Here!! Overlay 클릭한 대상 // CSS .div-line { width: 300px; height: auto; border: 1px solid black; border-radius: 10px; padding: 10px.. 2021. 12. 16.
스크롤바를 최하단에서 시작하게 하기 React에서 모달창을 사용해 채팅 로그를 표시하는 컴포넌트를 만드는 중이였다. 채팅로그를 순서대로 나열하면 아래와 같은 모습이 된다. 하지만 일반적으로 채팅로그는 새로운 채팅이 올라올 때 마다 채팅이 위로 한개씩 밀려 올라가는 형태이다. 따라서 유저가 스크롤을 위로 올리지 않는 이상 스크롤바의 기본 위치는 아래와 같아야 했다. 구글에서 검색해보니 DOM 엘리먼트의 Element.scrollHeight, Element.scrollTop 이 두가지 프로퍼티를 사용하는 방법이 있었다. Element.scrollHeight는 해당 엘리먼트의 스크롤 길이 Element.scrollTop은 현재 스크롤의 위치이다. 이걸 사용하면 Element.scrollHeight = Element.scrollTop으로 간단하게.. 2021. 11. 29.

티스토리툴바