웹 타이포그래피를 제어하기위한 CSS 속성

키 테이크 아웃

CSS의`Text-Transform '속성을 통해 문자 케이스를 조작 할 수 있으며,`capialize`,'대문자 ',`소문자'및`full width '와 같은 옵션을 제공합니다. > HTML 문서의 공백 관리는`normal ',`pre`,`pre-wrap`,`pre-line` 및`nowrap`과 같은 값으로'화이트 스페이스 '속성을 통해 제어 할 수 있습니다. 서로 다른 형식 시나리오.

는 단어 내에서 라인을 제어하기 위해, CSS는 'Word-Wrap'또는 'Overflow-Wrap'속성을 '정상'및 'break-word'옵션과 함께 하이픈 제어를위한 '하이픈'속성과 함께 제공합니다. CSS는 단어와 문자 사이의 공간을 조정하기 위해`Word-spacing` 및`문자 스페이스 '속성을 제공하고, 텍스트의 가독성과 미학적 매력을 향상시킵니다.

. 고급 텍스트 정렬 및 압입은`텍스트-정렬 ',`텍스트-정상-기울기'및`텍스트-안정 '과 같은 속성을 통해 처리되며, 디자이너는 텍스트 프리젠 테이션에 대한 설계자를 세밀하게 제어 할 수 있습니다.

• 웹 타이포그래피는 수세기 전의 인쇄 타이포그래피 전통에 속하는 풍부한 지식을 이끌어 낼 수있는 이점이 있습니다. 마찬가지로 마찬가지로, 그 전통은 웹 타이포그래피가 살도록 요구되는 모범 사례와 우수성의 표준을 가지고 있습니다. 그러나 커뮤니케이션 매체로서의 웹에는 고유 한 특성이 제공됩니다. 우리는 인쇄에서 웹 타이핑으로 원활한 움직임이 어려운 일이라고 생각하게되었습니다. Jason Santa Maria는 웹 타이포그래피에 관한 그의 저서 인 p.110에서 다음과 같이 설명합니다.
인쇄 된 책은 정적 형식입니다. 디자이너의 책의 초기 레이아웃에서 프레스 침대, 창고, 책장 및 손으로 여행에 이르기까지 그 책의 출력은 바뀌지 않습니다. 디자이너가 생각한대로 정확하게 전달되었습니다.
웹과 관련하여, 동일한 사이트는 여러 종류의 장치, 화면 해상도, 개인화 된 브라우저 설정 등 여러 가지 요인에 따라 매우 다르게 경험할 수 있습니다. Jason과 마찬가지로 이러한 요소 중 일부는 설명…
. 는 또한“웹이 텍스트에 가장 적합한 장소라는 것도 마찬가지입니다.”, Tim Brown은 보편적 타이포그래피에 대한 그의 대화에서 주장하는 것처럼. 인터넷의 텍스트는 "검색, 복사, 번역, 다른 문서에 연결되며 인쇄 할 수 있으며 편리하며 액세스 할 수 있습니다". 웹의 유연성이 제어를 포기하는 것은 아닙니다. 반대로, 웹 디자이너로서, 우리는 여전히 우리의 작품에 넣은 것에 대해 정보에 입각 한 선택을 할 것으로 예상되며 텍스트도 예외는 아닙니다. 텍스트 요소가 배치되는 방식, 색상, 크기, 서체,이 모든 것이 웹 사이트의 핵심 메시지 및 브랜드를 전달합니다. 웹에서 텍스트의 모양을 조작하려면 선택한 주요 도구는 CSS입니다.

이 게시물에 제시 할 CSS 속성은 CSS 텍스트 모듈 사양에서 찾을 수 있습니다.

이 모듈은 CSS의 조판 제어를 설명합니다. 즉, 입니다 소스 텍스트의 변환을

로 제어하는 ​​CSS의 기능 형식, 줄 포장 된 텍스트.

다시 말해, CSS 텍스트 모듈은 브라우저의 문자와 단어 표시와 CSS를 사용하여 간격, 정렬, 하이픈 화 ​​등을 처리합니다. 기본 텍스트 또는 단어 단위를 구성하는 것은 주어진 텍스트 조각에서 정확히 단어를 깨뜨릴 수있는 곳을 구성하는 것이 웹 사이트에서 사용되는 언어의 규칙에 크게 의존합니다. 이러한 이유로이 정보를 HTML 문서 (일반적으로 요소의 LANG 속성)에 선언하는 것이 중요합니다. 여기, 나는 다음 두 가지 주제에 대해 논의하지 않을 것입니다 :

글꼴, 즉 문자의 시각적 표현, 즉 글리프 및 그 속성; 밑줄, 텍스트 그림자 및 강조 표시와 같은 텍스트 장식과 관련된 CSS의 특징.

궁금한 점이 있으면 CSS 글꼴 모듈 레벨 3과 CSS 텍스트 장식 모듈 레벨 3의 글꼴 및 텍스트 장식 속성에 대한 최신 문서를 찾을 수 있습니다. 문자 케이스 조작 텍스트 요소를 대문자로 표시 해야하는 경우 (예 : 우선 및 성)가있을 수 있습니다. CSS는 텍스트 변환 속성으로 문자 케이스를 제어합니다.

텍스트 변환 속성의 기본값은 없음, 즉 문자 케이스에 영향을 미치지 않습니다. 대문자 값 다른 모든 문자의 외관을 남기면서 각 단어의 첫 글자를 대문자로 표시하려면 (HTML 문서의 경우에도) 값을 사용하여이를 달성합니다. html :
CSS :


는 자본화가 제목 사례 규칙을 따르지 않는 방법에 주목하십시오. 실제로 위의 예제의 모든 첫 번째 문자는 "in"이라는 단어를 포함하여 자본화 된 것으로 보입니다. 제목에 관한 문학적 컨벤션을 따르려고하는 저자는 소스 텍스트에서 수동으로 문자를 조작해야합니다.

대문자 목표가 대문자로 표시되는 것이 목표라면 HTML 문서의 경우에 상관없이 대문자는 사용하기에 적합한 값입니다. html :

CSS :

소문자 값

값 소문자를 사용하면 모든 문자가 소문자로 표시됩니다. 당연히 이것은 원래 소스 문서에서 이미 소문자 인 글자의 모양에 영향을 미치지 않습니다. html :

CSS :

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

전폭 값 사양은 새로운 값, 전체 폭을 추가했습니다. 이 값은 캐릭터가 마치 사각형 인 것처럼 사각형 내부에 나타나는 것처럼, 예를 들어 일본어, 중국어 등. 라틴 문자를 일본어 문자와 정렬하는 것을 용이하게합니다.

. 모든 문자가 해당 전폭 양식을 갖는 것은 아니며,이 경우 문자는 전체 폭 값의 영향을받지 않습니다.

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

html :

CSS : 전체 폭이 적용될 때 Firefox에서 캐릭터의 모습은 다음과 같습니다.

추가 비고 텍스트 변환 속성에 대한 브라우저 지원이 우수합니다. 실제로 모든 주요 브라우저는이를 지원합니다 유일한 예외는 전체 폭스 값이며 현재 Firefox에서만 작동합니다. 아마도 전형이 사양의 후보 추천 단계에서 삭제 될 위험이있을 가능성을 감안할 때 아마도 당연히 그렇게 될 것입니다. 더욱이, 나는 Firefox (v.39)와 다른 주요 브라우저 사이에 작은 불일치가 있음을 알았습니다. 여기 Firefox의 모습은 다음과 같습니다

하이픈 이후의 첫 글자가 어떻게 대문자가되지 않는지 주목하십시오. 반면, 아래는 Chrome에 표시된 것과 동일한 텍스트입니다.

이 경우 하이픈 문자를 따르는 문자도 예외는 아닙니다. 그들은 또한 대문자로 전시되고 있습니다. 위에서 언급 한 바와 같이 Firefox를 제외하고 다른 모든 주요 브라우저의 최신 릴리스에서 동일한 동작을 관찰했습니다. 마침내 캐스케이드를 생각하세요! 컨테이너 요소에 텍스트 변환 속성을 설정하면 그 값이 모든 자식 요소에 의해 상속됩니다. 바람직하지 않은 결과를 피하려면 Child Elements의 텍스트 변환 속성 값을 None으로 재설정하십시오. 텍스트 변환 속성 값에 대한 데모를 봅니다 공백을 다루는 방법 탭 키, 공간 키를 누르거나 텍스트를 다음 줄로 나누도록 강제 텍스트 (

enter 태그 사용)로 나누면 소스에 공백이 생성됩니다. 문서. <.> 기본적으로 브라우저는 공백의 시퀀스를 단일 공간으로 붕괴시키고 라인 브레이크가 제거되고 컨테이너에 맞게 텍스트 랩 라인이 제거됩니다. 이는 브라우저에 컨텐츠가 표시되는 방식에 영향을 미치지 않고 소스 문서를 읽을 수 있고 유지 관리 할 수 ​​있도록 텍스트 덩어리를 들여 보내고 별도의 텍스트 덩어리를 만들 수 있기 때문에 편리합니다. 그러나 이것이 당신의 목표가 아니라면 어떻게됩니까? 예를 들어, HTML 문서에서 만든 공백을 보존하고 싶다고 가정 해 봅시다. 일반적인 시나리오는 제대로 들여 쓰기 된 코드 스 니펫으로 표시되도록 설계된 텍스트를 작성하는 것입니다. 또는 텍스트를 한 줄에 모두 표시하지 않고 텍스트를 모두 표시하고 싶습니다.

그러한 경우에, 브라우저의 기본 동작을 무시하려고 할 때 화이트 스페이스 속성은 흥미로운 옵션을 제공합니다. 일반 키워드는 브라우저를 기본 동작으로 재설정합니다. 모든 추가 공백이 하나의 문자로 무너지고 컨테이너의 가장자리에 도달하면 선이 랩핑됩니다. 프리 값 프리 키워드를 사용하면 소스 문서에있는 모든 흰색 공간과 강제 새로운 라인을 보존하여 텍스트를 표시 할 수 있습니다. 컨테이너가 넘치면 텍스트가 새 선으로 감싸지 않습니다.
탭을 사용하여 공백을 생성하는 경우 정수 값으로 설정하여 탭 크기 속성으로 크기를 제어 할 수 있습니다.

탭 크기는 일관되지 않은 브라우저 지원이있는 속성이지만 기본 탭의 문자 길이를 실제로 견딜 수 없다면 모든베이스를 덮을 수있는 폴리 필드가 있습니다.

. 프리 랩 랩 값 소스 문서의 공백이 브라우저 디스플레이에 보존되기를 원한다고 가정 해 봅시다. 그러나 컨테이너의 가장자리에 도달 할 때 라인이 감싸도록합니다.

프리 랩 랩 키워드는 원하는 결과를 달성하는 데 도움이됩니다.

브라우저에 표시되는 각 라인이 소스 코드의 강제 브레이크를 반영하는 방법에주의하십시오. 컨테이너에는 더 많은 텍스트에 맞는 공간이 충분합니다.

그러나 브라우저 화면을 수축 시키면 컨테이너에 맞게 줄이 감싸는 것을 알 수 있습니다.

.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

프리 라인 값 흰색 공간 속성의 최종 흥미로운 값은 사전 라인입니다. 공간 시퀀스를 하나의 공간으로 무너지고 포장을 허용하는 한, 그것은 정상처럼 동작합니다. 그러나 HTML 문서에 새로운 라인 문자 또는
태그가있는 경우 브라우저 디스플레이에 보존됩니다.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

사전 랩 및 프리 라인 키워드에 대한 Codepen 데모를 사용해보십시오. nowrap 값 nowrap은 아마도 가장 잘 알려진 흰색 공간 가치 일 것입니다. 당신의 디자인에 인라인 컨텐츠가 절대로 랩을하지 않아야합니까? 흰색 공간 사용 : Nowrap; 당신의 요소에서 트릭을 수행합니다.

루이 라자리스는이 값에 대한 다음 유스 케이스를 가리 킵니다.

위의 링크는»기호가 이어집니다. 예를 들어 유체 웹 레이아웃과 같은이 문자가 다음 줄로 떨어지면 바람직하지 않습니다.

이 상황과 비슷한 상황에서 (예를 들어 아이콘을 생각하십시오), Nowrap 값은 매우 편리합니다. 또 다른 흥미로운 사용 사례는 Codrops CSS 참조에서 Sara Soueidan에 의해 우리에게 가져 오는 것입니다. Sara는 흰색 공간 속성이 이미지를 포함한 인라인 컨텐츠에 적용될 수 있다고 지적합니다.

이미지가 스크롤 가능한 요소로 수평 이미지 목록을 만들기 위해 값 Nowrap과 함께 사용됩니다. 이미지가 래핑하는 것을 방지하고 컨테이너 내부의 한 줄에 표시되지 않도록합니다.

.

나는 흰색 공간을 사용하여 기본적인 jQuery 회전 목마를 만들어이 제안을 확대했습니다. 데모는 다음과 같습니다 Codepen의 sitepoint (@sitepoint)에 의해 이미지 회전 목마의 Word-Wrap 속성을 사용하여 펜을 참조하십시오. 라인을 제어하는 ​​단어 내부 때때로 긴 단어가 다음 줄로 감싸지 않아서 컨테이너가 넘치기 때문에 디자인이 꺼져있는 경우가 있습니다. 블로그 댓글에서 긴 URL 또는 일부 사용자가 생성 한 긴 단어는 일반적인 시나리오입니다.

다음 CSS 속성은 웹에서 긴 단어를 처리 할 때 약간의 제어 척도를 제공하도록 설계되었습니다. 단어 랩/오버 플로우 랩 랩 속성 오버 플로우 랩 속성 (이전에 Word-rap이라고도 불리며 레거시 이유로 모든 주요 브라우저에서 완전히 지원 및 작업)이 텍스트 포장을 허용하는 경우 적용됩니다. 그것은 두 가지 값 중 하나를 가질 수 있습니다 : 정상과 브레이크 단어.

정상 값을 사용하여 단어가 허용되는 중단점 (예 : 공백, 하이픈 등)에서 깨집니다. 브레이크 워드 값은 다른 수용 가능한 지점에서 선을 깨뜨릴 수없는 경우 단어 내부의 임의의 파괴 지점을 허용합니다. 아래 이미지는 컨테이너를 오버플리는 긴 단어의 표시를 보여줍니다.
오버 플로우 랩 랩 속성을 설정하고 레거시 목적으로 워드 랩 랩 속성을 중단 값으로 설정하겠습니다.

하이픈 속성 긴 말을 끊는 것은 모두 좋고 좋습니다. 그러나 결과 텍스트는 독자에게 혼란 스러울 수 있습니다. 더 나은 옵션은 단어가 다음 줄로 끊어지면서 단어를 하이픈으로 만드는 것입니다. 이런 식으로, 여러 줄에 한 단어를 감싸고있는 독자들에게는 즉시 분명합니다. 이를 달성하기 위해 CSS는 Hyphens 속성을 제공하며 Word-Wrap : Break-Word와 함께 사용할 수 있습니다. 보다 구체적으로, Hyphens 속성의 자동 값을 사용하면 문서의 언어 규칙이 허용되거나 하이픈이 HTML 소스에 존재하는 경우 단어의 다음 줄로 끊어지는 지점에서 하이픈을 표시 할 수 있습니다. 이것이 작동하려면 HTML 문서에서 LANG 속성을 원하는 언어로 설정하십시오 : .

하이픈 문자의 표시를 방지 할 수도 있습니다. 이 경우 하이픈 속성을 없음으로 설정하십시오

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

또한 마크 업에서 단어가 하이픈을 받고 텍스트가 다음 줄로 랩하면 단어 내에서 하이픈 문자를 표시 할 수 있습니다. 이것은 매뉴얼 값으로 수행됩니다 :



공급 업체 접두사에 의해 도움이되면 하이픈 속성에 대한 브라우저 지원은 약간의 불일치가 없지만 모든 주요 브라우저에서 좋습니다. 쓰기 시점의 최신 버전의 크롬 (v.44) 및 오페라 (v.30)는 속성 값 자동을 지원하지 않습니다. Codepen 에서 위의 예를 봅니다 단어와 문자 사이의 공간 조작 텍스트를 다소 읽기 쉽게 만드는 것은 종종 여러 가지 요인에 달려 있습니다. 어떤 경우에는 각 단어 또는 각 단일 문자 사이의 공간을 증가 시키거나 줄이면 를 추적하면 큰 개선이 발생합니다. CSS는 단어와 문자 사이의 간격의 모양을 제어하기 위해 단어 간격 및 문자 스페이스 속성을 제공합니다. 단어 간격 속성 아래는 단어 간격 속성의 값입니다
• 정상 백분율
일반은 문자 사이의 기본 공간을 표시합니다. 공간의 양은 사용 된 글꼴 또는 브라우저에 따라 다릅니다.
글꼴 또는 브라우저에서 정의 된 기본 간격 외에도 인터 워드 간격을 추가 할 수 있습니다.
백분율은 와 동일한 방식으로 작동하지만 백분율 값을 사용합니다. IT에 대한 브라우저 구현을 찾지 못했고 미래의 사양 초안에서 비율이 제거 될 위험이 있습니다.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

문자 스페이스 속성 문자 스페이스 속성을 두 가지 값 중 하나로 설정할 수 있습니다 : 정상 또는 . 일반 잎을 사용하여 글자 사이의 기본 글꼴 간격. 또한 이전에 지정된 모든 문자 스페이스 길이를 기본값으로 재설정합니다. 예를 들어, 부모 요소에 1EM의 문자 스케aping 값을 지정하지만 자식 요소에 기본값을 표시하려면 Normal은 친구입니다.

.

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

> 값은 측정 단위입니다 (예 : PX 또는 EMS, 여기서 글꼴이 이미 제공 한 기본 간격 외에 문자 사이의 간격을 늘릴 수 있습니다.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

더 자세한 내용 단어 간격은 단어에만 적용 할 수있는 것이 아닙니다. 모든 종류의 인라인 또는 인라인 블록 컨텐츠에서 사용할 수 있습니다.

또한 단어 간격과 문자 간격을 모두 애니메이션 할 수 있습니다. 그러나 문자 스페이스에서 CSS 전환을 사용하면 현재 버전의 Firefox (v.39)에 의해 정상 값이 인식되지 않음을 보여줍니다. 이것을 극복하려면 정상을 0em으로 대체하십시오 다음은 단어 간격 및 문자 스페이스를 사용하여 애니메이션 텍스트가 포함 된 데모입니다. Codepen에서 sitepoint (@sitepoint)에 의해 CSS 문자 스케aping 및 워드 스페이스 속성을 애니메이션하는 펜을 참조하십시오. 텍스트 정렬을위한 최신 CSS 옵션 텍스트-정렬 속성은 한동안 주변에있었습니다. 텍스트 및 이미지와 같은 인라인 컨텐츠가 블록 컨테이너 내부에 정렬되는 방법을 제어합니다. Kewords 왼쪽과 오른쪽은 각각 왼쪽과 오른쪽에 인라인 내용을 정렬합니다. 텍스트 정렬 설정 중심으로 컨텐츠를 컨테이너 중앙에 정렬합니다. 마지막으로, 정당한 키워드는 컨텐츠를 정당화하여 각 줄이 같은 길이가되도록 정당화됩니다 (컨테이너의 가장자리에 도달하기에 충분히 길지 않은 경우 마지막 줄을 제외하고). Spec은 RTL (Right-to-Left) 언어 시스템을 사용하여 국제화 된 웹 사이트에서 매우 유용 할 수있는 두 가지 새로운 값을 추가합니다. 왼쪽에서 오른쪽 (LTR) 독자의 경우 각각 왼쪽과 오른쪽에 해당합니다. 웹 사이트가 RTL 언어를 사용하는 경우 시작은 오른쪽에 해당하고 끝은 왼쪽에 해당합니다.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>



텍스트 정렬 적용 : 인라인 어린이 요소에 매치 양성인이 자녀가 부모와 동일한 정렬을 상속받을 수 있도록합니다. 상속 된 시작 또는 종료 값은 부모의 언어 방향에 대해 계산되어 왼쪽 또는 오른쪽의 출력이 발생합니다. 텍스트-정상-생식 속성 CSS에 새로운 텍스트-정상이라는 속성이기도합니다. 이 속성은 단락이 끝나기 전 또는
태그 이전의

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

정당한 쓰기 시점에서 텍스트 정상-생식에 대한 브라우저 지원은 다소 나쁘다. 그러므로, 그것은 전혀 드물게 사용해야한다는 것이 나의 견해입니다.

이 기능을 보여주는 코드 펜 데모를 봅니다 텍스트 들여 쓰기

텍스트 라인, 일반적으로 단락의 첫 번째 줄은 웹 사이트에서 자주 만나는 것이 아닙니다. 대신, 빈 줄은 단락 사이의 일반적인 시각적 마크로 배치됩니다. 그럼에도 불구하고, 단락의 첫 번째 줄을 들여 보내는 것은 때때로 특정 디자인에 적합한 고전적인 모습을 만드는 데 사용됩니다.
이 기술에 의해 디자인이 향상되면 CSS는 텍스트 인센트 속성을 제공합니다. 가능한 값을 고려해 봅시다.

길이 값은 일반적으로 px 또는 em 단위를 사용하여 설정됩니다.

백분율 값을 사용하여 백분율이 설정됩니다

각선의 값은 강제 라인 브레이크 후 블록 컨테이너 내부의 첫 번째 라인의 모양, 즉 enter 태그를 삽입합니다. 그러나 소프트 랩 브레이크 후 첫 번째 줄의 표시, 즉 컨테이너에 맞게 다음 줄로 감싸는 텍스트는 영향을받지 않습니다. . 매달려있는 값은 첫 번째 줄을 제외한 모든 줄을 제외한 모든 줄을 들여 쓰기로 표시합니다. 각 라인 및 교수형 값은 실험적 값이며, 글을 쓰는 시점에 아직 브라우저에서 구현되지 않았습니다. 이 데모를 보려면 텍스트가 실제로 행동하는 를보십시오

결론

CSS는 웹 텍스트 조작을 향한 큰 진전을 보이고 있지만 더 많은 작업이 수행 될 것으로 예상됩니다. 최신 속성에 대한 스케치 브라우저 지원 외에도 CSS가 커닝 기능, 즉 주어진 단어에서 두 글자 사이의 거리를 조작 할 수있는 기회와 같이 좋을 것입니다. 이 게시물에서는 웹에서 텍스트를 형식화, 라인 랩핑 및 정렬하는 여러 CSS 속성을 탐구했습니다. 데모를 사용하여 이러한 실험을 자유롭게 실험 해보십시오.

나는 당신의 피드백을 기대합니다! 웹 타이포그래피를 제어하기위한 CSS 속성에 대한 자주 묻는 질문 (FAQ) CSS 속성을 사용하여 웹 타이포그래피를 제어 할 수있는 방법은 무엇입니까?

CSS 속성은 웹 타이포그래피를 제어하기위한 광범위한 옵션을 제공합니다. 글꼴 크기, 글꼴 패밀리, 라인 높이, 텍스트 정렬, 텍스트 색상 등을 조정할 수 있습니다. 예를 들어, 글꼴 크기를 변경하려면 '글꼴 크기'속성을 사용하고 픽셀, EM 또는 백분율로 크기를 지정할 수 있습니다. 마찬가지로 글꼴 패밀리를 변경하려면 'Font-Family'속성을 사용하고 글꼴 이름을 지정할 수 있습니다. 사용자 시스템에서 첫 번째 선택을 사용할 수없는 경우 폴백 글꼴을 포함해야합니다.

CSS에서 '텍스트-정렬'속성의 역할은 무엇입니까?

'텍스트-정렬. 'CSS의 속성은 블록 요소의 인라인 함량을 정렬하는 데 사용됩니다. ‘왼쪽’,‘오른쪽’,‘센터’또는‘정당화’와 같은 값을 사용할 수 있습니다. 예를 들어,‘Text-Align : Center’는 텍스트가 포함 된 요소 내에서 중앙을 중심으로합니다. 이 속성은 제목, 단락 또는 기타 텍스트 함유 요소에서 텍스트의 정렬을 제어하려는 경우 특히 유용합니다.

CSS의 공백을 어떻게 제어 할 수 있습니까?

' CSS의 흰색 공간의 속성은 요소 내부의 흰색 공간이 처리되는 방식을 제어하는 ​​데 사용됩니다. ‘정상’,‘nowrap’,‘pre’,‘pre-line’또는‘pre-wrap’과 같은 값을 얻을 수 있습니다. 예를 들어, 'White-Space : Nowrap'은 텍스트가 다음 줄로 감싸지 않도록하여 모든 텍스트가 한 줄로 표시됩니다.

CSS의 왼쪽에 항목을 어떻게 정렬 할 수 있습니까?

CSS를 사용하여 텍스트의 선 높이를 제어하는 ​​방법?
'CSS의 속성은 텍스트 라인 사이의 공간을 제어하는 ​​데 사용됩니다. 픽셀, 백분율과 같은 상대 단위 또는 현재 글꼴 크기에 곱하여 라인 높이를 설정하는 단위가없는 숫자와 같은 절대 단위로 라인 높이를 지정할 수 있습니다. 예를 들어,‘Line-Height : 1.5’는 선 높이를 현재 글꼴 크기의 1.5 배로 설정합니다. CSS에서 텍스트 색상을 변경하려면 어떻게해야합니까?

CSS의 '색상'속성은 텍스트 색상을 변경하는 데 사용됩니다. 이름 ( 'red'), 16 진수 값 ( '#ff0000'), RGB 값 ( 'rgb (255, 0, 0)'또는 HSL 값과 같은 다른 방식으로 색상을 지정할 수 있습니다. ( 'HSL (0, 100%, 50%)'). CSS의‘글꼴 중복’속성은 텍스트를 대담하게 만드는 데 사용됩니다. 값을 '대담'또는 100의 배수로 100에서 900까지 설정할 수 있으며, 여기서 더 높은 숫자는 대담한 텍스트에 해당합니다. 예를 들어, 'Font-Weight : Bold'또는 'Font-Weight : 700'은 텍스트를 대담하게 만듭니다.

CSS에서 텍스트를 어떻게 이탤릭체로 만들 수 있습니까?
'글꼴 스타일' CSS의 속성은 텍스트를 이탤릭체로 만드는 데 사용됩니다. 텍스트를 이탤릭체로 만들기 위해 값을 '이탈리아'로 설정할 수 있습니다. 예를 들어,‘Font-Style : Italic’은 텍스트를 이탤릭체로 표시합니다. CSS의 텍스트를 어떻게 밑줄을 긋는가?

CSS의 '텍스트-결정'속성은 텍스트를 밑줄로하는 데 사용됩니다. 텍스트를 강조하기 위해 그 값을 '밑줄'으로 설정할 수 있습니다. 예를 들어, 'Text-Decoration : Underline'은 텍스트를 강조합니다.

CSS에서 문자 간격을 제어 할 수 있습니까?

CSS의 'Letter Spacing'속성은 제어하는 ​​데 사용됩니다. 글자 사이의 공간. EMS와 같은 픽셀 또는 상대 단위와 같은 절대 단위로 문자 간격을 지정할 수 있습니다. 예를 들어,‘레터 스페이스 : 0.1em’은 현재 글꼴 크기의 글자 사이의 공간을 0.1 배 씩 증가시킵니다.

위 내용은 웹 타이포그래피를 제어하기위한 CSS 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!