본문 바로가기
웹코딩 배우기/· HTML

HTML 목록 2

by 닐기 2019. 10. 15.

* 설명 목록 <dl><dt><dd>

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p style="font-size: 300%;">우리집 반찬</p>

<dl>
	<dt>-단백질</dt>
		<dd>콩</dd>
		<dd>두부</dd>
	<dt>-채소</dt>
		<dd>콩</dd>
		<dd>두부</dd>
	<dt>-지방</dt>
		<dd>참기름</dd>
		<dd>식용유</dd>
</dl>

<p style="font-size: 300%; color: gray;">삼겹살 먹고 싶읍니다....ㅜㅜ</p>

</body>
</html>

우리집 반찬

-단백질
두부
-채소
두부
-지방
참기름
식용유

삼겹살 먹고 싶읍니다....ㅜㅜ

 

이 태그는 딱히 그냥 들여 쓰기 하면 될 것 같은데요? 그지? =-=? 그냥 살짝 이런 것도 있구나 하고 넘어간다.

* 자동 카운팅 되는 순서 있는 목록 start="" 

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div style="border: 1px solid gray; padding: 10px;">

<p style="font-size: 300%;">우리집 반찬</p>

<ol start="1">
	<h2>밥</h2>
	<li>콩밥</li>
	<li>햇반</li>
	<li>꽁꽁언 콩밥</li>
</ol>

<ol type="a" start="1">
	<h2>반찬</h2>
	<li>두부</li>
	<li>참치캔</li>
	<li>야채참치캔</li>
</ol>

<ol type="1" start="1">
	<h2>국물</h2>
	<li>짠국</li>
	<li>싱거운 찌개</li>
	<li>라면 국물</li>
	<li>삼밥사면 주는 국물</li>
</ol>

<p style="font-size: 300%; color: gray;">ㅜㅜ</p>

</div>
</body>
</html>

우리집 반찬

  1. 콩밥
  2. 햇반
  3. 꽁꽁언 콩밥

반찬

  1. 두부
  2. 참치캔
  3. 야채참치캔

국물

  1. 짠국
  2. 싱거운 찌개
  3. 라면 국물
  4. 삼밥사면 주는 국물

ㅜㅜ

start 태그를 이용하면 목록에 자동으로 번호나 순서가 달린다.

시작 번호는 마음대로 정하면 된다. start="44" 이런식으로~

기본은 숫자고 type 이용해서 다른 순서도 쓸 수 있다.