DIV에서 이미지 태그 줄바꿈 문제

[yyymin]

안녕하세요
이곳에 올라온 CSS 박스 모델 주요문서 참고 하면서 페이지 뛰엄뛰엄 만들고 있읍니다

예제1
<div style="width:120px; board: 1px solid red;">
<div style="width:100px; height:30px; float:left;">1번박스</div>
<div style="width:100px; height:30px; float:left;">2번박스</div>
<div style="clear:both"></div>
</div>

위 예제대로 박스 만들다 이미지를 삽입했읍니다
스타일은 css에 div는 html에 당연한거지만요;;
html에 div적용을 아래처럼 했더니

예제1
<div style="width:120px; board: 1px solid red;">
<div style="width:100px; height:30px; float:left;">
<img src=그림>
</div>
<div style="width:100px; height:30px; float:left;">
<img src=그림>
</div>
<div style="clear:both"></div>
</div>
(박스볼려고 두예제에 1픽셀 border를 넣고 했었읍니다)

파폭으로 볼때는 괜찮았는데
익스에서 보니 그림밑에 4픽셀 정도 공간이 생겼읍니다
DIV태그 쓸때는 줄바꿈을 하면 안돼는건가요?
아니면 이것도 익스 버그인가요?
이것때문에 날샜읍니다 ㅜㅜ

[hyeonseok]

버그라기 보다는 특성이라고 하는게 좋겠네요.
text 와 image 가 한줄에 있을때 inline block 이 아래로 형성이 되어서 이런 현상이 발생합니다. 해결책은 두가지가 있습니다.

<img src="aaa.png" alt="" /><br />

과 같이 white-space 를 없애주던가

img {
vertical-align: middle;
}

과 같이 inline 정렬을 중앙으로 맞추시면 됩니다.

HTML 4.01 Strict 에서는 vertical-align: middle 으로만 문제 해결이 됩니다.

[yyymin]

vertical-align: middle;

이미지 스타일에 한줄만 추가해주면 해결되는군요
왜 난 몰랐지;;
감사합니다 깨끝하네요 ^^

[yyymin]

vertical-align: middle;

다시 해보니 그래도 문제가 생기는데요
ie에서는 계속 공백이 생기는데
이거 첨부터 잘몬된건지 알수가 없네요
페이지 한번 봐주시겠어요
너무 어렵네요 ㅜㅜ

http://xminx.dothome.co.kr/html/cssindex.html

[소프트원트]

vertical-align: middle;

다시 해보니 그래도 문제가 생기는데요
ie에서는 계속 공백이 생기는데
이거 첨부터 잘몬된건지 알수가 없네요
페이지 한번 봐주시겠어요
너무 어렵네요 ㅜㅜ

http://xminx.dothome.co.kr/html/cssindex.html

쉬운 길을 놔두고 어려운 길을 돌아가려는 것처럼 보입니다.

스타일시트의 박스모델은 화면 레이아웃의 세밀한 부분까지 조절할 수 있습니다. 그러려면 스타일시트 스팩을 잘 꿰고있어야하는 데, 시간과 노력이니 힘들죠.

일단 내용을 보니, 테이블에서 이미지배치 작업과 같이 작업을 하셨더군요. 그렇게 하면 노가다가 됩니다.

img 요소는 인라인 요소입니다. 텍스트처럼 처리된다는 것이죠.

Code: Select all

1번
가
나
다

Code: Select all

2번
가나다

위의 2처럼 이미지를 다닥붙여서 소스 자체를 코딩해보세요. 한줄로 연결될 것입니다. 이미지 코드를 행으로 개행처리해보고, 그대로 한줄로 코딩해보세요. 차이가 있을 것입니다. 이유는 묻지 마세요. 모르니까. 경험적으로 그래서 그런가보다 합니다.

div를 남용하지 말았으면 합니다.

그냥 하나의 통짜 이미지를 사용해도 될 것을 쪼개고 나누어 table에서처럼 배치하던 습관인 것같습니다.

하나의 의미있는 통짜의 이미지를 쓰도록 하고, 파일크기가 큰 경우는 잘라 사용한다고 생각했으면 합니다.

[하늘다람쥐]

위의 2처럼 이미지를 다닥붙여서 소스 자체를 코딩해보세요. 한줄로 연결될 것입니다. 이미지 코드를 행으로 개행처리해보고, 그대로 한줄로 코딩해보세요. 차이가 있을 것입니다. 이유는 묻지 마세요. 모르니까. 경험적으로 그래서 그런가보다 합니다.

소스를 직접 보는 개발자에겐 보기에 좋겠지만, 시스템에선 개행문자나 TAB, 여러 개의 공란을 하나의 공란으로 처리하기 때문입니다. 그렇기 때문에 개행처리를 해서 코딩을 하게되면, 화면에선 공란이 하나씩 띄워져 보이게 되죠.
꼭 개행처리를 하고 싶으시다면,

Code: Select all

<div><img
  src="1.gif"><img
  src="2.gif"><img
  src="3.gif"></div>

이런 식으로 태그와 속성을 분리해서 처리할 수 밖에 없습니다.

[hyeonseok]

아..이미지 사이즈가 매우 작군요. 이런 경우
font-size: 1px; line-height: 1px; 도 해줘야 합니다.

하지만 디자인요소로서의 이미지가 html 안에 img 로 넣어져 있기 때문에 그다지 바람직하지 않고요. css 의 background 를 사용하시는 것이 문제도 발생되지 않고 보다 좋은 방법입니다.

[소프트원트]

디자인요소로서의 이미지가 html 안에 img 로 넣어져 있기 때문에 그다지 바람직하지 않고요. css 의 background 를 사용하시는 것이 문제도 발생되지 않고 보다 좋은 방법입니다.

많이 코딩해보고 자료찾으면서 머리에 스팀 나오다보면, 자신만의 노하우가 쌓이겠죠. ^^

현석님이 말한대로, background를 사용하면 박스모델에서 위치를 잡기에 편할 듯하내요.

문제는 개발자들이 테이블에 너무 익숙해져있다는 생각입니다. CSS를 만지다보니, 다른 사이트 소스보면서.. 아직도 이곳은 "테이블"이구만 합니다.. ^^

아마도 국내에서 2년 정도 지나면.. CSS로 레이아웃 잡지않는 곳이 있다면... 시대에 한참 뒤떨어졌군이라는 말이 나올 것이라 조심스럽게 예측해봅니다.

[소프트원트]

Code: Select all

<div><img
  src="1.gif"><img
  src="2.gif"><img
  src="3.gif"></div>

이런 식으로 태그와 속성을 분리해서 처리할 수 밖에 없습니다.

미쳐 생각지 못한 코딩 방법이내요..
텍스트 에디터에서 작업할 때, 소스크기를 줄이거나 할 때 개행을 없애야할 때가 있는 데, 수평으로 주욱 늘어나는 문제를 해소할 수 있겠내요..

감사합니다.

[박민권]

vertical-align: middle;

다시 해보니 그래도 문제가 생기는데요
ie에서는 계속 공백이 생기는데
이거 첨부터 잘몬된건지 알수가 없네요
페이지 한번 봐주시겠어요
너무 어렵네요 ㅜㅜ

http://xminx.dothome.co.kr/html/cssindex.html

확실히 아직 테이블 개념에 붙잡혀 계시군요. :)
저도 테이블 개념을 깨느라 참 고생했습니다.
이미지를 조각조각 내어 배치하는 테이블 개념을 버리셔야 합니다. ^^
때문에 이미지를 자르는 방법또한 테이블 방식으로 레이아웃 짤때와 다릅니다.
CSS를 통해 레이아웃을 잡을때는 그 개념에 맞춰 이미지를 잘라야 합니다.

그런데 위의 주소를 찾아가서 보니 굳이 이미지를 조각낼 필요가 없어 보입니다.
제가 자르신 의도를 잘 모르기 때문에 하나의 통이미지로 하시는 것을 추천합니다.

[yyymin]

답글 감사드립니다 ^^
이번에는 정말 정말 CSS만을 사용해서 만들어보겠다는 생각으로 시작했는데
막상 손을대보니 기존에 하던방식 테이블을 빼고서 할려고 하니
어디서 어떻게 해야할지 감이 안떨어지는겁니다 ;;;
그래서 일단 테이블로 대충 윤곽만 잡고 CSS로 다시 짤려고 했읍니다
이미지를 조각냈던것은 테이블 습관까지는 아니고 그냥 그렇게 됐읍니다;;;
CSS에서 맞출때 조언해 주신데로 그냥 통짜로 할까 백그라운드로 넣어 버릴까도
고민했는데 롤오버도 있고 이미지가 아니라도 나누고 모으는것은 알아야 겠다고 생각해서
그대로 사용한것입니다
여길모르고 파폭을 몰랐으면 아마 시도도 안해봤을건데 왜 자꾸들 CSS얘기는 하셔서 ^^

[yser]

일단 소프트원트 님을 비난하기 위한 답글이 아님을 밝힙니다.
단, 답글의 태도를 보고 있다보니 살짝 지적하고 싶어서 적습니다.

아마도 국내에서 2년 정도 지나면.. CSS로 레이아웃 잡지않는 곳이 있다면... 시대에 한참 뒤떨어졌군이라는 말이 나올 것이라 조심스럽게 예측해봅니다.

저는 그건 올바르지 못한 생각이라고 봅니다. 설령 5년이 지나더라도, 테이블로 레이아웃을 잡았다한들, 그것은 잘못된 것이 아닙니다. 그 페이지를 만든 사람이 div 레이아웃보다 테이블이 더 쉬웠다고 생각했다면 그것도 하나의 레이아웃 방식입니다. 아무리 좋은 방법이 있다고한들, 자신에게 안맞으면 그걸로 그만입니다. 지금 솔직히 말해 국내 사이트 중에서 css 레이아웃 잡은 곳은 정말 드뭅니다. 0.1% 도 될지 의심스러울 정도입니다. 하지만 말이죠. 그렇다고 해서 그 페이지들이 모두 잘못 되었다고는 생각치 않습니다. 테이블 레이아웃이기에 나올 수 있는 디자인이 있습니다. 대개 레고 블럭처럼 조밀하게 짜여진 붙여넣기식 디자인 말이지요. 만약 css 레이아웃이 먼저 보급되어서 그것이 자연스러워졌다면, 이러한 디자인은 별로 없었을 것입니다. 특성에 따라 캔버스에 그림 물감을 칠하듯이 틀에 구애되지 않는 디자인이 되었을 것입니다. 이렇게 특성이 각자 있다고 생각하되, 어느 하나만이 맞다고는 생각치 않습니다.

다 각자의 장단점이 있기 마련입니다. 솔직히 말해서 css 레이아웃이 과연 쉽던가요? 브라우저 버그를 빼더라도, 이걸로 삽질 좀 해본 제 경험으로는 결코 쉽지만은 않습니다. 때로는 테이블의 row, col 에 못지 않게 머리를 쥐어 뜯어야 할 때도 있었습니다. 디자인이 복잡해진다면 어느 것이나 결국 마찬가지입니다. 다만 트래픽을 더 줄일 수 있고, 디자인을 분리하게 되며, 좀 더 semantic web 이라는 의미에 다가갈 수 있는 등의 장점이 있는 것입니다. 그렇다고 테이블 레이아웃이 전적으로 단점만 가지고 있는 것도 아닙니다. 분명히 처음엔 다가가기 쉬운 방식입니다(이 부분도 사람에 따른 편차는 존재합니다). 틀을 만들어 놓고 거기 안에 채워가는 방식이니까요. 저는 그래서 비록 테이블의 원래 용도대로 쓰이지 않고 잘못 만들어진(또는 그렇게 생각되는) 페이지라 할지언정, 그 자체가 꼭 바뀌어야 하는 것만은 아니라고 생각합니다.

좀 강경한 태도를 보여서 죄송합니다. 글을 보다보니 이것만은 지적해야 겠다 싶어서 건방진 소리를 적었습니다. 제가 잘못 생각하는 것일수도 있으니, 반론은 얼마든지 환영합니다. 저도 다른 분의 생각을 보고 많이 배웁니다. 위의 내용은 어디까지나 저의 생각이자 입장입니다. 진리는 아니니 그렇지 않다고 생각하시는 분도 존재하리라 봅니다.

p.s
질문하신 분께...

예전에 html 로 페이지 만들 때 질문하신 분의 그러한 문제로 인해, 저의 경우 <!-- --> 를 썼습니다.

Code: Select all

<img src='' ... ><!--
--><a href='' ...>ABCDE</a><!--
--> ... ...

이렇게 하면 코멘트 사이의 공백은 무효 처리가 되서 엔터든 탭이든 공백이 안 생깁니다. 그러나 이건 어디까지나 편법일 뿐, 실제로 코멘트 태그의 원래 의미대로 쓰는 것도 아닐 뿐더러, 유지 보수하기에도 좋지 않은 방법입니다. 어디까지나 일부분에 꼭 공백이 전혀 없어야 하지만 한 줄에 너무 길면 안 될때만 한정적으로 쓸만한 방법. 그리고, css 로 모양을 잡다보면 저런 방법은 필요가 없긴 합니다. 그걸 몸으로 깨우치게 될 때까지 시간이 걸리지만요. 많은 시도를 하시다보면 조금씩 보이게 되실 거라 생각합니다. 결국 어떻게든 이리저리 만들어보고 시도를 해보시는 방법 밖에..

이미지를 배경으로 까는 것에 익숙해지다보면 자연스레 해결되는 것이기도 하나, 이것도 깨우치기까지는 경험치가 좀 필요합니다. ^^;

[소프트원트]

일단 소프트원트 님을 비난하기 위한 답글이 아님을 밝힙니다.
단, 답글의 태도를 보고 있다보니 살짝 지적하고 싶어서 적습니다.

아마도 국내에서 2년 정도 지나면.. CSS로 레이아웃 잡지않는 곳이 있다면... 시대에 한참 뒤떨어졌군이라는 말이 나올 것이라 조심스럽게 예측해봅니다.

그렇군요. 지나친 면이 있었내요. 주의하겠습니다. ^^

언제든 제 글에 문제가 있다면 지적해주세요. 쉽게 바뀌지는 않겠지만, 노력하겠습니다.