[21.08.30] tomcat 설치와 HTML

웹은 거미줄로 전세계로 넒게퍼진 인터넷망을 의미합니다.
원래 인터넷은 미국의 군사목적으로 만들어졌는데 전시상황에서 수신호를 하기위해 만든 것입니다.

아파치 tomcat

Web Application Server(WAS) 중 하나입니다. WAS는 특정 컴퓨터에 웹 어플리케이션과 서버환경을 만들어주는 프레임워크인데 그중 저는 tomcat을 사용할거예요

c드라이브 server 폴더를 생성해서 압축파일 해제해줍니다.
C:\server\apache-tomcat-9.0.52\bin에 존재하는 배치파일을 쓸거예요

startup.bat 실행해서 tomcat이 잘되는지 안되는지 확인합니다.

실행오류?
db포트와 8080이 겹쳐서 오류생겼습니다. 그래서 db포트번호를 변경해줄게요
cmd>sqlplus
user: sys as sysdba
exec dbms_xdb.sethttpport(9090);
PL/SQL procedure successfully completed.가 뜨면 변경성공

shutdown.bat 누르면 꺼집니다.

java할때 사용한 workspace가 아니라 새로운 workspace로 switch해줍니다. 새로운 workspace가 되면 설정이 다 초기화됩니당

tomcat 설치 후 이클립스 File->switch workspace->새로운 Web workspace 폴더 연결
new server -> apache tomcat 9.0 선택 후 c드라이브에 서정한 폴더경로 지정

서버는 지속적으로 돌아가면서 클라이언트가 오는걸 계속 확인해야하기때문에 보통 계속 켜놔야합니다.
서버를 시작하려면 run on server(ctrl+f11)->tomcat 9.0

웹을 만들 환경을 이클립스에서 구성하고자 프로젝트를 생성해주었어요
Dynamic Web Project-> 타겟 런타임-> 톰캣 9.0 폴더

웹 문서는 앞으로 src>main>webapp에 만들면돼요!

HTML

Hyper Text Markup Language.

웹페이지를 만들기위한 표준 마크업 언어
웹페이지의 구조(view)를 나타냄
요소(elements)들로 이루어짐
html 요소들은 내용을 어떻게 보여줘야할지 브라우저에 알려줌
html 요소들은 태그(<>)로 이루어짐
선언타입 : <tagname>content</tagname>
html 태그는 보통 시작태그와 종료태그가 한 쌍이지만 종료태그가 없는 경우도 있음
태그는 대소문자 구분없이 사용

HTML 기본 형식

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

<!DOCTYPE html> html 문서 타입 선언
<html> </html> html 문서의 시작과 끝을 알려주는 태그
<head> </head>문서의 메타 데이터를 설정하는 곳. 화면에 안보임
<meta charset="UTF-8"> html 문서의 언어 포맷
<title> </title> 문서의 제목
<body> </body>웹 브라우저에 내용이 보이는 부분

html의 역할은 데이터를 보여주는 것입니다. css, html, js만 사용해서 웹을 만들면 정보제공용으로밖에 못만들어요.

주석

주석 적용 : ctrl+shift+/
주석 해제 : ctrl+shift+\

제목 heading

  <h1>제목 작성 부분1</h1>
  <h2>제목 작성 부분2</h2>
  <h3>제목 작성 부분3</h3>

1이 제일 큰 제목을 만들고 6까지 있어요

문단 paragraph

  <p>본문 작성 부분 <br>
  줄바꾸기 break line<br>
  다음줄<hr>
  </p>

p : 본문 작성 부분
br : 줄바꾸기. 종료태그 없음
hr : 구분선

Text Format

  <b>볼드체</b>
  <strong>강조</strong>
  <i>이태릭체</i>
  <em>강조 이태릭</em>
  <mark>마크</mark>
  <sup>위첨자</sup>
  <sub>아래첨자</sub>
  <q>질문문</q>
  <blockquote>
  <p>인용문</p>
  </blockquote>
  <pre>HTML 태그 그대로 출력</pre>

리스트

1. Unordered List : 순서가 없는 리스트

  <ul>
    <li>이렇게</li>
    <li>하나의</li>
    <li>리스트</li>
  </ul>

이렇게
하나의
리스트 처럼 똑같은 형태로 표시됩니다

<ul style="list-style-type: none;">으로 하면 앞의 도형이 사라집니다.

2. Ordered List : 순서가 있는 리스트

  <ol type="1">
    <li>1번</li>
    <li>2번</li>
    <li>3번</li> 
  </ol>

type에 1, a, i 등을 넣으면 해당 형식으로 순서가 연속됩니다.

Definition List(사전식 리스트)도 있어요

style

<텍스트태그 style="">

body에 적용해서 전체 본문에 같은 스타일 적용도 가능합니다.

background-color: 배경색지정
color: 글씨색
font-familly: 폰트 종류
font-size: 폰트 크기(px 혹은 %)

div

본문의 레이아웃을 구분하기 위해서 사용하는 태그

링크

<a href="https://www.google.com">구글</a>
<a href="index.html">내가만든페이지</a>

html 링크는 하이퍼링크라고 함

지역링크 : 같은 프로젝트 안에 있는 페이지 주소를 경로로 할때.
외부주소링크 : 나와 다른 서버에서 돌아가는 페이지 주소.

localhost는 내 서버의 경로를 의미. 컴퓨터의 ip주소와 동일함.
서버를 한번 시작하면 종료하지 않는 이상 현재 사용중인 파일뿐만 아니라 프로젝트에 있는 모든 문서가 지속적으로 서버에서 관리되고있음.
현재 실행중인 페이지 외의 다른 페이지는 url로 신호가 올때까지 대기상태에 머물러있어서 프로젝트에 많은 문서가 존재해도 부하에 걸리지않음.
내pc가 부하걸리는것과 웹사이트가 서버가 부하걸리는건 다른 영역입니다.

이미지

alt(alternate) : 이미지 설명
src(source) : 이미지 경로(출처)
title : 이미지 타이틀
style : 이미지 스타일
width, height : 이미지 넓이와 높이

<img alt="이미지 설명" src="상대경로" witdth="100" height="100">

이미지에 링크를 걸어서 이미지 클릭 시 페이지 이동도 가능해요

<a href="02_basic.html">
<img alt="" src="이미지경로" title="tooltip 텍스트" style="width:100px; height:100px">
</a>

타겟 속성 target attribute

<a href="https://www.google.com" target="_blank">구글 새탭</a>

_blank : 새창이나 새탭으로 링크문서 열기
_self : 기본값. 현재창이나 탭에서 링크문서 열기
_parent : 부모 프레임에 열기
_top : 프레임 밖에서 현재 창이나 탭에 링크문서 열기

id 속성

<a href="#C4">chapter 4 이동</a>

~~~긴글~~~

<h2 id="C4">Chapter 4</h2>

같은페이지에서 이동할 태그에 id를 입력하고 링크의 주소에 #id이름으로 경로를 지정해주면 해당 태그 위치로 이동합니다.

사실 html 기본 요소들은 코드만 다르지 벨로그 사용하면서 써본것들이라 익숙해서 훅훅 넘어가겠숩니다

Author And Source

이 문제에 관하여([21.08.30] tomcat 설치와 HTML), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yeddoen/21.08.30-tomcat-설치와-HTML

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)