아래의 코드를 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
13년 전
에고 잠시동안 잊고 있었습니다;
정답은 리플달아주신 분들이 알고 계시는 그것이 맞습니다 :)
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
정도로 스타일을 잡아주면 되겠네요
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7230 | 11년 전 | 3638 | ||
| 7229 | 11년 전 | 3761 | ||
| 7228 | 11년 전 | 3803 | ||
| 7227 | 11년 전 | 3924 | ||
| 7226 | 11년 전 | 2374 | ||
| 7225 | 11년 전 | 17462 | ||
| 7224 |
AngryDev
|
11년 전 | 1371 | |
| 7223 |
돌아온깡통
|
11년 전 | 1121 | |
| 7222 |
돌아온깡통
|
11년 전 | 1064 | |
| 7221 |
돌아온깡통
|
11년 전 | 895 | |
| 7220 |
돌아온깡통
|
11년 전 | 1015 | |
| 7219 |
돌아온깡통
|
11년 전 | 849 | |
| 7218 |
돌아온깡통
|
11년 전 | 679 | |
| 7217 |
돌아온깡통
|
11년 전 | 1063 | |
| 7216 |
돌아온깡통
|
11년 전 | 804 | |
| 7215 |
돌아온깡통
|
11년 전 | 722 | |
| 7214 |
돌아온깡통
|
11년 전 | 1071 | |
| 7213 |
돌아온깡통
|
11년 전 | 940 | |
| 7212 |
돌아온깡통
|
11년 전 | 725 | |
| 7211 |
돌아온깡통
|
11년 전 | 887 | |
| 7210 |
돌아온깡통
|
11년 전 | 908 | |
| 7209 |
돌아온깡통
|
11년 전 | 906 | |
| 7208 |
돌아온깡통
|
11년 전 | 1018 | |
| 7207 |
돌아온깡통
|
11년 전 | 636 | |
| 7206 |
돌아온깡통
|
11년 전 | 696 | |
| 7205 |
돌아온깡통
|
11년 전 | 878 | |
| 7204 |
돌아온깡통
|
11년 전 | 744 | |
| 7203 |
돌아온깡통
|
11년 전 | 752 | |
| 7202 |
돌아온깡통
|
11년 전 | 733 | |
| 7201 |
돌아온깡통
|
11년 전 | 681 | |
| 7200 |
돌아온깡통
|
11년 전 | 714 | |
| 7199 |
돌아온깡통
|
11년 전 | 1337 | |
| 7198 |
돌아온깡통
|
11년 전 | 665 | |
| 7197 |
돌아온깡통
|
11년 전 | 983 | |
| 7196 |
돌아온깡통
|
11년 전 | 889 | |
| 7195 |
돌아온깡통
|
11년 전 | 627 | |
| 7194 |
돌아온깡통
|
11년 전 | 654 | |
| 7193 |
돌아온깡통
|
11년 전 | 721 | |
| 7192 |
돌아온깡통
|
11년 전 | 750 | |
| 7191 |
joe031
|
11년 전 | 1280 | |
| 7190 | 11년 전 | 4167 | ||
| 7189 | 11년 전 | 1256 | ||
| 7188 |
잘살아보자
|
11년 전 | 975 | |
| 7187 | 11년 전 | 1453 | ||
| 7186 |
kiplayer
|
11년 전 | 7562 | |
| 7185 | 11년 전 | 1150 | ||
| 7184 |
잘살아보자
|
11년 전 | 2349 | |
| 7183 |
잘살아보자
|
11년 전 | 1166 | |
| 7182 |
잘살아보자
|
11년 전 | 1234 | |
| 7181 | 11년 전 | 1504 | ||
| 7180 |
하얀비요일
|
11년 전 | 1000 | |
| 7179 |
잘살아보자
|
11년 전 | 1004 | |
| 7178 | 11년 전 | 999 | ||
| 7177 | 11년 전 | 1021 | ||
| 7176 | 11년 전 | 1671 | ||
| 7175 |
 Terrorboy |
11년 전 | 1054 | |
| 7174 |
kiplayer
|
11년 전 | 1185 | |
| 7173 | 11년 전 | 965 | ||
| 7172 |
잘살아보자
|
11년 전 | 4650 | |
| 7171 |
잘살아보자
|
11년 전 | 717 | |
| 7170 | 11년 전 | 1083 | ||
| 7169 |
초심의설렘
|
11년 전 | 1482 | |
| 7168 | 11년 전 | 1019 | ||
| 7167 |
잘살아보자
|
11년 전 | 5299 | |
| 7166 |
잘살아보자
|
11년 전 | 3452 | |
| 7165 | 11년 전 | 4969 | ||
| 7164 | 11년 전 | 841 | ||
| 7163 | 11년 전 | 1218 | ||
| 7162 |
울라라라우
|
11년 전 | 1404 | |
| 7161 | 11년 전 | 1278 | ||
| 7160 |
skyler
|
11년 전 | 1195 | |
| 7159 |
Terrorboy |
11년 전 | 719 | |
| 7158 |
 돼지코구뇽 |
11년 전 | 3372 | |
| 7157 |
잘살아보자
|
11년 전 | 2904 | |
| 7156 |
잘살아보자
|
11년 전 | 2239 | |
| 7155 |
잘살아보자
|
11년 전 | 1466 | |
| 7154 |
잘살아보자
|
11년 전 | 1454 | |
| 7153 | 11년 전 | 2908 | ||
| 7152 |
울라라라우
|
11년 전 | 838 | |
| 7151 | 11년 전 | 1072 | ||
| 7150 |
잘살아보자
|
11년 전 | 2391 | |
| 7149 |
잘살아보자
|
11년 전 | 3306 | |
| 7148 |
잘살아보자
|
11년 전 | 1204 | |
| 7147 |
잘살아보자
|
11년 전 | 778 | |
| 7146 |
잘살아보자
|
11년 전 | 1421 | |
| 7145 |
잘살아보자
|
11년 전 | 737 | |
| 7144 |
잘살아보자
|
11년 전 | 1330 | |
| 7143 |
잘살아보자
|
11년 전 | 774 | |
| 7142 |
잘살아보자
|
11년 전 | 1462 | |
| 7141 |
잘살아보자
|
11년 전 | 1211 | |
| 7140 |
잘살아보자
|
11년 전 | 2028 | |
| 7139 |
잘살아보자
|
11년 전 | 3693 | |
| 7138 |
잘살아보자
|
11년 전 | 3190 | |
| 7137 |
잘살아보자
|
11년 전 | 3644 | |
| 7136 |
잘살아보자
|
11년 전 | 1399 | |
| 7135 |
gooroo
|
11년 전 | 1630 | |
| 7134 |
열라뽕똬이
|
11년 전 | 2332 | |
| 7133 |
 카카오툴즈 |
11년 전 | 1029 | |
| 7132 | 11년 전 | 1446 | ||
| 7131 | 11년 전 | 3585 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기