[22]HTML

작성일 | In

HTML

HTML 기본문법

  • 태그(tag)는 대소문자 구분하지 않는다.
  • 태그는 <>안에서 표현한다
  • 여는태그와 닫는태그로 구성된다.
  • 엔터를 허용하지 않는다.(줄바꿈)
  • 공백은 1칸만 허용한다.
  • 본문에 내용을 출력할때 body 
    1
    <!-- 주석 -->

글자모양

  • 2바이트 언어표현
    • euc-kr : 완성형
    • utf-8 : 조합형
  • 특수문자 입력
1
2
3
4
5
6
&nbsp; > 공백문자 (스페이스)
&quot; > "
&amp;  > &
&lt;	 > <
&gt;	 > >
&copy; > ⓒ
  • 수평선
1
<hr>
  • 글자 진하게,밑줄, 기울임 태그
1
<strong><u><i>진하게,밑줄,기울임</i></u></strong>

링크

  • 다른페이지 연결
1
<a href="경로명+웹페이지명 또는 URL">문자열</a>
  • 같은 페이지내에서의 문서연결(북마크)
1
2
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
  • 맨위로 하이퍼링크를 생성해 홈페이지 맨 위로 가기.
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>03_링크.html</title>
 </head>
 <body>
  
<h1  id="top">맨꼭대기</h1>

	<h2>Chapter 1</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 2</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 3</h2>
	<p>This chapter explains ba bla bla</p>

	<h2 id="C4">Chapter 4</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 5</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 6</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 7</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 8</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 9</h2>
	<p>This chapter explains ba bla bla</p>

	<h2 id="C10">Chapter 10</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 11</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 12</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 13</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 14</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 15</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 16</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 17</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 18</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 19</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 20</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 21</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 22</h2>
	<p>This chapter explains ba bla bla</p>

	<h2>Chapter 23</h2>
	<p>This chapter explains ba bla bla</p>


	<p><a href="#top">맨위로</a></p>

	

 </body>
</html>

이미지

  • .jpg .gif .png
1
<img src="경로명+파일명">
  1. 상대경로(현재문서가 저장되어 있는 폴더를 기준으로)
    • ../images >상위폴더 images
    • ../../images >상위의 상위폴더 images
    • ./images >현재폴더 안에 있는 하위폴더 images
    • images/ >현재폴더 안에 있는 하위폴더 images
  2. 절대경로(홈디렉토리root부터 시작)
    • /images
  • 이미지에 링크하기
1
2
3
<a href="../images/k7.png">
    <img src="../images/bt_login.gif">
</a>

동영상

  • .mp4 .avi .mp3 .ram
1) old 버전
1
2
3
<embed src="../music/candy.mp3">
<hr>
<embed src="../music/videoplayback.mp4" width="350" height="200">
2) HTML5 버전
1
2
3
4
<audio autoplay controls>
    <source src="../music/candy.mp3">
</audio>
<!-- <audio /> 열고닫는태그를 이렇게 같이 쓸 수 있음. 간혹 안 먹힐 때도 있다고함. -->

1
2
3
4
5
6
<video 
    width="300"
    height="350" 
    poster="../music/candy.jpg" controls>
    <source src="../music/candy.mp3">
</video>

iframe

  • 주로 약관동의
1
2
3
4
5
약관동의<br>
<iframe 
src="04_이미지.html" 
width="400" 
height="200"></iframe>
  • 유튜브에서 동영상 추가하기
1
2
3
4
5
6
<iframe 
width="560" height="315" 
src="https://www.youtube.com/embed/YBnGBb1wg98" 
frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

표작성(table)

  • cell , column , row
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table border="1">
    <tr>
        <td>cell1</td>
        <td>cell2</td>
        <td>cell3</td>
    </tr>
    <tr>
        <td>국어</td> 
        <td>영어</td>
        <td>수학</td>
    </tr>
    <tr>
        <td>사과</td>
        <td>수박</td>
        <td>딸기</td>
    </tr>
</table>

02

  • 표크기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table border="1" width="250" height="200">
    <tr>
        <td>cell1</td> 
        <td>cell2</td>
        <td>cell3</td>
    </tr>
    <tr>
        <td>국어</td> 
        <td>영어</td>
        <td>수학</td>
    </tr>
    <tr>
        <td>사과</td>
        <td>수박</td>
        <td>딸기</td>
    </tr>
</table>

03

  • 정렬 : 가로(align) , 세로(valign)
1
2
3
4
5
6
7
8
9
10
11
12
<table border="1" width="250" height="200">
    <tr>
        <td align="left">종로구</td>
        <td align="center">강남구</td>
        <td align="right">마포구</td>
    </tr>
    <tr>
        <td valign="top">박지성</td>
        <td valign="center">손흥민</td>
        <td valign="bottom">김연아</td>
    </tr>
</table>

01

  • thead , tbody , tfoot
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table border="1">
	  <thead>
		<tr>
		  <th>Month</th>
		  <th>Savings</th>
		</tr>
	  </thead>
	  <tbody>
		<tr>
		  <td>January</td>
		  <td>$100</td>
		</tr>
		<tr>
		  <td>February</td>
		  <td>$80</td>
		</tr>
	  </tbody>
	  <tfoot>
		<tr>
		  <td>Sum</td>
		  <td>$180</td>
		</tr>
	  </tfoot>
</table>

01

  • 셀 합치기 : 가로(colspan) , 세로(rowspan)
  • 칸수가 맞지 않으면 어그러진다.
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
<table border=1 width="200">
    <tr>
        <td colspan="2">가</td> <!-- 가로2칸 합치기 -->
        <td>나</td>
    </tr>
    <tr>
        <td>다</td>
        <td>라</td>
        <td>마</td>
    </tr>
    <tr>
        <td colspan="3">사</td> <!-- 가로3칸 합치기 -->
    </tr>
</table>

<hr>

<table border="1" width="300">
    <tr>
        <td rowspan="2">가</td> <!-- 세로2줄합치기 -->
        <td>나</td>
        <td>다</td>
    </tr>
    <tr>
        <td>라</td>
        <td rowspan="2">마</td>
    </tr>
    <tr>
        <td>사</td>
        <td>아</td>
    </tr>
</table>

02

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
<table border="1" width="50%" height="200">
    <tr align="center">
      <td colspan="2">&nbsp;1&nbsp;</td>
      <td rowspan="4" colspan="2">&nbsp;2&nbsp;</td>
      <td>&nbsp;3&nbsp;</td>
      <td>&nbsp;4&nbsp;</td>

    </tr>
    <tr align="center">
      <td>&nbsp;5&nbsp;</td>
      <td>&nbsp;6&nbsp;</td>
      <td>&nbsp;7&nbsp;</td>
      <td>&nbsp;8&nbsp;</td>

    </tr>
    <tr align="center">
      <td rowspan="2" colspan="2">&nbsp;9&nbsp;</td>
      <td>&nbsp;10&nbsp;</td>
      <td>&nbsp;11&nbsp;</td>

    </tr>
    <tr align="center">
      <td>&nbsp;12&nbsp;</td>
      <td>&nbsp;13&nbsp;</td>

    </tr>
    <tr align="center">
      <td>&nbsp;14&nbsp;</td>
      <td>&nbsp;15&nbsp;</td>
      <td colspan="4">&nbsp;16&nbsp;</td>

    </tr>
</table>

01

목록

  • 웹문서를 구조화 할 때 주로 사용
  • 순서가 없는 리스트 ul>li
  • 순서가 있는 리스트 ol>li
1) 순서가 없는 목록

type=dics / circle / square / none

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ul type="none">
    <li>국어</li>
    <li>영어</li>
    <li>수학</li>
 </ul>

 <ul type="circle">
    <li>국어</li>
    <li>영어</li>
    <li>수학</li>
 </ul>

 <ul type="square">
    <li>국어</li>
    <li>영어</li>
    <li>수학</li>
 </ul>


<ul type="dics">
    <li>국어</li>
    <li>영어</li>
    <li>수학</li>
 </ul>
2) 순서가 있는 목록

type=1 / a / A / i /I

1
2
3
4
5
<ol type="a">
    <li>미술</li>
    <li>음악</li>
    <li>체육</li>
 </ol>
3) 목록의 중복사용 가능
1
2
3
4
5
6
7
8
9
10
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
4) 정의 목록
1
2
3
4
5
6
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
5) 대,중,소 분류
1
2
3
4
5
6
7
8
9
10
11
12
<h1 style="display: none;">스포츠</h1> <!--실제 문서엔 존재하지만 보이지 않게 하는거. display:none;-->
    <h2>축구</h2>
        <ul>
            <li>영상</li>
            <li>일정</li>
            <li>순위</li>
        </ul>
    <h2>야구</h2>
    <h2>농구</h2>
<h1>뉴스</h1>
<h1>연예</h1>
<h1>자동차</h1>

01

블럭요소

  • 특정 지역에 대해서 블럭을 지정할 수 있다.
1) p태그
1
2
3
<p>문단</p>
	<p>강 장관은 이날 외교부가 서울의 한 호텔에서 개최한 '여성과 함께하는 평화' 국제회의 개회사에서 "이제까지 위안부와 관련한 노력에 있어서 생존자 중심의 접근법이 부족했다는 점을 인정한다"면서 "피해자들의 목소리에 귀를 기울일 것"이라고 말했다.</p>
	<p>그는 이어 "우리는 생존자들의 희망이나 역사적 사실에 근거한 정의를 지지한다는 측면에서 피해자 중심의 접근법을 취해왔다"면서 "이들의 존엄과 명예를 다시 회복하는데 도움을 줄 것이고, 현 세대와 후 세대가 과거에서 교훈을 배울 수 있게 할 것"이라고 강조했다.</p>
2) pre 태그
1
2
3
4
5
6
<pre>
    솔             데스         크
    종로구 관철동
    코아빌딩             5층
    엔터와 공백이 그대로 표현됨
</pre>
3) blockquote태그
1
<blockquote>블럭인용구</blockquote>
4) div , span 태그
1
2
<div>블럭요소</div>
<span>블럭요소</span>
5) 테이블 안에 테이블
1
2
3
4
5
6
7
8
9
10
11
12
13
<table border="1" width="100" height="50">
    <tr>
        <td>가</td>
        <td>
            <table border="1" width="50" height="50">
                <tr>
                    <td>나</td>
                    <td>다</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

입력폼

  • 입력양식(폼컨트롤)
HTML Input Types
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
  • type=button
1
2
<input type="button" value="확인">
<input type="button" value="검색">
  • 입력자료를 서버로 전송
1
<input type="submit" value="전송">
  • 사용자가 입력한 정보를 취소
1
<input type="reset" value="취소">
  • type=button + type=submit
1
<button>회원가입</button>
form 관련 속성들

form 안에 form이 오면 안됨

1
2
3
4
5
name="" 폼이름
id="" 폼아이디
method="" 전송방식 get | post
action="" 요청한 입력자료를 서버에서 받는 페이지 및 명령어
enctype="multipart/form-data" 파일 첨부해서 전송하는 경우
  • 대부분 id는 name이름과 동일하게 준다.
  • method에서 get , post에 따라 받는 명령어가 다름 > 여기서부터는 jsp 부분
  • action 예시인 ok.jsp면 jsp언어로 받겠다는 의미 > 여기서부터 언어가 달라짐
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<form name="memfrm" 
      id="memfrm"
      method="get"
      action="ok.jsp"
      enctype="" 
>
    
아이디:<input type="text" name="userid" id="userid" 
              size="15" 
              maxlength="7"
              placeholder="아이디입력"
              required  
              ><!--required : length가 0일때 못하게끔 하는 것.-->
    
비밀번호:<input type="password" 
                name="userpw"
                id="userpw"
                size="15"
                maxlength="7"
                placeholder="비밀번호입력" 
                >
<hr>
이름:<input type="text" 
            name="username" id="username"
            size="20" maxlength="20"
            autofocus 
><!--autofocus 는 실행되면 자동으로 커서가 창에 가있도록 하는거. 깜빡깜빡..-->

<hr>
우편번호:<input type="text" 
                name="zipcode"
                id="zipcode"
                size="5"
                readonly 
><!--readonly 는 커서가 안들어가게 하기-->
        <input type="button" value="주소찾기">

        <hr>

<!-- radio , checkbox는 boolean값을 갖는다. -->
성별:<input type="radio" name="gender" value="m">남
     <input type="radio" name="gender" value="f" checked>여 
     <!--
     name으로 같은 그룹을 해버리면 선택을 하나밖에 못함
     name은 변수. value값을 담아서 전달하는거.
     그러니까 남자를 선택했으면 변수는gender 고 m을 가지고 있음.
     checked 는 미리 체크되어있는것.
     나중에 자바스크립트나 제이쿼리에서 boolean값으로 하면 됨(체크 되었는지 안되었는지)
    -->
<br>
취미:<input type="checkbox" name="h1" value="movie" checked>영화
     <input type="checkbox" name="h2" value="mountain">등산
     <input type="checkbox" name="h3" value="cook">요리
     <!-- 각각 영화,등산,요리에서는 체크한건지,안한건지 두개밖에 없음 > boolean형 -->
<hr>

생년월일: <select name="myYear" id="myYear">
    <option value="2019">2019년</option>
    <option value="2018" selected>2018년</option> <!--selected는 목록에 미리 먼저 보여지는거/ 이거 안하면 맨 처음게 보여짐-->
    <option value="2017">2017년</option>		
</select>
    
<!-- multiple : Ctrl이용해서 다중 선택 가능 -->
<select name="myMonth" id="myMonth" multiple>
    <option value="1">1월</option>
    <option value="2">2월</option>
    <option value="3">3월</option>		
</select>

<hr>
배송메세지:
<textarea rows="5" cols="20" name="msg">경비실에 맡겨주세요</textarea>

<hr>
<input type="button" value="버튼">
<input type="submit" value="등록"> <!--서버로전송 내가 있는 곳의 form을 전송 (다른곳에 form이 있더라도!) > jsp할때 많이 쓰임-->
<input type="reset"  value="취소">

</form>

01

  • method를 아무것도 안하면 get방식임
1
2
3
4
5
6
7
8
9
10
11
<form action="ok2.jsp">
    
    <input type="text" name="word">
    <!-- <img src=""> + type=submit -->
    <input type="image" src="../images/search.png">
    <!-- 성격은 text박스와 동일함. 차이점은 화면상에 보이지 않음.
        웹페이지에 노출되지는 않지만 폼에 포함된 컨트롤 요소-->
    <input type="hidden" name="page" value="3">
    <input type="hidden" name="col" value="subject">
    
</form>

검색버튼을 누르면

file:///D:/java0514/frontend/html/ok2.jsp?word=enctype&x=13&y=12&page=3&col=subject

이렇게 주소창에 뜸.

&가 의미하는거. 앞에 있는 변수와 뒤에있는 변수를 구분하는 기호

page변수에 3이 담겨있음.

col변수에 subject가 담겨있음.

02

  • 파일 첨부해서 전송
1
2
3
<form enctype="multiple/form-data">
    첨부파일:<input type="file">
</form>

03

HTML 5 Input

  • HTML5에 추가된 다양한 Input
  • color , date , datetime-local , email , month , number , range , search , tel , time , url , week
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
<form>
    <!-- 색상선택 -->
    <input type="color" name="favcolor"><br>
    <!-- 날짜선택(연,월,일) 최소,최대 날짜도 설정가능 -->
    <input type="date" name="bday" max="1979-12-31" min="2000-01-31"><br>
    <!--연도,월,일,오전오후,시간 설정 가능 -->
    <input type="datetime-local" name="bdaytime"><br>
    <!-- 전자메일주소를 포함해야함
    브라우저 지원에 따라 전자 메일 주소를 제출할 때 자동으로 유효성을 검사 할 수 있습니다. -->
    <input type="email" name="email"><br>
    <!-- 파일첨부기능 -->
    <input type="file" name="myFile"><br>
    <!-- 월 및 연도 선택 -->
    <input type="month" name="bdaymonth"><br>
    <!-- 숫자 입력 허용되는 번호에 대한 제한설정가능 (예시>1~5까지만 설정)-->
    <input type="number" name="quantity" min="1" max="5"><br>
    <!-- 유형범위를 조절할 수 있는 최소0~최대100, 10씩 증가, 값은 30(맨처음 화면엔 30부터 보여짐) -->
    <input type="number" name="points" min="0" max="100" step="10" value="30"><br>
    <!-- 정확한 값 중요하지 않은 숫자를 입력하기위한 제어를 정의한다. -->
    <input type="range" name="points" min="0" max="10"><br>
    <!-- 검색필드에 사용 -->
    <input type="search" name="googlesearch"><br>
    <!-- url주소를 포함해야함. 입력필드에 사용. 브라우저 지원에 따라 url필드는 제출 될 때 자동으로 유효성 검사를 할 수 있다. -->
    <input type="url" name="homepage">
</form>

05

프레임 분할

  • 프레임을 나눌 때는 body가 나눠지기 때문에 body라는 태그가 있으면 안된다.
  • 가로 나누기 : cols
  • 세로 나누기 : rows
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>15_프레임분할.html</title>
</head>
    
	<frameset cols="250,*"><!-- *는 나머지공간을 의미. 마지막을 나머지공간으로 주기. -->
								<!-- cols(10%,20%,*) 의 나머지는 70%의 공간. -->
		<frame name="main" src="leftmenu.html" noresize></frame><!--noresize : 크기조절안됨 , 출력은 src에서 한다.-->
		<frame name="sub"></frame>	
	</frameset>

</html>