이전
목록
다음
l

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

lainfox
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-11-16 (금) 14:29:16 · 4155 · 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-07-14 조회 5,444
13-07-14 조회 5,416
13-07-14 조회 4,700
13-07-14 조회 4,306
13-07-14 조회 4,169
13-07-14 조회 4,226
13-07-14 조회 4,947
13-07-14 조회 4,592
13-07-14 조회 4,378
13-07-14 조회 5,417
13-07-14 조회 5,303
13-07-14 조회 5,070
13-07-14 조회 4,792
13-07-14 조회 5,475
13-07-13 조회 3,748
13-07-01 조회 5,758
13-07-01 조회 5,843
13-07-01 조회 3,926
13-07-01 조회 5,420
13-05-27 조회 3,996
13-05-21 조회 5,033
13-05-02 조회 1만
13-04-29 조회 5,236
13-04-15 조회 5,493
13-04-13 조회 6,428
13-02-27 조회 4,100
13-02-26 조회 6,503
13-02-12 조회 5,241
13-02-01 조회 2.3만
13-01-23 조회 3,537
13-01-09 조회 8,034
13-01-07 조회 4,956
13-01-07 조회 3,710
13-01-04 조회 1.3만
13-01-03 조회 1.2만
12-12-31 조회 6,379
12-12-27 조회 4,498
12-12-27 조회 4,195
12-12-27 조회 8,866
12-12-18 조회 3,681
12-12-12 조회 3,726
12-12-12 조회 6,756
12-12-12 조회 8,169
12-12-05 조회 5,456
12-12-01 조회 6,747
12-11-22 조회 4,665
12-11-09 조회 5,518
12-11-09 조회 7,582
12-10-29 조회 4,804
12-10-16 조회 6,357
12-10-09 조회 5,424
12-09-02 조회 4,520
12-09-01 조회 3,641
12-08-30 조회 4,290
12-08-30 조회 4,286
12-08-28 조회 3,623
12-08-21 조회 7,210
12-08-20 조회 3,734
12-08-18 조회 5,141
12-08-18 조회 3,506
12-08-11 조회 3,673
12-08-09 조회 3,833
12-08-07 조회 3,817
12-08-07 조회 4,396
12-08-01 조회 4,639
12-08-01 조회 4,518
12-07-20 조회 9,891
12-07-17 조회 4,257
12-07-15 조회 4,003
12-07-10 조회 4,292
12-07-09 조회 6,999
12-07-05 조회 3,320
12-07-04 조회 3,494
12-06-30 조회 5,735
12-06-28 조회 3,830
12-06-20 조회 3,977
12-06-16 조회 3,285
12-06-14 조회 3,939
12-06-07 조회 3,963
12-06-06 조회 6,322
12-05-27 조회 4,535
12-05-25 조회 3,286
12-05-25 조회 3,104
12-05-24 조회 3,241
12-05-24 조회 4,582
12-05-23 조회 3,942
12-05-22 조회 6,572
12-05-15 조회 3,955
12-05-15 조회 3,663
12-05-14 조회 3,100
12-05-12 조회 3,550
12-05-11 조회 7,051
12-05-07 조회 4,475
12-04-28 조회 3,682
12-04-25 조회 5,322
12-04-15 조회 3,911
12-04-12 조회 4,741
12-04-11 조회 3,503
12-04-08 조회 3,351
12-03-21 조회 6,412
글쓰기