HTML/CSS DIV TABLE 에 간격줄이기 없애기

에디터나 태그관련 프로그램에서는 제대로 나오는데 노출시 없었던 간격이 생길때가 있습니다.

예전에는 테이블에 있는 cellpadding, cellspacing을 수정을 해서 사용했지만 지금은 이 태그가 먹지 않기도 합니다.

 

여러가지 방법이 많이 나와 있지만 제대로 작동하지 않아 쉬운 방법을 알려드리겠습니다.

이제는 <Table>을 많이 사용하지 않습니다.쉽게 설명을 하면 Table을 사용하려면 엑셀처럼 미리 들어갈 자리를 계산하고 해야되기때문에 제대로 사용하지 못하는 경우 쉽게 틀어질 수 있고 칸마다 <TR><TD> </TD><TR>을 반복적으로 들어가기 때문에 요즘에는 맞지 않습니다. 홈페이지를 제작하는 경우를 제외하고 상품페이지나 이벤트 페이지는 가로 방향으로 1개 이미지를 보통 사용하다보니 <DIV>로 편하게 작업할 수 있습니다.

 

 

<TABLE>

 

 <TABLE> 태그를 사용한다면 가로에 1개이상의 이미지, 텍스트가 들어가는 경우만 사용하는게 편합니다.

 

모바일에 보여지기 위해서는 <TABLE>나 <DIV>를 사용하지 않아도 보여지는데는 큰 지장이 없습니다. 에디터를 사용하면 편하게 이미지를 업로드하고 정렬을 할 수 있습니다. 에디터에서도 줄간격이 없어보였지만 실제로 보여지는 페이지에서 다른게 보여질 수 있습니다. 그럼에도 <DIV>를 사용해야 되는 이유는 <DIV> 안에 있는 태크에 속성을 한번에 쉽게 적용할 수 있기 때문입니다.

 

---

 

<TABLE>를 사용했을때 이미지

중간에 빈공간이 보입니다.

 

예전에 사용하는 <TALBE>태그는

 

   <table border="0" cellspacing="0" cellpadding="0" align="center" style="text-align: center; ">

• Border : 선두께
• Cellspacing : 셀간격
• Cellpadding : 셀과 글자사이 간격
• Text-align : 정렬기준

 

<DIV>

<DIV>는 한줄에 1개이 이미지가 들어갈때 사용하기 편리합니다.

 

<TABLE>를 사용하실 수 있다면 <DIV>는 더 사용하기가 쉽습니다. <DIV>안에 들어가 있는 Style만 조정하면 줄간격을 없앨 수 있습니다. 기존에 들어가 있는 <DIV>를 예를 들어보겠습니다.

 

 

<div style="text-align: center;"><img src="ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ "></div>

 

<DIV>에 값이 없기 때문에 에디터에서는 위아래가 붙어 있는 것처럼 보이는데 실제 페이지에서는 저렇게 떨어져 보여지게 됩니다. 이러한 이유는 보여지는 사이트의 DIV 속성이 저렇게 정의가 되어 있기 때문입니다. 우리는 이걸 없애기 위해서는 강제로 명령을 내려야 합니다. Style안에 있는 간격을 줄이는 태그를 넣어주면 됩니다.

 

style=font-size: 0px;

 

Style안에 padding, margin, border가 아닌 font-size를 넣어야 합니다. 저도 처음에는 의심을 했지만 저 방법이 맞습니다.

 

<div style="text-align: center; font-size: 0px; ">

 

 

<div style="text-align: center; font-size: 0px;">

 

이렇게 간단하게 하면 위의 이미지처럼 공간이 없어지게 됩니다. 흰줄이 생겨 이미지가 잘라보이게 하지 않을때 유용하게 사용할 수 있습니다. 오늘은 이미지나 테이블에 중간에 생긴 공간을 없애는 방법을 알려드렸습니다.

 

줄간격을 없앤 상품페이지를 보고 싶으시면 아래 링크를 통해 확인해보세요.

 

 

[추석세일] [사은품] 네오메타 무선청소기(BLDC모터/2in1/자립형스탠딩) SP-1601VC (업체별도 무료배송

 

공감과 댓글은 큰 힘이됩니다.