목차
- <ul> 예제 - 순서 없는 리스트
- <ul> 정의
- <ul> 구문
- <ul> 속성
- <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> 속성
| 속성 |
속성값
|
쓰임새 |
비고 |
| compact |
compact |
보통보다 더 작게 출력
|
HTML5 X |
| type |
disc
square
circle
|
목록 앞에 찍는 마커의 모양
disc (검은 동그라미)
square (사각형)
circle (흰 동그라미)
|
HTML5 X |
<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>
결과보기
※ 모바일에서는 hover 작동 X.
