하루의 일상💜

[HTML] 리스트 태그 작성하기, type 값 변경하기 본문

HTML

[HTML] 리스트 태그 작성하기, type 값 변경하기

도하루박 2022. 9. 17. 13:16
반응형

 

순서 없는 리스트

<ul>

unorder list의 줄임말로 순서가 없는 것을 의미한다. <ul>작성후 안에 <li>를 작성해야 한다.

순서 있는 리스트

<ol>

order list의 줄임말로 순서가 있음을 의미한다. 이 또한 <ol> 안에 <li>를 작성해야 한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<ul>
		<li>계란을 준비한다.</li>
		<li>계란을 삶는다.</li>
		<li>계란을 먹는다.</li>
	</ul>
	
	<ol>
		<li>계란을 준비한다.</li>
		<li>계란을 삶는다.</li>
		<li>계란을 먹는다.</li>
	</ol>
</body>
</html>

결과창

또한 자동으로 1, 2,...로 설정이 되었는데 이 type도 변경할 수 있다.

type 값의 종류

1 : 숫자(1, 2, 3...)
a : 알파벳 소문자
A : 알파벳 대문자
i : 로마숫자(i, ii, iii...)
I  : 로마 숫자(I, II, III, ...) 

등이 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<ol type="A" start="3">
		<li>계란을 준비한다.</li>
		<li>계란을 삶는다.</li>
		<li value="8">계란을 먹는다.</li>
        <li>배부르다.</li>
	</ol>
</body>
</html>

타입을 A로 변경하고 시작은 3번째 부터 시작한다.

그리고 li 중 세번째 list는 8번째부터 시작한다.

결과창

ul 앞에 있는 스타일 변경하기

<ul>태그를 사용할때 자동으로 붙은 동그라미와 같은 스타일을 변경할 수 있다.

style: "list-style:   ;"

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<ul style="list-style:square;">
		<li>계란을 준비한다.</li>
		<li>계란을 삶는다.</li>
		<li>계란을 먹는다.</li>
	</ul>
	<ul style="list-style:none;">
		<li>계란을 준비한다.</li>
		<li>계란을 삶는다.</li>
		<li>계란을 먹는다.</li>
	</ul>
</body>
</html>

반응형
저작자표시 (새창열림)

'HTML' 카테고리의 다른 글

[HTML] 회원가입 입력 창 만들기  (0) 2022.09.17
[HTML] HTML 요소의 종류(display)  (0) 2022.09.17
[HTML] 테이블 태그 표 만들기, 행과 열 합치기  (0) 2022.09.17
[HTML] 웹 문서에 다양한 서식 태그 입력하기  (0) 2022.09.17
'HTML' Related Articles more