요소의 크기
inline이 아닌 요소는 width와 height로 크기를 조절할 수 있다.
단위
***** 즉, 화면 크기에 상대적으로 변경되는 단위가 뷰포트 단위라는 것. *****
위 단위들은 텍스트 CSS 속성에도 적용할 수 있다. (화면 크기에 따라 크기가 변하는 폰트 크기를 지정할 때에.)
margin과 padding
아래 형식 중 하나로 값을 줄 수 있다.
블록 요소의 위, 아래 margin은 전후 블록 요소의 것과 상쇄된다.
이미 margin 혹은 padding의 값이 정해진 상태에서 특정 부분의 값만 바꾸고 싶을 경우
margin-top
padding-bottom
margin-left
와 같은 방식으로 바꿀 수 있다.
margin에서 auto 값은 너비가 지정된 블록 요소의 가로 방향에서 남은 공간을 채운다. 이 방법은 컨텐츠 섹션을 화면 가운데로 배치하는 데에 널리 사용된다. 오늘날에는 이후 배울 flex 방식으로 많이 대체되었다.
margin: 0 auto / auto 로 줄 경우,
가로 방향에서 컨텐츠 섹션이 화면 가운데로 배치된다.
만약 display 요소가 inline-block이라면
margin: 0 auto로 값을 넣어도 소용이 없으므로
그 부모 요소의 text-align을 center로 주면 된다.(inline-block 속성은 block 형태를 유지하지만 inline 처럼 텍스트 형태를 유지하기 때문에)
border
border 속성을 사용하면 요소에 테두리를 줄 수 있다.
방향별로 border를 설정하는 것도 가능하다.
👉 이 MDN 문서에서와 같이 따로따로 지정할 수도 있다.
box-sizing
이 속성은 너비와 높이 값에 padding과 border 값을 포함시킬지를 결정한다.
box-sizing: content-box - 포함 x
box-sizing: border-box - 포함 o
너비나 높이를 설정해 뒀을 때에는 content-box 형식이 기본값이다.
border-radius
모서리를 둥글게 하는 데에 사용된다.
box-shadow
박스 요소에 그림자를 줄 수 있다.
text-shadow에 spread 값과 inset 여부가 추가된 형식.
overflow
부모 요소보다 높이나 너비값이 큰 자식 요소를 나타내는 방법을 지정할 수 있다.
overflow에 x, y 축 값을 함께 주거나
overflow-x, overflow-y 속성들로 따로 지정할 수 있다.
한 쪽만 visible이면 auto처럼 동작한다.