x
구솔미디어
내 사이트가 한없이 가벼워지는 그 날까지

불필요한 태그와 속성을 효율적으로 변환하자

구솔
1734 views, 0 comments, 0 trackbacks
우리의 웹사이트에는 불필요하게 반복되어 사용된 태그가 많이 있습니다.
css의 활용은 웹사이트를 구성하고 있는 요소들을 상당히 단축시킬 수 있으며 좀 더 효율적인 구성이 가능하게 합니다.
아래의 구체적인 예를 살펴보면,
<ul>
<li><font size="12pt"><b>구솔미디어</b></li>
<li><font size="12pt"><b>웹사이트최적화</b></li>
<li><font size="12pt"><b>웹표준화</b></li>
</ul>

이것은 css를 활용하여 다음과 같이 구성할 수 있습니다.
<style type="text/css">
.bigbold { font : bold 12pt; }
</style>
<ul class="bigbold">
<li>구솔미디어</li>
<li>웹사이트최적화</li>
<li>웹표준화</li>
</ul>

또,
<table>
<tr>
  <td align="right">구솔미디어</td>
  <td align="right">웹사이트최적화</td>
  <td align="right">웹표준화</td>
</tr>
</table>

의 경우도 css에 따로 정의한 속성을 활용할 수 있습니다.
<style type="text/css">
.right { text-align:right }
</style>
<table>
<tr class="right">
  <td>구솔미디어</td>
  <td>웹사이트최적화</td>
  <td>웹표준화</td>
</tr>
</table>

위의 두 가지 예는 css를 활용한 (약간의) 효율적인 구성을 보여줍니다.
속성명을 단축시켜 사용하거나 (ex:bigbold->b, right->r)
속성의 구분을 위한 콤마(,)사이의 공백삭제 (ex:굴림 , 돋움 , arial ->굴림,돋움,arial)
문서의 줄바꿈제거 등  최적화의 기회는 얼마든지 있습니다.
자주 사용되는 속성을 css파일에 지정해놓고 사용하게 되면 문서의 용량이 작아지기 때문에 문서는 상대적으로 빠르게 디스플레이되겠죠.
css파일은 처음 접속 시 사용자의 컴퓨터에 다운로드되기 때문에 상당한 속도절감효과를 볼 수 있습니다.
웹사이트최적화는 css를 얼마나 잘 활용하느냐에 달려있다고 해도 과언이 아닙니다.
쾌적한 항해를 방해하는 무거운 짐, 찌든 때를 css를 통해 제거합시다~
  • 유저가 작성한 글은 그것이 인용되지 않았다면 Creative Commons Public Domain License의 적용을 받습니다.
    퍼가는 경우 저작자 표시, 비영리 목적으로 퍼가기 허용, 저작물의 변경 금지

d41d8cd98f