본문 바로가기
JSP

HTML 기본

by avvin 2019. 4. 28.

http://www.homejjang.com/05/iframe.php


https://www.w3schools.com/


크롬 브라우저에서 Ctrl + Shift + C 를 누르면 개발자 도구가 활성화 되고 마우스를 올리는 요소에 대한 정보를 확인할 수 있다.


<h1> ... </h1>

heading,<h> 만으로 사용할 수는 없고, <h1> 부터 <h6>까지 숫자를 입력해 사용


<br/>
line break, 줄바꿈 태그
닫는 태그가 없는 스스로 닫히는 태그

<p> ... (문단) ... </p>

문단 구분 태그

폰트 크기만큼 margine 자동 지정


&nbsp;

non-breaking space, no-break space

여러 칸 띄어쓰기

html은 여러칸을 띄어도 한칸으로 읽으므로 &nbsp를 사용하여 tab버튼 효과를 낸다.



특수문자 

출력 

 &lt; //less than

 <

 &gt // greater than

 >

 &quot; 

 "

 &amp;

 &



링크를 거는 태그

<a href= " ... "> ...(텍스트, 이미지소스 모두 가능)... </a>


<a> 태그는 닻이라는 뜻의 anchor에서 온 태그. 닻처럼 특정 링크 참조 시에 사용

<a> 태그에 링크를 걸 때는 'href' 속성을 이용. href은 하이퍼참조(Hyper Reference) 

href 속성의 값은 이동하고자 하는 파일의 절대경로 / 상대경로 혹은 URL 등 

<a> 태그에 하이퍼 참조를 걸어주면 '하이퍼링크'


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%@ page language="java" contentType="text/html charset= UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
에러 페이지 입니다.
<a href="PageDirective.jsp" target="_blank">이전페이지</a>
 
</body>
</html>
cs

target 속성


target 

 설명 

 _blank

 새로운 창에서 새로운 페이지를 연다 

 _self

 현재 창에서 새로운 페이지를 연다 

 _parent

 부모프레임에 새로운 페이지를 적재한다 

 _top

 현재 창에 새로운 페이지를 적재하고 모든 프레임을 취소한다. 


각 링크가 클릭되었을 때 새로운 페이지가 어디에서 열리는지를 지정. _self가 디폴트



id 속성


1
2
3
4
5
6
7
8
9
<a href="#section1">  참고사항으로 가려면 여기를 클릭하세요 </a>
 
...
 
...
 
...
 
<a is="section1"> 참고 사항 </a>
cs




리스트

1
2
3
4
5
6
7
<ul>  //unordered list
 
<li> ... </li>  //리스트 항목
 
<li> ... </li>
 
</ul>




1
2
3
4
5
6
7
<ol>  //ordered list
 
<li> ... </li>  //리스트 항목
 
<li> ... </li>
 
</ol>

s



1
2
3
4
5
6
7
<dl>  //definition list
 
<dt> ... </dt> //리스트 단어
 
<dd> ... </dd>//단어 설명
 
</dl>r





<base>태그

헤드섹션에서 모든 링크에 대한 <base>태그를 사용하면 모든 링크에 대한 기본 디렉토리를 지정할 수 있다.


1
2
3
4
5
6
7
8
9
<head>
 
    <base href="http://www. ..."/>
 
</head>
 
 
 
<a href = "info.html"> 참고사항 </a> // http://www. .../info.html를 의미
cs


<imag>태그


<imag border ="0"  src = "이미지 파일" alt = "이미지 대체 텍스트" width="300"  height ="230">


alt속성은 브라우저가 어던 이유로 이미지를 화면에 표시하지 못했을 때 표시되는 대체 텍스트


<hr/> 

수평선 태그



<table> 테이블


<tr>태그

table row


<td>태그

table data


<th>태그

table header


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table border ="1"> //테이블
 
    <tr> // 첫 번째 행
 
        <td> ㅇㅇㅇ </td>
 
        <td> 25 </td>
 
    </tr>
 
    <tr> // 두 번째 행
 
        <td> ㅁㅁㅁ </td>
 
        <td> 27 </td>
 
    </tr>
 
 
cs


<td rowspan="2"> ... </td>
상하 셀 병합

<td colspan="3"> ... </td> 

좌우 셀 병합



<caption> ... </caption>태그
테이블에 캡션(/제목)을 달아줄 수 있다

테이블 셀 안에는 어떠한 요소도 넣을 수 있다.



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
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 
    <center>
        <h2>로그인 페이지</h2>
        <form action="RequestloginProc.jsp" method="get">
            <table width="400" border="1">
                <tr height="60">
                    <td align="center" width="150">아이디 </td>
                    <td align="Left" width="250">
                    <input type="text" name="id">
                    </td>
                </tr>
            </table>
        </form>
    </center>
 
</body>
</html>
cs





HTML 입력 양식


입력양식은 항상 <form으로 시작

<form>은 입력 요소를 담는 컨테이너의 역할


1
2
3
4
    <form action="input.jsp" method="post">
        <input type="text" name="input" /> 
        <input type="submit">
    </form>




action속성

사용자가 입력한 데이터를 받아서 처리하는 스크립트의 주소를 URL형식으로 적어준다.


method 속성

데이터를 보내는 방법을 기술. POST 와 GET방식이 있다.



GET 방식 / POST 방식


클라이언트 컴퓨터가 서버 컴퓨터로 데이터를 전달하는 방식에는 HTTP GET과 HTTP POST 두 방식이 있다.


  • GET방식

URL주소 뒤에 파라미터 붙여서 데이터를 전달하는 방식


https://search.naver.com/search.naver    ?     sm=top_hty&fbm=0&ie=utf8&query=form+method%3D%22post%22


검색을 처리하는 스크립트의 주소, URL         ?           사용자가 입력한 단어(파라미터)를 URL에 붙여서 서버로 보낸다.


북마크가 가능하고 뒤로가기가 가능하나 

get 방식으로 보낼 수 있는 글자수는 2048글자로 제한돼있으며 

주소만 보면 무슨 데이터인지 알 수 있으므로 비밀 보장도 되지않는다. (패스워드 데아터는 get 방식으로 보내면 안된다)


  • POST 방식

사용자가 입력한 데이터를 URL 주소에 붙이지 않고 HTTP Request 헤더에 포함시켜 전송하는 방식

길이 제한이 없으며 보안이 유지된다.

POST 요청은 캐시되지 않으며 브라우저 히스토리에서 남지 않는다. 

북마크가 안되고 뒤로가기를 하면 데이터를 다시 보내야한다는 브라우저의 경고가 나온다.



<input>요소

<form>요소 안에 위치

type="text"가 디폴트

<input   type="button"            value=" button "           name="button1">

   입력 필드의 종류 결정 /  버튼에 나타나는 텍스트   /  서버로 전달되는 변수 이름



 type 속성값

 설명

 text

 한줄짜리 입력 필드, 기본 크기는 20글자, size 속성으로 필드 크기 변경 가능 

password 

 비밀번호 입력 한줄짜리 필드 생성

 radio

 라디오 버튼 생성 / name 속성은 동일해야한다.

 checkbox

 체크 박스 생성 / name 속성은 동일해야한다.

 file

 파일 이름을 입력하는 필드 생성

 reset

 초기화 버튼 생성, 버튼을 누르면 모든 입력 필드가 초기화된다.

 image

 이미지를 전송버튼으로 만든다.  type="image"  src="이미지 파일" alt ="대체 텍스트"

 hidden

 사용자에게는 보이지 않지만 서버로 전송된다.

 submit

 제출 버튼 생성



1
2
3
4
    <form>
        <input type="radio" name="gender" value="female"> 여성 
        <input type="radio" name="gender" value="male"> 남성
    </form>
cs



<textarea>요소


여러 줄의 텍스트를 입력 받을 때 사용

영역의 크기는 row와 cols로 설정


<form name = "input" action="getfeedback.jsp" method="get">




....


이후에 필요한 부분 추가


정규식 패턴 사이트 : http://regexlib.com/DisplayPatterns.aspx




<script> 


자바스크립트 코드 // 동적인 언어


</script>




HTML5 에서 <center> 태그 대신 사용하는 태그 (가운데 정렬)


<div style="text-align:center;">


</div>




저작자표시

'JSP' 카테고리의 다른 글

JSP게시판 - 글목록 보기( BoardList )  (0) 2019.05.09

관련글

티스토리툴바