JS와 리액트를 공부하면서 다 까먹어버린 CSS에 대해 리마인딩 하는 게시물입니다.
Box Sizing
css는 기본적으로 지정된 width와 height를 계산할때 해당 요소의 content에 값을 지정해준다.
하지만 대부분은 레이아웃을 설계할때 border 영역까지 계산한 값으로 설정하기 때문에 초기에 box-sizing을 border-box로 리셋시킨다.
가상요소
가상 요소는 HTML을 변경시키지 않으면서 하나의 요소처럼 사용할 수 있다.
가상요소는 가상요소를 생성하고싶은 선택자에 ::type을 붙여서 생성한다.
주로 쓰이는 가상요소의 타입으로는 before와 after가 있다.
before
선택자의 내용 첫번째에 컨텐츠가 추가됨
after
선택자의 내용 마지막에 컨텐츠가 추가됨
content
가상요소의 속성으로는 content가 존재한다.
주로 네비게이션의 카테고리 분리나 float로 가로 정렬한 요소에 가상요소를 만들어 clear를 사용하는 경우 생성된다.
.card::after {
display: block;
content: "";
clear: left;
}Position
css는 position을 사용하여 요소가 문서상에서 어디에 위치하고 기준점을 결정할 수 있다.
position의 종류로는 다음과 같이 5가지가 존재한다
static
일반적인 경우이며 문서 흐름에 따라 배치된다. 그러므로 top bottom z-index 등의 영향을 받지 않는다
relative
본인이 원래 위치하던 좌표를 기준으로 이동할 기준점을 설정한다. float를 사용했을때와 비슷하지만 float와는 달리 본인이 본래 위치하던 부모요소에서 변함없이 레이아웃으로서의 영향력을 유지한다.
absolute
relative와는 다르게 본인이 본래 위치하던 부모요소에서 레이아웃으로서의 영향력을 잃는다. float와 마찬가지.
기준점은 본인의 조상 요소 중 position이 static이 아닌 요소 중에 가장 가까운 요소가 선택된다.
따라서 absolute를 부여할땐 부모요소에 relative를 부여하는 것이 권장된다.
absolute를 부여할 시 position 재부여가 반복되기 때문.
fixed
absolute 처럼 본래 위치하던 부모요소에서 레이아웃으로서의 영향력을 잃는다.
기준점은 사용자의 브라우저 화면(Viewport)이 기준이 된다.
sticky
relative와 같이 본래 위치하던 부모요소에서 변함없이 레이아웃으로서의 영향력을 유지한다. 스크롤로 인하여 화면에서 벗어날때 설정한 좌표에 지속적으로 fixed와 같이 위치를 유지하게 된다.
부모 요소가 존재시 부모가 화면에서 벗어날때 함께 사라진다.
transform
transform 속성은 요소 자기 자신을 기준으로 하여 rotate() translate() scale() 등을 사용하여 이동하거나 회전, 확대 등의 변경을 줄 수 있다.
