AWS AWS 디딤 클라우드

알림톡 통합메시징(알림톡)

이니톡 결제 이니톡(알림톡) 결제!

일본결제지원 일본결제지원!

이전
목록
다음
l

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

lainfox
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2012-11-16 (금) 14:29:16 · 4077 · 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 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-10-08 조회 4,484
12-10-08 조회 4,290
12-10-08 조회 8,860
12-10-08 조회 4,400
12-10-08 조회 4,086
12-10-07 조회 3,899
12-10-05 조회 5,610
12-10-05 조회 5,573
12-10-05 조회 3,781
12-10-05 조회 4,142
12-10-05 조회 7,371
12-10-04 조회 3,400
12-10-04 조회 3,816
12-10-03 조회 4,498
12-10-03 조회 4,645
12-10-03 조회 4,601
12-10-03 조회 4,342
12-10-03 조회 7,460
12-10-02 조회 3,713
12-10-02 조회 8,969
12-10-02 조회 4,318
12-10-01 조회 4,380
12-09-30 조회 4,145
12-09-29 조회 3,715
12-09-29 조회 4,421
12-09-28 조회 3,388
12-09-28 조회 5,006
12-09-28 조회 3,268
12-09-28 조회 3,182
12-09-27 조회 5,949
12-09-27 조회 3,742
12-09-27 조회 3,366
12-09-27 조회 3,107
12-09-27 조회 3,713
12-09-26 조회 4,910
12-09-26 조회 3,239
12-09-25 조회 4,366
12-09-25 조회 3,328
12-09-25 조회 3,303
12-09-25 조회 5,357
12-09-24 조회 3,616
12-09-24 조회 3,787
12-09-24 조회 3,200
12-09-24 조회 4,196
12-09-24 조회 3,207
12-09-24 조회 3,478
12-09-23 조회 3,079
12-09-23 조회 3,125
12-09-23 조회 3,142
12-09-23 조회 3,252
12-09-22 조회 4,426
12-09-21 조회 3,327
12-09-21 조회 3,472
12-09-21 조회 4,445
12-09-21 조회 3,553
12-09-20 조회 5,265
12-09-20 조회 3,008
12-09-20 조회 5,987
12-09-19 조회 3,217
12-09-18 조회 5,998
12-09-18 조회 3,473
12-09-18 조회 3,587
12-09-18 조회 3,818
12-09-18 조회 2,789
12-09-18 조회 2,891
12-09-18 조회 3,956
12-09-18 조회 4,612
12-09-18 조회 3,167
12-09-18 조회 2,850
12-09-18 조회 2,987
12-09-18 조회 3,148
12-09-18 조회 4,036
12-09-17 조회 3,453
12-09-17 조회 2,921
12-09-17 조회 2,854
12-09-17 조회 2,952
12-09-17 조회 3,196
12-09-17 조회 3,123
12-09-16 조회 2,939
12-09-16 조회 3,887
12-09-16 조회 3,044
12-09-15 조회 8,340
12-09-15 조회 3,536
12-09-14 조회 3,018
12-09-14 조회 4,296
12-09-14 조회 2,839
12-09-14 조회 3,828
12-09-14 조회 5,394
12-09-14 조회 2,864
12-09-14 조회 2,898
12-09-13 조회 2,956
12-09-13 조회 2,876
12-09-13 조회 2,740
12-09-13 조회 3,016
12-09-13 조회 2,815
12-09-13 조회 3,331
12-09-13 조회 3,448
12-09-13 조회 3,013
12-09-12 조회 2,822
12-09-12 조회 3,001
글쓰기