1. 텍스트(text) 태그
(1) h1 ~ h6 태그
- 머리말(제목 or 주제) 태그
(2) br 태그
<br>줄 바꿈
(3) strong 태그
<strong> </strong>글자 강조
(4) font
- 현재는 잘 사용하지 않음
(5) hr
<hr/>줄긋기
💡 예시
<h1>안녕하세요.HTML</h1>
<h2>안녕하세요.HTML</h2>
<h3>안녕하세요.HTML</h3>
<h4>안녕하세요.HTML</h4>
<h5>안녕하세요.HTML</h5>
<h6>안녕하세요.HTML</h6>
<hr/>
오늘의 테스트<br><strong> 테스트 </strong> 페이지
<hr/>
<font size="8" color="powderblue">Hello</font>world!!!
<hr/>💡 결과
2. 하이퍼링크 태그
<a href="http://www.naver.com"
target="_blank"
title="네이버에 접속" >네이버</a>(1) a 태그
<a> </a>: 브라우저 관련 태그
(2) href 태그
<a href=""> </a>: ""안에 주소 넣고 , <> 사이에 하이퍼링크 걸 글자 넣기
(3) target="_blank"
- 새 창에서 열기
(4) title="네이버에 접속"
- 커서 대면 설명 출력
💡 결과
3. 목록 태그
<body>
<h3>순서있는 목록</h3>
<ol>
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트</li>
<li>속성 리스트</li>
</ol>
<hr/>
<h3>순서없는 목록</h3>
<ul>
<li>JAVA</li>
<li>JSP</li>
<li>DBMS</li>
<li>HTML</li>
</ul>
<hr/>
<h3>중첩 목록</h3>
<ul>
<li>
목록(1)
<ul>
<li>목록 1-1</li>
<li>목록 1-2</li>
</ul>
</li>
<li>
목록(2)
<ul>
<li>목록 2-1</li>
<li>목록 2-2</li>
</ul>
</li>
</ul>
</body>
(1) ul 태그
<ul> </ul>순서가 없는 목록 태그
(2) ol 태그
<ol> </ol>순서가 있는 목록 태그
(3) li 태그
<li> </li>목록의 내용
💡 결과
4. 이미지 태그
<img src ="puppy.jpg" width = "200" height = "300"
alt = "강아지 이미지" title = "강아지 사진"/>(1) img src
img src ="저장된 img 이름.확장자명"
(2) width height
- 넓이, 높이
(3) alt
- 강아지 이미지가 뜨지 않으면 글로 표기
(4) title
- 커서 대면 설명 출력
💡 결과
5. table(표) 태그
<body>
<table border="2" width="300" align="center">
<thead>
<tr>
<th colspan="2" align="center">획득포인트</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td rowspan="2">G획득</td>
<td>루비 결제 5000G</td>
</tr>
<tr align="center">
<td>가입 축하 10000G 지급</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>합계</th>
<th>15000G</th>
</tr>
</tfoot>
</table>
</body> (1) table 태그
<table> </table>표 만들기 시작<table border="2" width="300" align="center">- border 표 선 두께
- width 표 넓이
- align 표 내부 글자 위치
- center, right, left 가능
(2) tr / td 태그
tr 안에 td 위치
tr테이블 행
td테이블 열
(3) 테이블의 위치 고정
- 소스 내에서 요소 위치 바뀌어도 테이블 위치는 안 변함
thead테이블의 헤드th제목 볼드tbody테이블 바디, 본문tfoot표에서 가장 아래
(4) 가로 or 세로 합치기
colspan가로 합치기rowspan세로 합치기
💡 결과
안녕하세요, 한보람입니다.