CSS 줄 간격

CSS Line-Height 속성을 사용하여 CSS 줄 간격 얻기

CSS 스타일 속성 line-height를 사용하여 웹 페이지의 줄 간격에 영향을주는 방법을 배웁니다.

CSS 줄 간격 값

CSS 줄 간격은 CSS 스타일 속성 인 line-height의 영향을받습니다. 이 속성에는 최대 5 개의 다른 값을 사용할 수 있습니다.

• normal : 브라우저는 글꼴 크기와 관련된 줄 간격 값을 결정합니다. 이것은 보통 글꼴 크기와 같거나 약간 큽니다 (예 : 20 %).
• 상속 : 줄 간격은 부모 요소의 줄 간격에서 가져와야합니다. 따라서 body 태그의 line-height를 글꼴 크기보다 30 % 크게 설정하고 내부의 단락 태그가 상속하도록 설정하면 font-size보다 30 % 큰 선 높이를 갖게됩니다.
• 숫자 : 선 높이 값에 측정 단위가없는 경우 선 높이의 글꼴 크기에 대한 배율 값으로 간주됩니다. 따라서 줄 높이 1.25는 글꼴 크기보다 25 % 커집니다.
• 길이 : 선 높이 값에 측정 단위가 있으면 선 사이에 있어야하는 정확한 크기입니다. 따라서 1.25mm는 1.25mm 간격의 선이됩니다.
• 백분율 : 선 높이가 백분율이면 글꼴 크기의 백분율이됩니다. 따라서 125 %의 줄 높이는 글꼴 크기보다 25 % 더 커집니다.

CSS 줄 간격에 사용할 값

대부분의 경우 줄 간격을 가장 잘 선택하는 것은 기본값 또는 "보통"으로 두는 것입니다. 일반적으로 가장 읽기 쉽기 때문에 특별한 작업을 수행 할 필요가 없습니다. 그러나 줄 간격을 변경하면 텍스트에 다른 느낌을 줄 수 있습니다.

글꼴 크기가 em 또는 백분율 로 정의 된 경우 줄 높이도 이와 같이 정의해야합니다. 이것은 독자가 글꼴 크기를 조정하고 줄 간격에 같은 비율을 유지할 수 있기 때문에 가장 유연한 줄 간격 형식입니다.

포인트 (pt) 값을 갖는 인쇄 스타일 시트의 행 높이를 설정하십시오. 요점은 인쇄 측정 값이므로 글꼴 크기도 점이되어야합니다.

나는 그것이 사람들에게 가장 혼란 스럽다는 것을 알았 기 때문에 번호 선택을 사용하는 것을 좋아하지 않습니다. 많은 사람들이이 숫자가 절대적인 크기라고 생각하여 커다란 숫자로 만듭니다. 예를 들어 글꼴을 14px로 설정 한 다음 줄 간격을 글꼴 크기의 14 배로 설정했기 때문에 줄 높이를 14로 설정하면 줄 사이에 큰 간격이 생깁니다.

줄 간격에 얼마나 많은 공간을 사용해야합니까?

위에서 언급했듯이 특별한 이유가없는 한 기본 줄 간격을 사용하는 것이 좋습니다. 줄 간격을 변경하면 다른 효과를 낼 수 있습니다.

• 매우 빡빡한 텍스트는 읽기 어려울 수 있습니다. 그러나 작은 줄 간격은 텍스트의 분위기에 영향을 줄 수 있습니다. 텍스트가 함께 표시되면 텍스트 감각을 어둡게 또는 더 긴장하게 만들 수 있습니다.
• 더 멀리 떨어져있는 텍스트는 읽기 어려울 수도 있습니다. 그러나 넓은 줄 간격으로 인해 텍스트가 더 유동적으로 보이게됩니다.
• 줄 간격을 변경하면 공간에 맞지 않는 텍스트가 더 작아 지거나 디자인에서 더 많은 공간을 차지할 수 있습니다.