body 바로 하위 태그에 height: 100vh;를 주면 브라우저 창 전체가 사용가능한 공간이 된다.
flex container에 display: flex;를 주었을 때 items가 container의 세로 길이만큼 세로로 쭉 늘어나게 되는데 그 이유는 기본적으로 align-items: stretch;가 적용되었기 때문이다.
type selector은 주로 reset 영역에서만 사용하는 것이 좋다.
컨텐츠의 사이즈 같은 경우에 디자이너로부터 절대적인 사이즈를 받으면 높이와 너비등을 수치로 잡아둔다. padding 같은 속성으로 사이즈를 잡으면 내부 컨텐츠의 변동이 생겼을 때 레이아웃의 유지가 힘들 수 있기 때문이다.
pseudo element(가상 요소)
- inline 요소이다.
align-items
inline 요소일때에는 사이즈 조절이 불가능하지만 flex items가 되면 사이즈 조절이 가능하다.아니면 inline-block을 부여하면 된다.
box-sizing
initial value : content-box
내부 컨텐츠의 양이 유동적인 경우에 외부 박스의 크기를 고정해놓았어도 다른 영역에 영향을 주기 때문에 min-height/width를 사용하여 최소 크기를 정해둔다. 이에 더해 박스 모델에 컨텐츠와 다른 영역의 경계를 구분하기 위해 작은 padding 수치를 준다. 그런 경우 박스의 높이가 초기 지정값보다 커지기 때문에 box-sizing을 부여하면서 유지시켜준다.
transform: translateX(Xpx);
- x축 이동
position
initial value : static
position: relative;
left, top을 기준으로 속성이 부여된다.
left: 10px; top: 10px;가 부여되면 컨텐츠가 좌측과 상단을 기준으로 10px씩 멀어지게 된다.
위치의 기준이 부모 요소이다.
offset 개념이다.
position: absolute;
본 속성이 부여된 개체는 독단적인 위치를 갖게 된다. 쉽게 말해 새로운 층으로 이동한다고 생각하면 쉽다.
left: 0; top: 0;이 부여되면 viewport 기준으로 절대적인 위치를 갖게 된다. 독단적인 새로운 위치를 갖기 때문이다.
위치의 기준이 viewport이다.
viewport의 절대적 좌표이므로 스크롤이 생긴 경우에는 위치가 고정된 상태로 움직이게 되는데, 이때 position: fixed;를 부여하면 스크롤에 영향받지 않고 절대적인 위치에 고정된다.
이에 더해 조상 요소중에 기준으로 잡고 싶은 요소에 position: static;을 제외한 position property를 부여하면 기준점이 해당 조상 요소로 잡히고 그 요소 내에서 위치를 절대적으로 잡게 된다.
이 때 직계 상위 요소에 모두 position: static;이 아닌 속성이 부여되어 있을 때에는 현재 요소와 가장 근접한 상위 요소를 기준으로 잡게 된다.
창의 닫기 버튼 (X 버튼)은 위치가 변동할 일이 거의 없기 때문에 absolute를 주로 사용한다.
.부모 { position: relative; }
.자식 { position: absolute; }
형태를 많이 사용한다.
position: ablsolute; left: 0; right: 0; top: 0; bottom: 0;을 이용해 컨테이닝 블록 안에서 가용 영역을 최대한으로 잡아줄 수 있다.
위의 속성은 inset이라는 단축 속성을 사용할 수도 있다.
transform
transform: translate(-50%,-50%);
중앙 정렬하는 방법이다.
