이전
목록
다음
l

퀴즈) 오랜만에 와서 CSS font 퀴즈 하나 올리고 갑니다

lainfox
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2012-11-16 (금) 14:29:16 · 4109 · 6
아래의 코드를 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개

현현님
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-11-17 (토) 12:23:03
'ㅅ'?! 그냥 line-height 수치를 다르게 준게 아닌가요? 첫번째꺼는 수치를 입력한거고, 두번째건 절대크기? 그걸 입력한거고, 세번째껀 부모 요소 기준 크기로 설정한거고... 어; 아닌가?;;; 내가 문제를 이해 못하고 있는건가 ?ㅜㅜㅜ
llainfox
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-11-19 (월) 10:13:06
문제가 헷갈리게 냈군요 ㅠ ㅠ
line-height 수치를 다르게 준 것으로 보일 수 있으니, 동일한 수치로 바꿔놓겠습니다 ^^;;
모모노폴리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-11-19 (월) 11:50:23
"font"로 사이즈랑 서체 등등 결정할때 라인헤이트 까지 "font"안에 넣을 수 있나보죠?

그래서 맨위에 꺼만 라인헤이트를 앞에써서 씹힌거 같은데... 아닌가요?
라라엘
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-11-19 (월) 11:56:47
오 신기하네요. 처음알았어요.
font 속성에서 저렇게 하면 기본값으로 font-variant 와 , font-weight 이 normal 값이 먹는군요.
그래서 순서에 따라서 line-height 가 오버라이딩 되네요.
현현님
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-11-19 (월) 16:48:23
오오오 !!! 신기하다 !!!
llainfox
프로필 보기이 회원 글보기이 회원의 댓글보기
 2012-12-07 (금) 11:17:10
에고 잠시동안 잊고 있었습니다;
정답은 리플달아주신 분들이 알고 계시는 그것이 맞습니다 :)

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
정도로 스타일을 잡아주면 되겠네요
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
13-02-18 조회 3,567
13-02-15 조회 4,092
13-02-12 조회 5,861
13-02-04 조회 4,110
13-01-30 조회 4,988
13-01-25 조회 3,760
13-01-18 조회 3,795
13-01-18 조회 5,668
13-01-18 조회 6,170
13-01-18 조회 3,805
13-01-18 조회 4,897
13-01-17 조회 4,260
13-01-17 조회 3,626
13-01-17 조회 3,664
13-01-17 조회 4,003
12-12-31 조회 3,631
12-12-28 조회 4,942
12-12-28 조회 6,007
12-12-28 조회 3,434
12-12-27 조회 3,746
12-12-27 조회 4,325
12-12-20 조회 5,370
12-12-18 조회 9,169
12-12-14 조회 4,920
12-12-10 조회 3,763
12-12-10 조회 3,170
12-12-01 조회 4,017
12-11-25 조회 7,360
12-11-22 조회 6,002
12-11-20 조회 2.4만
12-11-19 조회 4,346
12-11-13 조회 3,912
12-11-12 조회 3,904
12-10-23 조회 4,856
12-09-25 조회 4,471
12-09-05 조회 7,093
12-09-04 조회 7,530
12-09-04 조회 3,449
12-08-30 조회 3,507
12-08-30 조회 3,645
12-08-29 조회 3,382
12-08-29 조회 3,231
12-08-26 조회 3,512
12-08-18 조회 3,833
12-08-17 조회 4,145
12-08-16 조회 3,651
12-08-14 조회 3,335
12-08-13 조회 5,625
12-08-13 조회 3,479
12-08-11 조회 3,781
12-08-10 조회 3,313
12-08-07 조회 4,128
12-08-07 조회 3,366
12-08-06 조회 3,584
12-07-31 조회 3,199
12-07-30 조회 3,518
12-07-30 조회 3,158
12-07-29 조회 3,331
12-07-29 조회 3,102
12-07-27 조회 3,150
12-07-21 조회 3,016
12-07-19 조회 3,241
12-07-19 조회 2,939
12-07-17 조회 3,437
12-07-17 조회 3,124
12-07-17 조회 3,984
12-07-16 조회 3,061
12-07-15 조회 3,150
12-07-14 조회 3,289
12-07-13 조회 8,335
12-07-11 조회 3,426
12-07-10 조회 9,986
12-07-09 조회 3,199
12-07-08 조회 4,440
12-07-06 조회 3,679
12-07-05 조회 3,959
12-07-05 조회 3,369
12-07-05 조회 3,328
12-07-03 조회 3,249
12-07-03 조회 3,199
12-07-02 조회 3,239
12-07-02 조회 2,985
12-06-30 조회 3,463
12-06-26 조회 3,170
12-06-22 조회 3,218
12-06-22 조회 3,159
12-06-21 조회 3,145
12-06-21 조회 3,372
12-06-20 조회 3,536
12-06-20 조회 3,198
12-06-20 조회 3,114
12-06-18 조회 3,994
12-06-17 조회 3,439
12-06-15 조회 3,044
12-06-14 조회 2,975
12-06-13 조회 3,538
12-06-11 조회 3,361
12-06-08 조회 3,380
12-06-06 조회 3,234
12-06-06 조회 3,615
글쓰기