-
[HTML] ch07-cssList_s01~s05 list[학원] yo-ons coding/[HTML] Summary&Example 2021. 7. 14. 17:23
ch07-cssList_s01~s04 list
s01_list
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>리스트</title> <style type="text/css"> /* 속성 설명 list-style-type 목록의 기호/문자 지정 */ ul{ list-style-type:square; } </style> </head> <body> <ul> <li>서울</li> <li>부산</li> <li>대구</li> <li>광주</li> </ul> </body> </html>
s02_list
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>리스트</title> <style type="text/css"> /* 속성 설명 list-style-image 목록 기호/문자로써 이미지 지정 */ ul{ list-style-image:url(../images/bullet.gif); } </style> </head> <body> <ul> <li>한국</li> <li>미국</li> <li>영국</li> <li>독일</li> </ul> </body> </html>
s03_list
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>리스트</title> <style type="text/css"> ul{ list-style-image:url(../images/bullet.gif); /* 목록 기호/ 문자 위치 지정 */ list-style-position:inside; } </style> </head> <body> <ul> <li>연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.</li> <li>연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.</li> <li>연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.</li> <li>연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.</li> <li>연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.연습을 위한 텍스트의 반복.</li> </ul> </body> </html>
s04_list
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>리스트</title> <style type="text/css"> ul{ list-style:none; /* 목록의 점 아이콘 제거 */ } ul li{ display:inline; /* 목록이 가로로 배치 */ } </style> </head> <body> <ul> <li>봄</li> <li>여름</li> <li>가을</li> <li>겨울</li> </ul> </body> </html>
s05_list_menu
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>리스트를 이용한 메뉴</title> <style type="text/css"> ul{ list-style:none; /* 리스트의 점 아이콘 제거 */ } ul li{ display:inline; /* 리스트를 가로로 표시 */ } ul li a{ text-decoration:none; background:#c00; color:#fff; /* a태그에는 width, height가 적용되지 않으므로 display:inline-block를 명시해서 넓이와 높이를 적용함 */ display:inline-block; width:100px; height:30px; /* 태그안의 여백 처리 */ padding-top:2px; padding-left:10px; } </style> </head> <body> <ul> <li><a href="#">Company</a></li> <li><a href="#">Product</a></li> <li><a href="#">Service</a></li> <li><a href="#">Community</a></li> </ul> </body> </html>그림 및 내용 참고: 국비 교육 수업
'[학원] yo-ons coding > [HTML] Summary&Example' 카테고리의 다른 글
[HTML] 실습2 영화 홍보 페이지 만들기 (0) 2021.07.15 [HTML] ch08-cssColor (0) 2021.07.15 [HTML] ch06_s01~ch09 decoration, align, indent, spacing, transform, white_space, shadow, overflow (0) 2021.07.14 [HTML] ch05_s04 ~ ch05_s14 import,tags, class, id, complex, group, descendant, child, attribute, a (0) 2021.07.14 [HTML] ch04_s01 ~ ch05_s03 semantic, inline, embedding, link, style (0) 2021.07.13