popo story popo story

자식이 focus 가 될 때 부모요소에 효과를 주고싶으면 어떻게 해야할까? 예를 들어 위 input 박스처럼 원래는 회색 border이지만 인풋에 focus 할 시 파란색 border로 바꾸고 싶다고 해보자 현재 코드의 구조는 //css div { border: 2px solid var(--type-gray-5); } input { border: none; outline: none; } 이렇게 되어있다. input 태그에 focus 가 될 시에 부모요소인 div에 효과를 주고싶다면 focus-within 을 사용하면 된다. 부모요소에 focus-within 를 작성해주고, 안에 focus 시 원하는 css를 작성해주면 된다! //css div { border: 2px solid var(--type-gra..

아래 게시물을 통해 원하는 영역에 스크롤 적용하는 법을 알아보았다 https://12yeonii.tistory.com/102 [CSS] overflow : 원하는 div 구간에 스크롤 적용하기 react 로 웹사이트를 제작할때, 전체 페이지의 내용이 길어지게 되면 자동적으로 스크롤이 적용된다 하지만 전체 페이지가 아니라 원하는 구간에만 스크롤을 적용하고 싶다면, css 중 overflow 의 scr 12yeonii.tistory.com 이제 이 기본 스크롤바를 내가 원하는 대로 커스텀할 수도 있다 /* 영역 설정*/ 영역{ height: 300px; width: 65px; background: #F5F5F5; overflow-y: scroll; } /* 스크롤바 설정*/ 영역::-webkit-scroll..

react 로 웹사이트를 제작할때, 전체 페이지의 내용이 길어지게 되면 자동적으로 스크롤이 적용된다 하지만 전체 페이지가 아니라 원하는 구간에만 스크롤을 적용하고 싶다면, css 중 overflow 의 scroll 을 이용하면 된다 그렇다면 overflow에 대해 알아보도록 하자! 1. overflow : visible overflow : visible visible은 overflow의 가장 기본적인 속성이다 visible로 설정을 해주게 되면, 아래처럼 원하는 구간을 설정해도 내용이 그 크기를 넘어서까지 렌더링 된다 See the Pen overflow-visible by Chaeyeon An (@chaeyeonan) on CodePen. 2. overflow : hidden overflow : hid..

크롬에 이미지를 삽입하면 화질이 깨지는 모습을 종종 발견할 수 있다 이미지 파일 화질을 개선할 수 있는 css 를 알아보자 1. image-rendering 이미지 랜더링 방식을 바꾼다 image-rendering: -webkit-optimize-contrast; 2. translateZ transform: translateZ(0); z축을 0으로 적용하여 깊이감을 없앤다. 3. backface-visibility backface-visibility: hidden; 위 3가지 CSS를 통해 크롬에서 발생하는 화질 저하의 문제를 조금은 개선할 수 있다 다른 방법이 있다면 계속해서 추가할 예정이다