태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

XHTML 표현
    <ul>
        <li>소개하고픈 링크</li>
        <li>즐겨읽는 책</li>
        <li>좋아하는 영화</li>
        <li>함께 듣는 음악</li>
    </ul>


분류 목록을 XML로 작성하면 다음과 같이 표현할수 있다.
<categorylist>
    <item>소개하고픈 링크</item>
    <item>즐겨읽는 책</item>
    <item>좋아하는 영화</item>
    <item>함께 듣는 음악</item>
</category>


불릿 감추기 위해 ul 엘리먼트에 list-style: none; 를 지정

목록을 가로로 표시하기 위해 li 엘리먼트에 display:inline; 를 지정

한줄에 가로로만 쭉 표시되게 하기 위해서 a 엘리먼트에 float:left; 를 지정


ex)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
    <meta http-equiv="content-type" content="text/html; charset=euc-kr" />
    <style type="text/css" media="screen">
    #fig1_7 #minitabs {
        margin: 0;
        padding: 0 0 20px 10px;
        border-bottom: 1px solid #696;
        }
  
    #fig1_7 #minitabs li {
        margin: 0;
        padding: 0;
        display: inline;
        list-style-type: none;
        }
  
    #fig1_7 #minitabs a {
        float: left;
        line-height: 14px;
        font-weight: bold;
        margin: 0 10px 4px 10px;
        text-decoration: none;
        font-size: 12px;
        color: #9c9;
        }
  
    #fig1_7 #minitabs a.active, #fig1_8 #minitabs a:hover {
        border-bottom: 4px solid #696;
        padding-bottom: 2px;
        color: #363;
        }
  
    #fig1_7 #minitabs a:hover {
        color: #696;
        }
  
    #fig1_9 #minitabs {
        margin: 0;
        padding: 0 0 20px 10px;
        border-bottom: 1px solid #9FB1BC;
        }
  
    #fig1_9 #minitabs li {
        margin: 0;
        padding: 0;
        display: inline;
        list-style-type: none;
        }
      
    #fig1_9 #minitabs a {
        float: left;
        line-height: 14px;
        font-weight: bold;
        font-size: 12px;
        padding: 0 12px 6px 12px;
        text-decoration: none;
        color: #708491;
        }
  
    #fig1_9 #minitabs a.active, #fig1_9 #minitabs a:hover {
        color: #000;
        background: url(img/tab_pyra.gif) no-repeat bottom center;
        }  
      
    </style>
</head>

<body>
<div id="fig1_7">
    <ul id="minitabs">
      <li><a href="/links/">소개하고픈 링크</a></li>
        <li><a href="/books/">즐겨읽는 책</a></li>
        <li><a href="/movies/" class="active">좋아하는 영화</a></li>
        <li><a href="/music/">함께 듣는 음악</a></li>
    </ul>
</div>
<br />
<br />
<div id="fig1_9">
    <ul id="minitabs">
      <li><a href="/links/">소개하고픈 링크</a></li>
        <li><a href="/books/" class="active">즐겨읽는 책</a></li>
        <li><a href="/movies/">좋아하는 영화</a></li>
        <li><a href="/music/">함께 듣는 음악</a></li>
    </ul>
</div>

</body>
</html>


예제 이미지
사용자 삽입 이미지


신고
Posted by 고시랑
이전버튼 1 ··· 3 4 5 6 7 8 9 이전버튼

티스토리 툴바