Home-theater-designers
모든 개발자가 워드 프로세싱에 익숙해질 때 배운 첫 번째 기능 중 하나는 텍스트 정렬이었습니다. 이 작은 도구는 전문 식자세터와 아마추어 전단지 디자이너 모두에게 매우 중요했습니다. CSS가 웹 디자인과 관련하여 텍스트 정렬을 지원한다는 것은 놀라운 일이 아닙니다.
NS 텍스트 정렬 속성은 하나 또는 두 개의 다른 요소와 함께 요소가 텍스트를 수평으로 정렬하는 방법을 제어합니다. 기본 외에도 브라우저는 더 많은 사양을 천천히 구현하고 있지만 전체 지원은 다양합니다. 텍스트를 정렬하는 방법과 현재 일반 브라우저에서 지원하는 기능에 대해 알아보세요.
CSS text-align 속성의 기본 사항
정렬은 가장 친숙한 타이포그래피 용어 중 하나입니다. CSS의 맥락에서, 텍스트 정렬 수평 정렬을 나타냅니다.
가로 텍스트 정렬은 블록 컨테이너에만 적용됩니다. 단락 및 div와 같은 전각 요소입니다. 사용 텍스트 정렬 다음과 같은 인라인 요소의 속성 ~에 효과가 없을 것입니다. 목록 항목과 표 셀을 정렬할 수도 있습니다.
핀터레스트에서 사진을 저장하는 방법
기본적으로 왼쪽에서 오른쪽으로 쓰는 언어(나중에 자세히 설명)에서 텍스트는 왼쪽으로 정렬됩니다.
CSS에서 이것은 다음과 같습니다.
p { text-align: left; }또는:
p { text-align: start; }관련된: 캐스케이딩 스타일 시트란 무엇이며 CSS는 무엇에 사용됩니까?
다른 값을 사용할 수 있습니다. 텍스트 정렬 수평 정렬을 변경하는 속성입니다. 가장 일반적인 값은 워드 프로세싱 앱에서 익숙합니다.
text-align: left
text-align: center
text-align: right자리맞추기를 사용하여 왼쪽 및 오른쪽 모서리 정렬
에 대한 또 다른 공통 가치 텍스트 정렬 ~이다 신이 옳다고 하다 . 브라우저는 각 줄이 사용 가능한 공간을 채우도록 확장되도록 양쪽 정렬된 텍스트에 공간을 추가합니다.
텍스트를 양쪽 정렬할 때 마지막 줄이 까다로울 수 있습니다. 매우 짧을 수 있으므로(단 하나의 단어일 수도 있음) 전체 너비에 걸쳐 간격을 두는 것은 보기 흉할 수 있습니다. 기본적으로 양쪽 정렬된 텍스트도 마지막 줄을 왼쪽으로 정렬합니다.
듀얼 코어 프로세서가 있는 컴퓨터 시스템이 있습니다.
때로는 다른 효과를 원할 수도 있습니다. 브라우저 구현이 사양을 따라잡고 있지만 두 가지 접근 방식이 가능합니다.
NS 모든 것을 정당화하다 값은 브라우저가 다른 모든 줄과 마찬가지로 마지막 줄을 처리하고 전체 너비로 늘린다는 것을 의미해야 합니다. 그러나 작성 당시 이 값을 지원하는 브라우저는 없습니다. 당신은 할 수 있습니다 그들이 하는지 확인하기 위해 caniuse를 확인하십시오 당신이 이 글을 읽고 있을 때.
또 다른 CSS 속성, 텍스트 정렬 마지막 , 더 유연하고 더 나은 지원을 제공합니다. 거의 동일하게 취급할 수 있습니다. 텍스트 정렬 , 하지만 마지막 줄에만 적용됩니다.
이 속성에 대한 브라우저 지원은 더 좋지만 완벽하지는 않습니다. 다시, 사용하기 전에 caniuse를 확인하십시오 . 브라우저가 이 속성을 인식하지 못하면 무시합니다.
텍스트 정렬 및 읽기 방향
아랍어나 히브리어와 같이 오른쪽에서 왼쪽으로 읽는 언어로 작업하고 있을 수 있습니다. CSS는 다음을 사용합니다. 방향 이를 지정하는 속성은 다음과 같습니다.
direction: rtl;이러한 언어는 일반적으로 기본적으로 텍스트를 오른쪽으로 정렬합니다.
지정해야 하는 대신 왼쪽 / 오른쪽 , 텍스트를 정렬하는 기본 방법은 값을 사용합니다. 시작 그리고 끝 . 이것은 텍스트가 각 줄의 시작 또는 끝에서 정렬되어야 하는지 여부를 지정합니다. 왼쪽에서 오른쪽으로 쓰는 언어에서는 시작 와 동등하다 왼쪽 . 오른쪽에서 왼쪽으로 쓰는 언어에서 텍스트는 오른쪽에서 시작하여 왼쪽에서 끝납니다.
휴대 전화 번호의 소유자를 무료로 찾으십시오
사용 시작 또는 끝 즉, 텍스트 방향에 관계없이 정렬이 일관됩니다.
요소가 text-align 속성을 상속하는 방법
당신은 알고 있어야합니다 텍스트 정렬 재산 상속. 예를 들어 신체 요소, 페이지의 모든 요소에 적용됩니다. 물론 모든 요소에서 재정의할 수 있습니다.
text-align 속성을 사용하여 레이아웃 제어
당신은 사용할 수 있습니다 텍스트 정렬 브라우저가 텍스트를 가로로 배치하는 방법을 정의하는 CSS 속성입니다. 가장 일반적인 값은 왼쪽 , 오른쪽 , 센터 , 그리고 신이 옳다고 하다 . 이것들은 상당히 간단하지만, 신이 옳다고 하다 약간의 복잡성을 도입합니다.
텍스트 정렬은 드물게 사용해야 합니다. 빌보드와 포스터에서는 중앙 정렬이 적절할 수 있지만 긴 텍스트 블록을 읽기 어렵게 만들 수 있습니다. 양쪽 맞춤은 일반적으로 텍스트 줄이 길 때 더 읽기 쉽습니다. 짧은 텍스트 열을 정렬하면 보기 흉한 간격이 생길 수 있습니다.
NS 텍스트 정렬 속성은 유용한 서식 및 기본 위치 지정을 제공하는 많은 CSS 속성 중 하나입니다.
공유하다 공유하다 트위터 이메일 10분 안에 배울 수 있는 10가지 간단한 CSS 코드 예제CSS에 대한 도움이 필요하십니까? 이 기본 CSS 코드 예제를 먼저 시도한 다음 자신의 웹 페이지에 적용하십시오.
다음 읽기 관련 항목- 프로그램 작성
- 웹 개발
- 웹 디자인
- CSS
Bobby는 거의 20년 동안 소프트웨어 개발자로 일한 기술 애호가입니다. 그는 게임에 열정적이며 Switch Player Magazine에서 리뷰 편집자로 일하고 있으며 온라인 출판 및 웹 개발의 모든 측면에 몰두하고 있습니다.
바비 잭이 참여한 작품 더보기뉴스레터 구독
기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!
구독하려면 여기를 클릭하세요.