● 내용을 명령어로 인식하지 못하도록 하는 문법
1. < : < (less than)
2. > : > (greater than)
3. & : & (ampersand)
4. " : " (quotation)
5. 공백 :
● 리스트 태그
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<Multiplayer Online Battle Arena>게임입니다.</p>
<p>끝없이 이어지는 실시간 전투와 협동을 통한 팀플레이,</p>
<p>"RTS"와 <q>RPG</q>를 하나의 게임에서 동시에 즐길 수 있는 새로운 장르의 온라인 게임입니다.</p>
<br>
<br>
<p>
지나친 게임은 건강에 해롭습니다.
</p>
</body>
</html>
![](https://blog.kakaocdn.net/dn/bwf0RO/btrzi1R42CP/UbfUkT4KTy3MEfz4Df3Mi1/img.png)
실습(리스트 태그(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 |