테이블 (Table)태그를 디브(Div) 태그로 바꾸면서.

컴퓨터-IT-인터넷-모바일/HTML-CSS-PHP
2019. 9. 29. 11:09

스마트폰 시대에 Table 태그를 Div 태그로 바꾸기

블로그를 하다 보면 옛날에 Html을 배운 분들은 습관적으로 테이블태그를 사용하는것을 보게 됩니다.
익숙해서 그럴 수 도 있고 별 상관 없어서 그냥 사용할 수도있습니다.

이 블로그에도 오래전에 작성한 박스는 대부분 테이블 박스로 되있었는데 지금부터 하나씩 고칠려고 하면서 쓰는 글입니다.

html 고수분에게는 해당없겠지만 많은 블로거들은 HTML 공부를 하지 않고 그냥 포스팅하지요.

요새는 스마트폰으로 웹사이트를 보는경우가 훨씬 많기 때문에 테이블 태그로 만든 박스는 폰의 스크린을 오버 하게되어서요.. .

필자의 이 블로그도 대부분의 포스팅에서 테이블 박스를 사용하고 있습니다.
별것 아닌데 차츰 고치는 중이며 저 처럼 아직도 생각없이 테이블 태그로 박스를 구현하는 분이있다면 참고 하시라고요..

그냥 Table, tr, td, 로 구성된 박스를 간단히 Div 로 바꾸는 것입니다.
그리고 미리 선언한 style 을 Class로 불러 오는 구조입니다.

기본은

<table><tr><td>Table Box Sample ,</td></tr><table> 를 <Div> Div box Sample . </div> 로 바꾸는것입니다.

다만 속성을 스타일로 선언해 준후 디브 박스를 사용 할 때 불러오는 구조이며 많은 박스를 구현 할 때는 스타일을 한번만 선언해 두면 되기 때문에 빠르고 편리하겠습니다.

한발 더 나아가서 티스토리 CSS 폴더에 임의 스타일 명으로 하나 만들어서 올려놓는다면 글 쓸 때 무조건 편리하겠습니다.

Style 선언

<style type="text/css">

.New-box { border:1px solid; padding:10px; }

</style>

<Div Class="New-box"> 박스 안의 포스팅 본문입니다.</div >

박스 안의 포스팅 본문입니다.

별거 아니지만 글을 쓰는 사람이 할 수있는 배려로서 스마트폰으로 자기의 글을 읽는 분에게 할 수있는 하나의 서비스라고 생각됩니다.

html 도 하나의 기계어이며 이 머신 랭귀지를 하나씩 터득한다면 블로그를 운영하는데 상당히 도움되며 이런 태그를 모르는분의 블로그와 아는분의 깔끔도는 많은 차이가 나는것을 보게 됩니다.