사이트 구축·운영 인사이트, SIR 블로그
이전
목록
다음
l

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

lainfox
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-11-16 (금) 14:29:16 · 4183 · 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 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-08-29 조회 4,138
12-08-07 조회 3,799
12-08-03 조회 3,620
12-07-31 조회 3,722
12-07-30 조회 3,672
12-07-16 조회 3,880
12-07-15 조회 3,706
12-07-07 조회 3,560
12-07-06 조회 3,765
12-07-03 조회 3,733
12-06-29 조회 3,338
12-06-22 조회 3,712
12-06-17 조회 3,973
12-05-21 조회 3,892
12-05-02 조회 3,425
12-05-02 조회 4,225
12-05-02 조회 3,343
12-04-30 조회 3,529
12-04-30 조회 3,221
12-03-17 조회 4,079
12-03-10 조회 3,417
12-03-08 조회 3,943
12-03-03 조회 3,653
12-02-27 조회 5,064
12-02-17 조회 4,367
12-02-16 조회 4,626
12-02-03 조회 3,315
12-01-31 조회 3,226
12-01-24 조회 3,216
12-01-17 조회 3,921
12-01-05 조회 3,462
11-12-30 조회 3,195
11-12-23 조회 4,757
11-12-08 조회 3,504
11-12-07 조회 4,478
11-11-27 조회 3,899
11-11-25 조회 4,226
11-11-23 조회 3,671
11-11-22 조회 3,541
11-11-09 조회 3,244
11-10-23 조회 3,173
11-10-19 조회 3,137
11-10-08 조회 2,825
11-10-04 조회 2,828
11-10-04 조회 5,280
11-09-01 조회 4,359
11-08-13 조회 2,536
11-08-06 조회 3,215
11-07-11 조회 3,603
11-06-27 조회 2,983
11-06-21 조회 2,640
11-06-13 조회 2,447
11-06-07 조회 2,457
11-05-26 조회 2,419
11-04-20 조회 2,748
11-03-21 조회 2,838
11-03-18 조회 2,532
11-03-11 조회 2,555
11-02-07 조회 2,381
11-01-18 조회 2,707
11-01-12 조회 2,420
11-01-06 조회 2,521
10-12-10 조회 2,779
10-12-09 조회 2,628
10-12-08 조회 5,062
10-11-29 조회 2,900
10-11-28 조회 2,804
10-11-28 조회 2,646
10-11-19 조회 2,833
10-11-04 조회 2,710
10-10-21 조회 2,436
10-10-19 조회 3,387
10-10-12 조회 2,711
10-10-07 조회 2,540
10-09-30 조회 3,500
10-09-17 조회 3,914
10-09-17 조회 3,862
10-05-31 조회 3,565
09-12-31 조회 3,688
09-07-23 조회 5,020
08-09-16 조회 3,224
08-09-06 조회 2,973
08-09-04 조회 3,389
08-08-16 조회 4,430
08-08-15 조회 3,298
08-08-14 조회 4,509
08-08-12 조회 3,981
08-07-23 조회 2,797
08-07-10 조회 3,746
08-07-04 조회 2,969
08-06-27 조회 7,612
08-06-19 조회 4,916
08-05-27 조회 5,528
08-05-25 조회 5,362
08-05-23 조회 3,432
08-05-23 조회 4,599
08-05-21 조회 4,949
08-05-20 조회 4,074
08-05-20 조회 3,296
08-04-18 조회 4,353
글쓰기