CSS 스타일 속성 line-height를 사용하여 웹 페이지의 줄 간격에 영향을주는 방법을 배웁니다.
CSS 줄 간격 값
CSS 줄 간격은 CSS 스타일 속성 인 line-height의 영향을받습니다. 이 속성에는 최대 5 개의 다른 값을 사용할 수 있습니다.
- 표준: 브라우저는 폰트 크기와 관련된 행 간격 값을 판별합니다. 이것은 보통 글꼴 크기와 같거나 약간 큽니다 (예 : 20 %).
- 상속 : 줄 간격은 부모 요소의 줄 간격에서 가져와야합니다. 따라서 body 태그의 line-height를 글꼴 크기보다 30 % 크게 설정하고 내부의 단락 태그가 상속하도록 설정하면 font-size보다 30 % 큰 선 높이를 갖게됩니다.
- A 번호 : 선 높이 값에 측정 단위가 없으면 선 높이의 글꼴 크기에 대한 배율 값으로 간주됩니다. 따라서 줄 높이 1.25는 글꼴 크기보다 25 % 커집니다.
- A 길이 : 선 높이 값에 측정 단위가 있으면 선 사이에 있어야하는 정확한 양입니다. 따라서 1.25mm는 1.25mm 간격의 선이됩니다.
- 백분율 : 줄 높이가 백분율이면 글꼴 크기의 백분율이됩니다. 따라서 125 %의 줄 높이는 글꼴 크기보다 25 % 더 커집니다.
CSS 줄 간격에 사용할 값
대부분의 경우 줄 간격을 가장 잘 선택하는 것은 기본값 또는 "보통"으로 두는 것입니다. 일반적으로 가장 읽기 쉽기 때문에 특별한 작업을 수행 할 필요가 없습니다. 그러나 줄 간격을 변경하면 텍스트에 다른 느낌을 줄 수 있습니다.
글꼴 크기가 em 또는 백분율로 정의 된 경우 줄 높이도 이와 같이 정의해야합니다. 이것은 독자가 글꼴 크기를 조정하고 줄 간격에 같은 비율을 유지할 수 있기 때문에 가장 유연한 줄 간격 형식입니다.
포인트 (pt) 값을 갖는 인쇄 스타일 시트의 행 높이를 설정하십시오. 요점은 인쇄 측정 값이므로 글꼴 크기도 점이되어야합니다.
우리는 사람들에게 가장 혼란 스럽다는 것을 발견했기 때문에 번호 선택을 사용하기를 원하지 않습니다. 많은 사람들이이 숫자가 절대적인 크기라고 생각하여 커다란 숫자로 만듭니다. 예를 들어 글꼴을 14px로 설정 한 다음 줄 높이를 14로 설정하면 줄 간격이 14로 설정되므로 줄 사이에 큰 간격이 생깁니다. 타임스 글꼴 크기
줄 간격에 얼마나 많은 공간을 사용해야합니까?
위에서 언급했듯이 특별한 이유가없는 한 기본 줄 간격을 사용하는 것이 좋습니다. 줄 간격을 변경하면 다른 효과를 낼 수 있습니다.
- 매우 빡빡한 텍스트는 읽기 어려울 수 있습니다. 그러나 작은 줄 간격은 텍스트의 분위기에 영향을 줄 수 있습니다. 텍스트를 함께 표시하면 텍스트 감각이 어둡거나 고밀도로 보일 수 있습니다.
- 더 멀리 떨어져있는 텍스트는 읽기 어려울 수도 있습니다. 그러나 넓은 줄 간격으로 인해 텍스트가 더 유동적으로 보이게됩니다.
- 줄 간격을 변경하면 공간에 맞지 않는 텍스트가 더 작아 지거나 디자인에서 더 많은 공간을 차지할 수 있습니다.
