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

[DOM_Style] JS - wordSpacing 속성 - 텍스트 단어간 간격 (= 단어간격 = word-spacing속성 = 워드스페이싱속성, 상속O)

wordSpacing 예제 

 

<p id="hz">홈짱닷컴 Homzzang.com</p>


<button type="button" onclick="homzzang()">클릭</button>


<script>

function homzzang() {

  document.getElementById("hz").style.wordSpacing = "50px";

}

</script>


결과보기 

 

wordSpacing 정의 

 

단어 사이 간격 설정/반환. 

 


 

1.

letterSpacing 속성

문자간의 간격 

 

2.

기본값: normal

반환값: word-spacing 속성값을 나타내는 문자열

CSS속성: word-spacing
CSS버전: CSS1

3.

모든 브라우저 지원. 

 

 

wordSpacing 구문 

 

[접근]

object.style.wordSpacing 

 

[설정]

object.style.wordSpacing = "normal|length|initial|inherit"

 


[속성값]

 

normal

기본 간격 (기본값)


length (px 단위, cm단위, em단위 등)

숫자 클수록 간격 넓어짐 (음수 가능

※ 단어를 다닥다닥 붙게 하려면 보통 -10px 줌. 

 

initial

이 속성의 기본값으로 설정

 

inherit

부모 요소의 속성값 상속.   

 



분류 제목
DOM_Style JS - width 속성 - 요소너비 설정/반환 (= 요소가로길이 = width속성 = 위드스 속성)
DOM_Style JS - wordBreak 속성 - 한중일 외의 언어 줄바꿈규칙 (= 줄바꾸기 = wordBreak속성= 워…
DOM_Style JS - wordSpacing 속성 - 텍스트 단어간 간격 (= 단어간격 = word-spacing속성 =…
DOM_Style JS - wordWrap 속성 ★ - 단어줄바꿈 위해 긴단어쪼개기 (= 긴단어깨기 = 긴단어나누기 = wor…
DOM_Style JS - widows 속성 - 인쇄페이지 상단 표시할 요소의 최소 줄 수 설정/반환 (= widows속성 =…
DOM_Style JS - zIndex 속성 - 요소간 중첩 시, 상하 지정/설정 (=zIndex속성 = 제트인덱스 속성 = …
DOM_Style JS - pointerEvents 속성 - 마우스 포인트 이벤트에 대한 반응 여부. (= pointerEve…
DOM_Style JS - overflowWrap 속성 - 단어줄바꿈 위해 긴단어쪼개기 (= 긴단어깨기 = 긴단어나누기 = o…
DOM_Style JS - translate 속성 - 2D/3D 상 요소 위치 좌표 변경 설정/반환 (= translate속성…
DOM_Style JS - aspectRatio 속성 - 요소의 종횡비율(= 가로세로비율) 지정 (= aspectRatio속성…
10/10
목록
찾아주셔서 감사합니다. Since 2012