프런트엔드-HTML

HTML 구조 설계

강사: 최퍼블리셔 · 작성자: 이종춘 · 작성일: 2026-03-30 11:58:49 · 조회수: 16

리스트태그 정리
목록으로
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 300vh;
}
</style>
</head>
<body>
<!--
*리스트 태그
=>목록을 작성 할 때 사용 하는 태그
1. 순서가 없는 목록
=>기호가 붙어서 표현됨
=>ul, li 태그를 사용함

2. 순서가 있는 목록
=>ol, li 태그 사용

*부모 자식 관계
=>태그를 감싸는 태그를 부모 태그
=>부모 태그 안에 있는 태그를 자식 태그
=>부모 태그에 속성을 적용하면 자식태그는 그 속성을 상속 받음 -->



<h2>순서가 없는 목록 ul, li 태그</h2>
<ul>
<li type="disc">기본값, 속이 채워진 원형</li>
<li type="circle">테두리 원형</li>
<li type="square">사각형</li>
<li type="none">기호 없음</li>
</ul>

<ul type="square">
<li>리스트 태그</li>
<li>리스트 태그</li>
<li>리스트 태그</li>
<li>리스트 태그</li>
</ul>


<h2>순서가 있는 목록 ol, li 태그</h2>
<ol>
<li type="1">숫자로 목록 표현</li>
<li type="a">소문자 알파벳으로 표현</li>
<li type="A">대문자 알파벳으로 포현</li>
<li type="i">로마 소문자로 표현</li>
<li type="I">로마 대문자로 표현</li>
</ol>

</body>
</html>
#리스트태그

첨부 파일

0개
첨부된 파일이 없습니다.

댓글 / 답글

0개
댓글을 작성하려면 로그인하세요.
아직 댓글이 없습니다.