• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 - 부모요소의 속성값 상속. 
 

 


분류 제목
css CSS - appearance 속성 - 요소자체구성요소숨기기 (= 요소내장구성요소제거 = appearance…
position CSS - left 속성 ★ - 왼쪽기준 (= left속성 = 좌측기준 = 레프트속성, 상속 X)
background CSS - background-color 속성 ★ - 배경색깔(=배경색상=배경컬러 = background-c…
selector CSS - :hover 가상선택자 ★ - 요소에 마우스커서위치시 효과 (= :hover선택자 = 허버선택자,…
position CSS - right 속성 ★ - 오른쪽기준(= 우측기준) 위치 지정 (= right속성 = 라이트속성) ※…
css CSS - 이미지반전 (= 이미지좌우반전 = 이미지좌우대칭변환)
position CSS - z-index 속성 ★ - 요소층수지정 (= 요소상하지정 = 요소상하결정 = 위아래지정 = z-…
box CSS - height 속성 ★ - 높이 (= 세로길이 = height속성 = 하이트속성) (※ vh, vw…
box CSS - width 속성 ★ - 너비 (= 가로길이 = width속성 = 위드스속성, 상속X)
image CSS - filter 속성 - 이미지필터효과 (= filter속성 = 필터속성) ※ 흑백이미지만들기 ※ 이…
text CSS - color 속성 ★ - 글자색깔 (=글자색상=글자색깔=글자컬러 = 텍스트색깔 = 컬러속성 = co…
position CSS - top 속성 ★ - 기준상단 (= 위기준 상단거리 = top속성 = 탑속성/톱속성)
position CSS - float 속성 ★★★ - 요소나란히 (= 요소한줄로 = 요소가로로 = 요소옆으로 = float속…
table CSS - border-collapse 속성★ - 테두리겹침설정 (= 테두리중첩설정 = 테두리이중방지 = b…
selector CSS - :first-child 가상선택자 - 그부모요소의 첫번째자식요소 (= 퍼스트차일드선택자, IE7)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - :not() 가상선택자 - (특정요소/특정선택자) 아닌 모든요소선택 (= not선택자 = 낫선택자…
font CSS - font-size 속성 ★ - 글자크기 (= 글씨체크기= 글씨크기 = 서체크기= 글씨크기 = …
font CSS - font-style 속성 - 글자기울기 (= 이텔릭체 여부 = 이탤릭 글씨체 = 글자 기울려쓰기 … 1
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
26/27
목록
찾아주셔서 감사합니다. Since 2012