728x90
반응형
body tag내 html을 통해 데이터 삽입하기
1. 이미지 삽입
기본 문법
<img src="[image_path]">
예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>step2</title>
</head>
<body>
<marquee direction="right">
<font size="6" color="green">~생일 축하합니다~</font>
<br><br>
<img src="cake.png">
</marquee>
<!-- pic directory 내의 iu.jpg 를 화면에 보여준다 -->
<img src="pic/iu.jpg">
</body>
</html>
- <marquee> tag : direction 옵션을 통해 위, 아래, 왼쪽, 오른쪽으로 텍스트 및 이미지를 움직이며 웹 페이지에 표현할 수 있다
- <font> tag : 글씨의 size 및 color 등의 옵션을 줄 수 있다.
- <img src = "image_path"> tag : img를 삽입할 수 있다.
* 이때 image_path는 html 파일을 중심으로 위치를 지정해야 한다.
2. 링크
기본 문법
<a href="[link대상 path 및 url주소]"> </a>
예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Link 연습(a tag)</title>
</head>
<body>
<a href="step1-hello.html">step1-hello 페이지로 이동</a><br><br>
<a href="pathtest/step3.html">step3 페이지로 이동</a><br><br>
<a href="http://daum.net">다음 페이지로 이동</a>
</body>
</html>
3. 목록 태그
- ol (ordered list) : 순서가 있는 리스트 태그
- ul (un-ordered list) : 순서가 없는 리스트 태그
- li : ol과 ul안에 있는 리스트 요소 태그
기본 문법
<ol>
<li>순서가 있는 리스트</li>
</ol>
<ul>
<li>순서가 없는 리스트</li>
</ul>
예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목록 태그 연습</title>
</head>
<body>
<h3>순서 있는 목록 연습</h3>
<ol>
<li>백반</li>
<li>라면</li>
<li>짬뽕</li>
</ol>
<br><br>
<h3>순서 없는 목록 연습</h3>
<ul>
<li>소주</li>
<li>와인</li>
<li>막걸리</li>
</ul>
</body>
</html>
4. table 태그
- table : 하나의 테이블을 생성
- tr : table의 한 행(row)를 표현
- td : table의 한 열(column)을 표현
기본 문법
<table border="1">
<tr>
<td>번호 </td>
<td>제목</td>
<td>작성자</td>
<td>조회수</td>
</tr>
예시 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table 연습</title>
</head>
<body>
<br><br>
<hr>
<br>
<table border="1">
<tr> <!-- table의 한 행 row를 표현 -->
<td>번호 </td> <!-- table의 데이터를 표현 -->
<td>제목</td>
<td>작성자</td>
<td>조회수</td>
</tr>
<tr>
<td>1</td>
<td>오후수업</td>
<td>불리언</td>
<td>355</td>
</tr>
<tr>
<td>2</td>
<td>오전수업</td>
<td>인티저</td>
<td>500</td>
</tr>
</table>
</body>
</html>
예시 2 - colspan / rowspan
- colspan="n" : 열 n개 합치기, td에서 n개의 영역만큼을 차지
- rowspan="n" : 행 n개 합치기, tr에서 n개의 영역만큼을 차지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table 연습1</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">자기소개</td>
</tr>
<tr>
<td>이름</td>
<td>피터</td>
</tr>
<tr>
<td rowspan = "3">특기</td>
<td>인형극</td>
</tr>
<tr>
<td>노래</td>
</tr>
<tr>
<td>코딩</td>
</tr>
</table>
</body>
</html>
728x90
반응형
'Java Web Programming > 1. HTML | CSS' 카테고리의 다른 글
| [CSS] CSS Position (relative, absolute) 한 방에 정리! (6) | 2021.02.02 |
|---|---|
| [CSS] CSS 기초 (selector, table, 링크 href, div/span) (0) | 2020.08.19 |
| [HTML] HTML 기본 개념 정리 (+Javascript, CSS, XML) (0) | 2020.08.18 |
