(42) [HTML] 3일 HTML List, Links 태그

목록 태그

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

순서가 있는 목록 태그. <ol> 태그는 순서 있는 목록을 정리하고 싶을때 사용되는 태그로 타입을 정할 수 있다. <li> 태그와 함께 사용되며 <ol> 태그는 정렬된 목록을 선언하고,<li> 태그는 각 목록 항목을 선언한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h3>ol 태그 - 번호가 붙는 목록</h3>

	<ol>
		<li>자바</li>
		<li>스프링</li>
		<li>안드로이드</li>
		<li>오라클</li>
		<li>자바스크립트</li>
	</ol>
	<hr>

	<ol style="list-style-type: upper-alpha;" start="11">
		<li>자바</li>
		<li>스프링</li>
		<li>안드로이드</li>
		<li>오라클</li>
		<li>자바스크립트</li>
	</ol>
	<hr>

	<ol style="list-style-type: upper-roman;">
		<li>자바</li>
		<li>스프링</li>
		<li>안드로이드</li>
		<li>오라클</li>
		<li>자바스크립트</li>
	</ol>
	<hr>


</body>
</html>

정렬되지 않은 목록 태그. <ul> 태그는 <ol> 태그와는 달리 순서가 없는 목록을 정리할 때 사용한다. <li> 태그와 함께 사용하여 목록 리스트를 보여줄 수 있다.

목록 항목 태그 . 목록 항목을 나타내는 대그로 자동 줄 바꿈을 하고 들여쓰기를 한다. 종료 태그는 선택적이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

	<h3>ul 태그 - 번호가 붙지 않는 태그</h3>

	<ul>
		<li>자바</li>
		<!-- 기본 기호 : disc(채운원) -->
		<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>

	<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>
	
	<!--padding:0은 불릿이 없어지는것으로 보이지만 없어지는것은 아니며 맥등에서는 약간 보임 -->>
	<!-- 블릿을 없애는 방법은 style="list-style: none;"> -->>
	<ul style="padding: 0;">
		<li>자바</li>
		<li>스프링</li>
		<li>안드로이드</li>
		<li>오라클</li>
		<li>자바스크립트</li>
	</ul>
	<hr>
</body>
</html>

list-style-type

목록 단추 설명 번호 있는 목록에서 번호 형태나 번호 없는 목록에서 단추 타입을 지정한다.

Links 태그

앵커태그. a요소는 페이지에서 다른 페이지로 이동하는데 사용되며 하이퍼링크라고 함.

href: 이동할 URL을 지정
target 이동시 사용되는 콘텍스트 이름이나 키워드 지정

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>a 태그 </h3>


<p>
	<!-- 현재 브라우저 창에 표시-->
	<a href ="web1.html">HTML</a>
	<a href ="web2.html">CSS</a>
</p>


<p>
	<!-- 새로운 창에 표시 -->
	<a href="https://www.naver.com" target="_blank">네이버</a>
</p>
<hr>

<p>
	<a href="12.png"type="image/png">12</a>
</p>





</body>
</html>

'💻 > HTML' 카테고리의 다른 글

(42) [HTML] 3일 HTML 폼 태그 (0)	2024.04.16
(41) [HTML] 2일 HTML 테이블 레이아웃 (0)	2024.04.15
(41) [HTML] 2일 HTML 레이아웃 (1)	2024.04.12
(40) [HTML] 1일 HTML 레이아웃 (0)	2024.04.11
(40) [HTML] 1일 HTML 기본 (0)	2024.04.11

Power Up!

(42) [HTML] 3일 HTML List, Links 태그

목록 태그

<ol>~</ol>

<ul>~</ul>

list-style-type

Links 태그

<a>~</a>

'💻 > HTML' 카테고리의 다른 글

티스토리툴바

(42) [HTML] 3일 HTML List, Links 태그

목록 태그

<ol>~</ol>

<ul>~</ul>

list-style-type

Links 태그

<a>~</a>

'💻 > HTML' 카테고리의 다른 글

관련글

티스토리툴바