728x90
더보기
Day38. 230622
[HTML] 목록을 만드는 태그
<ul>태그 : 순서 없는 목록 만들기
<ul>
<li> 내용 </li>
<li> 내용 </li>
..
</ul>
순서가 필요하지 않은 목록(unorder list)을 만들 때 <ul> 태그를 사용하고,
<ul> 내부에 <li> 요소(list item)를 포함하여 각 항목을 표시한다.
<ol>태그 : 순서 목록 만들기
<ol>
<li> 내용 </li>
<li> 내용 </li>
..
</ol>
순서가 필요한 목록(order list)을 만들 때 <ol> 태크를 사용하고,
내부에 요소(list item)를 포함하여 각 항목을 표시한다.
<ol> 태그 속성으로 순서 목록의 숫자와 순서 바꾸기
1. type 속성
<ol> 태그는 순서 목록이기 때문에 각 항목 앞에 1,2,.. 같은 숫자가 기본적으로 붙는데
<ol> 태그의 type 속성을 이용해 숫자의 종류를 다양하게 조절 할 수 있다.
| 속성 값 | 설명 |
| 1 | 숫자(기본값) |
| a | 영어 소문자 |
| A | 영어 대문자 |
| i | 로마숫자 소문자 |
| I | 로마숫자 대문자 |
2. start 속성
순서 목록은 기본적으로 1부터 시작하지만
start 속성을 이용하면 중간 번호부터 시작할 수 있다.
3. reversed 속성
항목을 역순으로 표시한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트</title>
</head>
<body>
<h2>무순서목록</h2>
<ul type="circle">
<li>red</li>
<li type="disc">green(disc.기본.검정원)</li>
<li type="circle">blue(circle)</li>
<li type="square">hotpink(square)</li>
</ul>
<hr/>
<h2>순서있는 목록</h2>
<ol start="1">
<li>car</li>
<ul>
<li>기아</li>
<li>현대</li>
<li>테슬라</li>
</ul>
<li type="1">ipad</li>
<li type="A">mac</li>
<li type="a">home</li>
<li type="I">cloth</li>
<li type="i">travel ticket</li>
</ol>
</body>
</html>
[CSS] 목록스타일
list-style-type 속성 - 목록의 불릿과 번호 스타일 지정하기
순서 없는 목록의 경우, 목록 앞에 다양한 볼릿(bullet)을 놓을 수 있고,
순서 목록에서는 번호 스타일을 지정 할 수 있다.
순서 없는 목록에서 불릿 모양 바꾸기
기본적으로 채운 원 disc(●)을 불릿으로 사용하는데 list-style-type의 여러 속성 값을 이용해 불릿을 바꿀 수 있다.
list-style-type : none | <순서 없는 목록의 불릿> | <순서 목록의 번호>
| 속성 값 | 설명 |
| disc(●) | 채운 원 |
| circle(○) | 빈 원 |
| square(■) | 채운 사각형 |
| none | 불릿 없애기 |
순서 목록에서 숫자 바꾸기
| 속성 값 | 설명 |
| decimal | 1로 시작하는 십진수 |
| locwer-roman | 소문자 로마 숫자 |
| upper-roman | 대문자 로마 숫자 |
| lower-appha 또는 lower-Iatin | 소문자 알파벳 |
| upper-appha 또는 upper-Iatin | 대문자 알파벳 |
list-style-type 속성 - 불릿 대신 이미지 넣기
list-style-image : <이미지> | none
<이미지> = url(이미지 파일 경로)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트</title>
</head>
<body>
<h2>무순서목록</h2>
<ul list-style-position: inside;">
<li>white</li>
<li style="list-style-type:none;">red(none★)</li>
<li style="list-style-type:disc">green(disc.기본.검정원)</li>
<li style="list-style-type:circle">blue(circle)</li>
<li style="list-style-type:square">hotpink(square)</li>
<li style="list-style-image: url('../imges/sqpurple.gif');">yellow</li>
</ul>
<hr/>
<h2>순서있는 목록</h2>
<li>car</li>
<li style="list-style-type:none;">ipad</li>
<li style="list-style-type:decimal;">mac</li>
<li style="list-style-type:upper-alpha;">home</li>
<li style="list-style-type:lower-alpha;">cloth</li>
<li style="list-style-type:upper-roman;">travel ticket</li>
<li style="list-style-type:lower-roman;">lotto</li>
</ol>
</body>
</html>
728x90
'개발 수업 > WEB' 카테고리의 다른 글
| [HTML] Get방식, Post방식 (0) | 2023.06.22 |
|---|---|
| [CSS] 폼(form) (0) | 2023.06.22 |
| 이클립스 jsp파일 오류(The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path) (0) | 2023.06.22 |
| [CSS] CSS박스모델 (0) | 2023.06.21 |
| [CSS] background (0) | 2023.06.21 |
