Change language
Python.Engineering Wiki 자바스크립트 줄 높이

자바스크립트 줄 높이

__del__ | ast Python module | base64 Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | exp | FFI PHP module | html Python module | http Python module | imp Python module | io Python module | JavaScript | keyword Python module | nis Python module | os Python module | PS PHP module | Python functions | Rar PHP module | re Python module | resource Python module | site Python module | StackOverflow | time Python module | types Python module | UI PHP module
Michael Zippo Michael Zippo

CSS line-height 속성은 다양한 HTML 요소의 줄 높이를 결정합니다. 일반적으로 텍스트 줄 사이의 거리를 정의하는 데 사용됩니다. 줄 높이는 키, 백분율 또는 숫자 값과 같은 단어를 사용하여 설정할 수 있습니다.

CSS line-height 속성을 사용하면 개발자가 웹 페이지에서 두 인라인 요소 사이의 간격을 설정할 수 있습니다. 개발자는 종종 CSS line-height 속성을 사용하여 웹페이지의 텍스트 줄 사이의 거리를 늘리거나 줄입니다.

이 튜토리얼에서는 CSS line-height 속성을 사용하는 방법을 설명합니다. 시작하기 위해 예제를 참조하겠습니다. 이 튜토리얼을 다 읽을 때쯤이면 코드에서 line-height 속성을 사용하는 방법을 잘 이해하게 될 것입니다.

Line-height CSS

line-height CSS 속성 행 상자의 높이를 정의합니다. 선 영역은 CSS 영역을 구성하는 선입니다. 이 방법은 종종 텍스트 줄 사이의 거리를 정의하는 데 사용됩니다.

줄 높이를 조정하면 웹페이지에서 텍스트 줄(또는 다른 요소) 사이의 간격을 간접적으로 조정할 수 있습니다. 이는 Microsoft Word의 텍스트 서식을 이중 간격 또는 1.15 간격으로 지정하는 것과 매우 유사합니다.

line-height CSS 속성의 구문은 다음과 같습니다.

"lineHeight"는 요소의 높이를 정의하는 길이 값을 나타냅니다.

line-height 속성과 함께 사용할 수 있는 세 가지 값 유형 길이, 숫자 및 백분율:

값 설명 예제 값 ‚ Äã‚Äã 결과 예제 값 ‚Äã‚Äã
길이 특정 측정 단위(예: em, px, cm)를 사용하여 라인 높이를 정의합니다. 10px, 15px, 20px 10px를 지정하면 줄의 높이는 10px가 됩니다.
숫자 줄의 높이를 글꼴 크기의 배수로 설정합니다. 1, 1,8, 2 글꼴 크기가 10px인 경우 행 높이는 각각 10px, 18px 및 20px입니다.
백분율 행 높이를 항목 글꼴 크기의 백분율로 정의합니다. 30%, 50%, 110% 글꼴 크기가 10px인 경우 행 높이는 각각 3px, 5px, 11px입니다.

또는 "normal." 키워드를 지정할 수 있습니다. 이 키워드는 기본 브라우저의 사용을 지정합니다. 이 값은 일반적으로 사용자가 사용하는 브라우저에 따라 약 1.2입니다.

line-height 속성을 상자에 적용하면 해당 상자의 모든 텍스트는 지정한 .line 상자의 높이를 사용합니다.

접근성에 대한 참고 사항

줄 변경 간격은 line-height 속성의 일반적인 사용입니다. 이는 항상 줄 사이에 충분한 공간이 있는지 확인하기를 원하기 때문입니다. 줄 사이에 공간이 충분하지 않으면 텍스트를 읽기 어려울 수 있습니다.

읽기 어려운 텍스트는 시각 장애인에게 특히 심각한 영향을 미칩니다. 웹사이트를 만들 때는 항상 접근성을 고려해야 합니다.

숫자를 사용하여 행 높이를 설정할 때 CSS의 요소, 당신은 d 1.5보다 작은 값을 사용하지 마십시오. 행 높이 값이 1.5보다 작으면 시각 장애가 있는 독자가 사이트를 사용하기 더 어렵게 만들 수 있기 때문입니다.

행 높이에 대한 CSS 예

" About Us`" 지역 요리 클럽 웹사이트 페이지입니다. 이 페이지에는 제목과 클럽에 대한 설명을 설명하는 텍스트 단락이 있습니다.

텍스트 간격이 적절하기를 원합니다. 그래서 우리는 다음과 같이 결정했습니다. 웹 페이지에서 텍스트 단락의 줄 높이를 1.6 rem으로 설정합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

코드는 다음을 반환합니다. 클릭 `"코드 위의 코드 편집기에서 HTML/CSS 코드의 출력을 확인합니다.

HTML 파일에서

태그를 사용하여 " About Us " 헤더를 정의했습니다. 그래서 우리는 Fantastic Chefs에 대한 설명을 작성하고 HTML에 포함시켰습니다.

태그 .

CSS 파일에서 규칙을 정의했습니다. 이 규칙은 두 개의 CSS 속성을 사용합니다. 행 높이를 1.6rem으로 설정하고 글꼴 크기를 모든 HTML

태그에 대해 16px로.

line-height 속성과 함께 사용한 "rem" 측정 단위는 루트 요소의 글꼴 크기에 상대적인 행 높이를 정의합니다. "rem"은 "루트 요소"입니다. 따라서 글꼴 크기가 16px이었기 때문에 이 텍스트 단락의 줄 높이는 25.6px(16px * 1.6)이었습니다.

위 단락의 텍스트는 간격이 적절하고 겹침.

이전 예에서 태그의 모든 텍스트에 대한 행 높이가 값으로 설정됩니다. 이것은 우리의 제목과

태그가 영향을 받는다는 것을 의미합니다.

결론

CSS line-hei ght 속성 라인 상자의 높이를 정의합니다. 일반적으로 이 속성은 단락이나 제목의 텍스트 줄 사이의 간격을 설정하는 데 사용됩니다. 행 높이는 normal 키워드, 백분율, 길이 또는 숫자 값을 사용하여 설정할 수 있습니다.

이 자습서에서는 CSS 행 높이 속성의 기본 사항과 코드에서 사용하는 방법에 대해 설명했습니다. 이제 전문가처럼 CSS line-height 속성을 사용할 수 있는 지식이 생겼습니다!

웹 개발자가 되고 싶습니까? 최고의 학습 리소스 및 과정에 대한 전문가의 조언과 팁을 보려면 CSS 학습 가이드 를 확인하십시오.