이 문서에서는 대문자 텍스트를 제목 케이스로 변환하는 단계별 절차를 보여 줍니다.
대문자 텍스트를 제목 케이스로 변환하는 방법?
CSS 속성 및 JavaScript의 도움으로 대문자 텍스트를 제목 케이스로 변환할 수 있습니다. 이 변환은 텍스트의 가독성과 모양을 개선하는 데 도움이 됩니다. 또한 일관된 형식을 제공하고 사용자 경험을 향상시킵니다.
대문자에서 제목 케이스로 변환하려면 아래의 단계별 가이드를 따르십시오.
1단계: 대상 요소 생성
이 첫 번째 단계에서는 ' <몸> ” 제목 케이스로 변환되는 태그. 예를 들어, ' 피 ” 요소 데이터가 대상이 됩니다.
< 센터 >
< 피 ID = '변환기' > 이 텍스트는 CSS를 사용하여 대문자에서 제목 케이스로 변환됩니다. < / 피 >
< 센터 >
위의 코드 블록에서:
- 먼저 ' ” 태그를 사용하여 웹 페이지 중앙에 텍스트를 표시합니다. <센터> ” 태그. 또한 대문자 형식으로 더미 데이터를 제공하십시오.
- 다음으로 ' ID ” 속성을 제공하고 “ 변환기 '. 이것 ' ID ”는 JavaScript 태그 내부에
태그의 참조를 저장하는 데 사용됩니다.
컴파일 단계 종료 후:
위의 웹 페이지 스냅샷은 텍스트가 성공적으로 표시되었음을 나타냅니다.
2단계: 대문자를 제목 케이스로 변환
변환기를 생성하기 위해 JavaScript 속성 및 메서드가 활용됩니다. 아래 코드를 따르십시오. 설명은 다음과 같습니다.
~였다 표적 = 문서.getElementById ( '변환기' ) .textContent.toLowerCase ( ) ;
표적 = 표적 .바꾸다 ( / \b\w / g,
기능 ( 낮추다 ) { lower.toUpperCase 반환 ( ) ; } ) ;
문서.getElementById ( '변환기' ) .textContent = 표적 ;
< / 스크립트 >
위의 코드 조각에서:
- 먼저 '라는 이름의 변수를 만듭니다. 표적 ” 안에 <스크립트> ” 태그.
- 다음으로 ' 텍스트 내용 ” 여백 및 기타 태그를 남기고 텍스트만 선택하는 속성입니다. “ toLowerCase() ” 함수는 “target” 변수에 값을 저장하는 “converter”라는 id를 가지고 있습니다.
- 그런 다음 ' 바꾸다() ” 메서드는 “target” 변수의 값을 변경하는 데 사용됩니다. '를 사용하여 각 단어의 첫 번째 문자를 선택합니다. \b\w ” 표현을 사용한 다음 “ 대문자로() ' 기능. 텍스트 형식을 대문자로 변경합니다.
- 결국 'target' 변수의 새로운 값이 '라는 id를 가진 화면에 표시된다. 변환기 '.
코드 스니펫 실행 후:
출력은 대문자 텍스트가 제목 케이스 형식으로 변환되었음을 보여줍니다.
결론
대문자를 제목 케이스로 변환하려면 ' toLowerCase() ” 기능을 선택한 요소에 적용합니다. 그 후 ' 바꾸다() ” 기능을 사용하여 각 단어의 첫 번째 문자를 선택합니다. \b\w ' 표현. 최종적으로 선택된 문자는 “ 대문자로() ' 기능. 이 문서에서는 선택한 요소의 대문자 텍스트를 제목 케이스로 변환하는 절차를 설명했습니다.