본문 바로가기

웹 개발/HTML

[Web_HTML] 03

내용을 명령어로 인식하지 못하도록 하는 문법

1. < : &lt; (less than)

 

2. > : &gt; (greater than)

 

3. & : &amp; (ampersand)

 

4. " : &quot; (quotation)

 

5. 공백 : &nbsp;

 

 

 

 리스트 태그

1. 순서가 없는 리스트

- <ul> 태그 안에 <li> 태그 사용

- ul : unordered list

- li : list

(ex)

<ul>

<li>텍스트1</li>

<li>텍스트2</li>

<li>텍스트3</li>

</ul>

 

2. 순서가 있는 리스트

- <ol> 태그 안에 <li> 태그 사용

- ol : ordered list

- li : list

(ex)

<ol type="값" start="값">

<li>텍스트1</li>

<li>텍스트2</li>

<li>텍스트3</li>

</ol>

 

 

 

※ 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>
	<h2>리그 오브 레전드란?</h2>
	<p>세계 최고의  MOBA&lt;Multiplayer Online Battle Arena&gt;게임입니다.</p>
	<p>끝없이 이어지는 실시간 전투와 협동을 통한 팀플레이,</p>
	<p>&quot;RTS&quot;와 <q>RPG</q>를 하나의 게임에서 동시에 즐길 수 있는 새로운 장르의 온라인 게임입니다.</p>
	<br>
	<br>
	<p>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		지나친 게임은 건강에 해롭습니다.
	</p> 
</body>
</html>

 

결과

 

 

 

 

실습(리스트 태그(1))

1. 문제에서 주어진 대로 출력하기

- 문제

<!--
   제9조(서비스 이용시간)
      ●서비스 이용시간은 당 사이트의 업무상 또는 기술상 특별한 지장이 없는 한 연중무휴, 1일 24시간을 원칙으로 합니다.
      ●제1항의 이용시간은 정기점검 등의 필요로 인하여 당 사이트가 정한 날 또는 시간은 예외로 합니다.
   
   제2조(개인정보의 처리 및 보유기간)
   
   "정부24"에서 처리하는 개인정보는 수집·이용 목적으로 명시한 범위 내에서 처리하며, 개인정보보호법 및 관련 법령에서 정하는 보유기간을 준용하여 이행하고 있습니다.
   
   1.정부24 회원정보
      ●수집근거 : 정보주체의 동의, 전자정부법 시행령 제90조
      ●보유기간 : 탈퇴 후 5일까지
   2.전자민원 신청이력(상담이력 포함)
      ●수집근거 : 정보주체의 동의, 전자정부법 시행령 제90조
      ●보유기간 : 3년 
-->

 

 

- 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트 태그</title> 
</head>
<body>
	<h3>제9조(서비스 이용 시간)</h3>
	<ul>
		<li>
			서비스 이용시간은 당 사이트의 업무상 또는 기술상 특별한 지장이 없는 한 연중무휴, 1일 24시간을 원칙으로 합니다.
		</li>
		<li>
			제1항의 이용시간은 정기점검 등의 필요로 인하여 당 사이트가 정한 날 또는 시간은 예외로 합니다.
		</li>
	</ul>
	
	<h3>제2조(개인정보의 처리 및 보유기간)</h3>
	<ul>
		<li style="list-style:none">
			"정부24"에서 처리하는 개인정보는 수집·이용 목적으로 명시한 범위 내에서 처리하며, 개인정보보호법 및 관련 법령에서 정하는 보유기간을 준용하여 이행하고 있습니다.
		</li>
	</ul>

	<ol type="1">
		<li>
			정부24 회원정보
			<ul style="list-style:disc">
				<li>수집근거 : 정보주체의 동의, 전자정부법 시행령 제90조</li>
				<li>보유기간 : 탈퇴 후 5일까지</li>
			</ul>
		</li>
		<li>
			전자민원 신청이력(상담이력 포함)
			<ul style="list-style:disc">
				<li>수집근거 : 정보주체의 동의, 전자정부법 시행령 제90조</li>
				<li>보유기간 : 3년</li>
			</ul>
		</li>
	</ol>
</body>
</html>

 

 

 

 

실습(리스트 태그(2))

1. 문제에서 주어진 대로 출력하기

- 문제

<!--
   제16조(회원의 의무)
   II. 회원은 당 사이트의 사전 승낙 없이 서비스를 이용하여 어떠한 영리행위도 할 수 없습니다.
   IV. 회원은 당 사이트 서비스 이용과 관련하여 다음 각 호의 행위를 하여서는 안됩니다.
      a. 다른 회원의 ID를 부정 사용하는 행위
         b. 범죄행위를 목적으로 하거나 기타 범죄행위와 관련된 행위   
-->

 

 

- 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트 태그 - 실습</title>
</head>
<body>
	<h3>제16조(회원의 의무)</h3>
	<ol type="I" start="2">
		<li>회원은 당 사이트의 사전 승낙 없이 서비스를 이용하여 어떠한 영리행위도 할 수 없습니다.</li>
		<li value="4">회원은 당 사이트 서비스 이용과 관련하여 다음 각 호의 행위를 하여서는 안됩니다.</li>
		<ol type="a">
			<li>다른 회원의 ID를 부정 사용하는 행위</li>
			<li>범죄행위를 목적으로 하거나 기타 범죄행위와 관련된 행위 </li>
		</ol>
	</ol>
</body>
</html>

 

 

 

'웹 개발 > HTML' 카테고리의 다른 글

[Web_HTML] 06  (0) 2022.04.18
[Web_HTML] 05  (0) 2022.04.17
[Web_HTML] 04  (0) 2022.04.16
[Web_HTML] 02  (0) 2022.04.14
[Web_HTML] 01  (0) 2022.04.13