이전
목록
다음
l

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

lainfox
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-11-16 (금) 14:29:16 · 4192 · 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 수치를 다르게 준게 아닌가요? 첫번째꺼는 수치를 입력한거고, 두번째건 절대크기? 그걸 입력한거고, 세번째껀 부모 요소 기준 크기로 설정한거고... 어; 아닌가?;;; 내가 문제를 이해 못하고 있는건가 ?ㅜㅜㅜ
lainfox
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 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
오오오 !!! 신기하다 !!!
lainfox
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 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-03-03 조회 6,242
13-03-01 조회 5,571
13-03-01 조회 8,313
13-03-01 조회 6,309
13-02-26 조회 3,918
13-02-26 조회 3,861
13-02-26 조회 4,759
13-02-24 조회 8,171
13-02-24 조회 4,258
13-02-24 조회 3,500
13-02-24 조회 5,316
13-02-24 조회 5,308
13-02-24 조회 4,375
13-02-24 조회 5,712
13-02-24 조회 9,400
13-02-14 조회 5,109
13-02-13 조회 9,038
13-01-29 조회 7,679
13-01-24 조회 5,029
13-01-24 조회 4,904
13-01-17 조회 4,315
13-01-16 조회 4,346
13-01-08 조회 4,399
12-12-27 조회 4,059
12-12-20 조회 1.1만
12-12-20 조회 3,382
12-12-06 조회 4,369
12-12-01 조회 4,131
12-11-28 조회 5,698
12-11-25 조회 5,405
12-10-20 조회 4,665
12-10-03 조회 4,831
12-09-26 조회 4,991
12-09-15 조회 8,444
12-09-14 조회 5,459
12-09-11 조회 3,964
12-09-10 조회 3,978
12-09-05 조회 8,861
12-08-29 조회 4,660
12-08-26 조회 3,790
12-08-23 조회 3,489
12-08-22 조회 3,575
12-08-22 조회 4,389
12-08-21 조회 3,536
12-08-20 조회 3,455
12-08-20 조회 9,259
12-08-15 조회 4,378
12-08-13 조회 3,297
12-08-11 조회 4,719
12-08-05 조회 4,565
12-08-03 조회 3,347
12-08-03 조회 4,042
12-08-02 조회 5,023
12-07-29 조회 4,131
12-07-26 조회 3,708
12-07-26 조회 3,578
12-07-22 조회 3,489
12-07-20 조회 3,324
12-07-19 조회 4,189
12-07-19 조회 3,447
12-07-16 조회 3,564
12-07-16 조회 4,485
12-07-15 조회 3,559
12-07-12 조회 7,389
12-07-12 조회 5,032
12-07-11 조회 3,077
12-07-09 조회 3,240
12-07-05 조회 3,852
12-07-04 조회 4,422
12-07-04 조회 3,828
12-07-04 조회 4,350
12-06-29 조회 3,814
12-06-27 조회 3,403
12-06-24 조회 3,881
12-06-22 조회 4,189
12-06-22 조회 8,602
12-06-22 조회 3,253
12-06-21 조회 3,287
12-06-17 조회 3,914
12-06-14 조회 4,014
12-06-14 조회 3,296
12-06-08 조회 4,444
12-06-06 조회 3,404
12-06-04 조회 4,160
12-05-26 조회 4,977
12-05-26 조회 3,932
12-05-25 조회 3,228
12-05-24 조회 3,331
12-05-22 조회 3,375
12-05-20 조회 3,003
12-05-16 조회 3,138
12-05-15 조회 3,533
12-05-10 조회 3,963
12-05-08 조회 3,486
12-05-04 조회 3,339
12-05-03 조회 4,294
12-05-02 조회 3,429
12-05-02 조회 3,204
12-05-02 조회 3,302
12-04-26 조회 3,451
글쓰기