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

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



스마트폰 시대에 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 도 하나의 기계어이며 이 머신 랭귀지를 하나씩 터득한다면 블로그를 운영하는데 상당히 도움되며 이런 태그를 모르는분의 블로그와 아는분의 깔끔도는 많은 차이가 나는것을 보게 됩니다.

div 활용
div 활용

 

 

연관글 목록 

 

유명 블로그 플랫폼-Blog Platform

 

전세계 유명 블로그 플랫폼-Blog Platform

세계적으로 유명한 무료 블로그 플랫폼 목록 블로그 플랫폼 Blog Platform 국내에 국한하지 않고 글로벌 블로그를 운영하려 한다면 수많은 블로그 서비스 중에서 어떤 블로그를 선택해야 하는지 고

omnislog.com

XML 사이트맵 추출 소프트웨어(무료)

 

 

XML 사이트맵 추출 소프트웨어(무료)

사이트맵 제네레이터 Free Sitemap Generator for Windows 블로그 운영자들에게 필요한 사이트맵 생성기를 소개합니다. 간단하게 웹사이트에 접속해서 XML Sitemap 을 만들 수도 있지만 소프트웨어로 만드는

omnislog.com

 DIV 알아보기

 

DIV 알아보기

DIV 알아보기 HTML 태그에서 가장 많이 사용되는 기초적인 태그가 DIV일 것입니다. 과거에 많이 사용하던 Table 태그를 대신하며 이보다는 유연성 있고 광범위한 속성을 가지는 태그입니다. 스크립

omnislog.com

 페이스북 팔러 보턴 만들기

 

페이스북 팔러 보턴 만들기

페이스북 팔러 늘리는 보턴 만들기Facse book follow button Script 페이스 친구 늘리기 방법 페이스북 팔러 보턴을 달고 다닐경우 자기의 포스팅이나 홍보물을 노출시키는데 좀더 많은 기회가 될 것으

omnislog.com

iframe 중앙정렬하기

 

iframe 중앙정렬하기

유튜브같은 iframe 중앙 정렬하기 오리지널 유튜브 소스코드 아래 3가지 코듲중 하나를 사용하면 될것입니다. 1, ............. 2,... 3,.............................. 추천 유튜브 소스코드를 중앙 정렬한 예

omnislog.com

이 글을 공유하기

댓글

Designed by JB FACTORY