sun cloud

목차

sun cloud

톰캣

image

톰캣이란?

정식 명칭은 Apache Tomcat으로 아파치 재단에서 만든 오픈소스 WAS(Web Application Server)입니다. 수업에서는 초반에는 이를 활용하여 웹서버를 사용해보고, 나중에는 jsp 실습도 해볼 예정입니다.

참고) 웹서버와 WAS(Web Application Service) 그리고 아파치(Apache)와 톰캣(Tomcat)에 관해서는 다른 글에서 다뤄 볼 예정입니다.



설치 및 설정

첫 한 달여간의 수업동안 javaSE를 배웠고, 다음에는 새로운 workspace에서 DB를 배웠습니다. Web 수업 역시 새로운 workspace를 사용할 예정입니다.

수업에 앞서 응용프로그램 설치와 몇 가지 사전 설정이 필요합니다.

이클립스 workspace변경을 시작으로 apache tomcat 설치와 설정을 진행하겠습니다.


  1. 이클립스 워크스페이스 변경 및 설정

먼저 이클립스에서 새로운 workspace를 만들어보겠습니다.

image

그림과 같이 Switch Workspace에서 Other로 들어가 새로운 workspace명을 입력해주면 생성이 됩니다.

생성을 했으면 설정을 바꿔주겠습니다.

Window -> Preferences -> Java -> Installed JREs로 들어가시면 jre(default)가 체크되어 있으실텐데 체크 해제하신 후 Add를 눌러서 Standard VM -> Directory에서 로컬디스크 C 아래의 program files에서 java 폴더를 찾아서 jdk 1.8을 설정해주시고 Apply and Close 해주시면 됩니다.

image


다음으로 Window -> Preferences -> Java -> Installed JREs -> Execution Environments에서 jdk1.8 항목이 새롭게 생기는데 체크해주시면 됩니다.

image



여기까지는 기존에 사용했던 설정이고 이제는 이번 웹 수업부터 새롭게 적용할 설정들을 알아보겠습니다.

이클립스 encoding을 설정하겠습니다.

Preferences에서 encoding을 입력해보시면 다음과 같은 항목이 나옵니다.

image


Workspace, CSS Files, HTML Files, JSP FIles의 항목들에서 인코딩 설정을 utf-8로 맞춰줍니다.

image



이제 톰캣을 설치하겠습니다.

공식 홈페이지에서 압축 파일을 받으신 후 사용하실 디렉토리에 풀어주시면 됩니다.(수업에서는 폴더명을 WAS로 했습니다.)

설치가 끝나셨으면 톰캣 역시 설정을 해줘야 하는 부분이 있는데 xml파일(설정 파일)을 수정해야 하기 때문에 관련 에디트 툴을 사용하시면 편리합니다.(수업에서는 EditPlus를 사용했고, 저는 개인적으로 Visual Studio Code를 사용했습니다)

  1. server.xml에서 port를 맞게 변경해주시고(DB수업에서 8080을 사용했기에 새로운 포트를 잡아줬습니다), URIEncoding="utf-8" 로 설정합니다.

image

  1. context.xml에서 <Context>를 <Context reloadable="true">로 수정합니다.

image

  1. 이클립스에서 WAS를 제어하기 위한 설정을 합니다.

    3-1. 이클립스 하단부의 Servers -> 클릭하여 새롭게 생성 -> Tomcat v8.5 Server -> Next

image

디렉토리 설정을 web-tomcat으로 하고 JRE를 jdk1.8 설정합니다.

image


3-2. Servers에 Tomcat v8.5가 생기는데 더블 클릭한 뒤, 서버 위치를 두번째 선택지인 Use Tomcat Installation으로 바꿔주고 배포 경로는 web-tomcat 폴더로 설정해주시면 됩니다.

image



sun cloud


이것으로 기본 설정은 마쳤습니다.

이제 HTML, CSS 문법을 살펴볼텐데, 그 전에 우선 간단한 용어 정리를 해보겠습니다.

기본 용어 정리

W3C: 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직

참고 사이트: www.w3schools.com

HTML: HyperText Markup Language. 웹 문서의 컨텐츠를 정의하는 언어입니다. 웹브라우저에 의해 서버에서 전송된 html 정보를 입력받은 뒤 이를 번역해서 웹 화면을 구성합니다.

CSS: Cascading Style Sheets. html요소들이 화면에 어떻게 보여지는지 꾸며주는 역할을 하며 웹 문서의 스타일과 레이아웃을 정의합니다.

JavaScript: 웹 문서의 행위를 담당합니다. 라이브러리를 활용하면 다양한 작업이 가능합니다.(node.js를 활용하면 서버를 구축할 수 있습니다.)

(참고, XML: 주로 설정 정보를 명시할 때 사용합니다)

HTML

: 앞에서 간략히 소개했듯이 HyperText Markup Language의 약자로 웹 문서의 내용을 정의합니다. 웹 문서에서 가장 중요한 요소라고 볼 수 있겠습니다. 프로그래밍 언어가 아니라 마크업 언어로 현재 HTML5가 최신 표준입니다.

저희는 이클립스를 활용하여 html과 css를 작성하는데 project -> src -> main -> webapp 내에서 진행해야 합니다.

실제 HTML 구성 요소를 살펴보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<!-- html 주석 :  HTML 5 선언부  -->
<html>
  <!-- 위의 DTD를 제외한 전체를 이 태그로 둘러싼다. -->
  <head>
    <!-- 웹문서의 속성을 지정하기 위한 태그로 타이틀이나 메타데이터(데이터의 데이터)를 기술한다. -->
    <meta charset="UTF-8" />
    <!-- 부가 정보를 선언하는 태그, charset 속성: 인코딩 선언 -->
    <title>step1 html</title>
    <!-- 제목을 선언하는 태그 -->
  </head>
  <body>
    <!-- 실제 화면의 컨텐츠를 기술 -->
    <marquee
      ><!-- 태그 안의 글자를 일정 방향으로 지속적으로 움직이게 하는 태그 -->
      Hello HTML
    </marquee>
  </body>
</html>


HTML 기본 TAG 연습

1
2
3
4
5
6

<!-- -->: 주석
<h1></h1>
: h태그로 1~6까지 오름차순으로 글자가 작아진다다. <br />: 줄바꿈
<font size="" color=""></font>: 폰트 설정, size:글자 크기, color:글자 색
<img src="" />: 이미지를 추가한다 <a href=""></a>: a(anchor) - 문서를 연결,
href(html 문서를 참조) - 하이퍼링크를 생성 => 페이지를 링크


리스트 태그

image


테이블 태그

테이블 태그는 <table></table>태그 안에 행을 의미하는<tr></tr>(table row)과 그 안에 다시 데이터를 나타내는 <td></td>(table data)를 사용해서 표현할 수 있습니다.

image


그리고 이러한 테이블에 속성을 부여해서 보다 다양하게 표현해 줄 수 있습니다.

image

(참고: JSP 또는 JavaScript 등의 언어로 테이블을 반복문으로 활용하면 실제로 저희가 사용하는 게시판 등의 글 목록을 생성한할 수 있다고 합니다.)


CSS

: Casacading Style Sheet. 디자인을 전담하며 html과 달리 문법에 엄격합니다.

(참고: 특정 파일에서만 작업이 필요할 경우 해당 html에서 작성이 가능합니다. 하지만 css파일을 따로 생성해서 작성하면 다른 파일에서도 참조가 가능하기에 활용도가 높아 보다 선호됩니다.)

  1. html에서 css 적용: title 아래에 <style type="text/css"></style> 입력해서 이 안에 css 작성을 합니다.

    image

  2. css파일 생성 후 참조: css 파일 작성 후 html문서에서 title 아래에 <link rel="stylesheet" type="text/css" href="css/mystyle.css">를 입력합니다.

image


간단한 적용 예제

image-20210917200834399


Selector

: 선택자라고도 하며 특정 요소들을 선택하여 스타일을 적용하게 해줍니다.

1
2
3
4
5
6
7
8
9
10
11

<style type="text/css">
    table{
        border-collapse: collapse;
    }
    table, td{
        border: 1px solid black;
    }
    td{
        padding: 10px;
    }
</style>


div VS span

<div>와 <span> 태그는 언뜻 보면 비슷해 보이지만 영역을 차지하는 부분에서 차이점이 있습니다.

<div>는 블록 레벨(사각형 박스)로 영역을 차지하고, <span>은 inline elements를 감싸줍니다.(문장 단위) 그래서 <div>는 줄바꿈이 되면서 해당 라인 전체를 차지하게 되고, <span>은 옆에 내용이 이어져서 붙게 되며 내용 자체만큼의 영역을 차지하게 됩니다.

image


Java Web Programming 카테고리 내 다른 글 보러가기

댓글남기기

참고