1. HyperLink (and other tags)
[1] HyperLink
1) 형태
<a href = "> </a>
2) 예시
<a href = "www.naver.com">naver</a>[2] hr
1) 형태
<hr/>
2) 예시
<p>hello</p>
<hr/> <!-- hello 구문과 bye 구문 사이의 분리선을 추가한다.-->
<p>bye</p>2. Special Characters
[1] strong
1) 형태
<strong> {컨텐츠} </strong>
2) 예시
<p><strong>hello</strong> world</p>
<!--hello world 구문에서 hello만 굵게 처리하여 강조한다. -->[2] del, ins
1) 형태
<del> {컨텐츠} </del>
<ins> {컨텐츠} </ins>
2) 예시
<p><del>hello</del> world</p>
<!--hello world 구문에서 hello만 delete 처리하여 표시한다. -->
<p><ins>hello</ins> world</p>
<!--hello world 구문에서 hello만 밑줄 처리하여 표시한다. -->[3] sup, sub
1) 형태
<sup> {컨텐츠} </sup>
<sub> {컨텐츠} </sub>
2) 예시
<p>3.14 * 10<sup>2</sup></p>
<!--10의 윗첨자로 2가 표시된다.. -->
<p>Only <sub>one</sub></p>
<!--Only 아랫첨자로 one이 표시된다. -->[4] etc
<b>: bold text<i>: italic text<em>: Emphasized text (주위 텍스트에 비해 문맥적으로 중요한 내용을 강조, itliac과 동일하게 기울여진채 표시)<mark>: Marked text
3. List
[1] Description List (정의형 목록)
1) 종류 및 의미
<dl>...</dl>: description list(설명, 서술 목록)
: 제목과 설명이 한쌍인 설명, 정의 목록을 만드는 태그이다.<dt>...</dt>: description term(용어의 제목)
: 제목을 나타내는 태그이다.- 줄바꿈 기능이 있다.
<dd>...</dd>: description details(용어 설명)
: 제목에 대한 설명을 나타내는 태그이다.- 줄바꿈 기능 있다
2) 예시
(1) 코드
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>-black hot drink</dd>
<dt>Milk</dt>
<dd>- White cold drink</dd>
</dl>
</body>
</html>(2) 결과
[2-1] UnorderList
: 순서가 없는 List
1) 형태
<ul>
<li></li>
<li></li>
<li></li>
</ul>2) 예시
(1) 코드
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List</h2>
<ul>
<li>apple</li>
<li>banana</li>
<li>strawberry</li>
</ul>
</body>
</html>(2) 결과
3) list-style-type
: <ul> 태그의 style 속성으로 사용한다.
- disc : 기본값이며, 채워진 원형 기호(●)가 표시된다.
- circle : 채워지지 않은 원형 기호(○)가 표시된다.
- square : 채워진 사각형 기호(■)가 표시된다.
- none : 목록 앞에 아무런 기호가 표시되지 않는다.
[2-2] OrderList
: 순서가 있는 List
1) 형태
<ol>
<li></li>
<li></li>
<li></li>
</ol>2) 예시
(1) 코드
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List</h2>
<ol>
<li>apple</li>
<li>banana</li>
<li>strawberry</li>
</ol>
</body>
</html>(2) 결과
3) type 속성
: <ol> tag의 type 속성으로 사용할 수 있다. (order의 type을 지정)
- type="1": 숫자로 된 목록(1, 2, 3, ...)을 사용한다.
- type="A": 대문자 알파벳(A, B, C, ...)으로 된 목록을 사용한다.
- type="a": 소문자 알파벳(a, b, c, ...)으로 된 목록을 사용한다.
- type="I": 로마 숫자로 된 대문자 목록(I, II, III, ...)을 사용한다.
- type="i": 로마 숫자로 된 소문자 목록(i, ii, iii, ...)을 사용한다.
4. Table
[1] table
1) 형태
<table>
<caption>캡션</caption>
<thead>
<tr>
<td>헤드1</td>
<td>헤드2</td>
<td>헤드3</td>
</tr>
</thead>
<tbody>
<tr>
<td>바디1</td>
<td>바디2</td>
<td>바디3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>푸터1</td>
<td>푸터2</td>
<td>푸터3</td>
</tr>
</tfoot>
</table>
[2] rowspan, colspan
1) 의미
rowspan: 셀을 세로로 병합할 때 사용.colspan: 셀을 가로로 병합할 때 사용.
2) 형태 및 예시
(1) 코드
<table border="1">
<tr>
<td rowspan="2">Rowspan</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2">Colspan</td>
</tr>
</table>(2) 결과 화면
[3] style
1) border
: 테두리 스타일을 설정하는 속성.
2) border-collapse
: 테이블의 경계를 하나로 합칠 때 사용 (collapse)하거나, 셀 간격을 유지할 때 사용 (separate).
안녕하세요, 사용자들의 문제 해결을 중심으로 하는 프론트엔드 개발자입니다. 티스토리로 전환했어요 : https://pangil-log.tistory.com