오봉이와 함께하는 개발 블로그
목록태그 본문
728x90
FrontEnd_day1 정리 (2021.12.02 목요일)
목록 태그
- 기본 목록
- <ul> : 순서가 없는 목록
- type
- disc : 검은 원(기본 값)
- circle : 흰 원
- square : 사각형
- type
- <ol> : 순사가 있는 목록
- type
- 1 : 숫자(기본 값)
- a : 영어 소문자
- A : 영어 대문자
- i : 소문자 로마 숫자
- I : 대문자 로마 숫자
- start="n" : n번부터 시작
- type="@@@" reversed : 역순으로 표시
- type
- <li> : 목록 내 각 항목을 적을 때 사용
- <ul> : 순서가 없는 목록
- 정의 목록
- <dl>, <dt>, <dd>
목록 태그 예제
- list.html
<body>
<ul type="disc"> <!-- 검은 동그라미(기본 값) -->
<li>javascript/jquery</li>
<li>web</li>
<li>internet</li>
</ul>
<ul type="circle"> <!-- 빈 동그라미 -->
<li>water</li>
<li>coke</li>
<li>beer</li>
</ul>
<ul type="square"> <!-- 검은 네모 -->
<li>asdas</li>
<li>dasdasdas</li>
<li>asdasdadx</li>
</ul>
<hr>
<hr>
<ol type="1">
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
</ol>
<ol type="a">
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
</ol>
<ol type="A">
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
</ol>
<ol type="i">
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
</ol>
<ol type="I">
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
</ol>
<ol type="A" reversed>
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
</ol>
<ol start="5">
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
</ol>
<hr>
<hr>
</body>
- listprac.html
<body>
<h3>컴퓨터 관련 보유 기술</h3>
<ul>
<li>프로그래밍</li>
<ul type="circle">
<li>웹 프로그래밍</li>
<ol>
<li>JSP/Serverlet</li>
<li>HTML/JavaScript/jQuery</li>
</ol>
</ul>
<ul type="circle">
<li>모바일 프로그래밍</li>
<ol>
<li>Java</li>
<li>안드로이드</li>
</ol>
</ul>
</ul>
<ul>
<li>웹 및 모바일 디자인</li>
<ol>
<li>포토샵</li>
<li>illustrator</li>
<li>HTML5/CSS3</li>
</ol>
</ul>
<ul>
<li>데이터 베이스</li>
<ol>
<li>Mysql</li>
<li>MS SQL Server</li>
<li>Oracle</li>
</ol>
</ul>
</body>
728x90
Comments