[list] HTML - <ul> 태그 ★ - 객체 ★ - 순서없는리스트 (= 순서없는목록태그 = ul태그 = 유엘태그/울태그/얼태그) - (HTML5수정)</ul>

1. <ul> 예제 - 순서 없는 리스트
2. <ul> 정의
3. <ul> 구문
4. <ul> 속성
5. <ul> 예제 - 전체 서브메뉴

<ul> 예제 - 순서 없는 리스트

 
<ul>
    <li>HTML - 홈짱닷컴 (homzzang.com)</li>
    <li>CSS - 홈짱닷컴 (homzzang.com)</li>
    <li>PHP - 홈짱닷컴 (homzzang.com)</li>

    <li>JavaScript - 홈짱닷컴 (homzzang.com)</li>

</ul>

 

결과보기

<ul> 정의

순서 없는 목록 표시. 

 

---

 

1. 
<ul> : Unordered List 의 약자. (bulleted list)라고도 불림.

2. 
<ul>태그는 <li>태그와 함께 사용.

※ 둘 다, CSS로 margin, padding 초기화 후 사용.

※ 둘 다, block (블럭) 요소라 한 줄 전체를 차지함.

※ 주의. 

position:absolute 또는 posiiton:fixed 적용 상태에서

width 미지정 시, 다른 요소 클릭 안되는 원인되니 주의.

3. 
스타일을 줘 꾸미고 싶을 땐 CSS를 이용.

4. 
만약, 순서(예: 1234, abcd) 주려면, <ul> 대신 <ol> 태그 이용.

5. 
HTML5에서 compact와 type 속성이 제거됨.

 

6. 
시작 태그와 종료 태그로 구성

7. 
<ul> 태그에 height 값 없는 상태에서 <li> 태그에 float:left 속성 적용되면 
<ul> 태그에 적용한 background 속성이 적용 안 됨. ★★★★★

(아래 예제 참고)

 

---

 

<style>

/* ul 태그의 background 속성 적용 O */

ul.hz1 {background:red; height: 45px;}

ul.hz1 li {float:left; width:50%}

/* ul 태그의 background 속성 적용 X */

ul.hz2 {background:red;}

ul.hz2 li {float:left; width:50%}

</style>

 

<ul class="hz1">

  <li></li>

  <li></li>

  <li></li>

  <li></li>

</ul>

<ul class="hz2">

  <li></li>

  <li></li>

  <li></li>

  <li></li>

</ul>

결과 보기

<ul> 구문

 

<ul 속성="속성값">

    <li>목록 요소</li>

    <li>목록 요소</li>

    <li>목록 요소</li>

</ul>

 

<ul> 속성

<ul> 예제 - 전체 서브메뉴

 

<style>

#hz ul li {

    float:left; 

    list-style:none;

    border:1px solid red;

    width:150px;

    height:30px;

    line-height:30px;

    text-align:center;

    position:relative;

}

#hz ul ul {display:none;}

#hz ul:hover ul {

    display:block;

    position:absolute;

    top:30px;

    left:-41px;

}

#hz ul:hover ul li {

    border-top: 0px solid red;

}

</style>

 

<div id="hz">

     <ul>

         <li>홈짱닷컴

             <ul>

                  <li class="a"><a href="#">Homzzang.com</a></li>

                  <li class="a"><a href="#">Since 2012</a></li>

             </ul>

         </li>

         <li>그누보드

             <ul>

                  <li class="b"><a href="#">sir.kr</a></li>

                  <li class="b"><a href="#">Since 2001</a></li>

             </ul>

         </li>

    </ul>

</div>

 

결과보기