반응형

    주로 애드센스를 가운데 정렬하고 싶을 때 다음과 같이 <center>태그를 사용합니다.


    <center>

    광고코드

    </center>


    하지만 어떤 환경에서는 작동하고, 어떤 환경에서는 작동하지 않습니다.


    왜 작동하지 않는지, 대체법은 무엇인지 알아보겠습니다.


    결론부터 말씀드리면 <center> 광고코드 </center>대신

    <div style="text-align:center;"> 광고코드 </div>를 쓰면 됩니다.


    HTML5에서는 center태그가 지원되지 않는다

    웹페이지를 표시하는 언어인 html은 여러 버전을 거쳐 현재 표준은 HTML 5입니다.


    각 버전마다 지원하는 기술이 다르고 태그도 달라질 수 있습니다.


    center태그는 html5 이전 버전까지만 지원되고 html5부터는 가운데정렬은 CSS를 이용하는 방식으로 표준이 변경되었습니다.

    center tag 레퍼런스 페이지 확인하기


    HTML 5가 표준이 된지도 꽤 많은 시간이 지났기에 최근의 티스토리 스킨들은 모두 HTML 5를 사용합니다. 따라서 <center>태그를 사용하여도 광고가 가운데 정렬되지 않은 것입니다.



    내가 사용중인 스킨이 HTML5인지 확인하기

    그렇다면 내 스킨이 HTML5인지, 이전 버전인지 알아보겠습니다.


    티스토리 관리 - HTML/CSS 편집에 들어갑니다.


    위 처럼 1번 줄이

    <!DOCTYPE html>로 간단하다면 html5입니다.



    <!DOCTYPE html 뒤에 길게 붙은 무언가가 있다면 html5가 아닌 그 이전버전입니다.

    위의 경우는 XHTML이라는 html4 기반의 버전이므로 <center>태그를 사용할 수 있습니다.


    HTML버전 선언 레퍼런스 확인하기 



    .

    <center>태그를 대체하는 방법

    html5에서 표준을 지키며 가운데 정렬을 하는 방법은 다음과 같습니다.


    HTML

    <div class="abc123">

    광고코드

    </div>


    CSS

    .abc123{

    text-align:center;

    }


    <center>태그 하나로 되었던게 훨씬 복잡해져보입니다.

    왜냐햐면 웹표준의 방향이 최대한 페이지의 내용과 스타일링을 분리하는 방향으로 변화하고 있기 때문입니다.




    웹표준에는 살짝 어긋나지만 그래도 간단한 방법은 다음과 같습니다.

    <div style="text-align:center;">

    광고코드

    </div>

    조금 길어졌지만 <center>태그와 같은 방법으로 사용하면됩니다.



    반응형
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함