아래의 코드를 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
12년 전
문제가 헷갈리게 냈군요 ㅠ ㅠ
line-height 수치를 다르게 준 것으로 보일 수 있으니, 동일한 수치로 바꿔놓겠습니다 ^^;;
line-height 수치를 다르게 준 것으로 보일 수 있으니, 동일한 수치로 바꿔놓겠습니다 ^^;;
12년 전
"font"로 사이즈랑 서체 등등 결정할때 라인헤이트 까지 "font"안에 넣을 수 있나보죠?
그래서 맨위에 꺼만 라인헤이트를 앞에써서 씹힌거 같은데... 아닌가요?
그래서 맨위에 꺼만 라인헤이트를 앞에써서 씹힌거 같은데... 아닌가요?
12년 전
오 신기하네요. 처음알았어요.
font 속성에서 저렇게 하면 기본값으로 font-variant 와 , font-weight 이 normal 값이 먹는군요.
그래서 순서에 따라서 line-height 가 오버라이딩 되네요.
font 속성에서 저렇게 하면 기본값으로 font-variant 와 , font-weight 이 normal 값이 먹는군요.
그래서 순서에 따라서 line-height 가 오버라이딩 되네요.
12년 전
오오오 !!! 신기하다 !!!
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
정도로 스타일을 잡아주면 되겠네요
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6230 |
senseme
|
12년 전 | 1048 | |
| 6229 |
senseme
|
12년 전 | 1069 | |
| 6228 | 12년 전 | 4434 | ||
| 6227 |
senseme
|
12년 전 | 1488 | |
| 6226 |
senseme
|
12년 전 | 1629 | |
| 6225 | 12년 전 | 5488 | ||
| 6224 | 12년 전 | 3261 | ||
| 6223 |
kiplayer
|
12년 전 | 2133 | |
| 6222 | 12년 전 | 1294 | ||
| 6221 | 12년 전 | 3480 | ||
| 6220 | 12년 전 | 2508 | ||
| 6219 | 12년 전 | 2220 | ||
| 6218 |
senseme
|
12년 전 | 1834 | |
| 6217 |
senseme
|
12년 전 | 1532 | |
| 6216 |
senseme
|
12년 전 | 1522 | |
| 6215 |
senseme
|
12년 전 | 1278 | |
| 6214 | 12년 전 | 2392 | ||
| 6213 |
senseme
|
12년 전 | 1667 | |
| 6212 |
senseme
|
12년 전 | 1341 | |
| 6211 |
senseme
|
12년 전 | 2426 | |
| 6210 |
senseme
|
12년 전 | 1600 | |
| 6209 | 12년 전 | 2214 | ||
| 6208 | 12년 전 | 3437 | ||
| 6207 | 12년 전 | 1220 | ||
| 6206 |
senseme
|
12년 전 | 2196 | |
| 6205 | 12년 전 | 1034 | ||
| 6204 |
kiplayer
|
12년 전 | 1522 | |
| 6203 |
senseme
|
12년 전 | 2108 | |
| 6202 |
senseme
|
12년 전 | 1747 | |
| 6201 |
senseme
|
12년 전 | 4557 | |
| 6200 |
senseme
|
12년 전 | 2654 | |
| 6199 |
senseme
|
12년 전 | 2825 | |
| 6198 |
senseme
|
12년 전 | 1226 | |
| 6197 |
senseme
|
12년 전 | 8538 | |
| 6196 |
senseme
|
12년 전 | 3329 | |
| 6195 | 12년 전 | 1428 | ||
| 6194 |
 스위치79 |
12년 전 | 1276 | |
| 6193 |
senseme
|
12년 전 | 2684 | |
| 6192 |
senseme
|
12년 전 | 5355 | |
| 6191 |
senseme
|
12년 전 | 3404 | |
| 6190 | 12년 전 | 1331 | ||
| 6189 | 12년 전 | 13486 | ||
| 6188 |
웹디자인되고파
|
12년 전 | 1199 | |
| 6187 | 12년 전 | 602 | ||
| 6186 | 12년 전 | 3919 | ||
| 6185 | 12년 전 | 1457 | ||
| 6184 | 12년 전 | 9364 | ||
| 6183 | 12년 전 | 775 | ||
| 6182 |
senseme
|
12년 전 | 1226 | |
| 6181 |
senseme
|
12년 전 | 3212 | |
| 6180 |
senseme
|
12년 전 | 840 | |
| 6179 |
senseme
|
12년 전 | 1759 | |
| 6178 | 12년 전 | 3631 | ||
| 6177 | 12년 전 | 1062 | ||
| 6176 | 12년 전 | 948 | ||
| 6175 |
senseme
|
12년 전 | 5294 | |
| 6174 |
senseme
|
12년 전 | 1420 | |
| 6173 |
senseme
|
12년 전 | 749 | |
| 6172 |
senseme
|
12년 전 | 2736 | |
| 6171 |
senseme
|
12년 전 | 2471 | |
| 6170 |
senseme
|
12년 전 | 1493 | |
| 6169 |
senseme
|
12년 전 | 2924 | |
| 6168 |
senseme
|
12년 전 | 6534 | |
| 6167 | 12년 전 | 2131 | ||
| 6166 | 12년 전 | 736 | ||
| 6165 |
페이지팩트
|
12년 전 | 1895 | |
| 6164 |
네오soft
|
12년 전 | 1851 | |
| 6163 |
 엘남매아빠 |
12년 전 | 2606 | |
| 6162 | 12년 전 | 590 | ||
| 6161 |
엘남매아빠 |
12년 전 | 1684 | |
| 6160 | 12년 전 | 763 | ||
| 6159 | 12년 전 | 1774 | ||
| 6158 |
스위치79 |
12년 전 | 2678 | |
| 6157 |
sa2pan
|
12년 전 | 1237 | |
| 6156 | 12년 전 | 3884 | ||
| 6155 | 12년 전 | 9958 | ||
| 6154 | 12년 전 | 1119 | ||
| 6153 | 12년 전 | 2443 | ||
| 6152 |
생각보다몸이앞서다
|
12년 전 | 2116 | |
| 6151 | 12년 전 | 2971 | ||
| 6150 |
kiplayer
|
12년 전 | 6000 | |
| 6149 |
스위치79 |
12년 전 | 2637 | |
| 6148 | 12년 전 | 2961 | ||
| 6147 |
hwang007
|
12년 전 | 951 | |
| 6146 |
aqqasdf
|
12년 전 | 760 | |
| 6145 | 12년 전 | 1853 | ||
| 6144 | 12년 전 | 5856 | ||
| 6143 |
smwkd
|
12년 전 | 1457 | |
| 6142 | 12년 전 | 4694 | ||
| 6141 | 12년 전 | 926 | ||
| 6140 | 12년 전 | 4085 | ||
| 6139 | 12년 전 | 1234 | ||
| 6138 | 12년 전 | 1091 | ||
| 6137 |
SugarSkull
|
12년 전 | 1675 | |
| 6136 | 12년 전 | 1303 | ||
| 6135 |
한번잘해보자
|
12년 전 | 559 | |
| 6134 |
프리랜서개발자
|
12년 전 | 530 | |
| 6133 |
basaria
|
12년 전 | 20437 | |
| 6132 | 12년 전 | 499 | ||
| 6131 | 12년 전 | 1079 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기