- 서식 태그
물리적 모양을 지정하는 태그
| 종류 | 의미 |
| <strong> <b> | 진하게 |
| <em> <i> | 기울이기 |
| <mark> | 형광 처리 |
| <del> | 가로줄 (중간) |
| <ins> | 밑줄 |
| <sup> <sub> | 위첨자, 아래첨자 |
서식 태그 사용 해보기!
<head>
<meta charset="UTF-8">
<title>1_formatTest</title>
</head>
<body>
<p>
<strong>strong 태그는 중요한 글자를 굵게 만든다.</strong><br>
<b>b 태그는 글자를 단순히 굵게 만든다.</b>
</p>
<p>
<em>em 태그는 중요한 글자를 이탤릭체로 표현한다.</em><br>
<i>i 태그는 단순히 글자를 이탤릭체로 표현한다.</i>
</p>
<p>
<mark>mark 태그는 글자를 하이라이팅 처리한다.</mark>
</p>
<p>
<del>del 태그는 글자 중간에 가로줄을 그어서 표현한다.</del><br>
<ins>ins 태그는 글자 아래쪽에 밑줄을 그어서 표현한다.</ins>
</p>
<p>
x<sup>2</sup>+2x+1<br> <!-- sup : 위 첨자, sub : 아래 첨자 -->
H<sub>2</sub>0
</p>
</body>
- 리스트 태그
1. 순서가 없는 리스트
<ul>
<li>내용1</li>
<li>내용2</li>
...
</ul>
2. 순서가 있는 리스트
<ol type="" start="">
<li>내용1</li>
<li>내용2</li>
...
</ol>
type
1 : 숫자 (1,2,3,....)
a : 알파벳 소문자 (a,b,c,....)
A : 알파벳 대문자 (A,B,C,...)
i : 로마 숫자 소문자 (i,ii,iii,...)
I : 로마 숫자 대문자 (I,II,III,...)
리스트 태그 사용 해보기!
<head>
<meta charset="UTF-8">
<title>2_list</title>
</head>
<body>
<h3>제 9조 (서비스 이용시간)</h3>
<ul>
<li> 서비스 이용시간은 당일 09시 부터 ~~ </li>
<li> 제 1항의 이용시간은 ~~~~` </li>
</ul>
<h3>전래동화 속 주인공 목록</h3>
<ol type="i" start="1">
<li>홍길동</li>
<li>심청</li>
<li>콩쥐</li>
</ol>
</body>
3. 정의 리스트
<!-- 용어와 그에 대한 정의를 모아놓은 리스트 -->
dt : definition term
dd : definition description
<dl>
<dt>제목1</dt>
<dd>내용1</dd>
<dd>내용2></dd>
...
<dt>제목2</dt>
...
</dl>
정의 리스트 사용해보기!
<head>
<meta charset="UTF-8">
<title>3_definition</title>
</head>
<body>
<h2>아리</h2>
<dl>
<dt>스킬</dt>
<dd>Q : 현혹의 구슬 </dd>
<dd>W : 여우불 </dd>
<dd>E : 매혹</dd>
<dd>R : 혼령질주</dd>
<dt>평가</dt>
<dd>아주 수려한 외모로 티어를 유지하는 챔피언</dd>
<dd>트런들 외모였으면 100티어정도 되는 성능</dd>
</dl>
</body>
- HTML 파일 배포 및 적용
배포 (export)
배포할 프로젝트 선택 후 우클릭 → export → war 파일 클릭 후 → destination 설정 → 톰캣 9.0 인지 확인
→ export source file (자바 파일이 있는 경우) → finish 클릭
파일 적용 (import)
우클릭 import → war file 선택 후 배포한 파일 선택 → finish
'WEB > HTML,CSS' 카테고리의 다른 글
| DAY 06 : 테이블, 병합, 캡션, thead, tbody, tfoot (0) | 2022.01.17 |
|---|---|
| DAY 05 : void 요소, 이미지 태그, 하이퍼 링크 (2) | 2022.01.13 |
| DAY 03 : 웹 표준, HTML, .... (0) | 2022.01.10 |
| DAY 02 : 인코딩, HTML, CSS, JavaScript (0) | 2022.01.10 |
| DAY 01 : 웹(WEB) (0) | 2022.01.06 |