티스토리 뷰
* 이미지 삽입
- 이미지 삽입은 <img> 태그를 이용한다.
- 이미지가 저장된 파일 경로를 입력해줘야 이미지 파일을 찾을수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<!DOCTYPE html>
<html>
<head>
<title>이미지를 넣어봅시다</title>
<meta http-equiv="refresh" content ="5">
</head>
<body>
<h2 align="center">이미지 넣어버리기</h2>
<p align="center">
<img src="puppy.jpg">
</p>
</body>
</html> |
cs |
* 이미지 태그
-------------------------------------------------------------------------------------------------------------------------------------
* 상대경로, 절대경로
소스 코드를 짤때 파일에 있는 콘텐츠들을 삽입 및 인용할 필요가 있다. 이때, 소스에 있는 파일경로를 써줘야 할 때가 있는데, 상대경로와 절대경로를 구분하여 입력할 필요가 있다.
1. 절대경로
- 해당 웹 페이지나 파일이 갖고 있는 고유한 자기자신의 경로(위치)를 의미
- 웹 페이지는 http:// 가 포함되어 있다.
- 파일은 pc의 해당 위치 경로가 포함되어 있다.
- 절대경로를 이용하면 그곳으로 바로 이동하거나 파일 실행이 가능하다.
<img src="C:\Users\JERRY\Documents\내 문서\puppy.jpg">
|
1 |
<img src="http://jerryjerryjerry.tistory.com\images\puppy.jpg"> |
cs |
2. 상대경로
- 현재 폴더위치에서 경로를 인식하는 방법
- 즉, HTML 문서를 기준으로 경로를 인식하는 것이다.
- HTML 파일이 위치한 폴더를 기준으로 이미지 파일이 있는 경로를 나타내는 방법을 상대적인 경로라 한다.
- HTML 파일을 기준으로 같은 폴더, 하위 폴더, 상위 폴더에 있는 경우 파일 상대경로를 다르게 나타낼수 있다.
- HTML 문서와 이미지 파일이 같은 폴더에 있는 경우
|
1 |
<img src="puppy.jpg"> |
cs |
- 이미지 파일이 HTML 문서의 하위 폴더에 있는 경우
|
1 |
<img src="images/puppy.jpg"> |
cs |
- 이미지 파일이 HTML 문서의 상위 폴더에 있는 경우
|
1 |
<img src="../puppy.jpg"> |
cs |
- 이미지 파일이 HTML 문서의 상위 폴더의 다른 폴더에 있는 경우
|
1 |
<img src="../jerry/puppy.jpg"> |
cs |
-------------------------------------------------------------------------------------------------------------------------------------
* 표(TABLE) 만들기
- HTML로 표를 만들수 있다.
- <table></table> : HTML 문서에 표를 삽입
- <tr></tr> : <table> 태그 안에서 사용하며 한줄 표시
- <td></td> : <tr> 태그 안에서 사용하며 한칸을 표시
- <ht></th> : 테이블 내에 제목 줄을 표시
- <caption></caption> : 테이블 위쪽에 테이블 제목 표시
* <table> 태그 기능
* 테이블의 줄과 칸의 속성
-------------------------------------------------------------------------------------------------------------------------------------
* 예제 1 (간단한 table 만들기)
- 넓이가 400px, 높이가 250px인 2행 2열의 테이블을 만드시오
* 풀이
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<!DOCTYPE html>
<html>
<head>
<title>테이블 만들기</title>
</head>
<body vlink="blue">
<h2 align="left">초간단 테이블 만들기</h3>
<table width="400" height="250" border="1">
<tr><!-- 첫번째 줄 시작 -->
<td>첫번째 칸</td>
<td>두번째 칸</td>
</tr>
<tr><!-- 두번째 줄 시작 -->
<td>첫번째 칸</td>
<td>두번째 칸</td>
</tr>
</table>
</body>
</html> |
cs |
* 테이블 셀 병합
- colspan : 칸 병합, 몇칸을 병합 할 것인지 칸갯수 조절 가능
- rowspan : 줄 병합, 몇줄을 병합 할 것인지 줄갯수 조절 가능
-------------------------------------------------------------------------------------------------------------------------------------
* 예제 2 (간단한 table 만들기2)
- 아래의 그림을 보고 셀 병합을 이용하여 테이블을 만드시오
* 풀이
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54 |
<!DOCTYPE html>
<html>
<head>
<title>안녕</title>
<meta http-equiv="refresh" content ="5">
<style type="text/css">
tr{border-color: red;}
</style>
</head>
<body vlink="blue">
<h2 align="left">초간단 테이블 만들기</h3>
<table width="400" height="50" border="1">
<tr bgcolor="pink"><!-- 첫번째 줄 시작 -->
<td align="center" colspan="3" ><font color="white">오늘의 수입/지출</font></td>
</tr>
<tr onmouseover="this.style.background='skyblue'"
onmouseout="this.style.background='pink'"align="center">
<!-- 두번째 줄 시작 -->
<td>내용</td>
<td>수입</td>
<td>지출</td>
</tr>
<tr><!-- 두번째 줄 시작 -->
<td>월급!</td>
<td>1,000,000</td>
<td></td>
</tr>
<tr><!-- 두번째 줄 시작 -->
<td>점심값</td>
<td></td>
<td>5,000</td>
</tr>
<tr ><!-- 두번째 줄 시작 -->
<td>부모님선물</td>
<td></td>
<td>30,000</td>
</tr>
<tr ><!-- 두번째 줄 시작 -->
<td rowspan="3" bgcolor="skyblue" align="center">총계</td>
<td>수입</td>
<td>지출</td>
</tr>
<tr><!-- 두번째 줄 시작 -->
<td>1,000,000</td>
<td>35,000</td>
</tr>
<tr><!-- 두번째 줄 시작 -->
<td>남은 돈</td>
<td>965,000</td>
</tr>
</table>
</body> |
cs |
-------------------------------------------------------------------------------------------------------------------------------------
* 폼 양식 태그
- <form> : 모든 폼 양식태그는 반드시 <form> 태그 안에 위치해야 한다.
* 한줄 입력
- 키보드 및 입력장치를 이용하여 원하는 입력을 한 줄 넣을 수 있는 공간이다.
- <INPUT> 태그를 사용한다.
* 여러줄 입력
- 키보드 및 입력장치를 이용하여 원하는 입력을 여러 줄 넣을 수 있는 공간이다.
- <TEXTAREA> 태그를 사용한다.
* 라디오 버튼
- 동그란 원 모양으로 선택 가능한 인터페이스를 가지고 있다. 사용자가 입력값을 받기위해 사용한다.
- 하나만 선택 가능하다.
- 생김새 :
- 사용법 :
|
1 |
<input type="radio" name="banana" value="바나나">바나나 |
cs |
* 체크박스
- 네모난 모양으로 선택 가능한 인터페이스를 가지고 있다. 사용자가 입력값을 받기위해 사용한다.
- 다중 선택이 가능하다.
- 생김새 :
- 타입 : checkbox
- 사용법 :
|
1 |
<input type="checkbox" name="chk_info" value="HTML">HTML |
cs |
* 드랍다운 리스트와 리스트 상자 만들기
- 기본 수직으로 리스트를 펼쳐 입력값을 받을수 있다.
- 생김새 :
- 사용법 :
|
1
2
3
4
5 |
<select id="fontColor">
<option value="red">빨강</option>
<option value="green">초록</option>
<option value="blue" >파랑</option>
</select> |
cs |
* 전송버튼, 입력취소 버튼
- <INPUT> 태그를 사용하여 만들며, Type 특성에 따라 서로 다른 버튼이 된다.
- 생김새 :
- 사용법 :
|
1
2 |
<input type="submit" value="회원 가입" href="mailto:jerry495@naver.com?subject=회원가입 되었습니다.">
<input type="reset" value="다시 입력"> |
cs |
'Web > HTML & CSS' 카테고리의 다른 글
| [HTML]HTML의 이해 (0) | 2018.04.04 |
|---|---|
| [HTML]회원가입창 만들기 (0) | 2018.04.04 |