오늘의 CODE

자신의 배경 및 부모와 혼합되는 모드는 지정함 /* 키워드 값 */ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturat..

#flexbox { display: flex; flex-wrap: wrap; width: 300px; gap: 20px 5px; } grid일때와 동일하게 사용할 수 있음. 단, IE에서 지원 X

* matches()가 is()로 이름이 변경됨. /* header, main, footer 어떤 엘리먼트 내부에 속해있던지 p:hover 시 css 적용 */ :is(header, main, footer) p:hover { color: red; cursor: pointer; } /* 아래의 css값과 동일함. */ header p:hover, main p:hover, footer p:hover { color: red; cursor:pointer; } :where()와 거의 비슷한 기능을 갖고 있지만 명시도에서 차이가 난다. :where()이 0의 명시도를 반면 :is()는 구체적인 명시도를 갖는다. :where(section.where, aside.where, footer.where) p { color..

scroll-snap-을 사용하면 사용자가 터치, 휠을 조작했을 때의 오프셋을 설정할 수 있음. scroll-container는 scroll snap 동작이 발생하는 영역을 의미함. .scroll-container { overflow:auto; scroll-snap-type: y mandatory; } .scroll-area { scroll-snap-align: start; } DEMO - https://codepen.io/tutsplus/pen/qpJYaK Scroll Snap Demo ... codepen.io scroll-snap-type snap position을 지정할 수 있는 축을 결정하는 scroll snap axis, 스냅의 엄격도를 지정하는 scroll snap strictness를 함께..

주어진 하나 이상의 css 기능을 브라우저가 지원하는지 여부에 따라 다른 스타일 선언을 할 수 있음. (기능 쿼리 - feature query) 지원 조건은 하나 이상의 키:값을 and, or, not으로 연결해 구성하며, 괄호로 묶어 우선순위를 지정할 수 있음. 선언 구문 @supports (transform-origin: 5% 5%) {} @supports not (transform-origin: 10em 10em 10em) {} @supports (display:grid) and (not(display:inline-grid)) {} @supports (display:table-cell) and ((display:list-item) and (display:run-in)) {} @supports (tr..

이미지 또는 특정 엘리먼트를 정해진 비율로 작게 보이거나 크게 보이게 하고 싶을 때 특히, 이미지가 img 태그가 아닌 background를 사용할 경우, 유용하게 사용됨. padding-top 또는 padding-bottom을 이용하는 방법 container 요소에 적용된 width의 값을 기준으로 inner에 padding-top 또는 bottom을 지정해줌. * 이 방법을 사용하기 위해서는 하나의 조건과 다른 하나의 엘리먼트가 필요함 (즉 아래 예제와 같이 container 요소와 하위 요소가 필요) 예제 1:1 Aspect Ratio (height equal to width) .container { background-color: red; width: 100%; } .inner { padding-..

transform-origin: x,y; Margin-block-start : 20px -> 요소 상단 마진 20 적용됨. Margin-block-end: 30px -> 요소 하단 마진 30 적용됨. Padding-inline-start -> 요소 우측 패딩 적용 Padding-inline-end -> 요소 좌측 패딩 적용 font-size: clamp(min, val, max); min(100px, 60%) -> 다른 단위를 사용할 때 유용함. 입력된 숫자를 비교하여 작은 수를 반환함. max도 동일하게 사용하며, 대신 큰 수를 반환 가상 클래스 - 싱글 콜론 :link, :visited, :hover, :active, :first-child, :nth-child 가상 엘리먼트 - 더블콜론 ::firs..

developer.mozilla.org/ko/docs/Web/CSS/-webkit-line-clamp -webkit-line-clamp -webkit-line-clamp CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한합니다. developer.mozilla.org white-space:nowrap; word-break:break-all; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; display:-ms-flexbox; display:box; word-break:break-all; -webkit-line-clamp:2; -webkit-box-orient:vertical;

* pointer-events: 클릭 이벤트 허용 여부 pointer-events는 요소에 부여된 이벤트를 제거하거나 활성화시킬 수 있다. 좀 더 자세히 말하자면 HTML요소의 마우스/터치 이벤트(css-hover/active, JS-click/tap, 커서 드래그 등)에 어떻게 반응할 지 지정할 수 있는 속성이다. pointer-events: auto; // 비활성화된 이벤트를 다시 기본 기능을 하도록 되돌림. pointer-events: none; // 요소가 포인터 이벤트의 대상이 되지 않음. // svg 전용값 생략 ☠️ 사용 시 유의할 점 해당 속성이 지정되었더라도 반드시 이벤트의 이벤트 리스너가 호출되지 않을거라는 보장은 없다. 예를 들어 부모 엘리먼트가 pointer-events: none ..