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

[font] CSS - font-weight 속성 ★ - 글자굵기 (= font-weight속성 = 폰트굵기 = 글씨체굵기 =글씨굵기 = 글자굵기 = 글씨두께 = 글자두께 = 서체굵기=글꼴굵기 = 폰트웨이트속성, 상속 O)

목차
  1. font-weight 예제 - 글자 굵기
  2. font-weight 정의
  3. font-weight 구문

 

font-weight 예제 - 글자 굵기 

 
<p style="font-weight: normal;">normal 홈짱닷컴 (homzzang.com)</p>
<p style="font-weight: bold;">bold 홈짱닷컴 (homzzang.com)</p>
<p style="font-weight: bolder;">bolder 홈짱닷컴 (homzzang.com)</p>
<p style="font-weight: lighter;">lighter 홈짱닷컴 (homzzang.com)</p>
<p style="font-weight: 100;">100 홈짱닷컴 (homzzang.com)</p>
<p style="font-weight: 200;">200 홈짱닷컴 (homzzang.com)</p>
<p style="font-weight: 300;">300 홈짱닷컴 (homzzang.com)</p>
<p style="font-weight: 400;">400 홈짱닷컴 (homzzang.com)</p>
<p style="font-weight: 500;">500 홈짱닷컴 (homzzang.com)</p>
<p style="font-weight: 600;">600 홈짱닷컴 (homzzang.com)</p>
<p style="font-weight: 700;">700 홈짱닷컴 (homzzang.com)</p>
<p style="font-weight: 800;">800 홈짱닷컴 (homzzang.com)</p>
<p style="font-weight: 900;">900 홈짱닷컴 (homzzang.com)</p>

결과보기
 

font-weight 정의

 
폰트 굵기 지정.

 


 
1.
  • 기본값 : normal
  • 상속여부: O
  • 애니효과: O
  • CSS버전: CSS1
  • JS구문: object.style.fontWeight="bold"
 
2.
모든 브라우저 지원.
 
 

font-weight 구문

 
선택자 {font-weight: normal|bold|bolder|lighter|number|initial|inherit;}

 


[속성값]
 
normal 
기본 굵기 (기본값) (= 400)
 
bold
굵은 서체 (= 700)
 
bolder 
상속된 굵기보다 더 굵은 서체
 
lighter 
상속된 굵기보다 더 얇은 서체
 
number
굵기 지정 숫자 (100단위로 900까지 가능. 숫자 클수록 굵음.)
100 200 300 400 500 600 700 800 900 
 
initial
이 속성의 기본값으로 설정.
 
inherit
부모 요소의 굵기를 상속



분류 제목
css CSS - unset 속성값 - 상속값 존재 유무에 따라, inherit・initial 속성값 사용. (= …
selector CSS - [attribute^=value] 속성선택자 ★ - 지정 속성값 문자열로 시작하는 요소. (=시…
border CSS - border-bottom-width 속성 - 테두리하단너비 (= 테두리하단두께 = border-b…
responsive CSS - RES Grid-View - (그리드뷰 = 화면너비분할 = 화면분할 = 수동그리드)
selector CSS - [attribute~=value] 속성선택자 - 특정 속성값단어 (단독 또는 단어앞뒤공백)인 요소…
selector CSS - [attribute$=value] 속성선택자 - 지정 속성값 문자열로 끝나는 요소 (IE7)
selector CSS - :placeholder-shown 가상선택자 - 플레이스홀더 텍스트 표시 중인 요소 선택 (= :…
gradient CSS - linear-gradient() 함수 ★ - 선형 그레이디언트 배경이미지 (= 선형 그라디언트 …
border CSS - border-right-style 속성 - 테두리우측모양 (= border-right-style속…
border CSS - border-top-left-radius 속성 - 테두리상단왼쪽둥글기 지정 (= 보더탑레프트레이디…
shadow CSS - box-shadow 속성 - 요소 그림자 효과 주기 (= box-shadow속성 = 박스섀도속성)…
selector CSS - :only-child 가상선택자 - 그 부모의 유일자식요소 (유일선택자, IE9)
flex CSS - FlexBox (플렉스박스) 소개 ★★★ - 새로운 반응형 레이아웃 모델 ※ (가로/세로) (기본…
flex CSS - flex-basis 속성(I) ★ - 아이템 초기 길이 (= 아이템너비 = flex-basis속성…
column CSS - column-span 속성 - 컬럼 병합 여부 지정 (= 컬럼병합 = 컬럼확장 = column-s…
transform CSS - perspective 속성 - 3D요소의 원근 조망. (= perspective속성 = 퍼스펙티브…
text CSS - text-transform 속성 - 텍스트 대소문자 변환 (= text-transform속성 = …
transform CSS - transform-origin 속성 - 변형요소 위치 변경. ( = transform-origin…
box CSS - padding-right 속성 - 안쪽여백우측 (= padding-right속성 = 패딩라이트속…
gradient CSS - radial-gradient() 함수 ★ - 방사형 그레이디언트 배경이미지 (= 방사형 그라디언트…
17/27
목록
찾아주셔서 감사합니다. Since 2012