반응형에서 중요한 건

다른 스타일 속성 간의 데이터 교환이 일어나는 값을 사용할 것

이다

이 작업을 위해 작업 단위를 px 대신 rem으로 하는 등 다양한 노력을 한다

이 포스팅에서 쓸 내용은 CSS 속성들이 참조하는 근처 요소의 속성들에 대한 정리다

자신의 스타일 데이터를 참조하거나
상위요소의 스타일 데이터
하위 요소의 스타일 데이터를 참조한다

본인의 스타일 데이터 참조 유형

---

aspect-ratio: 16 / 9;

본인의 width 또는 height 값에 맞춰서 사이즈를 조절함

box-sizing: border-box;

컨텐츠 사이즈를 결정함
본인의 width의 100% 사이즈가 될 기준을 결정함

align-self,justify-self

본인의 flex 정렬 위치를 결정함

flex , flex-grow 등

본인의 제어 옵션을 조절

상위요소의 스타일 데이터

width: inherit;

상위 요소의 width 값을 가져옴

하위 요소의 스타일 데이터

flex

하위 컴포넌트를 제어하는 다양한 스타일 속성이 있음
gap, justify-content, align-items

overflow

하위 요소를 숨기

width: fit-content;

하위 컨텐츠 사이즈에 맞춰서 사이즈가 결정된다
position : fixed 나 absolute ,static의 컴포넌트는 인식하지 않음

width,height은 근처 모든 요소를 인식함

100% 는 상위
fit-content는 하위

그리고 상위 요소에서 box-sizing , flex 로 조절해서 다양하게 제어 할 수 있음

position 설정

컴포넌트의 왼쪽 위를 0, 0 으로 인식하지만 static(기본값)으로 된 컴포넌트는 인식하지 못한다

위치가 이상하게 설정된다면 99.9% 어딘가 position 세팅이 빠져있어서 로 볼 수 있다

기존 position 마다의 특성과 컴포넌트 단위로 초기화 되는 특성을 활용해서 여러가지 배치를 할 수 있다

팁

기본 값으로 css 에 아래 속성을 넣으면 편하다
font-size 의 경우 개발 전 미리 정해놓는 규칙에 따라 달라지기 때문에
규칙에 따라 작성

* { 
position: relative;
box-sizing: border-box;
}