em, rem

상대 단위 중 하나이다. 상대 단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. em과 rem 둘 다 CSS의 font-size에 비례해서 결정된다.

em의 경우, 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준이 된다. 반면에 rem에서 r은 root, 즉 최상위 요소를font-size 속성값 의미한다. HTML에서 최상위 요소는 html 이다. 따라서 rem 경우, html 요소의 font-size 속성값이 기준이 된다.

line height

줄과 줄 사이의 간격을 조정할 때 사용한다. 글자 크기에 상대적인 값을 사용한다.
보통 line-height: 1.5; 와 같은 식으로 font-size의 상대적인 값으로 입력한다.

overflow

주어진 공간이 모자라 넘치는 컨텐츠를 어떻게 보여줄지 제어할 수 있다. 이와 같은 속성들이 있다.

• visible
• hidden
• scroll
• auto

white-space: nowrap

기본적으로 텍스트나 이미지와 같은 인라인 요소들은 가로 공간이 부족한 경우 줄바꿈이 되기 때문에, 세로 방향으로 스크롤바가 생긴다. 때문에 가로 스크롤을 하고 싶은 경우, 단순히 white-space: nowrap 으로 변경하여 세로 줄바꿈이 되지 않게하면 된다.

마진 상쇄?

마진 상쇄란 마진 겹침 현상을 말한다. 두 개 이상의 블록 요소 상하마진이 겹칠 때 어느 더 큰 쪽의 값만 적용하는 규칙이다.

• 인접 형제 박스간 상하 마진이 겹칠 때
• 빈 요소의 상하 마진이 겹칠 때
• 부모 박스와 첫 번째 / 마지막 자식 박스의 상단 / 하단 마진이 겹칠 때

이를 해결하기 위한 가장 간단한 방법은 부모 박스의 상단(하단)에 padding or border 값을 주는 것이다.

마진 상쇄 규칙 예외

• 박스가 position: absolute 일 때
• 박스가 float: left / right 된 상태 (단, clear 되지 않은 상태)
• 박스가 display: flex 일 때 내부 flexbox item
• 박스가 display: grid 일 때 내부 grid item

display

display 태그는 화면에 요소 크기를 어떻게 드러나게 할지 결정하는 속성이다. 속성값에는

• none: 화면에서 사라진다.
• block: 인라인 요소를 블록 요소가 될 수 있게 해준다. 가로 한 줄 다 차지할 수 있게 된다.
• inline: 컨텐츠를 감쌀정도의 크기만 갖게 되며, 줄바꿈과 크기 변경이 되지 않는다.
• inline-block: 인라인의 속성을 가지고 있지만 크기를 변경할 수 있다.

float

float property는 해당 요소를 다음 요소 위에 떠 있게 한다. 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다.

• none: 요소를 떠 있게 하지 않는다.
• right: 요소를 오른쪽으로 이동시킨다.
• left: 요소를 왼쪽으로 이동시킨다.

clear 속성

float 이후의 요소들이 float 속성에 영향을 받지 않도록 설정해준다. clear 속성은 float 속성이 적용된 요소 아래에 위치하도록 한다.

• none: clear
• right: float: right을 취소시킨다.
• left: float: left을 취소시킨다.
• both: float: left, right 모두 취소시킨다.

오늘 코드잇에서 엄청난 양의 css 공부를 했다🥹 사실 예전에 한 번 봤던거라서 남들보다 조금 익숙한 상태에서 했기 때문에 빨리 끝났다. 예전에는 손도 대지 못했던 것들을 이제는 시간이 걸려도 다 만들 수 있다는 자신감이 생기는 파트였다. 너무 뿌듯🥰✨

(이런 페이지 3장?은 만든 것 같다ㅎ)
어우 손목도 너무 아프고 허리도 너무 아프다,,,ㅎ