개발자 미니민의 개발스터디

[HTML] 리스트 관련 <ol> <ul> <menu> <li> 태그

by mini_min

HTML

[HTML]
리스트 관련 <ol> <ul> <menu> <li> 태그

✔️ 리스트 관련 태그 

: 목록을 만들 때 사용하는 태그로, <ol> , <ul> , <menu> , <li> 태그가 있다.

 

📓 종류

<ol> ~ </ol> : 번호가 붙는 목록을 만든다.

<ul> ~ </ul> : 번호가 붙지 않는 목록을 만든다.

<menu> ~ </menu> : 짧은 문자열의 목록을 만든다.

<dir> ~ </dir> : 단어와 같은 문자열을 만든다. (HTML 5는 지원하지 않는다.)

<li> ~ </li> : 목록 항목이다.

 

📓 리스트 정의

: 이름 - 값 형태의 그룹으로 구성된 연상 목록을 나타낸다.

<dl> ~ </dl> : 정의 리스트를 선언하는데 사용된다.

<dt> ~ </dt> : 정의 목록에서 정의 그룹의 단어나 이름을 나타낸다.

<dd> ~ </dd> : dl 요소에서 설명, 정의, 값을 나타낸다.

 

 

✔️ <ol> 태그

: 순서가 있는 목록 태그 .

: 순서 있는 목록을 정리하고 싶을 때 사용되는 태그로 타입을 정할 수 있다.

: <li> 태그와 함께 사용되며, <ol> 태그는 정렬된 목록을 선언하고, <li> 태그는 각 목록 항목을 선언한다.

: 자식 요소에는 0개 이상의 li 요소만 포함할 수 있다.

 

✨ 속성

- compact : 시각적 사용자 에이전트에 힌트를 제공 (HTML 5는 지원하지 않는다.)

- start : 정렬 된 목록의 첫번째 항목의 시작 번호를 지정한다.

- type : 타입 값 지정!

- value : 입력 유형에 대한 현재 값을 지정한다.

- reversed : 리스트 순서가 역순이 된다. 숫자를 역순으로 표현하는 것일 뿐, 리스트 순서를 뒤부터 표현하는 것은 아니다!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3> ol 태그 - 번호가 붙는 태그 </h3>
<ol>
	<li>자바</li>
	<li>서블릿</li>
	<li>오라클</li>
	<li>자바스크립트</li>
	<li>리액트</li>
	
		
</ol>
<hr>

<!--  ol 태그는 블록 태그라 한 줄씩 나온다. -->
<ol style="list-style: upper-alpha;">
	<li>자바</li>
	<li>서블릿</li>
	<li>오라클</li>
	<li>자바스크립트</li>
	<li>리액트</li>

</ol>
<hr>

<ol style="list-style: upper-alpha;" start="11">
	<li>자바</li>
	<li>서블릿</li>
	<li>오라클</li>
	<li>자바스크립트</li>
	<li>리액트</li>

</ol>
<hr>


<ol style="list-style: upper-alpha;">
	<li>자바</li>
	<li>서블릿</li>
	<li>오라클</li>
	<li>자바스크립트</li>
	<li>리액트</li>

</ol>
<hr>



</body>
</html>
💡 ol 태그는 블록 태그라, 한 줄씩 출력된다.

 

 

✔️ <ul> 태그

: 번호가 붙지 않는 목록이다. (정렬되지 않은 목록 태그)

: <ul> 태그는 ol 태그와 달리 순서가 없는 목록을 정리할 때 사용한다.

: <li> 태그와 함께 사용하여 목록 리스트를 보여줄 수 있다.

: 자식 요소에는 0개 이상의 li 요소만 포함할 수 있다.

 

✨ 속성

- compact : 시각적 사용자 에이전트에 힌트를 제공 (HTML 5는 지원하지 않음)

- type : 타입 값 지정

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3> ul : 번호가 붙지 않는 목록 </h3>

<ul>
	<li>자바</li>
	<li>서블릿</li>
	<li>오라클</li>
	<li>자바스크립트</li>
	<li>리액트</li>
</ul>
<hr>


<ul style="list-style: circle;">
	<li>자바</li>
	<li>서블릿</li>
	<li>오라클</li>
	<li>자바스크립트</li>
	<li>리액트</li>
</ul>
<hr>


<ul style="list-style: square;">
	<li>자바</li>
	<li>서블릿</li>
	<li>오라클</li>
	<li>자바스크립트</li>
	<li>리액트</li>
</ul>
<hr>


<ul style="list-style: none;">
	<li>자바</li>
	<li>서블릿</li>
	<li>오라클</li>
	<li>자바스크립트</li>
	<li>리액트</li>
</ul>
<hr>

<ul style="padding: 0;">
	<li>자바</li>
	<li>서블릿</li>
	<li>오라클</li>
	<li>자바스크립트</li>
	<li>리액트</li>
</ul>
<hr>



</body>
</html>
💡 스타일을 지정해서 순서 없는 나열의 도형 모양 지정도 가능하고,
style="list-style: none;" 으로 아예 모양을 없앨 수도 있다. 

 

 

✔️ <li> 태그

: 목록 항목 태그이다.

: 목록 항목을 나타내는 태그로 자동 줄 바꿈을 하고 들여쓰기를 한다.

: 종료 태그는 선택적이다.

: <ol> ~ </ol> 사이에 써주면 숫자 또는 영문자 등이 삽입되며, 타입을 기입하지 않으면 기본적으로 아라비아 숫자로 카운팅된다.

: <ul> , <menu> , <dir> 태그 안에 기본적으로 원형 블릿이 삽입된다.

 

✨ 속성

- type : 타입 값을 지정

- value : 입력 유형에 대한 현재 값을 지정한다.

 

 

✔️ <dir> 태그

: 정의 목록 태그로 목록을 정의한다.

: dl 요소는 이름-값 형태의 그룹으로 구성된 연상 목록을 나타낸다.

: 자식 요소로 하나 이상의 dt 요소와 그 뒤를 따르는 하나 이상의 dd 요소로 구성된 0개 이상의 그룹을 포함할 수 있다!

❌ dl 요소 안에 내용이 같은 dt 요소가 중복되면 안된다.

: 이름-값의 1:1 형태가 아닌, 1:다, 다:1, 다:다 형태를 취할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3> dl : 목록 정의 </h3>

<dl>
	<dt>웹프로그래밍</dt>
	<dd>javascript</dd>
	<dd>css</dd>
	<dd>html</dd>
	<dt>데이터베이스</dt>
	<dd>오라클</dd>
	<dd>마리아디비</dd>
	<dd>MS-SQL</dd>

</dl>

</body>
</html>

dt 2개와 다수의 dd 로 이루어진 모습

 

 

🔒 ul 리스트 태그로 성적표 만들기

✨ html 코드

- <ul> 태그와 다수의 <li> 태그들의 집합으로 코드 생성

- div 태그에 'box' class 설정

</head>
<body>

<div class="box">
	<ul>
		<li>이름</li>
		<li>국어</li>
		<li>영어</li>
		<li>수학</li>
		
	
	</ul>
	<ul>
		<li>김자바</li>
		<li>90</li>
		<li>80</li>
		<li>100</li>
		
	</ul>
	
	<ul>
		<li>하하하</li>
		<li>80</li>
		<li>80</li>
		<li>80</li>
		
	</ul>
	
	<ul>
		<li>고고고</li>
		<li>90</li>
		<li>90</li>
		<li>90</li>
		
	</ul>
	
	
	

</div>

</body>
</html>

 

 

✨ CSS 코드

- box 너비, 마진 : width: 400px; margin: 30px auto;

💖 box ul 요소 : padding: 0; clear: both; 

- box ul 에 li 태그들에게 border 값 설정 / float : left 와 text-align: center 설정

<style type="text/css">
* { margin: 0; padding: 0; }

.box { width: 400px; margin: 30px auto; }

.box ul{ padding: 0; clear: both; }

.box ul > li {
	list-style: none;
	float: left;
	width: 90px;
	padding: 7px 5px;
	border-bottom: 1px solid #333;
	text-align: center;
}


.box ul:first-child li {
	border-top: 2px solid #333;
	background: #eee;
}

.box ul:first-child li {
	border-top: 2px solid #333;
	background: #eee;
}


</style>
💡 float: left; 를 설정하지 않으면, <ul> 의 <li> 태그 값들이 한 줄의 목록들로 주르륵 출력된다. (왼쪽 이미지처럼) float : left 되어 있으면, 이름 - 국어 - 영어 - 수학 주르륵 옆으로 붙는다.

💖 float left 만 주면, 너비에 따라 한 줄에 4개 보다 많은 <li> 태그 값들이 붙을 수 있다. 
그래서 .box ul{ padding: 0; clear: both; } 으로 새로운 <ul> 태그가 될 때 마다 clear:both 해주어 다음 줄에서 <li> 태그 값들이 이어지게 설정해야한다. 

 

 

 

 

 

 

 

'HTML' 카테고리의 다른 글

[HTML] 링크 관련 <a> <link> <iframe> 태그  (0) 2022.09.12
[HMTL] <nav> 태그와 <ul>, <li> 태그로 메뉴 만들기  (0) 2022.09.12
[HTML] valign 태그  (0) 2022.09.09
[HTML] border-spacing 태그  (0) 2022.09.09
[HTML] col / colgroup 태그  (0) 2022.09.08

블로그의 정보

개발자 미니민의 개발로그

mini_min

활동하기

티스토리툴바