'지식공유/이슈&버그'에 해당되는 글 2건

  1. 2013.07.09 img 요소의 여백 2
  2. 2013.07.09 Font 축약형 분석

Blog 본문

지식공유/이슈&버그


 작성자 : 유낙동 (다음서비스 웹표준개발2팀)


테스트 브라우저 버전정보
  • - IE6, IE7, IE8, IE9, IE10, 크롬(27.0), 사파리(5.1.7), 오페라(12.15), 파폭(21.0)
INTRO
  • - DTD 나 브라우저, 부모 엘리먼트의 영향을 받아 img요소의 여백 유무가 결정
  • - 각 케이스별 결과를 분석해보고 이에 대한 원인과 결론을 도출

결론

  • - 경우의 수는 크게 2가지, 소스내 공백이 있을 경우와 없을 경우로 나뉘어 짐
    • - 소스내 공백이 없을 경우 (DTD, 브라우저, 부모 엘리먼트)별 로 상이한 결과를 나타냄
    • 소스내 공백이 있을 경우에는 무엇에 관계없이 하단 여백 생김 (오페라 제외)

소스내 공백이 없을 경우

부모가 block 요소일 때

  • - 모든 브라우저 (IE6 제외)
    xthmlhtml5



  • - IE6
    xthmlhtml5


    <style>
    .wrap {background:red;}
    </style>
    <div class="wrap"><img src="test.jpg" /><img src="test.jpg" /></div>
    

부모가 inline 요소일 때

  • - IE7 이상, 오페라
    xthmlhtml5



  • - 크롬, 사파리, 파폭
    xthmlhtml5



  • - IE6
    xthmlhtml5

    <style>
    .wrap {background:red;}
    </style>
    <span class="wrap"><img src="test.jpg" /><img src="test.jpg" /></span>
    

소스내 공백이 있을 경우

부모가 block 요소일 때

  • - 모든 브라우저 (오페라 제외)
    xthmlhtml5

  • - 오페라
    xthmlhtml5

    <style>
    .wrap {background:red;}
    </style>
    <div class="wrap">
        <img src="test.jpg" />
        <img src="test.jpg" />
    </div>
    

부모가 inline 요소일 때

  • - 모든 브라우저
    xthmlhtml5

    <style>
    .wrap {background:red;}
    </style>
    <span class="wrap">
        <img src="test.jpg" />
        <img src="test.jpg" />
    </span>
    

원인

  • - 소스내 공백이 있을 경우,
    공백을 하나의 텍스트 노드로 인식하여,
    기본 행간이 적용되면서 여백 생김
  • - 소스의 공백이 없는 경우에도,
    html5 DTD 이거나 부모의 요소가 inline인 경우,
    img 요소에 기본 행간이 적용되어 여백 생김

해결방법

  • - img 요소에 display:block; 사용으로 행간의 영향에서 벗어나 여백을 방지.
  • - img 요소에 vertical-align:top; 사용으로, 기본 행간 기준을 상단으로 하여 여백을 방지.
  • - 부모 요소에서 line-height:0; 사용으로 기본 행간을 초기화하여 여백을 방지. (이는 부모가 블록요소일 경우에만 사용 가능하고, IE6에서는 블록요소에서도 적용 안됨)


'지식공유 > 이슈&버그' 카테고리의 다른 글

Font 축약형 분석  (0) 2013.07.09
Posted by darum

전체 댓글

Blog 본문

지식공유/이슈&버그


 작성자 : 유낙동 (다음서비스 웹표준개발2팀)


INTRO
  • - font 축약형을 사용했을때와 그렇지 않은경우 비교 분석
  • - 비교 분석 결과에 따른 성능 결과 도출

결론

  • - Font 축약형 사용시 불필요한 폰트속성이 추가 됨
  • - 위 결과를 토대로 yslow를 이용한 페이지 로딩 속도를 실험한 결과, 성능에는 큰 차이점을 보이지 않음

축약형 사용/미사용 비교분석

비교

  • - css 적용 전 마크업
    소스결과
    <div id="font">
    	<h1>heading</h1>
    	<p>paragraph</p>
    	<i>italic</i>
    	<b>bold</b>
    </div>
    



  • - 축약형 미사용시 요소별 default 속성을 그대로 유지

    소스
    결과
    <style type="text/css">
    #font * {font-size:12px;font-family:dotum;}
    </style>
    
    <div id="font">
    	<h1>heading</h1>
    	<p>paragraph</p>
    	<i>italic</i>
    	<b>bold</b>
    </div>
    



  • - 축약형 사용시 요소별 defalut 속성을 덮어쓰게되어 모든 font속성 초기화
    htmlview
    <style type="text/css">
    #font * {font:12px/15px dotum;}
    </style>
    
    <div id="font">
    	<h1>heading</h1>
    	<p>paragraph</p>
    	<i>italic</i>
    	<b>bold</b>
    </div>
    



분석

  • - 축약형을 사용한 경우,  선언하지 않은 불필요한 폰트 속성이 선언되어있음을 확인할 수 있음.
    • 크롬 Computed Style
      축약형 사용축약형 미사용





비교/분석에 따른 성능 비교

  • - 10000개의 동일한 마크업을 생성 후 축약형을 사용한 경우와 그렇지 않은 경우를 yslow를 이용하여 측정
  • - 페이지 로딩시간 분석 (총 10회 측정)
    축약형 사용여부1회2회3회4회5회6회7회8회9회10회평균
    미사용0.878s0.840s1.213s1.218s0.848s1.223s1.094s1.250s0.899s1.258s1.0721
    사용1.107s1.186s1.197s1.188s0.822s0.839s1.214s0.839s1.228s1.213s1.0833
  • - 성능 측정 결과 큰 차이점이 없음을 확인


'지식공유 > 이슈&버그' 카테고리의 다른 글

img 요소의 여백  (2) 2013.07.09
Posted by darum

전체 댓글