html 파일 예제

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>www 닷컴 회원가입</h1>
<form action="NewFile.jsp">
아이디<br>
<input type="text" name="id" title="여기에 아이디 기입" size="52" placeholder="ID 입력"><br>
비밀번호<br>
<input type="password" name="pwd" title="여기에 비밀번호 기입" size="52" placeholder="비밀번호 입력"><br>
비밀번호 재확인<br>
<input type="password" name="repwd" size="52" ><br>
이름<br>
<input type="text" name="name" size="52"><br>
생년월일<br>
<input type="month" name="month" hspace="1">
<input type="text" name="day"  size="30" placeholder="일"><br>
성별<br>
<select style="width:401px" name="human">
	<option value="성별">성별</option>
	<option value="남자">남자</option>
	<option value="여자">여자</option>
</select><br><br>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
<input type="submit" value="가입하기" >
</form>
</body>
</html>

 

 

 

jsp파일 예제

 

<!-- NewFile.jsp -->   


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 정보</title>
</head>

<body>

<%
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String repwd = request.getParameter("repwd");
String name = request.getParameter("name");
String month = request.getParameter("month");
String day = request.getParameter("day");
String human = request.getParameter("human");


if(!pwd.equals(repwd)){
	out.println("pwd와 재확인 pw가 일치하지 않습니다"+"<br>");
}else{
	out.println("아이디 : "+id+"<br>");
	out.println("비밀번호 : "+pwd+"<br>");
	out.println("재확인 비밀번호 : "+repwd+"<br>");
	out.println("이름 : "+name+"<br>");
	out.println("생년월일 : "+month+" "+day+"<br>");
	out.println("성별 : "+human+"<br>");
}
%>

</body>
</html>

 

실행화면

www 닷컴 회원가입

아이디

비밀번호

비밀번호 재확인

이름

생년월일

성별


                                                         

 

 

설명

 

form action="NewFile.jsp" : 사용자에게 입력 받은 값을 NewFile.jsp로 전달 하여 가입하기 클릭시 jsp파일이 실행하여 입력 값을 보여준다.

입력 값을 전달 받기 위해선 name명을 지정해 주어야 한다.

비밀번호와 비밀번호 재확인 값이 다를 시 회원 정보가 나오지 않고 "pw와 재확인 pw가 일치하지 않습니다"란 문구가 나오도록 조건문을 걸어 주었다.

 

jsp : java와 html 합쳐논 영역

jsp파일에서 <%  %> 안은 Java의 영역이다.

request (연결 객체)를 사용하여 값을 전달 받는다.

 

&nbsp; : 공백 문자

 

jsp 실행화면 : 비밀번호와 비밀번호 재확인 값이 다를 때

jsp 실행화면

 

jsp 실행화면 : 비밀번호와 비밀번호 재확인 같을 때

jsp 실행화면

 

 

 

식별자

id

사용목적 : 고유한 식별을 목적으로 하는 경우, javascript에서 접근하기, 한 개의 문서당 한 개만 유효(중복 불가)


class

사용목적 : 재사용을 목적으로 하는 경우, CSS에서 디자인적인 요소, 다중 설정이 가능(중복 허용) 


name

사용목적 :  form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성, 다중 설정 가능(중복 허용)

 

form 태그 : 이동 목적(연결)

입력 양식에 데이터를 입력하고 쿼리 전송 버튼을 누르면 데이터가 지정된 장소에 지정된 방법으로 전달된다.

 

참조

 body 태그 안에서 쓰인다.

 

form 속성

 action : 입력 데이터의 전달 위치를 지정

 input : 사용자에게 정보를 입력받는 기능을 수행함.

 value :  input 태그의 내부에 들어가는 글자

 textArea : 여러 줄의 글자를 입력할 때 사용

 select : 여러 개의 목록에서 몇 가지를 선택할 때 사용

 

 input type 속성 값

 submit : 제출 버튼 생성, form당 1개만 생성 가능

 text : 글자 입력 양식 생성

 password : 비밀번호 입력 양식 생성

 

예시

<!-- web페이지 -> web페이지이동 -->
<form action="NewFile.jsp">

ID:<input type="text" name="id" title="여기에 id 기입" size="10" placeholder="id 기입">
<br><br>
PW:<input type="password" name="pwd" size="10">
<br>

<!-- 버튼만들기 -->
<input type ="submit" value="NewFile.jsp 이동">
</form>

 

실행화면

ID:



PW:

 


checkbox : 체크박스 생성

 

참고

checkbox는 다중선택이 가능하다.

checked="checked"  : 체크되어 있는 상태로 실행된다.

 

예시

<input type="checkbox" value="패션" checked="checked">패션<br>
<input type="checkbox" value="음악">음악<br>
<input type="checkbox" value="게임">게임<br>

 

실행화면

패션

음악

게임


 radio : 라디오 버튼 생성

 

참고

 name으로 묶어 어주야 1개만 선택 가능하다.

 

예시

<!-- name="car"로 묶어 주어야 1개만 선택 가능하다 / name묶기 전 다중선택 가능 -->
<input type="radio" name="car" value="벤츠">Benz
<input type="radio" name="car" value="아우디">아우디
<input type="radio" name="car" value="BMW">BMW

 

실행화면

Benz

아우디

BMW

 

 

HTML5 입력 양식 태그

number : 숫자 선택 양식 생성

date :  일 선택 양식 생성

color : 색상 선택 양식 생성

range :  범위 내 슬라이스를 생성

search :  검색창 생성

 

예시

<!-- 1~5 까지 선택할 수 있는 거 생김..  -->
number : <input type="number" max="5" min="1">
<br>

<!-- 달력 생성 -->
<!-- 달력이 2개면 언제부터 언제까지 ! -->
date : <input type="date">
<br>


<!-- 컬러 선택 할 수 있음  -->
color : <input type="color" value="#ff0000">
<br>

<!-- 슬라이드 생성  -->
range : <input type="range" max="10" min="0">
<br>

<!-- 검색창 생성 -->
search : <input type="search">

 

실행화면

number :

 

 

date :

 

color :

 

range :

 

search :

 

 

textArea 

속성

 rows : 태그의 너비 지정

 cols : 태그의 높이 지정

 

예시

<textarea rows="10" cols="30">초기문자열</textarea>

 

실행화면

 

 

select

속성 값

 multiple="multiple" : 컨트롤 키 눌러서 다중 선택 가능

 

예시

<select multiple="multiple">
	<option value="apple">사과</option>
	<option value="pear">배</option>
	<option value="banana">바나나</option>
	<option value="grape">포도</option>
</select>

 

실행화면

 

이미지 태그 : 이미지를 삽입할 때 사용

참조

 body 태그 안에서 쓰인다.

 

image 파일종류

  jpg png gif bmp tiff tga
용량(작은순서) 1 3 2 6 4 5
압축율 1     x    

 

bmp : 압축을 할 수가 없고, 투명처리(sprite)를 직접 해주어야 하는 번거로움 때문에 잘 사용하지 않는다.
png : 투명처리가 들어가 있다.

 

 

img 속성 & 속성 값

 scr : 이미지의 경로 지정

 alt : 이미지가 없을 때 나오는 문구

 width : 이미지의 너비 지정

 height : 이미지의 높이 지정

 placehold.it : 이미지가 없을 때 이미지의 크기에 맞는 더미 이미지를 제공해줌

 

참조 

 이미지 크기 지정 시 width, height 둘 중 하나만 사용하면 원본 비율이 유지된다.

 

 

예시

<img alt="이미지 없음" src="./image/bird.png" width="240"><br>
<img alt="이미지 없음" src="d:\\image\\bird.png"> <br>
<img alt="이미지 없음" src="pic.jpg"> <br>

 

실행화면

 

 

 

 

이미지 파일의 접근 경로

 

이미지 파일은 단순히 컴퓨터 내 저장되어 있다고 생각하면 안 되고,

서버 내에 있다고 해야 한다.

이미지 파일은 절대 경로로 지정할 수 없다.

 

 

 

 

 

 

 

 

 

 

 

 

 

외부 이미지 파일의 접근 경로

 

예시 : 외부 이미지 파일의 경로의 시작은 이미지가 있던 홈페이지 주소 값으로 시작된다.

<img alt="" src="이미지가 있던 홈페이지 주소
          /wp-content/uploads/2015/09/googles-new-logo-03.png" width="240"><br>

 

실행결과

테이블 태그 : Table을 만들어 주는 Tag

 

Table : row(행), column(열)

 

 

참조

 body 태그 안에서 쓰인다.

 

 

table 요소 

tr : 행
th : 행의 타이틀(해더 선언), 굵은 글씨, 가운데 정렬
td : 열 테이블의 일반 데이터

caption : 표 제목

col width: 테이블 크기 지정

 

table 속성

border : 테이블  테두리

bgcolor : 테이블 배경 색 지정

style="width: 값" : 화면 비례 테이블 크기 지정

rules="rows" : 로우줄만 나오게 하기

 

td, tr, th 속성

rowspan : 로우 합치기
colspan :  컬럼  합치기

 

 

예제

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<table border="4"  bgcolor="bbcc00"  style="width: 50%" 
	   cellpadding="5" rules="rows">
		<caption>Type1</caption>
		<col width="100"><col width="100"><col width="70">
		<tr>
		
			<th>No.</th>
			<th>Name</th>
			<th>age</th>
		</tr>
		<tr>
			<th>1</th>
			<td>Kim</td>
			<td>33</td>
		</tr>	
		<tr>
			<th>2</th>
			<td>Lee</td>
			<td>35</td>
		</tr>	
	</table>
	<br>
	<table border="1" style="width: 50%">
		<caption>Type2</caption>
		<tr bgcolor="#f0ffff">
			<td col width="100">No.</td>
			<td col width="100">Name</td>
			<td col width="70">age</td>
		</tr>
		<tr>
			<td>1</td>
			<td>Kim</td>
			<td rowspan="2">33</td>
		</tr>	
		<tr>
			<td>2</td>
			<td>Lee</td>
		</tr>	
	</table>
</body>
</html>

 

실행화면

목록 태그 : 목록(List)을 만들 때 사용

 ul(unordered list) : 순서없는 목록

 ol(ordered list) : 순서 있는 목록

 li : 목록 요소, 목록의 내용, 들여쓰기 및 줄 바꿈 기능

 dl : 정의 목록

 dt : 용어의 제목, 줄바꿈 기능

 dd : 용어의 설명, 줄바꿈 기능

 

참조

 body 태그 안에서 쓰인다.

 목록 태그 안에 목록태그를 사용할 수 있다.

 

 

ul(unordered list) : 순서 없는 목록

형식

 <ul>    
   <li>문자열</li> 
 </ul>

 

예시 

 <ul>    
	<li>coffee</li> 
	<li>tea</li> 
	<li>milk</li> 
 </ul>

 

실행화면

 

 

ul 속성 & 속성 값

 style="list-style-type: disc"

 style="list-style-type: circle"

 style="list-style-type: square"

 style="list-style-type: none"

 

예시

<ul style="list-style-type: disc">
 	<li>disc : 기본값</li> 	
</ul>

<ul style="list-style-type: circle">
	<li>circle : 빈 동그라미</li> 
</ul>

<ul style="list-style-type: square"> 
	<li>square : 네모</li> 
</ul> 

<ul style="list-style-type: none">
	<li>none : 글자만</li>  
</ul> 

 

실행화면

 

 

 

ol(ordered list) : 순서 있는 목록

형식

 <ol>    
   <li>문자열</li> 
 </ol>

 

예시

 <ol>    
	<li>coffee</li> 
	<li>tea</li> 
	<li>milk</li> 
 </ol>

 

실행화면

 

 

ol 속성 & 속성 값

 start : 시작 번호 지정 (html5 / html4 type으로 시작번호 지정)

 type : type지정

 type 속성 값 : 1, a, A, i, I

 

예시

<!-- html5 시작번호 지정 start -->
<ol start="100">    
	<li>coffee</li> 
	<li>tea</li> 
	<li>milk</li> 
</ol>
 
<!-- type지정 : 1, a, A, i, I --> 
<ol type="1">       
	<li>type="1"</li> 
</ol> 

<ol type="a">       
	<li>type="a"</li> 
</ol> 

<ol type="A">      
	<li>type="A"</li> 
</ol> 

<ol type="i">      
	<li>type="i"</li> 
</ol> 

<ol type="I">      
	<li>type="I"</li> 
</ol> 

 

실행화면

 

 

 

dl : 정의 목록 dt: 정의 용어 dd : 정의 설명

예제

<dl>
	<dt>html tag</dt>
	<dd>제목 태그</dd>
	<dd>본문 태그</dd>
	<dd>글자 태그</dd> 
</dl>

 

실행화면

제목 태그 : 제목 입력 시 사용

형식

 <h1>문자열</h1>
 <h2>문자열</h2>
 <h3>문자열</h3>
 <h4>문자열</h4>
 <h5>문자열</h5>
 <h6>문자열</h6>

 

참조

 h1~h6까지 있음

 body 태그 안에서 쓰인다.

 

예제

<h1>H1 Tag</h1>
<h2>H2 Tag</h2>
<h3>H3 Tag</h3>
<h4>H4 Tag</h4>
<h5>H5 Tag</h5>
<h6>H6 Tag</h6>

 

실행화면

 

 

 

본문 태그

 p : 단락을 만드는 태그

 br : 줄 바꾸기 태그

 hr : 수평선을 긋는 태그

 pre : 글자, 글꼴, 줄 바꿈을 입력한 그대로 출력하는 태그

 

참조

 body 태그 안에서 쓰인다.

 

예시

<p>p tag 입니다</p> 

<hr>	<!-- 수평선 -->

<br>	<!-- 줄바꿈 -->

<pre style="font-size: 200%; background-color: #ffff00; font-family: verdana">
안녕하세요!
반갑습니다.
비가 오는군요.
</pre>

 

실행 화면

 

 

 

앵커(Anchor) 태그 : 서로 다른 웹페이지 사이를 이동하거나 웹페이지 내부에서 특정한 위치로 이동할 수 있는 태그(하이퍼링크)

기본 형식

  <a href="주소">문자열</a>

 

참조

 body 태그 안에서 쓰인다.

 참조할 주소가 없을 경우(빈 링크) 주소 입력에 #을 입력합니다.

 

예시

<!-- 구글로 이동하기 -->
<a href="http://www.google.com">구글로 이동</a>
<!-- 참조 주소 없음 -->
<a href="#">참조 주소 없음</a>

 

a 속성 & 속성 값

 target : 링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시

 target 속성 값 : self (클릭 시 현재창에서 이동)

                               _blank (클릭시 새창으로 이동)

                                _top (다운로드 속성: 파일 다운로드)

 

예시

<!-- 구글로 이동하기 -->
<a href="http://www.google.com" target="_blank">구글로 이동</a>

<a href="http://www.google.com" target="_self">구글로 이동</a>

<a href="파일경로" target="_top">파일 다운로드</a>

 

 

 

글자 태그

 b : 굵은 글자

 strong : 굵은 글자

 u : 밑줄 글자

 ins : 밑줄 글자
 i : 기울어진 글자

 em : 기울어진 글자

 small : 작은 글자

 sub : 아래에 달라붙는 글자

 sup : 아래에 달라붙는 글자

 del : 가운뎃줄이 그어진 글자

 mark : 배경이 노란색(강조) 글자

 

참조

 body 태그 안에서 쓰인다.

 

예시

<p><b>b(굵은) </b> 텍스트</p>
<p><strong>strong(굵은) </strong> 텍스트</p>
<p><u>u(밑줄) </u> 텍스트</p>
<p><ins>ins(밑줄) </ins> 텍스트</p>
<p><i>i(기울어진) </i> 텍스트</p>
<p><em>em(기울어진) </em>텍스트</p>
<p><small>small(작은) </small> 텍스트</p>
<p><sub>sub(아래첨자) </sub>텍스트</p>
<p><sup>sup(윗첨자) </sup>텍스트</p>
<p><del>del(가운데줄) </del>텍스트</p>
<p><mark>mark(강조) </mark> 텍스트<p>

 

실행화면

HTML(HyperTextMarkupLanguage)

하이퍼텍스트를 가장 중요한 특징으로 하는 마크업이라는 형식을 가진 컴퓨터 프로그래밍 언어

확장자명 : html

 

 

 

태그(Tag) : html 페이지에서 객체를 만들 때 사용

tag안에 또 다른 tag가 존재할 수 있다(정보를 규정,정의)

 

형식

 1. <태그명>문자열</태그명>

 2. <태그명>

 

참고

 시작태그 : <태그명>

 끝태그 : </태그명>

 요소 :  (1형식)시작태그와 끝태그를 따로 입력하는 요소와 (2형식)시작태그과 끝태그를 함께 입력하는 태그가 있다.

 

예시

<head>
	<h1> hello! </h1> 	<!-- 시작태그과 끝태그를 따로 입력하는 요소-->
   	<br>			<!-- 시작태그과 끝태그를 함께 입력하는 요소-->
</head>

 

 

 

속성(Attribute) : 태그에 추가 정보를 부여

형식

 <태그명 속성="값">문자열</태그명>

 <태그명 속성="특성:값">문자열</태그명>

참조

 속성은 여러 개가 들어갈 수 있다.

 1개 이상의 속성 사용 시 속성="값"; 세미콜론을 사용하여야 한다.

 

예시

<h1 title="title">h1 tag </h1>

<h2 style="color:gray">h2 tag color gray</h2> 

 

 

 

주석

형식

 <!-- 주석내용 -->

 

참조 

 이클립스 주석 단축키 : ctrl + shift + /

 

 

 

Html 문서 형식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

 

!DOCTYPE html(Document type delclaration) : 문서 타입 선언

html : 전부를 감싸준다.
head : 본문 외 부가정보를 감싸준다. (안 보이는 것)

meta charset : html 파일의 인코딩을 설정한다.

title: 웹 페이지의 제목을 나타낸다.
body : 본문을 감싸준다. (눈에 보이는 것)

+ Recent posts