CSS

[text] CSS - text-transform 속성 - 텍스트 대소문자 변환 (= text-transform속성 = 텍스트트랜스폼속성) ※ 첫글자만 대문자로 변환

목차
  1. text-transform 예제 - 텍스트 대소문자 변환
  2. text-transform 정의
  3. text-transform 구문

 

text-transform 예제 - 텍스트 대소문자 변환 

 

<style>
.non {text-transform: none;} /* 변환 X */
.cap {text-transform: capitalize;} /* 첫글자만 대문자로 변환 */
.upp {text-transform: uppercase;} /* 대문자로 변환 */
.low {text-transform: lowercase;} /* 소문자로 변환 */
</style>

<p class="non">none 홈짱닷컴 (homzzang.com)</p>
<p class="cap">capitalize 홈짱닷컴 (homzzang.com)</p>
<p class="upp">uppercase 홈짱닷컴 (homzzang.com)</p>
<p class="low">lowercase 홈짱닷컴 (HOMZZANG.COM)</p>


text-transform 정의

 

텍스트 대소문자 변환.

 


 

1.

  • 기본값: none
  • 상속여부: O
  • CSS버전: CSS1
  • JS구문: object.style.textTransform="uppercase";

 

2.

모든 브라우저 지원.

 

3. MDN text-transform 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

 

 

text-transform 구문

 

선택자 {text-transform: 속성값;}

 


[속성값]


  • none - 변환 없음. (기본값)
  • capitalize - 각 단어의 첫 번째 문자만 대문자로 변환.
  • uppercase - 대문자로 변환.
  • lowercase - 소문자로 변환.
  • initial - 이 속성의 기본값으로 설정. 
  • inherit - 부모요소의 속성값 상속. 
 

 


분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
1/33
목록
 홈  PC버전 로그인 일본어
그누앞단언어 1
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 1
웹유틸
회원센터
홈짱닷컴 PC버전 로그인