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