다음 속성을 사용하여 요구 사항에 따라 단락 또는 표 셀의 내용을 정렬할 수 있습니다. 이러한 속성은 정의되거나 계산된 높이 또는 너비를 할당할 수 있는 다른 모든 요소에도 적용할 수 있습니다.
첫 번째 행의 들여쓰기
텍스트 들여쓰기 속성부터 시작하겠습니다. 이 속성은 단락의 첫 줄을 들여쓰는 방법을 정의합니다. 왼쪽으로 '들여쓰기'할 수도 있습니다. 이 경우 음수 텍스트 들여쓰기 값을 사용해야 합니다. (극단적인 들여쓰기가 유용한 경우에 대한 자세한 정보는 아래에서 확인할 수 있습니다.) 숫자 사양이 필요합니다.
예시입니다:
.paragraph { text-indent: 2em; }
브라우저에서는 다음과 같이 표시됩니다:
음수 값을 사용하면 첫 번째 연속 텍스트 줄에 텍스트 들여쓰기가 생깁니다.
.paragraph { text-indent: -2em; }
물론 브라우저에서 결과를 다시 한 번 살펴보세요:
이와 같은 결과도 가능합니다. 그러나 들여쓰기를 정의할 때는 원하는 경우 콘텐츠를 실제로 읽을 수 있는지 확인해야 합니다. 사실 텍스트 들여쓰기는 검색 엔진 최적화의 맥락에서도 흥미로울 수 있습니다. 예를 들어 텍스트 대신 그래픽을 표시하고 싶을 때가 있습니다.
그러나 텍스트가 검색 엔진에서 여전히 표시되어야 한다면 처음에는 딜레마에 직면하게 됩니다. 이 딜레마는 텍스트 들여쓰기를 사용하여 해결할 수 있습니다. 아시다시피 이 기능을 사용하면 텍스트를 이동할 수 있습니다. 즉, 방문자의 시야에서 텍스트를 사라지게 할 수 있습니다.
텍스트 들여쓰기 변형의 장점: 그래픽으로 대체할 텍스트는 소스 텍스트에서 변경되지 않습니다.
<h1>PSD-Tutorials.de</h1> ... h1 { background: url(logo.png) 0 0 no-repeat; text-indent: -99999px; height:200px; }
이 구문은 h1 요소에 배경 그래픽을 할당합니다. ( 배경 속성은 이미 이 시리즈에서 소개한 바 있습니다). 텍스트 들여쓰기: -99999px를 사용하면 제목의 텍스트가 왼쪽으로 99999픽셀 이동합니다. 따라서 텍스트가 더 이상 표시되지 않습니다. 이제 실제로는 이미지만 표시됩니다.
스타일시트를 비활성화하면 텍스트가 다시 정상으로 표시될 수 있습니다.
줄 높이 설정하기
일반 글꼴 속성과 관련하여 줄 높이에 대해 이미 언급했습니다. 이 시점에서 이 주제에 대해 더 자세히 설명하겠습니다. 글꼴크기와 관련된 줄 높이의 정의는 흥미롭습니다.
줄 높이는 줄 높이 속성을 사용하여 정의할 수 있습니다. 숫자 값을 사용할 수 있습니다. 백분율 값도 가능합니다. 그러면 선 높이가 지정된 요소의 글꼴 크기를 참조합니다. 줄 높이를 정의하기 전에 다음 사항에 유의하세요: 브라우저/최종 디바이스가 다른 속성보다 줄 높이 지정의 우선순위를 정하고 줄 높이가 더 높으면 요소를 잘라낼 수 있습니다. 이는 그래픽에서 특히 성가신 일이 될 수 있습니다. 따라서 페이지를 온라인에 올리기 전에 결과를 테스트하세요.
다음 예는 줄 높이를 사용하는 방법을 보여줍니다.
<p style="line-height:1.4em; font-size:1em;">간혹 멋진 레이아웃을 만들었지만 사진이 누락되고 빈 프레임만 사용하면 레이아웃이 매우 빈약해 보일 수 있습니다. 더 좋은 방법이 있습니다:<br /> 이 동영상 교육에서는 적합한 무료 이미지 플레이스홀더를 빠르게 찾을 수 있는 최고의 웹 주소를 보여드리겠습니다. 예를 들어 <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">here</a>와 같은 독창적인 목록을 찾을 수 있습니다.</p> <p style="line-height:2em;font-size:1em;">혹은 멋진 레이아웃을 만들었지만 사진이 누락되어 빈 프레임만 사용하는 경우 레이아웃이 꽤 헐렁해 보일 때가 있습니다. 더 좋은 방법이 있습니다:<br /> 이 동영상 교육에서는 적합한 무료 이미지 플레이스홀더를 빠르게 찾을 수 있는 최고의 웹 주소를 보여드리겠습니다. 예를 들어 <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">here</a>와 같은 독창적인 목록을 찾을 수 있습니다.</p> <p style="line-height:1em; font-size:1em;">혹은 멋진 레이아웃을 만들었지만 사진이 누락되어 빈 프레임만 사용하는 경우 레이아웃이 꽤 헐렁해 보일 때가 있습니다. 더 좋은 방법이 있습니다:<br /> 이 동영상 교육에서는 적합한 무료 이미지 플레이스홀더를 빠르게 찾을 수 있는 최고의 웹 주소를 보여드리겠습니다. 예를 들어 <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">here</a>와 같은 독창적인 목록을 찾을 수 있습니다."</p>
여기에는 세 개의 텍스트 단락이 정의되어 있으며 각 단락에는 서로 다른 줄 높이가 할당되어 있습니다.
보시다시피 연속된 텍스트의 가독성은 줄 높이에 따라 크게 영향을 받을 수 있습니다. 따라서 줄 높 이에 주의하세요.
마지막으로, 실제로 어떤 줄 높이를 선택해야 하는지에 대한 질문이 생깁니다. 일반적으로 130~150% 사이의 줄 높이가 가정됩니다.
p { 줄 높이: 150%; }
그러나 궁극적으로 좋은 가독성은 무엇보다도 글꼴의 너비에 달려 있습니다. 텍스트 줄이 길수록 줄 높이가 더 커야 한다는 원칙이 여기에 적용됩니다. 따라서 페이지를 테스트하여 실제로 가독성이 유지되는지 확인하는 것이 중요합니다.
가로 텍스트 정렬
텍스트 정렬 속성은 텍스트 단락과 블록 요소에 포함된 기타 연속 텍스트 또는 인라인 요소의 가로 정렬을 정의하는 데 사용됩니다. 텍스트 정렬에는 다음 값을 설정할 수 있습니다:
- 왼쪽 - 왼쪽 정렬
- 오른쪽 - 오른쪽 정렬
- 가운데 - 가운데 정렬
- justify - 맞춤으로 정렬
다음은 다른 예시입니다:
<!DOCTYPE html> <html> <head> <style> h1 {text-align:가운데} h2 {text-align:왼쪽} h3 {text-align:오른쪽} </style> </head> <body> <h1>PSD-Tutorials.de</h1> <h2>PSD-Tutorials.de</h2> <h3>PSD-Tutorials.de</h3> </body> </html>브라우저에 표시되는 결과는 다음과 같습니다:
텍스트 정렬은 텍스트 콘텐츠에만 적용되는 것이 아닙니다. 이 속성은 실제로 모든 인라인 요소에 적용됩니다. 따라서 이미지가 포함된 경우 텍스트 정렬 정의는 이 요소에도 적용됩니다.
한 가지 더 주의할 점은 텍스트 정렬은 적어도 공식 CSS 사양에 따르면 블록 요소에는 영향을 미치지 않아야 한다는 것입니다. (블록 요소에도 적용하는 브라우저도 있지만). 블록 요소를 정렬하려면 이러한 경우에 이미 도입된 여백 속성을 사용하세요.
