기사나 문서를 작성하는 동안 특정 경우에 일부 문자가 필요한 경우가 종종 있습니다. 웹 페이지에서 텍스트를 변환해야 하는 HTML 요소는 CSS 속성 ' 텍스트 변환 '. 이 속성은 또한 모든 문자를 추가한 후 대소문자를 한 번에 변환할 수 있는 방식으로 시간을 절약합니다.

이 게시물은 CSS로 텍스트 케이스를 변경하는 방법을 알려줍니다. 자, 시작하겠습니다!

CSS를 사용하여 텍스트를 대문자와 소문자로 변환하는 방법은 무엇입니까?

CSS에서 ' 텍스트 변환 ” 속성은 텍스트의 대문자 사용을 제어합니다. 또한 텍스트를 대문자 또는 소문자로 변환하는 데 사용됩니다.

텍스트 변환 속성 값

CSS 텍스트 변환 속성의 가능한 값은 다음과 같습니다.

• • “ 대문자 ”: 이 값은 요소 텍스트의 모든 문자를 대문자로 만듭니다.
  • “ 소문자 ”: 이 값은 요소의 텍스트를 소문자로 변경합니다.
  • “ 대문자로 하다 ”: 이 값은 각 단어의 첫 글자를 대문자로 변경합니다.
  • “ 없음 ”: 이 값은 수정을 위해 요소의 텍스트를 제한합니다.
  • “ 초기의 ”: 이 값은 기본값을 설정합니다.
  • “ 당신은 상속 ”: 이 값은 상위 요소에서 값을 설정합니다.

아래 예시를 분석해보세요!

예: 텍스트를 대문자와 소문자로 변환

먼저 클래스 이름이 '인 div 요소를 추가합니다. 상자 '. 본문 내부에 세 개의 제목 태그

,

,

를 추가합니다. 여기서

제목의 텍스트는 모두 대문자,

는 소문자, 세 번째 제목도 소문자입니다.

아래는 HTML 코드입니다.

< 사업부 수업 = '상자' >
< h1 > 소문자: LINUXHINT에 오신 것을 환영합니다 h1 >
< h2 > 대문자: linuxhint에 오신 것을 환영합니다 h2 >
< h3 > 대문자: linuxhint에 오신 것을 환영합니다 h3 >
사업부 >

스타일 상자 div

.상자 {
높이: 200px;
너비: 80 % ;
테두리: 4px 솔리드 #e4cfcf;
배경색: cadetblue;
여백: 1px 자동;
패딩: 10px;
}

위의 HTML 파일에서 생성된 div는 이제 아래에 설명된 CSS 속성으로 스타일이 지정됩니다.

• • “ 키 ”는 div의 높이를 설정하는 데 사용됩니다.
  • “ 너비 ”는 div의 너비를 설정하는 데 사용됩니다.
  • “ 국경 ” 속성을 활용하여 4px 너비, 실선 유형, #e4cfcf 색상의 요소 주변 테두리를 적용합니다.
  • “ 배경색 ” 요소의 배경색을 지정합니다.
  • “ 여유 ” 속성은 요소의 모든 측면에서 공간을 조정합니다.
  • “ 심 ” 속성은 div 요소의 콘텐츠 주위 또는 요소의 테두리 내부에 공간을 생성하는 데 사용됩니다.

아래 코드 블록은 모든 제목 요소가 서로 다른 텍스트 변환 속성 값으로 스타일이 지정되었음을 나타냅니다.

요소는 값이 '로 설정된 텍스트 변환 속성으로 적용됩니다. 소문자 ”:

h1 {
텍스트 변환: 소문자;
}

요소는 값이 '로 설정된 텍스트 변환 속성으로 적용됩니다. 대문자 ”:

h2 {
텍스트 변환: 대문자;
}

요소의 경우 text-transform 속성의 값은 ' 대문자로 하다 ”:

h3 {
text-transform: 대문자로;
}

위에서 언급한 코드를 제공함으로써 첫 번째 제목의 텍스트는 모두 소문자로, 두 번째 제목은 대문자로 변환됩니다. 반면 각 단어의 첫 글자는 세 번째 제목에서 대문자로 표시됩니다.

엄청난! 텍스트를 대문자, 소문자 및 모두 대문자로 변환하는 방법을 성공적으로 배웠습니다.

결론

CSS의 text-transform 속성은 텍스트의 대문자를 제어하고 문서 텍스트의 대소문자를 변경하는 데 사용됩니다. 이 속성은 모든 요소에 적용되며 이 속성의 값은 대문자, 소문자, 대문자 또는 없음일 수 있습니다. 이 블로그에서는 CSS text-transform 속성을 사용하여 텍스트를 대문자와 소문자로 변환하는 절차를 설명했습니다.