jsp 프로그래밍

이름과 나라받기

메쏘드 만들기

'언어 > jsp' 카테고리의 다른 글

jsp_css_html  (0) 2018.01.24
html_종합  (0) 2018.01.24
UTF-8 vs EUC-KR 이용하기_<문자 치환>_지시자_java와html의 만남_표현식_주석처리_  (0) 2018.01.24
http_jsp_javascript_java_EclipseEE설정_hellowolrd_port_  (0) 2018.01.23

테이블

흔히 우리가 표라고도 부른다.

사용하는 방법은 다음과 같다.

정의

     <body>
        <table border="<숫자>">->border는 표의 행과 열사이 경계선 긋는다.

             <tr> 
             </tr>
             <tr> 
             </tr>
        --><tr></tr>은 열의 추가를 의미한다.

             <tr>    
            <td></td><td></td> -><td></td>는 행의 추가를 의미한다.
            <th></th> -굵은글씨 행의 추가이다.
             </tr>

        <table>
     </body>

예제

<html>
 <head>

 </head>
 <body>
    <table border="1">

         <tr>
        <td>1행 1열</td><td>1행 2열</td>
         </tr>

         <tr>
        <td>2행 1열</td><td>2행 2열</td>
         </tr>

         <tr>
         <th>3행 1열</th><td>3행 3열</td>
         </tr>

    </table>
 </body>
</html>

결과

병합

정의

column 병합은 colspan="<숫자>"
row의 병합은 rowspan="<숫자>"을 이용 th,td에만 적용한다.

         <tr>
        <td width="100" colspan="2">1행 1열->두행을 합쳐주겠다.
         </tr>

예제

 </head>
 <body>
    <table border="1">

         <tr>
        <td rowspan="2">1행 1열과 2행1열</td><td>1행 2열</td>
         </tr>

         <tr>
        <td>2행 2열</td>
         </tr>

         <tr>
         <th colspan="2">3행 1열과 3행 2열</td>
         </tr>

    </table>
 </body>
</html>

결과

css사용하기

헤드쪽에 명시를 해준다.

정의

 <head>
    <style>
        th{color:red;}

        h1 {color : blue ;}
    </style>
</head>

예제

<html>
 <head>
    <style>
    th{color:orange;font-size:50pt;}
    blue{color:blue;}
    </style>
 </head>
 <body>
    <table border="1">

    <th>hi</th><br>

    <blue>blue~</blue>

 </body>
</html>

결과

css class,css id,css inline 사용하기

정의

* class

<head>
    <style>
        .<class명>{옵션}
    </style>
</head>

* id

<head>
    <style>
        #<id명>{옵션}
    </style>
</head>

* 인라인으로 사용하기

<body>
    <css 옵션></css>
</body>

예제

<html>
 <head>
    <style>
    .classex{font-size:30pt;color:red;}
    #id{text-align:center;color:blue;}
    h1{color:orange;font-size:50pt;}
    </style>
 </head>
 <body>
    <p id="id">아이디입니다.</p>
    <p class="classex">클래스입니다.</p>
    <h1 style=color:green> 인라인입니다. </h1>
 </body>
</html>

결과

'언어 > jsp' 카테고리의 다른 글

jsp 프로그래밍  (0) 2018.02.01
html_종합  (0) 2018.01.24
UTF-8 vs EUC-KR 이용하기_<문자 치환>_지시자_java와html의 만남_표현식_주석처리_  (0) 2018.01.24
http_jsp_javascript_java_EclipseEE설정_hellowolrd_port_  (0) 2018.01.23

html

어디서 작성하여도 상관이 없다.

메모장으로 한번 실습을 진행해보도록 하겠다.

메모장으로 html을 만들기 위해서는 단순히 저장할때 모든파일 + 확장자를 html로 해주면 된다.

이때 한글을 쓸거면 인코딩을 utf-8로 해주도록 한다.

html 태그

문서의 시작과 끝을

<html>
</html>

이러한 방식으로 해주어 이문서가 html임을 알린다.

한번 실습을 해보자.

구글을 통한 분석

F12를 누르면 HTML코드를 볼 수 있다.

실제로 개발자들이 짠 코드를 볼 수 있게되는것이다.

DIV로 보통 파트를 구분하므로 마우스 커서를 대면 위의 그림과 같이 특정 부분이 보임을 알 수 있다.

이번에는 디버거를 보자

이내용을 내 HTML파일에 복붙해보자

잘은 안되지만 아무튼.. 이정도로 만족 하겠다.

정의

<HEAD>
</HEAD>

예제
<html>
 <head>
  <title>html입니다.</title>
 </head>
</html>

이러한 방식이다.

헤드를 쓰면 위 그림에서 html입니다. 라는 부분이 작성된다.

br

엔터의 기능을 수행한다.

정의
문장뒤<br>

예제
<html>
 <body> 
html<br>
hi<br>
 </body>
</html>

p

단락을 구분지어 준다.

정의
<p>
문장들
</p>

예제
<html>
 <body> 
  <p>단락</p>
   단락보기
 </body>
</html>

div

영역을 나눌때 사용된다.

정의

<div>
영역
</div>

예제
<html>
 <body> 
  <div>default</div>
  <div align="center">center</div>
  <div align="right">right</div>
 </body>
</html>

스타일 넣어주기

정의
 <div style= "배경에대한설정-이때 각 설정끼리 구분은;로한다" 글에대한설정>
 내용
 </div>     

예제
<html>
 <body> 
  <div style= " background:red; height:100px;" align="center"><br>첫줄<br>123 / 456</div>   
  <div style= " background:orange; height:200px;" align="center"><br>둘째줄</div>   
  <div style= " background:yellow; height:300px ;" align="center"><br>셋째줄<br>789 | 123 </div>
 </body>
</html>

입력한 그대로 넣어주기

정의

<pre>
내용
</pre>

예제

<html>
 <body> 
 <pre>
  o o
   0 0
  o o
 </pre>
 </body>
</html>

선그어주기

정의

<hr 옵션>

예제

<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
    1<hr color="red">
    2<hr color="orange" size="10">
    3<hr width="100">
    4<hr align="left" width="200">
    5<hr align="center" width="300">
    6<hr align="right" width="400">
 </body>
</html>

글씨 헤더<크기조정>

정의

<h숫자 옵션> </h숫자>

예제

<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
    <h1>H1</h1>
    <h2 align="left">H2</h2>
    <h3 align="center">H3</h3>
    <h4 align="right">H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
 </body>
</html>

글자 모양 변경

정의

    <i>기울이기</i><br>
    <b>기울이기</b><br>
    <u>밑줄치기</u><br>
    <s>취소긋기</s><br>
    <q>따옴표~</q><br>

예제
<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
    <i>기울이기</i><br>
    <b>기울이기</b><br>
    <u>밑줄치기</u><br>
    <s>취소긋기</s><br>
    <q>따옴표~</q><br>
 </body>
</html>

폰트

정의

<font 조건> </font>

예제

<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
    <font size="3" face="궁서">궁서_크기3</font>
    <font size="4" face="굴림">굴림_크기4</font>
    <font size="5" color="red">기본_크기5</font>
 </body>
</html>

ul,ol

ul---unorder list 순서없이 처리

ol--order list 숫자순대로처리

정의

<ul>
<li> </li>
<li> </li>
.
.
.
</ul>

<ol>
<li> </li>
<li> </li>
.
.
.
</ol>

예제

<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
    <ul>
    <li><font size="1">ul</font></li>
    <li><font size="2">ul</font></li>
    <li><font size="3" face="궁서">ul</font></li>
    </ul>

    <ol>
    <li><font size="1">ol</font></li>
    <li><font size="2">ol</font></li>
    <li><font size="3" face="궁서">ol</font></li>
    </ol>

 </body>
</html>

url 접속

  • 글자를 통해 들어가기 - a tag

    정의

    내용

    예제

    html입니다. google google

    -targe="_blank"는 옵션으로 클릭시 새 창으로 접속을 의미

  • 사진을 통하여 들어가기

사진올리기

정의
<img src="경로\사진.jpg" 옵션>
이때 사진의 경로를쓰지 않으려면 html파일과 사진의 경로가 동일하면 된다.

예제

옵션으로 테두리,크기 넣기

<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
    <img src="그림.jpg" border="3" width="10" height="10">
    <img src="그림.jpg"  border="10" width="20" height="20">
    <img src="그림.jpg"  border="20" width="30" height="30">
 </body>
</html>

배경

배경색넣기
정의
<body bgcolor = "green">

사진을 배경으로 넣기
정의
 <body background="사진.jpg">

예제
<html>
 <head>
  <title>html입니다.</title>
 </head>
 <body>
 <body background="그림.jpg">
 </body>
</html>

'언어 > jsp' 카테고리의 다른 글

jsp 프로그래밍  (0) 2018.02.01
jsp_css_html  (0) 2018.01.24
UTF-8 vs EUC-KR 이용하기_<문자 치환>_지시자_java와html의 만남_표현식_주석처리_  (0) 2018.01.24
http_jsp_javascript_java_EclipseEE설정_hellowolrd_port_  (0) 2018.01.23

UTF-8 vs EUC-KR 이용하기

JSP-HELLOWORLD의 코드를 살펴보겠다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
hello world!
</body>
</html>

위와같이 되어있다.

하지만 이는 euc-kr 방식으로 우리는 보통 utf-8방식으로 인코딩을 한다

ctrl-f를 눌러 다음과같이 한번 해주자.

replace all을 해주면 잘 바뀜을 확인 할 수 있다.

그렇다면 euckr 과 utf-8의 차이는 무엇일까?

euc-kr은 한글을 표현하는 방식으로 3바이트이다. 이는 한글을 자음과 모음으로 인식하는것이 아니라 통째로 한글자씩을 인식한다.

utf-8은 4바이트로 한글을 표현하며 한글을 자음과 모음을 따로 인식하여준다.

지시자

위를 다시한번 살펴보자.

맨처음 파일이 시작될때 <%@ 로 시작한다. 이는 "이파일은 jsp 입니다."라는 지시자 이다.

html안에 java코드 넣기

  • 정의

    <% java 코드 %>

  • 예제

print.out으로 한 이유는 페이지 출력이기 때문이다.

System.out.print로 할시 콘솔 출력이다.

이때 이는 f10을 눌러 화면 소스를 보더라도 java code는 보이지 않음을 확인 할 수 있다. 즉 java 코드는 서버에서 처리해주는것이고 클라이언트는 접근 불가능하다.

java 영역에 html 넣기

  • 정의

jsp파일의 java안에 html은 out.print영역 큰 따옴표 안에서자유로이 들어간다.

그이유는 그냥 html 자체가 화면에 출력이기 때문에 out.print역시 화면에 출력이기에 가능한 것이다.

  • 예제

표현식

java 코드의 특정변수 값만을 html에 띄워주는 식이다.

  • 정의

    <% int ex; %>

    <%=ex%>

  • 예제

주석처리

  • 정의
<%--내용--%>

종합 예제

'언어 > jsp' 카테고리의 다른 글

jsp 프로그래밍  (0) 2018.02.01
jsp_css_html  (0) 2018.01.24
html_종합  (0) 2018.01.24
http_jsp_javascript_java_EclipseEE설정_hellowolrd_port_  (0) 2018.01.23

http_jsp_javascript_java

jsp로 hello world 찍어내기

일단 사전 준비로

jdk,EclipseEE,apache를 설치하여준다.(설치는 구글링을 이용하여 참조)

설치후 eclipseEE에 접속해서

file - new -dynamic web project-jsp_01_23-targetruntime-new runtime-8.5-create new local servere체크-next-bowse에 아파치 톰캣 위치-apcahe-tomcat-8.5선택-확인을 누르고 finish-finish

프로젝트 만든곳-jsp_01_23-webcontent가 웹으로 만들떄 사용

new-jspfile

or ctrl+n을 친다.

jsp_01을 만들어준다.

jsp=java=html이다.

body에 hello world 치고 

ctrl+shift+s로 저장!

ctrl+f11로 컴파일

다음과같이 주소를 지정하여 볼 수 도 있다.

port

우리는 여러 어플리케이션을 통하여 교신을 한다.

이때 ip주소는 기기에 해당되므로 어플끼리 교신하기 위해서는 단순 ip주소 뿐만 아니라 포트번호가 필요하다.

즉 어플리케이션을 찾기 위한 식별번호로 생각하면 된다.

따라서 찾은 충돌이 일어날 수 있다.

만약 eclipse에서 이러한 포트 관련 충돌 에러가 뜬다면

이클립스에 서버-apache-serverxml-밑에 디자인이 아닌 소스클릭-63번째 라인에 포트가 8080인데 바꾸어주자

'언어 > jsp' 카테고리의 다른 글

jsp 프로그래밍  (0) 2018.02.01
jsp_css_html  (0) 2018.01.24
html_종합  (0) 2018.01.24
UTF-8 vs EUC-KR 이용하기_<문자 치환>_지시자_java와html의 만남_표현식_주석처리_  (0) 2018.01.24

+ Recent posts

티스토리툴바