My space: html

레이블이 html인 게시물을 표시합니다. 모든 게시물 표시

2018년 1월 11일 목요일

HTML 특수문자

< stands for the less-than sign ( < )
> stands for the greater-than sign ( > )
≤ stands for the less-than or equals sign ( <= )
≥ stands for the greater-than or equals sign ( >= )

2016년 7월 20일 수요일

[html] dl dt dd 태그

출처: http://aboooks.tistory.com/211

[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>태그를 배워 보았습니다.

2016년 7월 19일 화요일

[html] ul ol dl li 태그 차이점

http://aboooks.tistory.com/210

[html/css]목록을 만드는 <ul> <ol> <li>태그

목록을 만드는 방법은 아래 세 가지가 있습니다

<ol>태그는 ordered list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만드는 데 사용합니다

<ul>태그는 unordered list의 약자로, 순서가 필요 없는 목록을 만듭니다

<dl>태그는 definition list의 약자로, 사전처럼 용어를 설명하는 목록을 만듭니다.

<ol>과 <ul>의 각 항목들을 나열할 때는
<li> 태그를 사용하는데 list item의 약자입니다.

▶사용 예

<ul>

</ul>

-->위 주소를 참고하면 되고 ol 의경우만 번호를 자동으로 매길 수 있는 기능이 있다

<h4>Ordered List</h4>
<ol type="I">
<li>영어</li>
<li>음악</li>
<li>수학</li>
<li>과학</li>
</ol>