스프링 프로젝트에 톰캣을 설정하려고 합니다.

참고하시는 분들의 PC에 이미 톰캣이 설치 되어 있다고 가정하겠습니다.(in Program Files or anywhere)





이클립스에서 프로젝트를 생성 하듯이 File -> New -> server 검색을 하고 다음 버튼을 눌러주세요.









준비하신 톰캣의 버젼에 맞게 선택 해주세요. 저는 8.0버전이라 Tomcat v8.0 Server를 선택 하였습니다. 그리고 다음 버튼을 눌러주세요.










Tomcat Installation Directory 는 준비하신 톰캣 폴더로 정해주시고,

JRE에는 해당 프로젝트에서 사용하실 jdk 로 정해주시면 됩니다. 그리고 Finish 버튼을 눌러주세요.








서버 생성은 완료 되었고 웹 서버 사용이 필요하신 프로젝트를 서버 작동을 위해 포함 해주세요.









그리고 생성된 서버의 server.xml 파일에서 path를 "/" 로 바꿔주세요.

물론 사용하시는 분에 따라서 해당 내용은 변경되야 할 필요가 있습니다.





브라우저 객체(BOM)의 객체인 screen 객체 메소드에 이은,

location객체와 history 객체의 메소드 입니다.



location.href : URL을 설정 및 반환 합니다.

location.host : URL 호스트 이름과 포트 번호를 설정 및 반환합니다.

location.hostname : URL의 호스트 이름을 설정 및 반환합니다.

location.hash : URL의 해쉬값을 설정 및 반환합니다.

location.origin : URL의 프로토콜, 호스트이름, 포트번호를 반환합니다.

location.protocol : URL의 프로토콜을 설정 및 반환합니다.

location.port : URL의 포트 번호를 설정 및 반환합니다.

location.search : URL의 쿼리스트링을 설정 및 반환합니다.

location.reload() : 화면을 새로고침 합니다.(F5와 같은 기능)


history.length : 방문 목록 갯수를 표현합니다.

history.back() : 이전 페이지로 이동 합니다.

history.forward() : 존재하는 다음 페이지로 이동 합니다.

history.go() : 인덱스 값에 맞춰 페이지가 이동 합니다.


navigator.appCodeName : 브라우저 이름을 반환합니다.

navigator.appName : 브라우저 이름을 반환합니다.

navigator.appVersion : 브라우저의 버전 정보를 반환합니다.

navigator.cookieEnabled : 쿠키 사용 여부를 반환합니다.

navigator.geolocation : 유저 접속 위치의 Geolocation 객체를 반환합니다.

navigator.language : 브라우저의 사용 언어를 반환합니다.

navigator.onLine : 온라인 브라우저 인지 확인합니다.

navigator.platform : 운영체제 정보를 반환합니다.

navigator.product : 브라우저 엔진 이름을 반환합니다.

navigator.userAgent : 서버 정보를 반환합니다.

navigator.javaEnabled() : 자바 사용 여부를 확인 합니다.(boolean)



결과 값이 보이는 내용만 테스트 하였습니다.





	console.log(navigator.appCodeName);
	console.log(navigator.appName);
	console.log(navigator.appVersion);
	console.log(navigator.cookieEnabled);
	console.log(navigator.geolocation);
	console.log(navigator.language);
	console.log(navigator.onLine);
	console.log(navigator.platform);
	console.log(navigator.product);
	console.log(navigator.userAgent);
	console.log(navigator.javaEnabled());





실행 결과 :





자바스크립트의 배열을 추가,  삭제, 정렬 기능을 사용할 수 있는

배열 메소드를 코딩 하였습니다.


join('문자열') : 배열 객체 데이터를 문자열로 이어줍니다.

reverse() : 배열 객체 데이터의 정렬 순서를 역방향으로 해줍니다.

slice(index1, index2) : index1 ~ index2 까지의 구간을 잘라서 표현합니다.

sort() : 배열 객체 데이터를 오름차순으로 정렬합니다.

concat(배열) : 선택된 배열+'배열'을 하나의 배열로 연결 합니다.

pop() : 배열 객체 데이터의 마지막 데이터를 삭제합니다.

push() : 마지막 인덱스에 새로운 데이터를 추가 합니다.

shift() : 배열 객체 데이터의 맨 첫번째 데이터를 삭제 합니다.

unshift() : 첫번째 인덱스 앞에 새로운 데이터를 추가 합니다.



	var arr1 = ['A', 'B', 'C', 'D'];
	var arr2 = ['가', '나', '다', '라'];
	var arr3 = [1, 5, 3, 8, 2, 7];
	var arr4 = ['E', 'F', 'G', 'H'];
	var arr5 = ['a', 'b', 'c', 'd'];

	console.log(arr1.join(' & '));	// join('문자열')
	console.log(arr1.reverse());	// reverse()
	console.log(arr3.slice(0,3));	// slice(index1, index2)
	console.log(arr3.sort());		// sort()
	console.log(arr3.splice());		// splice()
	console.log(arr4.concat(arr5));	// concat(array)
	arr2.pop();		// pop()
	arr2.push('카카');	// push('문자열')
	arr2.shift();		// shift()
	arr2.unshift("가가"); // unshift('문자열')
	console.log(arr4.length);	




결과 : 



​HTML 홈페이지 레이아웃을 제작해보려고 합니다!

일단 시작하기전에 div태그의 id를 궁금해 하시는 분들이 계시는데

id는 해줘도 안해줘도 상관은 없지만 실제로 html홈페이지를

제작할때는 많은 div를 이용하기 때문에 헷갈리지 않게끔 구분해서 사용해주시는 습관을 들여두시는게 좋습니다!!


 

 <html>
    <head>
       <title>
        
   레이아웃
       </title>
    </head>

    <body>

 

       <div id="wrap" style="width:800px;height:460px;border-width:2px;border-style:solid;border-color:black;clear:both;">


           <div id="Header" style="width:800px;height:60px;background-color:orange;">Header</div>
           <div id="menubar" style="width:800px;height:60px;background-color:green;clear:both;">Menubar</div>
           <div id="menu" style="width:150px;height:290px;clear:both;float:left;background-color:brown;">Menu</div>
           <div id="screen" style="width:650px;height:290px;float:left;background-color:white;">Screen</div>
           <div id="footer" style="width:800px;height:50px;clear:both;background-color:red;">footer</div>
       </div>


    </body>
</html>

 







 div태그를 이용해서 크게 한개의 영역(wrap)을 만들었고

그 wrap 영역안에 5개의 영역을 만들었습니다.

(Header, Menubar, Menu, Screen, Footer)

일단 Wrap영역을 한눈에 알아 볼 수 있게 border속성을 이용했고​

나머지 영역에 영향을 받지 않게끔 설정하는 clear:both; 속성도 사용했습니다.

(clear:both;=플롯의 초기화)​

​그리고 wrap의 영역안에 차례대로 5개의 영역을 만들었습니다.


이렇게 몇 번 홈페이지 레이아웃을 잡아보시면 나중에 어렵지 않게 하실 수 있습니다!!




내용이 도움이 되셨으면 공감 한 번 눌러주시길 부탁드립니다!!!

+ Recent posts