아래의 코드를 html 에 넣고 브라우저에서 봅시다.
<div style="line-height:2.0; font:normal 12px 돋움;">
<b>line-height 적용결과 [A]</b><br>
가나다라 abcd 1234<br>
가나다라 abcd 1234<br>
가나다라 abcd 1234<br>
가나다라 abcd 1234<br>
</div>
-------------
<div style="font:normal 12px 돋움; line-height:2.0;">
<b>line-height 적용결과 [B]</b><br>
가나다라 abcd 1234<br>
가나다라 abcd 1234<br>
가나다라 abcd 1234<br>
가나다라 abcd 1234<br>
</div>
-------------
<div style="line-height:2.0; font-size:12px; font-family:돋움;">
<b>line-height 적용결과 [C]</b><br>
가나다라 abcd 1234<br>
가나다라 abcd 1234<br>
가나다라 abcd 1234<br>
가나다라 abcd 1234<br>
</div>
line-height 가 왜이럴까요?
버그가 있나요? 특정브라우저인가요?
답을 5분만에 찾으신다면 당신은 이미 고.수!
(제 임의로 그냥 5분 ㅎㅎ)
댓글 6개
13년 전
'ㅅ'?! 그냥 line-height 수치를 다르게 준게 아닌가요? 첫번째꺼는 수치를 입력한거고, 두번째건 절대크기? 그걸 입력한거고, 세번째껀 부모 요소 기준 크기로 설정한거고... 어; 아닌가?;;; 내가 문제를 이해 못하고 있는건가 ?ㅜㅜㅜ
lainfox
13년 전
문제가 헷갈리게 냈군요 ㅠ ㅠ
line-height 수치를 다르게 준 것으로 보일 수 있으니, 동일한 수치로 바꿔놓겠습니다 ^^;;
line-height 수치를 다르게 준 것으로 보일 수 있으니, 동일한 수치로 바꿔놓겠습니다 ^^;;
13년 전
"font"로 사이즈랑 서체 등등 결정할때 라인헤이트 까지 "font"안에 넣을 수 있나보죠?
그래서 맨위에 꺼만 라인헤이트를 앞에써서 씹힌거 같은데... 아닌가요?
그래서 맨위에 꺼만 라인헤이트를 앞에써서 씹힌거 같은데... 아닌가요?
13년 전
오 신기하네요. 처음알았어요.
font 속성에서 저렇게 하면 기본값으로 font-variant 와 , font-weight 이 normal 값이 먹는군요.
그래서 순서에 따라서 line-height 가 오버라이딩 되네요.
font 속성에서 저렇게 하면 기본값으로 font-variant 와 , font-weight 이 normal 값이 먹는군요.
그래서 순서에 따라서 line-height 가 오버라이딩 되네요.
13년 전
오오오 !!! 신기하다 !!!
lainfox
12년 전
에고 잠시동안 잊고 있었습니다;
정답은 리플달아주신 분들이 알고 계시는 그것이 맞습니다 :)
http://www.w3.org/TR/CSS2/fonts.html#propdef-font
css2 font 명세서 부분입니다.
font 축약형 설정의 값은 이렇게 들어가는데
Value: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
여기에 값을 주지 않고 생략했을 경우는 모두 디폴트의 값이 셋팅됩니다.
1번에서
line-height:2.0; font:normal 12px 돋움; 이렇게 스타일을 주면
font 축약형 선언에서는 font-size: 12px 이고 line-height 는 값을 주지 않았으니 line-height 의 initial 값인 normal 이 셋팅됩니다.
앞에 선언했던 line-height:2.0 을 재정의 해서 line-height:normal 이 된 셈이죠 :)
원하는 line-height:2.0 을 주려고 했다면
font:normal 12px/2.0 Dotum
정도로 스타일을 잡아주면 되겠네요
정답은 리플달아주신 분들이 알고 계시는 그것이 맞습니다 :)
http://www.w3.org/TR/CSS2/fonts.html#propdef-font
css2 font 명세서 부분입니다.
font 축약형 설정의 값은 이렇게 들어가는데
Value: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
여기에 값을 주지 않고 생략했을 경우는 모두 디폴트의 값이 셋팅됩니다.
1번에서
line-height:2.0; font:normal 12px 돋움; 이렇게 스타일을 주면
font 축약형 선언에서는 font-size: 12px 이고 line-height 는 값을 주지 않았으니 line-height 의 initial 값인 normal 이 셋팅됩니다.
앞에 선언했던 line-height:2.0 을 재정의 해서 line-height:normal 이 된 셈이죠 :)
원하는 line-height:2.0 을 주려고 했다면
font:normal 12px/2.0 Dotum
정도로 스타일을 잡아주면 되겠네요
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 8030 | 9년 전 | 414 | ||
| 8029 | 9년 전 | 336 | ||
| 8028 | 9년 전 | 295 | ||
| 8027 | 9년 전 | 306 | ||
| 8026 | 9년 전 | 379 | ||
| 8025 | 9년 전 | 410 | ||
| 8024 | 9년 전 | 397 | ||
| 8023 | 9년 전 | 424 | ||
| 8022 | 9년 전 | 338 | ||
| 8021 | 9년 전 | 362 | ||
| 8020 | 9년 전 | 359 | ||
| 8019 | 9년 전 | 375 | ||
| 8018 | 9년 전 | 477 | ||
| 8017 | 9년 전 | 559 | ||
| 8016 | 9년 전 | 382 | ||
| 8015 | 9년 전 | 416 | ||
| 8014 | 9년 전 | 346 | ||
| 8013 | 9년 전 | 268 | ||
| 8012 | 9년 전 | 270 | ||
| 8011 | 9년 전 | 477 | ||
| 8010 | 9년 전 | 332 | ||
| 8009 | 9년 전 | 349 | ||
| 8008 | 9년 전 | 317 | ||
| 8007 | 9년 전 | 465 | ||
| 8006 | 9년 전 | 502 | ||
| 8005 |
 카카오툴즈 |
9년 전 | 995 | |
| 8004 | 9년 전 | 384 | ||
| 8003 | 9년 전 | 454 | ||
| 8002 | 9년 전 | 347 | ||
| 8001 |
 Terrorboy |
9년 전 | 690 | |
| 8000 | 9년 전 | 457 | ||
| 7999 | 9년 전 | 407 | ||
| 7998 | 9년 전 | 466 | ||
| 7997 | 9년 전 | 336 | ||
| 7996 | 9년 전 | 565 | ||
| 7995 | 9년 전 | 511 | ||
| 7994 | 9년 전 | 401 | ||
| 7993 | 9년 전 | 470 | ||
| 7992 | 9년 전 | 542 | ||
| 7991 | 9년 전 | 289 | ||
| 7990 | 9년 전 | 325 | ||
| 7989 | 9년 전 | 329 | ||
| 7988 | 9년 전 | 757 | ||
| 7987 | 9년 전 | 460 | ||
| 7986 | 9년 전 | 463 | ||
| 7985 | 9년 전 | 542 | ||
| 7984 | 9년 전 | 461 | ||
| 7983 | 9년 전 | 697 | ||
| 7982 | 9년 전 | 558 | ||
| 7981 | 9년 전 | 516 | ||
| 7980 | 9년 전 | 536 | ||
| 7979 | 9년 전 | 526 | ||
| 7978 | 9년 전 | 491 | ||
| 7977 | 9년 전 | 432 | ||
| 7976 | 9년 전 | 891 | ||
| 7975 | 9년 전 | 405 | ||
| 7974 | 9년 전 | 449 | ||
| 7973 | 9년 전 | 631 | ||
| 7972 | 9년 전 | 423 | ||
| 7971 | 9년 전 | 498 | ||
| 7970 | 9년 전 | 341 | ||
| 7969 | 9년 전 | 579 | ||
| 7968 | 9년 전 | 426 | ||
| 7967 | 9년 전 | 411 | ||
| 7966 | 9년 전 | 415 | ||
| 7965 |
 나는웹디다 |
9년 전 | 1045 | |
| 7964 | 9년 전 | 434 | ||
| 7963 | 9년 전 | 443 | ||
| 7962 | 9년 전 | 442 | ||
| 7961 |
전갈자리남자
|
9년 전 | 535 | |
| 7960 | 9년 전 | 1001 | ||
| 7959 | 9년 전 | 585 | ||
| 7958 | 9년 전 | 436 | ||
| 7957 | 9년 전 | 391 | ||
| 7956 | 9년 전 | 390 | ||
| 7955 | 9년 전 | 493 | ||
| 7954 | 9년 전 | 427 | ||
| 7953 | 9년 전 | 475 | ||
| 7952 | 9년 전 | 397 | ||
| 7951 | 9년 전 | 529 | ||
| 7950 | 9년 전 | 424 | ||
| 7949 | 9년 전 | 417 | ||
| 7948 | 9년 전 | 355 | ||
| 7947 | 9년 전 | 972 | ||
| 7946 | 9년 전 | 488 | ||
| 7945 | 9년 전 | 432 | ||
| 7944 | 9년 전 | 491 | ||
| 7943 | 9년 전 | 423 | ||
| 7942 | 9년 전 | 436 | ||
| 7941 | 9년 전 | 428 | ||
| 7940 | 9년 전 | 927 | ||
| 7939 | 9년 전 | 419 | ||
| 7938 | 9년 전 | 434 | ||
| 7937 | 9년 전 | 325 | ||
| 7936 | 9년 전 | 907 | ||
| 7935 | 9년 전 | 507 | ||
| 7934 | 9년 전 | 487 | ||
| 7933 | 9년 전 | 613 | ||
| 7932 | 9년 전 | 551 | ||
| 7931 | 9년 전 | 614 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기