톰캣 - jsp 를 서블릿으로 바꾼다
톰캣에서는 서블릿을 해석해서 사용자에게 보여준다.
was(web application service) = 톰캣
dynamic module 의 역할
web.xml 웹사이트 배포 파일
model = 자바 코드 비지니스 로직 (db 조작)
view = jsp
controller = 서블릿
기존의 개발은 디자이너가 웹 페이지 프론트를 디자인 한 후에 개발자에게 코드를 넘겨주면
개발자가 그 디자인에 맞춰서 기능들을 자바로 구현하는 방식이었다.
그래서 디자이너가 디자인을 조금만 바꿔도 개발자가 디자인에 맞춰서 코드를 대폭 변경해야했다.
이러한 갈등을 줄이기 위해 디자인과 개발을 분리한 MVC패턴이 생겨났다.
jsp코드를 Chrome에서 확인하는 방법
다음과 같이 실행화면을 확인 할 수 있습니다.
톰캣의 포트 번호는 8080 오라클의 포트 번호는 8080이다.
여기서 신기한 것은 오라클을 먼저 설치하고 톰캣을 설치하면 포트 번호의 충돌이 일어난다.
그러나 톰캣을 먼저 설치하고 오라클을 설치하면 포트 번호의 충돌이 일어나지 않는다.
오라클에서 알아서 번호를 회피한다.
html 공부 사이트
브라우저 : html 문서의 태그를 쓴것을 보기 좋게 보여주는 도구
브라우저마다 태그를 지원하지 않는 것들이 있다.
이전에는 explorer 가 표준이었다. 그리고 브라우저마다 지원하는 태그와 지원하지 않는 태그가 있다.
css는 html의 속성을 한 곳에 따로 모아놓은 것
#00 00 00 빛의 3요소
R G B
00에는 0부터 f까지 16진수가 들어간다.
# 0 00 00 00 빛의 3요소
명도 R G B
CMYK 잉크의 4요소
글꼴은 다른 사용자의 컴퓨터에 없을 수도 있기 때문에 웹 글꼴이라는 개념을 사용한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문단 태그 p태그와 pre태그</title>
</head>
<body>
<h1>paragraph</h1>
This is a paragraph
This is another paragraph
<p style="color:green;">
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
</p>
</body>
</html> |
cs |
|
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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문단 태그 p태그와 pre태그</title>
</head>
<body>
<h1>paragraph</h1>
This is a paragraph
This is another paragraph
<p style="color:green;background-color:white;text-align:center;">
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
</p>
<hr/>
<pre>
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
</pre>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글꼴 태그 : font태그와 문단태그 : p태그 , 줄바꿈 : br태그</title>
<!--br태그와 p태그는 개행 폭이 다르다.-->
</head>
<body>
<!--글자의 크기 지정(size1~7), 색, 글꼴지정할때 사용-->
This is <span style="background-color:blue;">some</span> text!
<p><font size="1" color="blue">This is text</font></p>
<p><font size="2" color="yellow">This is text</font></p>
<font size="3" color="red">This is text</font>
<font size="4" color="black">This is text</font>
<font size="5" color="green">This is text</font>
<font size="6" face="sans-serif">This is text</font>
<p><font size="7" style="font-family:serif;"color="green">This is text</font></p>
<font size="8" style="font-family:궁서"color="green">This is text</font><br/>
<!--style="font-family:글꼴이름"으로 작성하는게 html5 방식이다. -->
<font size="9" color="green">This is text</font>
</body>
</html> |
cs |
|
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 |
<!DOCTYPE html><!-- html5의 문서를 정의한다. document type의 약자 -->
<html><!--태그--><!--루트 요소 = 루트 엘리먼트 -->
<!--DOM Document object modeling-->
<head><!-- 헤더 -->
<meta charset="UTF-8"><!-- 메타 데이터 : 데이터에 관한 구조화된 데이터 -->
<!--charset = "UTF-8" 문자를 처리할때 UTF-8을 쓴다-->
<title>헤더 태그 : h1 ~ h6</title><!-- 브라우저 제목 표시줄 -->
</head>
<body>
<!-- 바디 -->
<!-- html : 하이퍼 텍스트 마크업 언어 (hyper text markup language) -->
<!--html요소(태그)는 html 페이지의 구성요소이다.-->
<!-- 태그는 <시작 태그>와 Content(텍스트) </끝 태그>로 구성 -->
<!--끝태그가 존재하지 않는 태그도 있다 <br/> <hr/> </br>이 존재하지 않는다-->
<!--모든 태그는 속성을 가질 수 있다. 속성은 시작 태그에 지정한다.-->
<!--속성은 이름 = "값"으로 구성되어 있다.-->
<!-- 헤더 태그 : 제목을 작성 할 때 사용, 일반 글자보다 굵다 -->
<!-- 블록레벨 태그이다. : 한 줄을 다 차지하는 태그 -->
<!-- 블록레벨의 반대 개념을 인라인 레벨이라고 한다. 예) <span>태그 -->
<!-- 배경속성을 넣어보자 -->
<h1>Hello</h1>
<h2 style = "background-color:green;align:center;">Hello</h2><!--전체 한줄 차지 : 블록레벨-->
<h3 align="center">Hello</h3>
<h4>Hello</h4>
<h5>Hello</h5>
<h6>Hello</h6>
<h7>Hello</h7>
<h8>Hello</h8>
<h0>Hello</h0>
Hello2
<span style="background-color:yellow;"align="center">Hello3</span><!--부분차지 : 인라인레벨-->
</body>
</html> |
cs |
질문사항은 jswoo030@gmail.com으로 보내주세요.
'HTML│CSS│Java Script' 카테고리의 다른 글
| html ul 태그 li 태그 (0) | 2017.12.01 |
|---|---|
| margin padding (0) | 2017.12.01 |
| Brackets IDE 설치 (0) | 2017.10.26 |
| 티스토리 블로그 글꼴 편집 (0) | 2017.09.13 |
| 티스토리 블로그 스킨 색상 변경하는 방법 (0) | 2017.09.13 |
댓글