1. HTML(Hyper Text Markup Language)
① DOM 객체 - HTML, XML
② 태그를 열고 닫는 구조
<HTML>
<HEAD>
<TITLE>웹 문서의 제목</TITLE>
</HEAD>
<BODY>
웹 문서의 내용
</BODY>
</HTML>
○ <HEAD> 영역은 웹 문서의 제목이나 머리말에 해당하는 정보를 입력
○ <BODY> 영역에는 웹 문서의 실질적인 내용을 입력
○ <META> 태그
자신의 웹 사이트 내용을 압축적으로 나타낼 수 있는 키워드를 <META>태그 안에 배치
문서 정보 및 사이트 이동, 화면 전환 효과, 웹 페이지 검색 기능
검색할 때 사용되는 값
2. 흔히 발생하는 에러
○ web.xml : start up 할 때 무조건 읽어 내려간다
이 파일을 수정하면, 재 실행 해 주어야 한다
○ 8080에러
① 이클립스가 종료될 때 javaw가 종료가 되지 않아, 이클립스를 재 실행했을 때 javaw가 두 번 실행되어 발생
작업관리자 > 프로세스 > javaw 프로세스 끝내기
② 이클립스에서 톰켓서버 시작시 8080 포트번호 충돌시
포트번호를 8080이 아닌 번호로 변경 > CMD에서 실행
SQL> SQLPLUS / AS SYSDBA
SQL> EXEC DBMS_XDB.SETHTTPPORT(8081);
SQL>select dbms_xdb.gethttpport() from dual;
3. HTML4 와 HTML5
○ HTML5 : 전체적인 윤곽만 만듦.
내부 코딩을 사용하면 크롬에서 사용해야만 볼 수 있는 경우가 다반사
크롬이 익스플로어보다 html5의 기능을 더 많이 허용하기 떄문
○ HTML4 : 내부 코딩을 작성
크롬/익스플로어에서 사용 가능한 html5 기능 확인 : http://html5test.com/
안드로이드와 아이폰의 인터넷은 html5의 기능을 100% 지원
4. 기본 html
태그 <> <> : 태그는 열면 무조건 닫아줘야 한다
<font> </font>
외 태그 <>
</br>
속성
<font size=”1”> </font>
① 글꼴 태그
○ 글자 크기를 조절하는 태그
<h1></h1> ~ <h6></h6>
<font size=”1”> </font> size의 최댓값은 7
<h3>글자크기 비교</h3>
<h2>글자크기 비교</h2>
※ 색 관련 사이트 : https://html-color-codes.info/Korean/
○ 글자 편집 태그
<font>
속성 |
값 |
설명 |
size |
크기 |
글자 크기는 1에서 7까지 정할 수 있음 기본크기 : 3 +2나 -1처럼 입력하여 상대적 크기를 나타낼 수도 있음 |
color |
색상 |
글자 크기는 1에서 7까지 정할 수 있음 기본크기 : 3 +2나 -1처럼 입력하여 상대적 크기를 나타낼 수도 있음 |
face |
글꼴 |
글꼴을 지정할 수 있으며, 방문자의 시스템에 해당 글꼴이 없을경우 기본 글꼴로 대체 |
<font size="1">글자크기 비교</font>
<font size="3">글자크기 비교</font>
<font size="7" color="red" face="궁서체">글자크기 비교</font>
<font size="7" color="#F6B4E3" face="궁서체">글자크기 비교</font>
○ 글자 스타일을 바꾸는 태그
태그 | 설명 |
<b>문자</b> | 굵게 |
<u>문자</u> | 밑줄 |
<i>문자</i> | 이탤릭체 |
<sub>문자</sub> | 아래 첨자 |
<sup>문자</sup> | 위 첨자 |
<strike>문자</strike> | 취소선 |
<strike>문자</strike> | 조금 작게 |
<big>문자</big> | 조금 크게 |
<tt>문자</tt> | 타자기체로 표시 |
<kbd>문자</kdb> | |
<code>문자</code> |
② 줄 태그
<hr/> : 수평선
<hr align="center" width="600" size="2" color="red" />
<hr align="right" width="60%" size="2" color="gold" />
③ 목록 태그
○ 비순서 목록
<ul type="disc">
<li>배수지</li>
<li>이효리</li>
<li>한가인</li>
</ul>
<ul type="square">
<li>배수지</li>
<li>이효리</li>
<li>한가인</li>
</ul>
○ 순서 목록
<ol>
<li>배수지</li>
<li>이효리</li>
<li>한가인</li>
</ol>
④ center
<center>email : suzi@naver.com</center>
⑤ 단락 태그 : 속성만 사용 하기 위한 태그
<p align="center">email : suzi@naver.com</p>
<p align="center">copyright ⓒ Mooni.co.kr</p>
⑥ 자주 사용 하는 Escape 문자
|
(non-breaking space) |
& |
& (ampersand) |
< |
< (less-than) |
> |
> (greater-than) |
" |
" (quotation mark) |
£ |
￡ (pound) |
° |
° (degree) |
™ |
™ (trade mark) |
¤ |
¤ (currency) |
¢ |
￠ (cent : 米國화폐단위) |
| ¥ | ￥ (yen : 倭國화폐단위) |
| § | § (section) |
&cop; | ⓒ (copyright) |
| ® | ® (registered trade mark) |
| ¶ | ¶ (paragraph) |
| ± | ± (plus-minus) |
| ¦ | | (broken vertical bar) |
| ¹ | ¹ (superscript 1) |
| ² | ² (superscript 2) |
| ³ | ³ (superscript 3) |
| ¼ | ¼ (fraction one quarter) |
| ½ | ½ (fraction one half) |
| ¾ | ¾ (fraction three quarter) |
| × | × (multiplication : 곱셈표시) |
| Ø | Ø (letter O slash : 큰 pi 표시) |
| ø | ø (letter o slash : 작은 pi 표시) |
| ÷ | ÷ (divide : 나눗셈 표시) |
| / | / (Solidus : slash) |
| « | ≪ (left-pointing double angle quotation) |
| » | ≫ (right-pointing double angle quotation) |
※중간실습※
<h4>동그랑땡을 한입에 쏙~!!!</h4>
<font size="2">
<font color="#cc00ff">
고기, 생선, 야채 등의 기본 재료에 갖은 야채와 양념을 섞어 한입 크기로 동그랗게 빚은 완자.</br>
구워낸 그대로 먹어도 맛있지만, 기본 완자에 다양한 소스를 곁들여 조리하는 것 또한 그 색다른 맛 일품!</br>
다양한 종류의 완자와 이를 이용한 요리들을 배워보자.</br>
</font>
<font color="#009966"><u>고기 완자 만들기 </u></font>
<font color="#cc00ff">
<ul type="square">
<li><font color="#ff0066">재료 (완자 16개 정도 분량)</font></li>
<font color=""#cc3399">간 쇠소기 200g, 간 돼지고기 100g, 양파 1/4개, 달걀 1개, 빵가루 3/4컵, 소금 1/3작은술,
후춧가루 약간, 우유 1큰술</font> </br>
<li><font color="#ff0066">만드는 법</font></li>
<font color="#cc3399">
<ol>
<li>우선 양파를 잘게 다진다. </li>
<li>우묵한 볼에 빵가루를 넣고, 여기에 우유를 부어 빵가루를 불려둔다.</li>
<li>볼에 쇠고기와 돼지고기 간 것을 섞어 담고, 다진 양파와 빵가루를 넣어 골고루 섞는다. </li>
<li>풀은 달걀을 넣고 소금.후춧가루를 솔솔 뿌린 후 다시 한번 잘 섞어 준다. </li>
<li>모든 재료를 잘 섞은 후 손으로 들어 그릇에 탁탁 치듯이 반죽을 치대어 주는 것이 포인트 </li>
<li>완자를 빚을 때는 반죽이 손에 들러붙지 않도록 손바닥에 식용유를 조금 바를 것.</li>
</ol>
</ul>
</font>
⑦ 그림삽입
<img alt="그림없다" src="./image/btn_newspaper.gif" align="middle">
<h3>[IT시대의 그늘, 전력] 산업... '인터넷 데이터 센터' 실태</h3>
<font size="3">국민일보 | 기사입력 2019-02-12 11:43</font>
<img alt="그림없다" src="./image/btn_newspaper.gif" align="middle"></br></br>
<p align="center"> <img src="./image/070826_06_02.jpg"> </p>
IT산업의 핵심장치인 서버(server). 가로 60㎝·세로 2.5 ㎝에 불과한 서버 한 대가 30평형대 아파트에 맞먹는 전력을 소비하고 있다. 그래서 수만 대의 기업용 서버를 관리하고 있는 인터넷데이터센터(IDC)는 '전기 먹는 하마'에 비유되고 있다. 서버 40만대의 전력소비량이 인구 20만 도시의 전력소비량(가정·산업·공공용 모두 포함)과 맞먹는 실정이다.
<img alt="" src="./image/m0828-1-19031.jpg"></br>
<img alt="" src="./image/m0828-1-19031.jpg" width="250" height="105"></br>
<img alt="" src="./image/m0828-1-19031.jpg" width="150">
▶ 비율 자동 조정
⑧ 하이퍼링크
○ 연결할 수 있는 대상
그림파일: 웹브라우저에서지원하는형식인gif, jpg, png 파일을링크할수있습니다.
음악파일: wav, mid, 즘등의음악파일을링크할수있습니다.
동영상파일: asf, wmv, asx, mpeg, mov 등의파일을링크할수있습니다.
압축파일: zip 파일처럼압축된형식의파일을링크할수있습니다.
텍스트파일또는워드문서등: txt나한글, MS워드, pdf 파일등의문서를연결할수있습니다.
<a href="https://www.naver.com">네이버 바로가기</a></br>
<a href="https://www.naver.com" target="_blank">네이버 바로가기</a></br>
⑨ 테이블
<table>
<caption>표 제목</caption>
<tr> ▶ 행 구분
<td>셀의 내용</td>
</tr>
</table>
○ 테이블 태그 속성
기능 |
속성 |
사용예 |
전체 너비 지정 |
width |
<table width="600"> 테이블 전테 너비를 600픽셀로 지정 |
전체 높이 지정 |
height |
<table height=“600”> 테이블전체높이를600픽셀로지정 |
배경색 지정 |
bgcolor |
<table bgcolor=“red”> 테이블전체색상을빨간색으로지정 |
배경 이미지 지정 |
background |
<table background=“bg.gif”> 테이블전체의이미지지정 |
정력 방식 지정 |
align |
<table align=“center”> 테이블전체의정렬방식을중앙으로지정 |
셀 안의 여백 지정 |
cellpadding |
<table cellpadding=“5”> 셀안의내용과경계선사이여백을5픽셀로지정 |
셀 간의 여백 지정 |
cellspacing |
<table cellspacing=“5”> 셀간의여백을5픽셀로지정 |
테이블의 테두리 색 지정 |
bordercolor |
<table bordercolor=“red”> 테이블테두리를빨간색으로지정 |
▶예제 1
<table border="1" width="600" cellpadding="10" cellspacing="0" align="center">
<tr height="60" align="center">
<td colspan="2">A</td>
<td>C</td>
</tr>
<tr height="100" align="right">
<td>가</td>
<td align="center"><img src="./image/1_ABT_M100(1).jpg"></td>
<td rowspan="2">다</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
▶예제 2
<table border="1" width="600" height="200" cellpadding="0" cellspacing="0">
<tr align="center">
<td width="200">A</td>
<td rowspan="2">
<table border="1" cellpadding="0" cellspacing="0" width="400" height="200">
<tr align="center"><td bgcolor="#9933ff">1</td><td>2</td></tr>
<tr align="center" bgcolor="pink"><td>3</td><td>4</td></tr>
<tr align="center"><td bgcolor="#000000">5</td><td>6</td></tr>
</table>
</td>
</tr>
<tr align="center">
<td width="200">B</td>
</tr>
</table>
⑩ 양식
<input>
텍스트
<input type="text">
비밀번호
○ 입력시 *로 표시
<input type="password">
체크박스
○ 중복선택 가능
<input type="checkbox">
※실습※
<table style="font-size: 10pt; font-family: 돋움;" cellpadding="3">
<tr>
<td><b>아이디</b></td>
<td><input type="text" style="width: 100px; height: 22px;"></td>
<td></td>
</tr>
<tr>
<td><b>비밀번호</b></td>
<td><input type="password" style="width: 100px; height: 22px;"></td>
<td><img alt="" src="./image/btn_login.gif" width="80" align="right"></td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="checkbox">아이디 저장
<input type="checkbox" checked="checked">보안접속
</td>
</tr>
<tr height="1">
<td colspan="3" bgcolor="#dad6d7"></td>
</tr>
</table>
라디오
○ 중복선택 불가
○ 선택지 중 무조건 하나 선택
○ 같은 그룹의 라디오는 이름이 같아야한다
<input type="radio" name="r1" checked="checked">
※실습※
<table background="./image/bg_575x84.gif" width="575" height="84">
<tr>
<td align="center">
<table style="font-size: 10pt; font-family: 돋움;" cellpadding="3">
<tr>
<td><input type="text" style="width: 300; height: 22;">
<img alt="" src="./image/btn_search.gif" align="top">
</td>
</tr>
<tr>
<td align="center">
<input type="radio" name="r1" checked="checked"><font color="#339900"><b>카페명</b></font>
<input type="radio" name="r1"><font color="#339900"><b>게시물</b></font>
<input type="radio" name="r1"><font color="#339900"><b>매니저/ID</b></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
파일
○ 파일 업로드시 사용
<input type="file">
버튼
<input type="button" value="전송">
select
○ 선택지 중 하나 선택
휴대폰
<select>
<option>선택</option>
<option>010</option>
<option>011</option>
<option>016</option>
<option>017</option>
</select>
textarea
○ 입력하는 창의 넓이와 길이 조절 가능
댓글</br>
<textarea rows="10" cols="20"></textarea>
'STUDY > JSP' 카테고리의 다른 글
| Jsp 4일차 - jsp영역 안에서 html사용 (0) | 2019.02.15 |
|---|---|
| Jsp 4일차 - request & response (0) | 2019.02.14 |
| Jsp 4일차 - 이벤트 (0) | 2019.02.14 |
| Jsp 3일차 - CSS기본 (0) | 2019.02.14 |
| Jsp 1일차 - 톰캣 설치 (0) | 2019.02.11 |
댓글