Daum 웹표준을다루다 Web Standards Darum

• - IE6, IE7, IE8, IE9, IE10, 크롬(27.0), 사파리(5.1.7), 오페라(12.15), 파폭(21.0)

• - DTD 나 브라우저, 부모 엘리먼트의 영향을 받아 img요소의 여백 유무가 결정
• - 각 케이스별 결과를 분석해보고 이에 대한 원인과 결론을 도출

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

부모가 block 요소일 때

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

  xthml	html5

• - IE6

  xthml	html5

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

부모가 inline 요소일 때

• - IE7 이상, 오페라

  xthml	html5

• - 크롬, 사파리, 파폭

  xthml	html5

• - IE6

  xthml	html5

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

부모가 block 요소일 때

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

  xthml	html5

• - 오페라

  xthml	html5

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

부모가 inline 요소일 때

• - 모든 브라우저

  xthml	html5

  <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 축약형을 사용했을때와 그렇지 않은경우 비교 분석
• - 비교 분석 결과에 따른 성능 결과 도출

• - 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속성 초기화

  html	view
  <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

    축약형 사용	축약형 미사용