더보기
/*
- 메뉴를 꼭 리스트 태그를 이용하지 않아도 됨.
하지만 일반적으로 메뉴는 상위메뉴, 하위메뉴로 구성되어있기 때문에 리스트 태그로 많이 작업함.
- list-style-type : 리스트 마커 지정, 마커는 리스트 앞에 있는 숫자나 모양
- list-style-image : 리스트 마커를 이미지를 이용하여 지정
- list-style-position : 리스트 마커의 위치(안insdie/밖outside - 기본값)
- list-style : 위 3개를 한번에 지정
- 모든 태그에서 CSS와 관련된 속성들은 사용하지않는 것이 표준
- ul태그에서 type속성을 이용하여 마커를 지정(구식)하지 말고 위에 표기된 CSS를 이용하여 지정
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리스트 관련 속성</title>
<style>
/*ul태그는 마커를 위한 패딩이 붙음, 마커는 기본값이 리스트태그 밖*/
ul{background: yellowgreen; padding: 20px; list-style-position: inside; list-style-type: none;
list-style-image: url(../image/balloon.jpg);}
li{background: yellow; margin-bottom: 10px;}
</style>
</head>
<body>
<ul>
<li>사과</li>
<li>포도</li>
<li>배</li>
</ul>
</body>
</html>
'괴발개발 > Html+CSS' 카테고리의 다른 글
| CSS_table로 게시판 만들기 (0) | 2021.06.13 |
|---|---|
| CSS_table셀합치기(colspan, rowspan) (0) | 2021.06.13 |
| CSS_overflow, text-overflow(말줄임 표시) (0) | 2021.06.13 |
| CSS_transform (0) | 2021.06.12 |
| CSS_transition (0) | 2021.06.12 |