text-transform:uppercase CSS 속성은 텍스트 요소의 내용을 모두 대문자로 설정합니다. 이 속성을 사용하여 텍스트 요소의 내용을 소문자 또는 제목 대소문자로 설정할 수도 있습니다. text-transform은 단락, 제목 또는 기타 텍스트 요소에 적용할 수 있습니다.
웹사이트를 작성하고 개발할 때 개발자는 필요한 경우 CSS 속성을 사용하여 텍스트 글꼴의 대소문자를 조정할 수 있습니다. 이 기사에서 이야기할 두 가지 방법은 텍스트 변환을 사용하는 것과 글꼴 변형을 사용하는 것입니다. 둘 다의 구문을 살펴보겠습니다.
CSS 모두 대문자
CSS text-transform 속성을 사용하여 텍스트 요소의 내용을 모두 대문자로 변경할 수 있습니다. 이 속성은 웹 페이지에서 텍스트를 대문자로 표시하는 방법을 설정합니다. 이 속성을 사용하여 텍스트 요소의 내용을 소문자로 설정할 수도 있습니다.
텍스트 블록을 모두 대문자로 만들려면 text-transform:대문자를 사용하세요. CSS 선택기:
텍스트 변환:대문자;
text-transform 속성은 세 가지 가능한 값을 허용합니다.
- 대문자:텍스트 요소에서 각 단어를 대문자로 설정합니다.
- 소문자:텍스트를 소문자로 설정합니다.
- capitalize:각 단어를 대문자로 표시하며, 제목 대소문자라고도 합니다.
실행 중인 텍스트 변환 방법의 예를 살펴보겠습니다.
모든 대문자 CSS 예
"이 페이지는 존재하지 않습니다"를 표시하는 웹 페이지를 만들 것입니다. 모두 대문자로 되어 있습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
이를 위해 모든 문자를 대문자로 입력할 수 있습니다. 이 접근 방식의 단점은 텍스트를 수동으로 다시 작성해야 한다는 것입니다. 이렇게 짧은 문장에는 문제가 되지 않습니다. 그러나 더 긴 문자열의 대소문자를 변경하는 경우 수동으로 문자를 변경하는 것이 점점 더 번거로워집니다.
우리는 안전을 위해 텍스트 변환 방법을 사용할 것입니다.
텍스트와 텍스트 변환 규칙을 사용하여 HTML 문서를 정의해 보겠습니다.
<html>
<head>
<style>
p {
text-transform: uppercase;
}
</style>
</head>
<body>
<p>this is in all caps</p>
</body>
</html> 선택한 텍스트의 모든 문자는 대문자로 표시됩니다.
먼저
태그를 정의합니다. 이 태그에는