fit-content
컨테이너의 크기를 내부 콘텐츠에 맞게 자동으로 조정하는 데 사용된다. flex box나 grid와 같은 레이아웃 시스템에 사용되며 콘텐츠의 크기에 따라 요소의 높이가 늘어나거나 줄어든다. 즉, 요소의 크기는 내부 콘텐츠에 따라 동적으로 조절된다. auto와의 차이점은, auto는 내용이 적어도 줄어들지 않지만 fit-content는 내용이 적으면 줄어든다. 요소의 width 또는 height에 적용할 수 있다.
container {
width: fit-content;
height: fit-content;
}overflow
속성은 콘텐츠가 요소의 크기를 벗어나는 경우의 처리 방법을 지정하는 속성으로, 여러 가지 값들을 가질 수 있다.
-
visible
default로, 내부 콘텐츠가 요소의 영역을 벗어나더라도 숨기지 않고 표시한다. 넘치는 콘텐츠는 요소의 외부로 보여진다. -
hidden
내부 콘텐츠가 요소의 영역을 벗어나는 부분을 숨긴다. 넘치는 부분은 화면에 보이지 않는다. -
scroll
내부 콘텐츠가 요소의 영역을 벗어나는 경우, 수평 및 수직 스크롤바가 표시되어 사용자가 스크롤하여 콘텐츠를 볼 수 있도록 한다. -
auto
내부 콘텐츠가 요소의 영역을 벗어나는 경우, 필요한 경우에만 수평 및 수직 스크롤바가 표시되어 콘텐츠를 볼 수 있도록 한다.
box-sizing
요소의 크기 계산 방식을 지정하는 데 사용된다. 이 속성은 브라우저가 요소의 내용과 테두리, 여백을 포함한 전체 크기를 어떻게 계산할지를 제어하는 역할을 한다.
content-box
요소의 크기는 내용 영역만을 고려하여 계산된다. default값이며, 테두리와 여백은 크기 계산에 포함되지 않는다.
border-box
요소의 크기는 내용 영역뿐만 아니라 테두리와 패딩을 포함하여 계산된다. 이 설정을 사용하면 요소의 크기를 미리 예측하기 쉽고, 내용과 테두리의 크기를 별도로 고려하지 않아도 되기 때문에 자주 최근에 자주 사용된다.
word-break, overflow-wrap
word-break은 긴 단어나 URL, 긴 문자열이 화면을 넘어가거나 컨테이너의 크기를 넘어갈 때 어떻게 줄바꿈할지를 지정할 수 있다. 적용되는 값들은 아래와 같다.
-
normal
default이며, 기본적인 줄바꿈 규칙을 따른다. 단어 내에서는 줄바꿈이 일어나지 않으며, 컨테이너 크기를 초과할 경우 전체 단어가 한 줄로 표시된다. -
break-all
긴 단어나 URL 등이 화면을 넘어가거나 컨테이너 크기를 초과하면 단어의 중간에서 줄바꿈이 발생한다. 단, 단어 내에서 문자를 자르기 때문에 의미가 해치거나 가독성이 떨어질 수 있다. -
keep-all
띄어쓰기를 기준으로 줄바꿈이 일어나며, 언어별 특정한 규칙을 따른다. 단어 내에서는 줄바꿈이 발생하지 않으며 다국어 문서에서 특정 언어의 의미가 해치지 않도록 도움을 줄 수 있다.
overflow-wrap은 긴 단어나 URL 등이 화면을 넘어가거나 컨테이너의 크기를 초과할 때 어떻게 텍스트를 래핑할지를 제어하는 데 사용된다.
-
normal
default이며, 단어 내에서 줄바꿈이 일어나지 않는다. 컨테이너 크기를 초과할 경우 전체 단어가 한 줄로 표시된다. -
break-word
긴 단어나 URL 등이 화면을 넘어가거나 컨테이너 크기를 초과할 경우 단어의 중간에서 줄바꿈이 발생한다. 단어 내에서 문자를 자르기 때문에 의미가 해치거나 가독성이 떨어질 수 있다.
word-break는 단어의 내부에서의 줄바꿈을 다루는 반면, overflow-wrap은 단어가 컨테이너의 경계를 넘어갈 때의 줄바꿈을 다룬다. 이들 속성을 상황에 맞게 사용하여 텍스트의 가독성과 레이아웃을 개선할 수 있다.
