코딩딩/Javascript
Web
전낙타
2023. 8. 28. 18:54
Web Application 폴더의 구조
자바를 이용하는 경우 어떤 WAS ( Web Application Server ) 를 쓰냐와 상관 없이 표준화된 폴더 구조로 Web Application 폴더(Context) 를 작성해야 한다.
웹에서 서비스가 되려면 반드시 아래와 같은 표준화된 폴더 구조를 갖도록 만들어야 하고 정확하게 정해진 위치에 Web Application 파일을 만들어야 한다.
IDE마다 서버가 인식하는 기본 인식 위치가 다르다.
[이클립스(STS)]
C:\JBJ\playdata\work\webwork\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\clientweb
- | Context |
- | 폴더 | - 이미지 파일, html 파일, css 파일, js 파일, jsp 파일
- 이미지 파일, html 파일, css 파일, js 파일, jsp 파일
- WEB-INF
- web.xml : 설정 정보를 정의하는 설정파일
- | lib | : 라이브러리 파일이 위치하는 폴더(jdbc 라이브러리….)(maven, gradle로 관리)
- | classes | : 서블릿 디렉토리(서블릿 클래스와 자바 클래스가 위치하는 폴더)
Front end 기술
웹 표준을 지켜서 개발해야 한다.
웹 표준은 웹에서 사용되는 표준 기술이나 규칙
이 표준화를 담당하는 기관 W3C
전세계 개발자들이 모두 사용하는 기술이다.
크롬, 엣지, 파이어폭스(모질라 재단), 사파리(애플), 오페라 같은 브라우저 위에서 동작
브라우저를 만든 회사가 다르므로 브라우저마다 약간씩 다 르게 동작하기도 한다.
(크로스 브라우징)
HTML
웹 문서의 구성 요소를 정의하기 위한 기술
- 웹 페이지의 구조를 담당
- 웹 페이지를 구성하는 구성요소를 정의하는 역할
- Tag로 구성
- Tag를 작성하는 방법
- <시작태그 속성1 = “속성값1” 속성2 = “속성값2”></종료태그>
- 속성은 태그마다 다른 속성이 적용
- 모든 태그에서 공통으로 사용되는 속성
- <시작태그 속성1 = “속성값1” 속성2 = “속성값2”></종료태그>
- Tag를 작성하는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--html 주석문
클라이언트에 전송되는 주석문
html은 태그가 실행된 결과가 브라우저에 출력된다.
-->
<h1>안녕하세용</h1>
html 연습 기본연습 구조 정의하기
<h1>html 연습</h1>
<h2>html 연습</h2>
<h3>html 연습</h3>
<h4>html 연습</h4>
<h5>html 연습</h5>
<h6>html 연습</h6>
<h7>html 연습</h7>
<!-- h7 태그는 존재하지 않아 기본 타입으로 출력된다. -->
<br></br>
<br />
<hr />
<!-- 글자를 정의하기 위해서 사용하는 태그로 글꼴, 사이즈, 색상을 정의할 수 있는 태그
HTML5에서는 지양(글꼴, 사이즈, 색상은 모두 CSS)
-->
<font size="1" face="궁서" color="yellow">html 연습</font>
<br />
<font size="2" face="HY견고딕" color="blue">html 연습</font>
<br />
<font size="3" face="굴림" color="red">html 연습</font>
<br />
<font size="4" face="궁서" color="#DF0101">html 연습</font>
<br />
<font size="5" face="궁서" color="#5858FA">html 연습</font>
<br />
<font size="6" face="궁서" color="#ace3f8">html 연습</font>
<br />
<font size="7" face="궁서" color="#fe5c5c">html 연습</font>
<br />
<!-- 특수문자
< : <
> : >
space :
" : &qout;
-->
<p>지금은 html5
<h1>태그는 문서의 제목을 정의하기 위해서 사용하는 태그</h1>
</p>
<!-- 문단을 정의하기 위해 사용하는 태그 -->
<p>HTML5는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업
언어이다. 2004년 7월 Web <b><i>Hypertext</i></b> Application Technology Working
Group(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다.</p>
<p>HTML5는 HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 대한 차기 표준 제안이다. <br/>비디오</br>,
오디오 등 다양한 부가기능과 최신 멀티미디어 콘텐츠를 액티브X 없이 브라우저에서 쉽게 볼 수 있게 하는 것을 목적으로 한다.</p>
<h1>H<sub>2</sub>0</h1>
<h1>test<sup>2</sup></h1>
</body>
</html>
- 이미지
- path를 적용
- 이미지, 하이퍼링크, css파일, js파일, 백엔드 어플리케이션 연결 등 경로가 나오면 모두 동일하게 작업
- 모든 path는 서버가 인식하는 표준화된 폴더 구조를 기준으로 생각한다.context 폴더를 기준으로 경로를 생각
- 절대경로
- 이미지가 위치하는 경로의 pull path를 모두 적용
- 서버의 위치값까지 모두 적용ip,port,context명
- 절대경로에서 ip는 생략 가능
- <img src = /context명/폴더…/이미지파일명”/>
- 상대경로
- 현재 문서의 위치를 기준으로 경로를 파악
- 현재 요청된 문서의 위치를 기준으로 src에 명시된 경로를 찾는다.
- <img src = clientweb/images/product/dog”/>
- 현재 요청된 image.html 문서의 위치를 기준으로 찾는다. image.html문서의 위치가 /clientweb/html이 위치이므로 이 위치에서 clientweb/images 폴더를 찾는다.
- . 의 의미는 현재 디렉토리
- <img src="./images/product/dog.jpg"/>현재 문서의 위치에서 images폴더를 찾는다.
- .. 의 의미는 상위 디렉토리
- <img src="../images/product/dog.jpg"/>상위 문서의 위치에서 images폴더를 찾는다.
- 하이퍼링크
- 클릭하면 다른 문서나 사이트로 이동할 수 있도록 연결
- 문서내에서 이동 가능
- 형식
- <a> 클릭할 문자열이나 이미지</a>
- href속성 : 연결할 문서 혹은 사이트 주소(path - 절대, 상대주소 모두 이미지에서 작업하는 것과 동일)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <h2>하이퍼링크 - lounge.html을 상대경로와 절대경로로 연결</h2> <a href= "./media/media.html"><img src="/clientweb/images/dog3.jpg"></a> <a href= "/clientweb/html/lounge.html" target = "_self">문서연결(절대경로)</a> <a href= "/clientweb/html/lounge.html" target = "_blank">문서연결(절대경로)</a> <br/><br/><br/><br/><br/> <a href= "lounge.html" target = "_blank">문서연결(절대경로)</a> <br/><br/><br/><br/><br/> <a href= "http://www.naver.com" target = "_blank">사이트 연결(naver)</a> </body> </html>
- from 태그 (양식 태그)
- 서버와 통신하기 위해서 사용자의 입력을 받을 수 있도록 지원
- <form></form> 안에 정의<form method=”요청방식” action=”요청할 web application의 path”></form>
- submit이라는 버튼을 눌렀을 때 <form></form> 사이에 정의되어 있는 모든 양식태그의 name과 사용자가 입력한 값이 서버로 전송된다.action에 명시한 web application 파일이 실행된다.
- 요청 방식get방식 : 서버의 데이터를 가져오기 위한 방식, 4000byte정도를 서버로 넘길 수 있다.post방식 : 사용자가 입력한 내용이 요청 메시지의 바디에 추가되어 전송되므로 주소 표시줄에 노출되지 않는다. 길이제한이 없다. 파일 업로드는 무조건 post방식으로 처리해야 한다.
- 주소표시줄에 사용자가 입력한 값이 그대로 노출(요청헤더에 사용자가 입력한 데이터가 추가되어 전송)
- 서버로 사용자가 선택한 혹은 입력한 데이터를 전송하는 경우 값을 구분할 수 있도록 반드시 name속성을 정의해야 한다.
- 클라이언트가 서버로 요청을 어떤 방식으로 보낼것인지 명시생략하면 get방식
- get이나 post방식으로 요청
CSS
시각적인 표현을 담당 ( 스타일을 정의하거나 레이아웃을 줄때 사용 )
콘솔창에 해당 명령어를 입력시 CSS가 제거된 웹사이트의 모습을 볼 수 있다.document.head.parentNode.removeChild(document.head)
Javascript
컨텐츠를 바꾸고 움직이는 등 페이지를 동작하도록 만드는 처리를 담당