CSS

: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` 부분이 각 선택자마다 중복되는 것을 확인 할 수 있을 것이다. 거기다 적용해야할 요소가 많으면 많을 수록 선..

제가 쉽게 보려고 만든 달래님 블로그 요약본입니다. 부록은 중요한 부가적인 내용을 추가한 내용입니다. 꼭 봐야 할 내용입니다. 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 속성 값이 ..

🔎 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를 기준으로 잡는 것이 아니라 특정 요소를 기준으로 잡아야 합니다. 그러기 위해서는 특정 요소를 컨..

TL;DR min은 주어진 값 중 최솟값을, max는 최대값을 선택합니다. 보통 min 은 max-width를 대체하는 데 많이 사용되고, max 는 min height를 대체하는 데 많이 사용됩니다. 1. min min(, , , , , , or ) 코드 하나로 이해하는 게 더 좋습니다. /* 이 코드를 */ width: 70%; max-width: 1000px; /* 이렇게 바꿀 수 있다. */ width: min(70%, 1000px); // 70%가 1000px을 넘어갈 경우 1000px 이 더 작으므로 1000px을 택하게 된다. 2. max max(, , , , , , or ) /* 이 코드를 */ height: 70%; min-height: 1000px; /* 이렇게 바꿀 수 있다. */ h..

1. selector(선택자) style을 적용하고자 하는 HTML 요소를 특정하기 위해서 selector가 존재한다. style을 적용하고자 하는 HTML 요소를 selector로 특정하고 선택된 요소에 스타일을 정의하는 것이다. 구조를 그림으로 그려보자면 다음과 같다. 선택자의 종류 크게 4가지가 있다. 기본 선택자(Basic selectors) - 기본적인 선택자의 표현 그룹 선택자(Grouping selectors) - 다수의 요소를 선택하는 선택자의 표현 결합 선택자(Combinator selectors) - 요소와 인접하는 형제 또는 자식 요소들을 선택하는 선택자의 표현 의사 클래스 또는 의사 요소(Pseudo classes or Pseudo elements) 1. 기본 선택자 기본적이고 가장..

개요 css position은 문서 상에 요소를 배치하는 방법을 지정합니다. `top`, `right`, `bottom`, `left` 속성(=이를 오프셋 속성이라고 합니다.)이 요소를 배치할 최종 위치를 결정합니다. 값 static 기본값. 요소를 일반적인 흐름에 따라 배치 relative 일반적인 문서 흐름에 따라 배치하되, 오프셋 속성에 따라 기존 위치에서 옮겨집니다. 오프셋이 없으면 원래 그 자리에 그대로 위치합니다. 옮겨진 요소는 주변 요소와 충돌하지 않습니다. 차지하고 있는 원래 공간도 그대로 유지됩니다. absolute 일반적인 문서 흐름에서 벗어나 가장 가까운 상위의 positioning 중인 요소를 기준으로 잡아 오프셋을 적용합니다. 단, 기본 값인 static position은 기준이 ..

1. 개요 흔히 마진 겹침 현상이라고도 부른다. 마진이 겹치게 되면 상쇄가 일어나기 때문에 영미권에서는 '마진 상쇄(Margin collapsing)'이라고 부르고 있다. 🔗mdn 문서에 따르면 여러 블록의 `margin-top` 및 `margin-bottom`은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 결합(상쇄)되곤 한다. 이런 동작을 여백 상쇄라고 한다. 단 예외로, floating 요소와 절대 위치를 지정한 요소의 여백은 절대 상쇄되지 않는다. 라고 표현되어 있다. 눈여겨 볼 점은 좌우로는 마진 상쇄가 발생하지 않고 위아래로만 마진 상쇄 효과가 발생한다는 것이다. (마진 상쇄 예외에 대해서는 맨 밑에서 정리하였다.) 밑에서 계속 얘기할 "박스"는 mdn문서에서 얘기하는 예외의 요소를..

CSS 캐스캐이딩(Cascading)요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. 이때 충돌을 피하기 위해 CSS 적용 우선순위가 필요한데 이를 캐스캐이딩(Cascading Order)이라고 한다.​캐스캐이딩에는 다음과 같이 세가지 규칙이 있다.중요도 : CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.명시도 : 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.선언순서 : 선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 스타일이 우선 적용된다.🚀강력한 순서는 중요도 > 명시도 > 선언순서 이다.(왼쪽이 가장 강하다.)CSS 중요도CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.(1번쪽이 가장 강력)head 요소 내의 style 요소head ..