FrontEnd/CSS 썸네일형 리스트형 Media Query 설정 Desktop (1281px 이상) @media (min-width: 1281px) { //CSS } Laptop, Desktop (1025px ~ 1280px) @media (min-width: 1025px) and (max-width: 1280px) { //CSS } Tablet(세로) (768px ~ 1024px) @media (min-width: 768px) and (max-width: 1024px) { //CSS } Tablet(가로) (768px ~ 1024px) @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { //CSS } Tablet(저해상도), Mobile(가로) (481px ~ 767px) .. 더보기 Search Input - Expanding Event CSS 서치 박스 구현 하기 HTML 삽입 미리보기할 수 없는 소스 코드 HTML CSS Before expanded .search { border: none; height: 36px; width: 36px; border-radius: 18px; /* half of 36, to make it circular */ padding-left: 36px; /* left position: 10px, bg size: 16px */ background: url(./Shape.svg) no-repeat 10px/16px, white; cursor: pointer; } After expanded .search { transition-property: width, border-radius, box-shadow; trans.. 더보기 Button - Hover Event HTML 삽입 미리보기할 수 없는 소스 코드 .btn { position: relative; background: none; border: solid 1px #121212; transition: color 200ms; } .btn:is(:hover,:focus) { color: white; } .btn::after { position: absolute; content: ''; inset: 0; z-index: -1; background-color: #121212; transform-origin: left; transform: scaleX(0); transition: transform 200ms; } .btn:is(:hover, :focus)::after { transform: scale(1); } 더보기 이전 1 다음
