form 테스트하는 도중 자동완성목록 중 하나를 클릭해보니 이렇게 파란색 배경이 뜨게되었다. 크롬이나 사파리처럼 webkit을 사용하는 브라우저에서 볼 수 있는데, 이것은 아래의 코드로 배경을 지워줄 수 있다. input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #000; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }
https://developer.mozilla.org/ko/docs/Web/CSS/calc() calc() - CSS: Cascading Style Sheets | MDN calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. developer.mozilla.org calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다. 예시1 height: calc(100vh-50px) 전체 스크린에서 50px을 뺀 값을 적용합니다. 예시2 height: calc(100vh-50px) 부모컴포넌트의 100%값에서 50px 뺀 값을 적용합니다. 이렇게 calc()를 사용하면 자동적으..
block level에서 사용할 수 있다. 이렇게 사용하면 너비에 넘치는 문자열이 ...으로 표기된다. white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
이전 포스팅에서 grid에 대하여 적은 글이 있다. cheri.tistory.com/63?category=927511 Grid 참고 사이트 studiomeal.com/archives/533 이번에야말로 CSS Grid를 익혀보자 이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대 cheri.tistory.com 챌린지를 진행하면서, grid에 대해 상세히 정리해야될 것 같아 포스팅을 쓴다. auto-fit과 auto-fill은 행/열의 개수를 그리드 컨테이너 및 행/열 크기에 맞게 자동으로 조정한다. 이 둘의 차이를 한번 느껴보고자 한다. minmax를 쓰지 않을때! minmax를 쓰지 않을때는 auto-fit과 auto-fill은 ..
