DIV내에서의 문자열처리 버그

[배우기]

DIV태그내에서 링크된 URL과 같이 긴 문자열이 빠져나가는 경우에 대해서 말씀드리고자 합니다. 제생각으로는 버그라고 생각됩니다.

우선 제블러그의 엔트리에서 URL을 링크할 경우 DIV태그를 벗어나는 경우는
아래와 같습니다.
http://xpz.chinguya.net/EE/index.php/we ... %EC%9E%90/
단한개의 태이블 태그없이 디자인된 레이아웃 입니다.

이곳 게시판에도 이러한 현상이 여러개 나타나는 군요. 나름대로 찾아 본다고 돌아다녔는데 별 소득은 없습니다. 버그가 아니라면 정확한 해결 방법 좀 조언해 주시기 바랍니다.

URL이 아닌 일반 문장으로 링크될 경우 경우는 단어와 단어사이에 빈공간이 들어가므로써 공백부분에서 스스로 다른 라인으로 캐리지리턴이 되나, URL처럼 공객없이 연속적되는 긴 문자열은 여지없이 DIV밖으로 삐져나갑니다. overflow에서 히든이나 스크롤 옵션을 주어 스크롤바가 생긴다던지 삐져나가는 부분이 숨겨지게하는 방법밖에는 안되는군요.

IE와 오페라 6.06의 경우 이러한 현상이 발생하지 않더군요. 파이어폭스 0.91을 사용중인데 모질라 브라우져에서만 발생하는 것으로 보입니다.

다른 페이지들의 디자인들을 보고 방법도 강구해보았지만 DIV안쪽에 테이블태그를 넣어서 처리하는 방법 또는 URL을 짧게 줄이는 루틴을 이용하는 편법을 이용하더군요.

그외에 파이어폭스에 맞게 DIV만으로 디자인을 변경하다 보니까 몇개의 버그가 발견되었습니다만 설명하기 좀 난해합니다. 이를테면 브라우져의 우측을 잡아 늘리면 DIV(예를들면 width:90%)로 잡은 영역은 반대로 줄어들더군요.(90% -> 감소)

이러한 작업을 하면서 느낀점은 DIV를 여러개 사용하면서 정밀한 레이아웃을 잡을때 의외의 결과가나 나타나기도 합니다. 역시 예를들자면 DIV의 백그라운드 이미지를 주었을때 no-repeat를 주었음에도 이미지가 중복되는 현상이 가끔 나타납니다. 이것도 어떤때 이러한 현상이 발생한다라고 설명하기가 난해하군요.

테이블을 전혀 사용하지 ㅇㅏㅎ는 제블로그의 레이아웃을 참조해 보시면 좋겠습니다.

[박스모델]

1. 공백없는 긴 문자열은 현재로썬 해결할 수 없는 문제임

2. 테이블이 박스요소이기 때문에 안쪽에 있는 박스요소(div/table/p 등)가 DIV요소의 넓이보다 클 경우, 넘치게 됩니다. 이것 당연한 것 아니겠습니까?

따라서 안쪽 박스요소는 인라인요소(span/b 등)를 사용하거나 안쪽 박스요소에 값을 주지않거나 width값을 100%로 주고작업해야할 것같내요.

3. 요소간 중첩문제는 z-index를 사용하거나 clear요소를 사용해 보세요..

사실 CSS는 서식적용만 생각한다면, 편리한 것같은 데 화면 디자인을 할 때는 점차 어려워지는 것같더군요. 아마도 과정이라 생각이 들고..

표준화기관에서는 내용과 화면구조를 분리하라며 [내용]전달에 보다 신경을 쓸 것을 강조하지만, 이게 자신의 사이트를 관리하는 입장에서 쉽지않죠..

[배우기]

아 버그는 아니군요. 우선 답변감사합니다.^^

당연히 벗어난다는 것은img요소가 div폭보다 클경우 div영역을 벗어나는 것과 같다라는 것으로 이해를 하겠습니다. 그러나 text의 경우에는 overflow:auto에 의해서 처리가 되는데 공백이 없는 문자열일 경우는 img와 같은 요소의 규칙을 적용해서 삐져나가는 것이 당연하다라는 것은 이해하기 힘들군요.

img요소와 text는 달리 취급되야 하는 것이 아닌가 합니다. text-align:justify나 overflow:auto같은 속성값은 모두 text렌더링에 관련된 프로그래밍 처리루틴에 의해서 계산한 뒤에 처리되지 않을까요? 그렇다면 공백이 없는 경우의 처리도 해주는 것이 적절하다고 생각이 됩니다. 이문제는 모질라 파이어폭스 사용자로써 관련자분들께 문의 겸 건의사항입니다.

현재로써는 해결될 수 없다고 하시므로 조언주신대로 나름대로 연구해서 해결책을 찾아 보겠습니다만 타블라우져에서는 빠져나감이 없이 적절히 출력되므로 아쉬운감이 없지않아 있군요.

마지막 말복을 앞두고 더위가 기승을 부리는데 건강들 유의하시길 바랍니다.^^

[예제좀]

이미지 문제에 대해 소스좀 알려주시겠어요..

사이트는 보았는 데, 미세한 차이를 볼 수 없어서, 간단한 예제 소스를 올려주시면 방법을 찾아보고요..

[배우기]

소스는 CSS는 여기를
<a href=http://jigsaw.w3.org/css-validator/vali ... medium=all
target=_blank>http://jigsaw.w3.org/css-validator/vali ... medium=all
</a>

웹페이지는 여기를
<a href=http://validator.w3.org/check?uri=http% ... ;verbose=1
target=_blank>http://validator.w3.org/check?uri=http% ... ;verbose=1
</a>

참조하시면 됩니다.

이제는 파이어폭스 0.93으로 변경했습니다. 근데 이미지 문제가 현재까지 발생을 하지 않네요. 이미지 중복되는 것을 말씀하시나 봅니다.

가장 최근에 발견한 것은 제 블로그에서 엔트리의 코멘트나 트랙백 링크가 있는 곳에 보시면 div배경으로 메탈바 이미지가 있지요. no-repeat를 주었음에도 y측으로 repeat-y효과가 나타는데...
그러니까 파이어폭스에서 시작페이지를 제블로그 주소로 설정하고 처음 파이어폭스를 실행하면 위에서 말한 메탈바가 repeat-y로 실행된 것처럼 된다는 것입니다.

이게 파이어폭스 문제로 인한 것인지, 파이어폭스이전 버전의 잔재가 남아서 뭔가 충돌이 되는지 아니면 파이어폭스와 다른 프로그램과의 충돌문제인지 파악하기가 어렵군요.

소스 예제 별도로 필요할까요? 위에 w3c validator에 의한 CSS를 체크를 항상 하는데 위에 링크를 한번 클릭하시고 보시지요.

[백그라운드]

background-image 요소를 사용했더군요. 그렇다면 이미지를 반복하지 않기 위한 background-repeat을 사용하세요.

background-repeat:no-repeat;

background만으로 처리할 수도 있죠. background:url('이미지위치') no-repeat;

w3c의 백그라운드에 관한 링크는 아래입니다.

<a href=http://www.w3.org/TR/CSS21/colors.html# ... properties
target=_blank>http://www.w3.org/TR/CSS21/colors.html# ... properties
</a>

저는 주로 background를 사용해서, 못 보던게 있나했습니다. ^^

[이것써보세요]

EDitCSS라는 확장기능있는 데, 아주 편리합니다.
스타일시트를 직접 수정하기 전에 웹상에서 테스트해볼 수 있어서 아주 쉽습니다.

<a href=http://editcss.mozdev.org/installation.html
target=_blank>http://editcss.mozdev.org/installation.html
</a>

JSLIB 먼저 설치하고 EditCSS 설치하시면 됩니다. 설치후 재시작합니다. 단축키는 Ctrl + 8입니다.
또는 컨텍스트 메뉴에 Edit CSS를 클릭해도 됩니다.

만일 설치가 안되면, 각 파일을 내려받아서 파일>불러오기를 해서 설치하세요.

[배우기]

소스보시면 background-repeat, background를 혼용합니다.
제경우는 css를 TopStyle(<a href=http://www.bradsoft.com)이라는 target=_blank>http://www.bradsoft.com)이라는</a> 것을 사용합니다.
css를 view영역으로 보여주지요. CSS를 통해서 디자인하는데 용이합니다.
관심가져주셔서 감사합니다^^ 참고하도록 하겠습니다.

[문제의소스]

문제의 이미지에 대해서는 사용하지 않았더군요.

#boxHeadcat {
padding: 2px 3px 2px 0;
border-bottom: 1px solid #999999;
text-align: right;
background-image: url(<a href=http://xpz.chinguya.net/EE/images/deco/categories.gif);
target=_blank>http://xpz.chinguya.net/EE/images/deco/categories.gif);
</a>
}
#boxHeadarc {
padding: 2px 3px 2px 0;
border-bottom: 1px solid #999999;
text-align: right;
background-image: url(<a href=http://xpz.chinguya.net/EE/images/deco/archives.gif);
target=_blank>http://xpz.chinguya.net/EE/images/deco/archives.gif);
</a>
}
#boxHeadent {
padding: 2px 3px 2px 0;
border-bottom: 1px solid #999999;
text-align: right;
background-image: url(<a href=http://xpz.chinguya.net/EE/images/deco/entries.gif);
target=_blank>http://xpz.chinguya.net/EE/images/deco/entries.gif);
</a>
}
#boxHeadcmt {
padding: 2px 3px 2px 0;
border-bottom: 1px solid #999999;
text-align: right;
background-image: url(<a href=http://xpz.chinguya.net/EE/images/deco/comments.gif);
target=_blank>http://xpz.chinguya.net/EE/images/deco/comments.gif);
</a>
}
#boxHeadrtb {
padding: 2px 3px 2px 0;
border-bottom: 1px solid #999999;
text-align: right;
background-image: url(<a href=http://xpz.chinguya.net/EE/images/deco/trackbacks.gif);
target=_blank>http://xpz.chinguya.net/EE/images/deco/trackbacks.gif);
</a>
}
#boxHeadsyn {
padding: 2px 3px 2px 0;
border-bottom: 1px solid #999999;
text-align: right;
background-image: url(<a href=http://xpz.chinguya.net/EE/images/deco/syndicate.gif);
target=_blank>http://xpz.chinguya.net/EE/images/deco/syndicate.gif);
</a>
}

다시 확인해보시기 바랍니다.

[마우스커서]

마우스 커서(+)는 사용자 입장에서 그다지 좋은 선택은 아닌 것같습니다.

사용자의 보편적 습관/판단을 기준으로 선택하시는 게 좋을 듯합니다.
정확한 포지션을 가리킬 수 있다고 볼 수 있지만, 그렇지 않아보입니다.

[배우기]

어것보세요님, 문제의 소스님???? 어느분인지 알 수가 있나요. 마우스커서님???
헷깔립니다. 어느분이 어느분인지 ㅎㅎㅎ

아 네 보니까 우측의 박스에 백그라운드를 말씀하시는 군요. 그것은 div영과 백그라운드 그림크기가 같아서 별도로 값을 주지 않은 상태입니다. 그것이 표준이 아니라면 확실하게 기입을 하겠습니다. 제가 위해서 말한 그림은 본문의 코멘트, 트랙백이 위치한 곳의 배경을 지칭하는 것입니다.

제블로그는 MSIE상태로 디자인되었고, 중간에 제가 파이어폭스 사용자가 되었습니다. 파이폭스위주로 디자인 하려는 의도중 계속 갖고 있고 시간 날때마다 변경을 하고 있습니다. 그러나 잔재가 남아있지요.^^ 웹폰트라던지, 마우스커서라던지 좋은 선택이 아닌 경우가 있습니다.

이러한 지적에 참조삼아서 제가 보다 잘 변경하도록 해보겠습니다.
감사합니다.^^

[whoiam]

이곳에 글을 남긴 사람은 동일인입니다.

phpBB/CMS에 대해 글을 남기신 곳이 어딘 지 아시죠.. 그곳 주인장입니다.

저는 답글이나 질문 내용을 보고 [이름]을 적고있습니다.

그리고 IE에서 볼 때, repeat-y가 되는 것을 발견하지 못했는 데, 이미지 좀 캡처해보여주시겠어요.. 눈이 나빠서 그런가?

그리고 어느 것이 [표준]이냐? 이걸 어떻게 설명할 지 난감하내요.. 표준요소를 쓰는 게 표준이겠죠. 또하나는 표준사양에도 1.2가 있고 지금은 spe 3이 준비되고 있죠.. 가장 중요하게는 css1/2 전문 전체를 한번도 통독한 게 없어서 뭐라 말할 수 없다는 점을 이야기하고 싶내요.

저도 제 사이트를 관리하면서, 일단 w3c의 체크검사를 해서, 조금씩 수정해가는 입장이고 필요에 따라서 다른 요소를 찾습니다. 그리고난 뒤, IE/모질라에서 돌려보아 내가 원하는 레이아웃이 구현되었나만을 확인하는 정도입니다.

A는 A이다라고 말씀드리지 못한 점 이해주시기 바랍니다.

[배우기]

아하~ 난 또 어느분이라고... 아유 헷깔립니다^^ 글을 쓰시는 분은 괜찮으실지 몰라도 상대편은 좀 불편합니다. 호칭을 할때도 그렇구요. 근데 가만... 회원제 게시판에서 이름을 그렇게 쓰실 수 있나요?

저위에서 처음에 언급한 이미지 문제는 제가 0.93을 사용하고서는 발생을 하지 않네요. 그러니까 알아낸 것중에 하나가 파이어폭스의 시작페이지를 제블로그 URL로 설정하고 첫번째 파이어폭스를 실행하면 그런 현상이 나타나더군요.(0.91상황) 근데 그현상이 제가 0.93을 사용하고 나서는 나타지 않습니다. 그전에는 좀 불규칙해서 어느때 발생하는지 설명하기가 좀 난해하더군요. 또하는 background요소를 잘못 사용해서 나타나는 현상이 아닐까 의심도 해봅니다.
현재로선 캡쳐할 방법이 없을 듯 합니다.

그보다도 제가 고민되는 것은 공백없이 긴문자열일 경우 DIV영역을 벗어나는 문제입니다. 타 블라우져들은 하이픈이나 콜론 등에서도 꺽어지더군요(<br />)-말이 우째 이상하네요.

독불장군처럼 왜 파이어폭스만 꺽어지질 않지요? ㅎㅎㅎ 부러지는 한이 있어도 굽히지 않겠다 이건가요? 요령 좀 부려볼라니까 영... 방법이 안떠오릅니다.

참 근데 게시판 관리자입니까? ^^

[어쩔수없음]

의문을 타풀어드리지 못하겠내요..

1. 저는 이곳 회원이 아닙니다. 따라서 게시판 관리자가 아니죠. 그저 답글만 달죠. 비회원은 글을 쓸 수 없습니다. 단지 답글을 달 수 있죠. 그래서 로그인후 작성한 글을 [굵게표시]되어있지만, 답글을 쓴 사용자는 [보통체]로 나타납니다. 아직 모르셨군요. ^^

2. 공백없이 긴 문자열은 IE 6에서도 나타납니다. 좀 다르긴해도. 그런데 한글을 사용하면서 공백문자 없이 쓸 일이 있을까요? 없죠. 사용자의 가독성을 떨어뜨리는 [장난]일 것입니다. 또 테이블로 레이아웃을 잡을 때가 될 것입니다.

실제적인 문제는 URL 문제이겠죠. 아마도 이것은 소스코드에서 처리를 해주어야할 것같내요..
<a href=긴URLa>긴URLa</a>

위의 경우가 대부분의 게시판의 링크처리방식이죠. URL을 그대로 가져와 사용자에게 보여주는 것이죠. 따라서 긴URLa를 짤라주는 방식을 선택하면 좀 더 유연하게 처리할 수 있을 것입니다.

php에서는
$link=http://jigsaw.w3.org/css-validator/vali ... medium=all
$linka=substr($link, 0, 30);

echo "<a href=$link>$linka</a>";

결과화면은 아래와 같은 모습(!!!)이겠죠. 클릭하지는 마세요..

<a href=http://jigsaw.w3.org/css-valida target=_blank>http://jigsaw.w3.org/css-valida</a>

asp의 경우는 어떻게 처리하는 지 모르겠습니다. 각자 사용하는 스크립트마다 방법이 있을 것입니다.

그러나 긴 URL 문제는 사용자에게 크게 불편한 문제가 아니기 때문에 적당 선에서 타협을 해야한다는 생각입니다. 긴 URL 문제가 아닌 다른 [요소], 예를 들어 이미지가 그런 경우가 있다면, 아예 이미지를 포기하고 백그라운드를 [256컬러의 배경색]으로 처리하는 게, 나을 것입니다. 그것이 사용자에겐 적은 로딩시간을 제공하는 것 아닐까 합니다..

[배우기]

맞는 말씀입니다.
그러나 타 블라우져에서는 적절히 된다는 것을 제가 테스트를 통해서 확인했다고 저 위에 적어 놓았지요. 그리고 타사이트들은 직접 소스에서 URL의 문자열을 줄여주는 방식이나 DIV내에 테이블을 삽입해서 하는 방법을 사용한다라고 했구요.

예로 들어주신 방법처럼 스트링펑션을 이용해서 간단히 줄이는 방법이 있습니다.
어찌 보면 간단한 방법이지만 그보다 좋은 방법을 찾고 있는 중입니다.

문서내에서 PHP가 URL을 판독하고 자동링크를 거는 방식을 사용하는 경우는 글을 쓰는 사람이 편리하지요. 그리고 링크를 클릭하지 않고선도 URL확인이 가능하구요.

제가 태그로써만 처리해 보려는 의지(?)를 가지고 있는데 테이블태그에 wrap을 사용하는 방법밖에 없습니다. 문제는 제가 tableless를 고집하고 있다는 것입니다.^^

URL자체가 쓸데없이 길경우에는 제시해 주신 방법이 요긴합니다.
제 블로그를 방문하셔서 경험하셨으리라 보는데...

1. DIV영역의 폭을 작는 경우
moblog에서는 웹로그 출력하는 본문의 DIV영역의 폭이 매우 작습니다.

2. URL에 argument를 모두 출력해서 설명해야 하는 경우에 긴URL 자체가
필요합니다.

3. DIV내에 pre, quoteblock과 같은 태그를 사용하는 경에도 벗어나는
문제가 있습니다.

하는데까지 해서 안되면 타협은 보긴 봐야겠지요^^
감사합니다.

[배우기]

이내용의 문자열 처리 관해서 함께 고민하실 분은
<a href=http://www.mozilla.or.kr/community/view ... ird&no=405
target=_blank>http://www.mozilla.or.kr/community/view ... ird&no=405
</a>
글로 연결해 주십시오.