[html/css]목록을 만드는 <dl><dt><dd> 태그
<dl>태그는 definition list(정의 목록)의 약자로, 사전처럼 용어 목록을 만듭니다.
<dt>는 definition term(정의 용어)의 약자로, 정의되는 용어의 제목을 넣을 때 사용합니다.
<dd>는 definition description(정의 설명)의 약자로, 용어를 설명하는 데 사용합니다.
html/css
|
<html>
<head> <style> body{background: #CEF279;} h2{color:#997000;} </style> </head>
<body>
<h2>Definition List</h2>
<dl> <dt>google</dt> <dd>verb. to search for something on the Internet using the Google™ search engine</dd> <dt>Google</dt> <dd>Google is an American multinational corporation specializing in Internet-related services and products.</dd> <dt>Google Chrome</dt> <dd>Google Chrome is a freeware web browser developed by Google</dd> </dl>
</body>
</html> |
▶실행화면
Definition List
google
verb. to search for something on the Internet using the Google™ search engine
Google
Google is an American multinational corporation specializing in Internet-related services and products.
Google Chrome
Google Chrome is a freeware web browser developed by Google
<dd>를 사용하면 자동으로 들여쓰기가 되는데요.
들여쓰기 거리를 조절하려면 text-indent 속성이나 margin-left, padding-left 값으로 조절하는 방법이 있습니다.
예: dd{text-indent: 20px;}
dd{margin-left: 20px;}
오늘은 사전처럼 용어에 대한 목록을 만들 때 사용하는 <dl> <dt> <dd>태그를 배워 보았습니다.
댓글 없음:
댓글 쓰기