css

개요 css counter를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어 counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 css규칙에 따라 증가하며, 본질적으로 변수입니다. counter()를 이용해서 자동 넘버링을 하기 위해서 다음 속성들을 사용합니다. `counter-reset` : 카운터 생성 및 재설정 `counter-increment` : 카운터 값 증가/감소 `content` : counter() 혹은 counters() 함수 지정할 수 있는 속성 `counter()` 또는 `counters()` 함수: 카운터값 추가 counter-reset css counter를 주어진..

clamp 는 영어로 '(보통 나사를 이용한)죔쇠(죄는 기구)'라는 뜻이다. syntax `clamp(min, val, max)` parameters `,`(콤마)로 분리된 3 개의 파라미터를 받는다. - `min` 은 `val`이 계산되었을 때 가질 수 있는 최소한의 크기이다. - `max` 는 `val`이 계산되었을 때 가질 수 있는 최대한의 크기이다. - `val`은 기본 값을 적으면 된다. 그냥 `px` 는 의미가 없으므로 보통 rem, v*, % 등의 단위를 사용한다. `%`같은 경우는 상위 태그의 크기를 기준으로 잡게 된다. 보통 그렇다는 것이지 세 파라미터 모두 단위에 제한은 없다. example 아래 예시를 통해 clamp 함수의 동작을 이해하도록 하자. - `clamp(100px, 50%..

:where() 가상 선택자 `:where` 의사 클래스 선택자는 css 코딩할 때 선택자의 중복을 줄이는 데 도움이 된다. 예전에는 다음과 같이 여러 엘리먼트 안에 있는 anchor 태그에 hover 효과를 주기위해선 각 선택자들을 콤마(`,` = '또는' 논리)를 이어 나열하여 표현하여야 했었다. element 1 element 2 element 3 nav > ul a:hover, footer > ol a:hover, aside > p a:hover { color: purple; text-decoration: underline wavy deeppink; } 그런데 코드를 보면 `a:hover` 부분이 각 선택자마다 중복되는 것을 확인 할 수 있을 것이다. 거기다 적용해야할 요소가 많으면 많을 수록 선..

미디어 쿼리를 사용하다가 css level4의 범위 구문 문법을 이제 모든 브라우저에서 지원해준다는 점을 알게되었다. 관련 내용과 문법들도 더 알아볼 겸 반응형 웹디와 관련된 내용들을 정리해놓고자 한다. 1. viewport meta tag 애플이 아이폰, 아이패드 등 자사의 모바일 브라우저의 뷰포트(viewport) 크기 조절을 위해 만들었다. viewport란 웹페이지의 가시영역을 의미한다. 즉, 웹페이지가 사용자에게 보여지는 영역을 의미한다. 좀 더 정확히 말하자면, 화면에서 내가 스크롤을 움직이지 않고 볼 수 있는 네모 안쪽 영역을 의미한다(아래 사진에서 빨간 네모 박스). PC에서는 브라우저 창의 크기를 변경함에 따라서 viewport의 크기를 바꿀 수 있다. viewport는 디바이스에 따라 ..

제가 쉽게 보려고 만든 달래님 블로그 요약본입니다. 부록은 중요한 부가적인 내용을 추가한 내용입니다. 꼭 봐야 할 내용입니다. TL;DR z-index의 값이 integer이면 local stacking context를 생성한다. z-index의 값이 auto거나 명시되어 있지 않다면 local stacking context를 생성하지 않고 상위 stacking context를 물려받는다. 1. z-index 의 개념 z축은 요소의 3차원적인 깊이를 나타내는 가상의 개념 & 가상의 축입니다. 웹에서 요소의 Z축 방향의 깊이를 결정합니다. 브라우저는 z-index 속성 값이 낮은 요소를 먼저 그리고, z-index 속성 값이 높은 요소를 나중에 그리기 때문에 요소가 겹쳐있을 경우 z-index 속성 값이 ..

들여쓰기와 내어쓰기를 할 수 있는 속성 값이 양수이면 들여쓰기, 음수이면 내어쓰기가 됩니다. 기본값은 0 입니다. 들여쓰기를 할 때는 적절하게 margin 을 줄 필요가 있습니다. 예제 코드 예시 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Lorem ipsum dolor sit amet, consectetur adipiscing ..

🔎 cubic-bezier 란? cubic-bezier() function은 css에서 transition 속성 혹은 transition-timing-function 속성에서 bazier 곡선 원리를 사용하여 전환 시작과 끝까지의 효과를 제어하는 데 쓰입니다. 🔎 베지어 곡선의 개념 컴퓨터 그래픽에서 베지어 곡선이란 우리가 곡선을 매끄럽게 잘 그릴 수 있게끔 해주는 곡선 알고리즘입니다. 베지어 곡선은 1차 베지어 곡선(linear-bezier-curve), 2차 베지어 곡선(quadratic-bezier-curve), 3차 베지어 곡선(cubic-bezier-curve) … n차 베지어 곡선이 있는데, 우리가 가장 많이 사용하는 것은 2차와 3차 정도가 될 것 같습니다. * 1차 베지어 곡선(linear..

flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성입니다. 대부분의 경우, flex의 값에는 auto, initial, none이나 단위 없는 양의 수를 사용해야 합니다. 각 값의 적용 효과를 보려면 아래 플렉스 컨테이너의 크기를 조절해보세요. 기본적으로 플렉스 아이템은 콘텐츠의 최소 너비 미만으로 줄어들지 않습니다. min-width나 min-height 값을 지정해 바꿀 수 있습니다. 1. 구문 /* Keyword values */ flex: auto; flex: initial; flex: none; /* One value,..

1. 기존 media query 와의 차이점 컨테이너 쿼리가 없었을 시절에는 자바스크립트의 `ResizeObserver` api를 통해서 특정 요소의 크기 변화를 관찰해야 했습니다. 하지만, 이제 간단한 css container 문법 지정을 통해 매우 간편하게 반응형 쿼리를 구현할 수 있게 되었습니다. 또한 기존의 media query는 화면 전체(browser viewport)를 기준으로 반응형을 구현해야 했지만, container query는 하나의 요소를 기준으로 잡아 그 요소의 변화에 따른 반응형 쿼리를 구현할 수 있게 되었습니다. 2. container queries 사용법 브라우저 viewport를 기준으로 잡는 것이 아니라 특정 요소를 기준으로 잡아야 합니다. 그러기 위해서는 특정 요소를 컨..

🔗minmax 함수 먼저 보고 오기 1. grid-auto-rows(grid-auto-cols도 있습니다) .grid-area { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); /* grid-template-rows: repeat(10, minmax(100px, 1fr)); */ grid-auto-rows: minmax(100px, 1fr); width: 100%; } `grid-template-rows`의 역할은 몇 행이 올 지 개수를 적으면서 행의 높이를 정해줄 수가 있죠.(1행만 오는 경우 높이만 지정. 1행만의 높이만 지정할 경우 grid-template-rows: 50px이든 grid-auto-rows: 50px이든 동..