오늘의 CODE

주어진 하나 이상의 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 ..

flex-grow 아이템의 증가 너비 비율 설정 *css .container { display:flex; } .container .item { width:100px; height:100px; background:tomato; } .item1 { flex-grow:2; } .item2 { flex-grow:1; }

order 아이템의 순서 설정 - 숫자를 지정해서 순서가 클수록 순서가 밀림(음수 허용) - html의 구조와 상관없이 순서 설정 가능(0이 기본설정)

- display flex 컨테이너 요소가 블록 inline-flex 컨테이너 요소가 인라인 * flex-flow - flex-direction 아이템의 주축(*main-axis)을 설정 row 수평 row-reverse 수평 거꾸로 column 수직 column-reverse 수직 거꾸로 - flex-wrap 아이템의 줄바꿈을 설정 nowrap 여러줄로 묶지 않고 한줄로 표시(기본 설정 값이며 아이템에 지정한 값이 가변함) wrap 여러줄로 묶음 (아이템에 지정한 값을 고정으로 가져감) wrap-reverse 여러줄로 묶되 역방향으로 - justify-content 주축(main-asix)의 정렬방법을 설정 flex-start 아이템을 시작점(flex-start)으로 정렬(왼쪽 정렬) flex-end ..

columns : width count; auto : 브라우저가 단의 너비와 개수를 설정 column-width : 단의 최적의 너비를 설정 (auto, px, em, cm 설정) column-count : 단의 개수를 설정 (auto, 숫자로 설정) column-gap : 단과 단 사이의 간격 설정 (normal, px, em, cm) column-rule : 두께 스타일 컬러; 단과 단 사이의 (구분)선을 지정. 선의 색상은 요소의 글자 색상 color 색상의 영향을 같이 받음으로 지정하지 않으면 글자 색상과 동일한 색상으로 구현됨. column-width : 선의 두께 지정 column-style : 선의 스타일 지정 column-color : 선의 컬러 지정