현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

정말 간단하고 어려운 HTML...

sadrove의 이미지
글쓴이: sadrove / 작성시간: 월, 2004/06/28 - 5:08오후 

<table width=100 border=1>
<tr>
	<td width=100>sddsaasfdadftest</td>
</tr>
</table>

위와같이 테이블 사이즈를 고정해도
그 안의 문자열이 스페이스가 없이 붙어 있으면..
테이블 크기가 멋대로 변해버립니다..
이걸 안 변하게 ...즉, 테이블 사이즈를 고정하는 방법이 있을까요..?..
정말 아무것도 아닌것 같은데 어렵네요...흑..

Forums: 
프로그래밍 QnA
bec7110의 이미지

글쓴이: bec7110 / 작성시간: 월, 2004/06/28 - 5:17오후

stylesheet

table.fixed, td.fixed {
table-layout:fixed;
}

html
<table class="fixed" width="100">
    <tr>
        <td class="fixed" width="100" height="20">
            abcdefghijklmnopqrstuvwxyz
        </td>
     </tr>
</table>

저는 이제껏 이렇게 해결했었습니다.

사실..익스플로러에서만 제대로 동작하던데..

표준이 아닐지도 모르겠네요...

sadrove의 이미지

글쓴이: sadrove / 작성시간: 월, 2004/06/28 - 5:29오후

혹시 익스플로러 버전과 상관이 있나요..?
제가 6.0쓰는데..
bec7110님 소스 그대로 복사해서 해도..
안되던데...
문자열이 줄내림없이 그냥 죽~ 나옵니다..ㅠ.ㅠ..
정말 몇년동안 테이블에서 이런게 안된다는 걸 오늘 처음 알았네요..
놀라울 따름입니다..

랜덤여신의 이미지

글쓴이: 랜덤여신 / 작성시간: 월, 2004/06/28 - 6:31오후

IE 에서는 CSS 에 word-break: break-all; 을 적어 줌으로써 해결 가능합니다.

표준에서 저런 일을 하는 것을 찾아봤는데, 아무리 해도 모르겠더군요. :( 혹시 아시는 분 계세요?

----
블로그 / 위키 / 리눅스 스크린샷 갤러리

bec7110의 이미지

글쓴이: bec7110 / 작성시간: 월, 2004/06/28 - 8:46오후

제가 질문을 잘못 이해 했는것 같습니다.

이런..정말 시간 뺏어서 죄송합니다.

저는 테이블 넓이보다 더 긴 문자열일 경우 안보이게 하는 방법을

알고싶어 하시는줄 알고 답변드렸는데..

정말 죄송합니다.

:cry:

저두 공백이 없을경우 아예 안보이거나 아니면 테이블 길이가 늘어나

프로그램 상으로 짜르거나 했었는데..

인클루드 님의 말씀대로 하니깐 되네요..

다시한번 엉뚱한 답변드린거 정말 죄송합니다..

추신:
위에 글 하나를 더 적었었는데..지웠습니다..
부끄러워서 남겨둘수가 있어야지요...

sadrove의 이미지

글쓴이: sadrove / 작성시간: 화, 2004/06/29 - 1:10오전

Quote:
다시한번 엉뚱한 답변드린거 정말 죄송합니다..

오히려 제가 무안하게..
그렇게까지 미안해하실 필요까지야.. :wink:

alwaysN00b의 이미지

글쓴이: alwaysN00b / 작성시간: 화, 2004/06/29 - 1:44오전

하~ 저도 저것땜에
출력할때 카운트해서 잘랐는데

한글이 잘려나가서 한글인지 check 하고 자르는것 까지 했는데...

간단한 방법이 -_-;'

언제나 시작

sadrove의 이미지

글쓴이: sadrove / 작성시간: 일, 2004/07/04 - 12:17오후

제가 올린 코드를 익스플로러 6.0에서 해봤더니..
테이블크기가 멋대로 변하지 않고...
100px에 맞게 제대로 나오네요...
여러분도 제대로 나오나요..?..
6.0 이하버전만 잘 안나오는건지...

OoOoOo의 이미지

글쓴이: OoOoOo / 작성시간: 일, 2004/07/04 - 2:29오후

overflow
height 속성으로 지정한 요소의 높이보다 요소 안의 내용이 많을 때의 처리 방법을 지정합니다.

기본 정보
초기값 visible
상속 no
적용 범위 블록 요소, 객체 요소

속성값
auto
요소 안의 내용이 요소의 높이보다 많을 경우 자동으로 스크롤바를 표시합니다.
visible
내용이 잘리지 않습니다. 요소의 바깥쪽에 내용이 표시됩니다.
hidden
요소의 내용이 잘립니다. 이 경우 웹 브라우저가 스크롤바를 표시하지 않기 때문에 잘려진 내용을 볼 수 없습니다.
scroll
요소의 내용이 잘려 보이지만 웹 브라우저가 스크롤바를 표시하기 때문에 나머지 내용을 볼 수 있습니다.

죠커의 이미지

글쓴이: 죠커 / 작성시간: 수, 2005/03/02 - 5:43오전

css3인 word-break가 해답인데 파이어폭스는 지원 못하고 있습니다.

- 죠커's blog / HanIRC:#CN

익명 사용자의 이미지

글쓴이: 익명 사용자 / 작성시간: 수, 2005/03/02 - 10:23오후

CN wrote:
css3인 word-break가 해답인데 파이어폭스는 지원 못하고 있습니다.

이게 무슨 말이죠?

저는 파이어폭스에서도 제로보드가 잘 되던데..

제로보드 제목이 word-break 로 되어 있지 않던가요?

글자가 넘어가면 아래로 저절로 내려가서 폭은 유지되던데요?

제가 질문을 잘못 이해하고 있나요?

정태영의 이미지

글쓴이: 정태영 / 작성시간: 수, 2005/03/02 - 10:59오후

Anonymous wrote:
CN wrote:
css3인 word-break가 해답인데 파이어폭스는 지원 못하고 있습니다.

이게 무슨 말이죠?
저는 파이어폭스에서도 제로보드가 잘 되던데..

제로보드 제목이 word-break 로 되어 있지 않던가요?
글자가 넘어가면 아래로 저절로 내려가서 폭은 유지되던데요?
제가 질문을 잘못 이해하고 있나요?

예 잘못 이해하신건 아닐 듯 한데.. 파이어폭스나 모질라/ 사파리/ khtml 등은.. 단어 단위로 줄바꿈이 일어나기 때문에 만약 띄어쓰기 없이 글자가 죽 이어져 있다면.. 줄바꿈이 일어나지 않고.. overflow 가 발생하게 됩니다 :)

그래서 레이아웃 이 깨지는 일 등이 발생하죠..

I.E 에서 word-break 라는 css 를 쓰면.. 단어단위가 아니라 단어 중간에서도 줄바꿈이 일어나기 때문에 그런 일이 생기지 않죠..

I.E에서 비표준적으로 해결한 방법인 줄 알았는데.. css3 에 이게 들어갔군요..

오랫동안 꿈을 그리는 사람은 그 꿈을 닮아간다...

http://mytears.org ~(~_~)~
나 한줄기 바람처럼..

댓글 달기

텍스트 포맷에 대한 자세한 정보

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.