현재 위치

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

HTML에서 세로줄을 넣으려면?

권순선의 이미지
글쓴이: 권순선 / 작성시간: 월, 2006/10/09 - 7:23오후

이곳 KLDP 초기화면의 가장 가운데 부분에 KLDP BBS, Blog, KLDP.net을 각각 한 블럭씩 할당해서 컨텐트를 배치하고 있는데 각 블럭 사이에 세로줄을 넣고 싶습니다. http://www.gnu.org 의 아랫부분에 GNU Flashes와 Take Actions 사이에 있는 것과 같은 세로줄을 넣고 싶은데 HTML을 어떻게 고치면 될지 좀 알려 주세요...

그리고 윈도우즈용 FireFox에서 초기화면을 보면 제 경우 KLDP BBS, Blog 블럭에 해당하는 컨텐트의 제목 앞에 있는 bullet이 위로 치우쳐 보이는데 혹 다른 분들은 괜찮으신가요? IE에선 괜찮더군요. 혹 다른 분들도 마찬가지라면 해결 방법을 아시는 분은 좀 알려 주시면 감사드리겠습니다. :-)

그럼....

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

글쓴이: 7339989b62a014c... / 작성시간: 월, 2006/10/09 - 7:48오후

첫번째 블록을 제외한 나머지 블록에 border-left 속성을 지정하던가, 아니면 반대로 마지막 블록을 제외한 나머지 블록에 border-right 속성을 지정하면 될 것 같은데요~

송창훈의 이미지

글쓴이: 송창훈 / 작성시간: 월, 2006/10/09 - 8:08오후

해당 부분의 html 소스 첨부 파일입니다.

권순선의 이미지

글쓴이: 권순선 / 작성시간: 월, 2006/10/09 - 8:30오후

border-left: #3366cc thin solid; 를 첫번째 블럭을 제외한 나머지 블럭에 넣었더니 세번째 블럭이 가운데 블럭 아래로 붙어 버리는 희한한 현상이 발생하는군요. :-(

wariua의 이미지

글쓴이: wariua / 작성시간: 월, 2006/10/09 - 9:28오후

width의 계산 방식 때문일 겁니다. 현재 세 영역에 대해서 폭을 33+34+33으로 100%를 만들어 두셨는데, 거기에 경계선이 추가되면서 100%가 넘어가게 되어 마지막 블럭이 아래로 밀려나는 듯 합니다. (더 심난하게도 경계선이 width 계산에 포함되는가 여부도 브라우저별로 달랐던 걸로 기억합니다.) 가운데 블럭을 편애하는 걸 멈추시고 모두에게 33%를 주신다면 화면을 아주 작게 본다거나 하는 경우를 제외하곤 대부분 해결이 되지 싶습니다:-)

list 항목들의 가운데점이 글제목과 상하 정렬이 안 맞는 건 inline element인 LI 안에다가 block element인 DIV를 넣으셨기 때문으로 보입니다. validator.kldp.org에서 검사를 해보니... 안 나옵니다만;; 여튼 그것 때문일 겝니다. (쿨룩;; ) 그래서 kldp2.css에 다음 내용을 추가해서 DIV를 강제로 inline element로 변신시키면 일단 정렬은 맞게 됩니다. (물론 DIV 대신 SPAN을 사용하는 것이 좀 더 정석이겠습니다만-)

.panel-3col-33-stacked .item-list li div {
  display: inline;
}

LI 안에다가 DIV를 넣으신 것이, 글제목이 여러 줄로 표시될 때 가운데점을 첫 번째 줄의 가운데가 아닌 그 여러 줄 전체의 가운데에 표시하시려고 그런 것이 아닐까 싶은데 그렇게 하는 방법은... 다음 답글로 누군가 올려주실 예정입니다. (도망도망...)
----
$PWD `date`

$PWD `date`

권순선의 이미지

글쓴이: 권순선 / 작성시간: 화, 2006/10/10 - 1:12오후

감사합니다... LI에 DIV를 넣은 것은 제가 아니고 그냥 기존에 있는 소스를 그대로 따 왔더니 그렇게 되었네요. 그냥 두려고 했는데 역시 물어보길 잘했네요. :-)

세로줄 부분은 여전히 좀더 좋은 방법이 필요할 듯 합니다. 아래에 따로 쓰겠습니다.

권순선의 이미지

글쓴이: 권순선 / 작성시간: 일, 2007/01/28 - 4:22오전

관련 모듈 개발자에게 방금 리포팅했습니다. http://drupal.org/node/113329

스크린샷 뜨고, 테스트해보고 하는데 시간 한참 걸렸네요. :-)

송창훈의 이미지

글쓴이: 송창훈 / 작성시간: 월, 2006/10/09 - 9:27오후

다음처럼 하면 되지 않을런지요?

권순선의 이미지

글쓴이: 권순선 / 작성시간: 화, 2006/10/10 - 1:18오후

음... 올려주신 방법들을 적용(33%로 변경 등)해 보았는데 각 블럭에 세로줄을 정의할 경우 두개의 세로줄 길이가 서로 다르게 나오더군요. 예를 들어 border-left 속성을 두번째와 세번째 블럭에 주면 세로줄이 나오긴 합니다만 세로줄 길이가 두번째와 세번째 블럭의 크기에 의존적이 되어서 두개가 서로 다르게 나옵니다. 보시면 아시겠지만 블럭의 크기는 해당 블럭에 담기는 컨텐트의 분량에 따라서 가변적이거든요.

가장 긴 블럭 기준으로 위아래와 좌우에 약간의 공간을 확보하면서 세로줄을 치면 보기가 좋을텐데 그렇게 세로줄이 나올 수 있도록 하는 방법은 없을까요?

M.W.Park의 이미지

글쓴이: M.W.Park / 작성시간: 화, 2006/10/10 - 4:45오후

댄 씨더홈의 "실용예제로 배우는 웹 표준"이라는 책에서는 div를 사용한 컬럼의 길이 문제를 가짜 컬럼이라는 꼼수로 설명하고 있습니다.
배경이미지를 이용한 꼼수인데, 아마도 고정폭이어야 제대로 적용될 것같습니다.
http://www.alistapart.com/articles/fauxcolumns/

-----
오늘 나의 취미는 끝없는, 끝없는 인내다. 1973 法頂

-----
오늘 나의 취미는 끝없는, 끝없는 인내다. 1973 法頂

송창훈의 이미지

글쓴이: 송창훈 / 작성시간: 수, 2006/10/11 - 12:36오전

말씀하신 3개의 컬럼의 양이 서로 다른 경우를 고려해서
고쳐 보았는데, 저는 제대로 출력되는 것 같은데,
잘 모르겠네요. 첨에 했던 것처럼 각각의

마다
valign=top을 적용하고 33%씩 width를 설정하고,
padding-right와 padding-left를 적절히 조정한
것입니다.
blueskya의 이미지

글쓴이: blueskya / 작성시간: 일, 2007/01/28 - 5:14오전

쓰레드가 언제 올라온건지도 보지도 않고 관련 댓글도 보지 않고

글만 읽고서는 끄적이다보니 이전의 것이군요.

끄적인건 같이 올립니다.

----------------------------------------------------------------------
인생 뭐있어? 백수로 사는거야~ 가는거야~

댓글 달기

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

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
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.