본문은 서술상 편의를 위해 평어체로 작성되었습니다.
오류 제보나, 내용 개선에 대한 건의는 얼마든지 환영합니다. :)
영단어 첫 글자 대문자로 만들기
웹 프로그래밍을 하다 보면 웹페이지에 표시될 영단어의 첫 글자를 대문자로 변환해야 하는 때가 생긴다.
웹 기초 3대장 중 문자열 조작을 동적으로 할 수 있는 것은 JavaScript이다. 그러므로 처음 검색을 하는 키워드에는 보통 JavaScript, 첫 글자, 대문자라는 키워드가 들어가며, 그렇기 때문에 JavaScript를 활용한 방법이 주로 알려져 있다.
하지만 CSS를 활용해도 동일한 결과를 얻을 수 있다.
JavaScript를 사용하는 방식
가장 많이 알려져있는 것은 원 단어의 첫 글자를 추출해 toUpperCase() 메서드를 사용해서 대문자로 변환하고, 나머지 문자열과 다시 합치는 방식이다.
코드로 나타내면 아래와 같다.
const originalStr = 'blahblah';
let capitalizedStr =
originalStr.charAt(0).toUpperCase() + originalStr.slice(1);charAt과 slice 메서드 대신 index와 substring 메서드를 사용할 수도 있다.
capitalizedStr =
originalStr[0].toUpperCase() + originalStr.substring(1);template literal을 사용하면 + 연산자도 생략할 수 있다.
다만 오히려 가독성이 떨어져 보일 수도 있다.
capitalizedStr =
`${originalStr[0].toUppercase()}${originalStr.substring(1)}`;CSS를 사용하는 방식
CSS에는 특정 요소의 텍스트 모양을 변형시키는 text-transform 속성이 존재한다. 이 속성의 값으로 capitalize를 적용하면 해당 요소의 첫 글자는 대문자가 된다.
CSS 코드로 나타내면 아래와 같다.
selector {
text-transform: capitalize;
}아무런 브라우저 호환성 문제가 없으며, 요소가 추가될 경우 선택자만 붙이면 된다는 점에서 다수의 요소를 다뤄야 할 때도 유용하다.
TL;DR
웹페이지에서 첫 글자를 대문자로 만드는 것은 JavaScript보다 CSS를 사용하면 더 간편하게 할 수도 있다.
참고자료
