DAY 11. 목록 관련 스타일(3): list-style

앞에서 했던

     1) list-style-type

     2) list-style-image

     3) list-style-position

을 모두 한꺼번에 표시할 수 있는 방법이 있다.

 

list-style: 속성값;

 

속성값은 1), 2), 3)에서 쓸 때와 같이 똑같이 작성하면 된다.

 

 

예제 1. 

list-style-type으로 쓰나, list-style로 쓰나 똑같다.

 

 

 

예제 2.

속성을 줄여서 쓸 때 각 속성값은 '공백'으로 구분했다.

 

 

 

 

 

목록 관련 스타일 학습한 것을 응용해서

웹 사이트의 세로 메뉴 만들기를 실습해봤다.

(더 예쁘게 꾸미려면야 할 수도 있지만, 실습에는 기본만 써보기로^^)

 

 

 

 

위의 소스 코드를 진짜 메뉴처럼 바꿔보면,

메뉴 모양처럼 바뀌었다ㅎㅎ