[3주][3일][1~2th] HTML5: {ul,li}태그, 클래스 사용하기 예제(2)

어제 배운 ul,li태그를 이어서 실습을 하겠다.

 

전체 이미지

 

전체 소스

 

ul_li.html

 

1. table2를 바꿔보기

(1) table2에 스타일 적용

.left ul li a{
 background: #999;
 display:block;
 width: 200px;
 height: 38px;
}

 

 

(2) display:block;을 없애줌 ==> 셀 안의 공간이 다 없어짐!

.left ul li a{
 background: #999;
 width: 200px;
 height: 38px;
}

 

(3) border-bottom : 표의 밑부분만 밑줄을 그어줌

.left ul li a{
 background: #999;
 display:block;
 width: 200px;
 height: 38px;
 border-bottom: 1px solid #000;
}

 

(4) padding으로 왼쪽여백을 25px 준다

 .left ul li a{
 background: #999;
 display:block;
 width: 175px;
 height: 28px;
 border-bottom: 1px solid #000;
 padding: 10px 0 0 25px;
}

 

(5) hover 클래스 추가하기

.left ul li a{
 background: #999;
 display:block;
 width: 175px;
 height: 28px;
 border-bottom: 1px solid #000;
 padding: 10px 0 0 25px;
}
.left ul li a:hover{
 background: #ff0;
 font-weight: bold;
}

 

home에 마우를 갖다 대면,

 

배경과 굵은체가 적용된다.