상세 컨텐츠

본문 제목

<img> 태그와 여백에 html코드 관련

WEB

by AlrepondTech 2020. 9. 21. 19:15

본문

반응형

 

 

 

=======================

=======================

=======================

 

 

 

 

 

 

출처: http://cssdesign.kr/forum/viewtopic.php?id=507

[질문] <img> 태그와 여백에 관하여

간혹 에디트+ 로 코딩하게 되면 보기 좋게 한다고

<img src="">
<img src="">
     .
     .
<img src="">

이렇게 한줄 한줄 띄어서 쓰게 되는데..
이럴 경우 브라우져로 보면
이미지와 이미지 사이에 알 수 없는 1px  여백이 생기게 되는 현상
경험하셨으리라 생각합니다.
이럴 경우 해결책은 <img src=""><img src=""><img src="">로 각각 모두 붙여
쓰면 다 잘 붙습니다.

여기서 질문   서로 띄워놓아도 ... 어떤 CSS를 써서 붙일 수 있는 방법
없을까요?

가로 연결에서 생기는 [ 세로 1px 여백]은 letter-spacing 으로 줄여서
붙였습니다.
세로 연결에서 생기는 [가로 1px 여백]은 숨기는 방법을 모르겠어용 -_-;;;;

으음.... CSS에서 그런게 있나라고 생각은 해보는데...........

2eouia2006-04-17 01:06 PM

  • Member
  • 접속 중 아님
  • 가입: 2005-04-18
  • 글: 274
  •  

근데, 가로연결, 세로 연결이 뭡니까? -_-a

문제의 근본적인 해결방법은,
img.tileImage {
display:block;
}

입니다.
물론, 가로 세로 사이즈 지정해주시는 게 좋습니다.

기본적으로 img는 inline 엘리먼트라 "문자"로 취급됩니다. 한글과는 달리 영문의 경우 "문자"는 typography가 좀 복잡해서 폰트에 따라 문자의 baseline과 bottom이 일치하지 않을 수 있습니다. 예를 들어 "g", "y", "q", "p"등의 글자는 "a","b","c"등의 글자와는 달리 baseline 밑으로 삐져나옵니다. "you are a girl" 에서 y나 "g"를 보시면 이해하실 겁니다. 그러나 문자의 정렬은 baseline을 기준으로 하므로 inline으로 문자처럼 취급되는 img는 baseline과 bottom의 간격이 벌어지게 됩니다.

단순히 텍스트내에 이미지를 삽입하는 것이 아닌 디자인이나 배열의 요소로 img를 사용하실 경우에는 block단위 display를 쓰시는 것을 권장합니다.

http://eouia0.cafe24.com
coming soon... 2006. 01. 01

웹사이트

3ddongdog2006-04-17 01:20 PM

  • Member
  • 접속 중 아님
  • 가입: 2006-03-31
  • 글: 9
  •  

답변 감사합니다..

 

가로 여백은 이미지와 이미지 사이의 여백이고 세로 여백은 이미지의 위 아래에 생기는 여백입니다. 
말씀데로 display에 block을 하면 여백을 없어지는데 한줄로 나오지가 않네요..

<img src=""><img src=""><img src=""> 이렇게 하나

<img src="">

<img src="">

<img src="">

이렇게 하나 브라우저에서 보면 한줄로 나오는 걸로 알로 있습니다..문제는 두번째의 경우 이미지 사이에 여백이 생기는 것입니다.

말씀데로 block을 지정하니 여백을 사라졌으나 한줄에 한개의 이미지만이 출력이 됩니다.

한줄에 이미지가 보이고 이미지 사이에 여백이 없으려면 어떻게 해야할 까요?

4eouia2006-04-17 01:26 PM

  • Member
  • 접속 중 아님
  • 가입: 2005-04-18
  • 글: 274
  •  

당연히(?)
block 레벨 엘리먼트는 블록 자체가 하나의 문단으로 취급받습니다.
강제적으로 블록을 다른 블록 좌,우에 배치하기 위해서는
float:left 또는 float:right 를 사용하면 됩니다.

img.tileImage {
display:block;
float:left;
}

http://eouia0.cafe24.com
coming soon... 2006. 01. 01

웹사이트

5ddongdog2006-04-17 03:39 PM

  • Member
  • 접속 중 아님
  • 가입: 2006-03-31
  • 글: 9
  •  

답변감사합니다.

말씀데로 left로 주면 옆으로 붙습니다.

하지만 이미지 사이에 한개의 공백이 계속 남아 있습니다.
<img>
<img>
<img>

각 행의 엔터 값이 공백으로 남는거 같은데 이것은 못지울까요?

6eouia2006-04-17 04:19 PM

  • Member
  • 접속 중 아님
  • 가입: 2005-04-18
  • 글: 274
  •  

 

 

 

반응형

 

728x90

 

 

[HTML]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- CSS -->
<style type="text/css">
.clsContentBlock {
padding:0;
margin:5px;
clear:both;
line-height:-2px;
}
#gallery .clsItem {
display:block;
background-color:#333;
float:left;
width:88px;
height:31px;
margin:0;
border:1px solid #F99;

}
.clsItem .clsItemImage {
}
</style>
<title>이미지 테스트</title>
<!-- Java Script -->
</head>

<body>
    <div id="gallery" class="clsContentBlock">
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
        <div class="clsItem"><img src="ctested.gif" class="clsItemImage" /></div>
    </div>
    <div id="description" class="clsContentBlock">
        <p>
            간단한 테스트
        </p>
    </div>
</body>
</html>[/HTML]

http://eouia0.cafe24.com
coming soon... 2006. 01. 01

웹사이트

7hyeonseok2006-04-17 04:34 PM

  •  
  • 운영그룹
  • 접속 중 아님
  • 가입: 2005-04-19
  • 글: 859
  • 고마워 한사람:1
  •  

img { vertical-align: top; }

시도해 보세요. 이미지가 글자보다 작으면 상위 div에

div { font-size: 1px; }

도 넣어 주면 됩니다.

written by hyeonseok.com

웹사이트

8ddongdog2006-04-17 05:08 PM

  • Member
  • 접속 중 아님
  • 가입: 2006-03-31
  • 글: 9
  •  

가르쳐 주신 소스에서 필요한 부분만 뽑아 보니

<style type="text/css">
.clsContentBlock {
clear:both;
}
#gallery .clsItem {
display:block;
float:left;

 

}

</style>

이정도를 사용했더니 원하는 화면이 나왔습니다..감사합니다^^

그런데 각 이미지에 div를 주지 않고 한번에 주었더니 안되더라고요

<div class="nonspaceimg">
    <img ...
    <img ...
    <img ...
</div>

css
.nonspaceimg img{
    margin: -16px 0px 0px -10px;
/* margin 속송의 순서는 top right bottom left입니다.*/
}

이 방법으로 해보았더니 하나의 div로 여러개의 이미지를 넣어서 해도 잘 되었습니다.

이건 꽁수 인것 같긴한데요..

9ddongdog2006-04-17 05:11 PM

  • Member
  • 접속 중 아님
  • 가입: 2006-03-31
  • 글: 9
  •  

안녕하세요 현석님~! 가르쳐 주신 소스를 사용해 보았으나 이미지 간격이 붙지 않았습니다.

위에서 말씀 해 주신 코드로 하니 적용이 되네요..css 모르고 쓰니 너무나 어렵네요^^

이번에 웹표준 스터디를 시작하였는데 우선 만들어 주신 실전 웹 표준 가이드를 교재로 하기로 했습니다.

가끔 몇몇 가지 질문을 드릴 수도 있을텐데...도와주시면 너무 감사하겠습니다^^

10Hooney2006-04-17 09:20 PM

  •  
  • 제비
  • 접속 중 아님
  • 위치: 대한민국
  • 가입: 2005-04-18
  • 글: 262
  • 고마워 한사람:1
  •  

eouia wrote:

문제의 근본적인 해결방법은,
img.tileImage {
display:block;
}
입니다.

각 이미지들을 블럭 레벨로 만들기를 원하니, 근본적인 해결방법은 img 마다 div를 둘러싸주는 것.  :smile:

Shell we css design? come on csslook.com

웹사이트

11ddongdog2006-04-17 09:38 PM

  • Member
  • 접속 중 아님
  • 가입: 2006-03-31
  • 글: 9
  •  

이미지 마다해도 되고...아님 전체 이미지를 하나의 div로 잡아도 되더라고요

 

 

 

=======================

=======================

=======================

 

 

반응형
저작자표시

'WEB' 카테고리의 다른 글

Flash Player(플래시) 지원종료(2021년)이후, 브라우저에 Flash Player(플래시) 하는법 실행방법 관련  (0) 2021.03.24
사이트, 블로그 구글 번역기 넣기 (PC데스크톱, 모바일 모두 가능코드)  (0) 2020.10.15
html table 상태에서 태그 <td> <tr> 호 형성된 테이블에서 enter 값 이벤트 받기 관련  (0) 2020.09.21
In-browser ECMAScript 6 transpilation with Babel and other  (0) 2020.09.20
npm 관련 등등  (0) 2020.09.20


관련글 더보기

댓글 영역

티스토리툴바