공부하는 용가리. v2

오늘, 그동안 bug가 있어서 게시글을 뽑아서 메인화면에 출력하는 부분을 ul li부분으로 맞추어 출력하는것을 작업하고 있었다.
워.- 생각보다 예전에 내가 좀 뻘짓했구나? 라고 생각했다.. 그래도, 다음 http://ui.daum.net/guideline/list_ol 이곳을 참고하면서 천천히 작업했더니. 되더라.. 역시 사람은 documentation을 잘 해놓아야해..

자, 내가 발로 짠 소스를 보도록 하자.
css부분
<style type="text/css">   
    body{ position:relative; background-color:#fff; color:#444; font-size:0.75em;font-family:굴림,Gulim,AppleGothic,sans-serif;  }
    a {color:#444; text-decoration:none;}    a:hover, a:active {text-decoration:underline;}
    ol,ul,li {list-style:none;}
    h1,h2,h3,h4,h5,legend {font-size:0.75em;font-family:굴림,Gulim,AppleGothic,sans-serif;padding:0;margin:0;}
    #board, #boardList { width:460px; margin:0 auto; }
    #boardList ul { padding:7px 0; margin:0 5px; }
    #boardList li { clear:left; height:16px; border-bottom:1px dotted black; background: url('icon.gif') no-repeat; background-position:3px 6px; padding:5px 0 0 15px; margin:0;  border:1px solid red; }
    #boardList li a, #boardList li img { float:left; }
    #boardList li .date { float:right; margin:0 8px 0 0; }
</style>

html부분
<div id="board">
  <h3><img src="title-01.gif" alt="게시판" /></h3>
  <div id="boardList">
  <ul>
    <li>
      <a href="#">기사 제목을 뽑아오는 것처럼 해..</a>
      <img src="new.gif" alt="new" />
      <span class="date">2008-06-19</span>
    </li>
    <li>
      <a href="#">기사 제목을 뽑아오는 것처럼 해..</a>
      <span class="date">2008-06-19</span>
    </li>
    <li>
      <a href="#">기사 제목을 뽑아오는 것처럼 해..</a>
      <span class="date">2008-06-19</span>
    </li>
    <li>
      <a href="#">기사 제목을 뽑아오는 것처럼 해..</a>
      <span class="date">2008-06-19</span>
    </li>
  </ul>
  </div>
</div> 

자, 위와 같이 했을때 FF3.0에서는 다음과 같은 결과를 보여준다.

아주 바람직하다.. 이렇게 나와야 정상이다. 하지만 우리 IE님을 볼까?

환상적이다. 첫번째것은 붙고, 두번째것부터 쭉쭉 떨어져준다.. -_ -이런... li부분에 별삽질을 다 해줬건만 아무런 변화도 없고,.. 이런 빌어먹을 IE.. 하지만 난 포기하지 않고 구글횽아를 뒤졌더니 결과를 알려줘서 적용해보았다...

결국 저 사이트에서 하라는건..  li 부분에 vertical-align: bottom; 이렇게 적용해주었다. 워.. 그러니깐 IE도 제대로 표현을 해주더라.


* 누가 보면 내가 웹 퍼블리셔쯤 되는지 알겠네.. --;
* 그래도 신기한건 구글횽아가 다 알려준다는게.....