Mozilla 한국 커뮤니티

제로보드 스타일의 게시판을 만들려고 합니다.
가능하면 web 표준에 부합하게 만들려고 ul 과 li 를 이용하려고 하는데요,
게시물 번호가 표시되는 부분은 indent 없이 나타나게 하고 싶습니다.
(제목부분은 당연히 indent 가 되어야 하고요.)

Code: Select all

<?xml version="1.0" encoding="euc-kr"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>리스트 테스트</title>
    <style type="text/css">
    <!--
    ul {
      list-style-type : none ;
      clear : both ;
      
    }
    li {
      
      float : clear ;
      clear : both ;
      vertical-align : center ;
      border : 1px solid black ;
      display : block ;
    }
    div.number {
      width : 50px ;
      background : #DDDDDD ;
      /* display : inline ; */
      
       float : left ; 
      
    }
    div.title {
      display : inline ;
      width : 600px ;
      background : blue ;
      color : white ;
      float : left ;
    }
    
    div.author {
      float : right ;
      width : 100px ;
      background : yellow ;
    }
    div.date {
      float : right ;
    }
    
    -->
    
    </style>
    
  </head>
  <body>

    <ul>
      <li>
        <div class="number">1</div>
        <div class="title">질문</div>
        
        <div class="date">시간</div>
        <div class="author">사람1</div>
        <div class="dummy"></div>
        <ul>
          <li>
            <div class="number">1-1</div>
            <div class="title">답글1</div>
            <div class="date">시간</div>
            <div class="author">사람2</div>
             <div class="dummy"></div>

            <ul>
              <li>
                <div class="number">1-1-1</div>
                <div class="title">답글에 대한 답글</div>
                
                <div class="date">시간</div>
                <div class="author">사람3</div>
                 <div class="dummy"></div>
              </li>
            </ul>
          </li>
          <li>
            <div class="number">1-2</div>
            <div class="title">답글2</div>
            <div class="date">시간</div>
            <div class="author">사람2</div>
             <div class="dummy"></div>
          </li>   
          
          
        </ul>
      </li>

    </ul>


  </body>
</html>

이 코드는 제가 대충 만들어 본 것입니다.
게시물 번호 문제는 어떻게 해야 할지 모르겠네요.
그리고 각 항목의 끝에 <div class="dummy"></div> 를 넣었는데
이게 없을 경우 레이아웃이 엉망이 되버립니다. 해결할 방법이 없을까요??
그리고 제가 해놓은 방식이 올바른 걸까요???

일반적인 게시판 목록과 같은 스타일이라면 테이블을 사용하셔도 좋습니다.

웹접근성을 생각하셔서 테이블을 작성하시면 됩니다.

레이아웃 구성시 테이블 사용은 좋지 않지만 표를 타나태기 위해서의 테이블 사용은 나쁘지 않으며 웹접근성에 신경쓰셔서 작성하시면 됩니다.

Code: Select all

<table>
    <caption>성명표</caption>
    <colgroup>
        <col width="100"/>
        <col width="50"/>
    </colgroup>
    <thead>
        <tr><th scope="row">이름</th><th scope="row">나이</th></tr>
    </thead>
    <tbody>
        <tr><td>아무개</td><td>10</td></tr>
        <tr><td>홍길동</td><td>12</td></tr>
    </tbody>
</table>

테이블에 사용되는 다양한 태그들을 넣어봤습니다.
테이블도 맞게 사용하면 웹접근성을 높일 수 있습니다.

제가 만들려고 하는것은 계층형 게시판입니다.
어떤 글에 답글이 달릴 경우 답글은 원래글에 대해서 약간 들여쓰기가 되어야 합니다.
테이블을 쓸경우 이걸 처리하기가 애매합니다.
테이블을 쓴 다른 게시판을 보니 들여쓰기를 할 경우 들여쓰기 단계만큼  
나 빈 이미지를 삽입하던데 저는 이게 별로 마음에 들지 않습니다.

저는 table-layout: fixed 를 사용하고 padding-left 를 이용해서 답글 인덴트를 표현 합니다.

CSS ㅤㅊㅚㄱ오~!

지나다가 저도 궁금해서 질문드립니다..

답글 들여쓰기할때요..
padding-left를 어떤 방법으로 설정 하시는지요

인라인 스타일 시트로 하시나요?
클래스 형태는 아닐 것 같고...

실제 작업된 것은 인라인으로 넣었었는데...

padding 이 width를 넘어서면 문제가 있죠.

인덴트 외에도 아이콘 때문에 스타일이 좀 복잡하게 들어가는 경우에는 class 로 지정하는 것이 맞겠죠. 인라인이든 클래스든 별 차이는 없다고 봅니다. 기준과 정책이 어떻게 결정 되는지에 따라 바뀔 수 있는 문제라고 봅니다.

Mozilla 한국 커뮤니티

게시판 목록보기 화면 구성...

게시판 목록보기 화면 구성...

게시판 목록 스타일이라면

현석님 질문이요..