リスト、リンク


インベントリ

번호없는 리스트
<ul>
	<li> 리스트 항목1</li>
    <li> 리스트 항목2</li>
</ul>

번호있는리스트
<ol>
	<li> 리스트 항목1</li>
    <li> 리스트 항목2</li>
</ol>

정의리스트
<dl>
	<dt> 단어1 </dt>
    <dd> 단어에 대한 설명 </dd>
	<dt> 단어2 </dt>
    <dd> 단어에 대한 설명 </dd>
	<dt> 단어3 </dt>
    <dd> 단어에 대한 설명 </dd>    
</dl>

リストスタイル1



リストスタイル2(メニューナビゲーションバー)

        ul{
            list-style: none;
            text-align: center;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
            padding: 10px ;
        }
        ul li {
            display: inline;
            padding: 10px;
            letter-spacing: 10px;
        }
        ul li a{
            text-decoration: none; color: black;
        }
        ul  a:hover{
            text-decoration: underline;
            background-color: antiquewhite;
        }
        img{
            width: 500px;
            height: auto;
            display: block;
            margin : auto;
        }

リンク

<a href="@" target="_">추가정보</a>
targetプロパティ
blank:新しいウィンドウで新しいページを開きます.
self:現在のウィンドウで新しいページを開きます.(デフォルト)

リンクスタイル

  • a:link:リンクにアクセスしていないスタイル
  • a:アクセス:アクセスリンクスタイル
  • a:hover:マウスサスペンション時のスタイル
  • a:active:マウスクリックスタイル
  • a:hoverはa:linkとa:アクセスの後にある必要があります.

    リンクのその他のスタイル



    アクセスリンクが緑に変わりました.

    リンクテキストの下線を削除


    a { text-decoration-line: none; }