티스토리 뷰

백엔드 교육과정/3월

2024.03.20_ Web02 CSS / 이클립스 자바스크립트 설치 / Web03 javaScript

Ji@n 2024. 3. 21. 00:14

Web02 CSS

07_text

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
	/* 텍스트 색상 */
	color : blue;
}
/* 텍스트 정렬 */
.cls-left {
	text-align : left;
	text-decoration : underline;
}
.cls-center {
	text-align : center;
	text-decoration : overline;
}
.cls-right {
	text-align : right;
	text-decoration : line-through;
}
p {
	text-indent: 20px;
}

</style>
<title>CSS Text</title>
</head>
<body>
	<h1>CSS Text</h1>
	<h2 class="cls-left">Left</h2>
	<h2 class="cls-center">Center</h2>
	<h2 class="cls-right">Right</h2>
<p>DBOS와 DBOS 클라우드의 기원 
스톤브레이커와 자하리아, 그 외의 연구원은 어떻게 모였고, 왜 DBOS를 만들었을까? 3년 전, 스톤브레이커는 InfoWorld와의 인터뷰에서 데이터와 컴퓨팅에 대한 수요가 증가하면서 데이터베이스에는 대량의 운영체제 상태 저장이라는 새로운 과제가 생겼다고 언급한 바 있다. 그 무렵 그는 데이터브릭스의 CTO이기도 한 자하리아의 강연에 참석해 포스트그레SQL의 성능에 대한 자하리아의 지적을 유심히 들었다.
스톤브레이커에 따르면 자하리아는 당시 데이터브릭스가 운영체제 스케줄링을 어떻게 수행하는지에 대해 설명했다. 그는 "자하리아는 데이터브릭스가 클라우드에서 '백만 단위'의 스파크 서브 작업을 주기적으로 관리하는데, 그 정도 규모를 운영하면서 전통적인 운영체제 스케줄링 기법을 사용하는 것은 불가능하다고 말했다. 대신 자하리아는 데이터브릭스가 모든 스케줄링 정보를 포스트그레SQL 데이터베이스에 넣고 스케줄링을 SQL 애플리케이션으로 실행한다고 했다"라고 말했다. 스톤브레이커는 얼마 후 자하리아에 연락했고 전통적인 운영체제OS 기능을 대규모로 사용할 수 없는 기업이 매우 많다는 사실을 알게 됐다. 
이 논의가 DBOS의 탄생으로 이어졌다. 두 창업자는 새로운 스택의 가장 아래에서 데이터베이스 관리 시스템을 실행하고 모든 운영체제 서비스를 똑같이 실행하는 방식을 채택했다. 스톤브레이커는 "팀이 충분히 시스템을 구축해 기업이 현재 사용 중이거나 하고 있는 방식이 무엇이든 이 반전된 운영체제의 성능이 그에 못지않게 빠르다는 것을 입증했다. 기본적으로 이는 기업이 성능 저하 없이 데이터베이스의 모든 것을 활용할 수 있다는 것을 의미한다"라고 말했다. 

	</p>
	
</body>
</html>

CSS Text

Left

Center

Right

DBOS와 DBOS 클라우드의 기원 스톤브레이커와 자하리아, 그 외의 연구원은 어떻게 모였고, 왜 DBOS를 만들었을까? 3년 전, 스톤브레이커는 InfoWorld와의 인터뷰에서 데이터와 컴퓨팅에 대한 수요가 증가하면서 데이터베이스에는 대량의 운영체제 상태 저장이라는 새로운 과제가 생겼다고 언급한 바 있다. 그 무렵 그는 데이터브릭스의 CTO이기도 한 자하리아의 강연에 참석해 포스트그레SQL의 성능에 대한 자하리아의 지적을 유심히 들었다. 스톤브레이커에 따르면 자하리아는 당시 데이터브릭스가 운영체제 스케줄링을 어떻게 수행하는지에 대해 설명했다. 그는 "자하리아는 데이터브릭스가 클라우드에서 '백만 단위'의 스파크 서브 작업을 주기적으로 관리하는데, 그 정도 규모를 운영하면서 전통적인 운영체제 스케줄링 기법을 사용하는 것은 불가능하다고 말했다. 대신 자하리아는 데이터브릭스가 모든 스케줄링 정보를 포스트그레SQL 데이터베이스에 넣고 스케줄링을 SQL 애플리케이션으로 실행한다고 했다"라고 말했다. 스톤브레이커는 얼마 후 자하리아에 연락했고 전통적인 운영체제OS 기능을 대규모로 사용할 수 없는 기업이 매우 많다는 사실을 알게 됐다. 이 논의가 DBOS의 탄생으로 이어졌다. 두 창업자는 새로운 스택의 가장 아래에서 데이터베이스 관리 시스템을 실행하고 모든 운영체제 서비스를 똑같이 실행하는 방식을 채택했다. 스톤브레이커는 "팀이 충분히 시스템을 구축해 기업이 현재 사용 중이거나 하고 있는 방식이 무엇이든 이 반전된 운영체제의 성능이 그에 못지않게 빠르다는 것을 입증했다. 기본적으로 이는 기업이 성능 저하 없이 데이터베이스의 모든 것을 활용할 수 있다는 것을 의미한다"라고 말했다.

08_link

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
a {
	text-decoration: none;
	border : 1px solid hotpink;
	display : inline-block;
	width: 80px;
	height: 20px;
	text-align: center;
}
/* pseudo class는 ":예약어" 형식으로 사용 */
/* 마우스가 a 태그 위에 있을 때*/
a:hover {
	background: lightpink;
	color : white
}
/* 방문하지 않았던 링크 */ 
a:link {
	color : red;
}
/* 방문했던 링크 */
a:visited {
	color : yellow;
}
/* 마우스를 클릭하고 있을 때 */
a:active {
	background: green;
	color : red;
}

</style>
<title>CSS Link</title>
</head>
<body>
	<h1>CSS Link</h1>
	<a href="https://www.google.com">구글</a>
	<a href="https://www.daum.net">다음</a>
	<a href="https://www.naver.com">네이버</a>

</body>
</html>

CSS Link

구글 다음 네이버

09_list

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#menu {
	list-style-type : none;
}

/* 부모요소 자식요소 */
#menu li {
	display:inline-block;
	border : 1px solid black;
	width : 80px;
	text-align: center;
	background: darkgrey;
	color : white;
}
#menu li:HOVER {
	background: red;
}
</style>
<title>CSS List</title>
</head>
<body>
	<h1>CSS List</h1>
	<ul>
		<li>Java</li>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavasCript</li>
	</ul>
	<hr>
	<ul id="menu">
		<li>Java</li>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavasCript</li>
	</ul>
</body>
</html>

CSS List

Java
HTML
CSS
JavasCript

10_table

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
th, td {
	border-bottom: 1px solid grey;
	border-collapse: collapse;
}
table {
	width : 100%;
}
thead tr {
	background: #ebebeb;
}

tbody tr:nth-child(even) {
	background: lightgreen;
}
tbody tr:hover{
	background: lightpink;
}

</style>
<title>CSS Table</title>
</head>
<body>
	<h1>CSS Table</h1>
	<table>
		<caption style="caption-side: botton">급여</caption>
		<thead>
			<tr>
				<th>월</th>
				<th>급여액</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td>합계</td>
				<td>15,000,000</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>1월</td>
				<td>5,000,000</td>
			</tr>
			<tr>
				<td>2월</td>
				<td>5,000,000</td>
			</tr>
			<tr>
				<td>3월</td>
				<td>5,000,000</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

CSS Table

급여
월	급여액
합계	15,000,000
1월	5,000,000
2월	5,000,000
3월	5,000,000

이클립스 자바스크립트 설치

1) new 프로젝트 생성 > Dynamic Web Project 선택

Target runtime 이 None으로 되어있을 텐데

오른쪽 New runtime 선택

2) Apache Tomcat v8.0을 선택하기

설치 되어있지 않다면 Download and Install 을 선택해서 다운 받으면 됨

3) 웹 어플리케이션 설치가 완료 되었다면 프로젝트 우클릭

HTMl File 클릭

HTML 파일에 자바스크립트 코드를 넣고 실행을 위해

[Run as] > [Run On Server] 클릭

프로젝트 만들때 선택한 웹 서버 버전을 클릭

'Always use this server when running the project' 체크

Web03 javaScript

01_intro

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Intro</title>
<script type="text/javascript">
	// HTML 파일에서 자바스크립트를 사용하는 방법
	// 1. script 태그 안에서 자바스크립트 코드를 작성
	//  1) head 태그 안에서 script 태그를 포함 
	//  2) body 태그 안에서 script 태그를 포함
	// 2. 자바스크립트 코드만을 포함한 .js 파일을 HTML 파일에서 링크
	// => 자바스크립트 코드가 있는 위치에서 실행
	
	document.write('Hello, JavaScript');
</script>
</head>
<body>
	<h1>JavaScript 소개</h1>
	<script type="text/javascript">
		document.write('<h2>안녕, 자바스크립트</h2>');
		// write(문자열) : 문자열은 html 문장으로 인식(태그가 실행됨)
	</script>
	<script type="text/javascript" src = "js/test.js"></script>
</body>
</html>

Intro

JavaScript 소개

02_intro

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Intro</title>
</head>
<body>
	<!-- 
		* HTML에서 자바스크립트의 역할
		1. HTML 요소(element)의 내용(content)을 변경
		2. HTML 요소(element)의 속성(attribute)을 변경
		3. HTMl 요소(element)의 스타일(css)을 변경
		4. 입력 양식(form)의 데이터 체크
		
		* 자바와 자바스크립트의 차이점 
		- 자바스크립트는 변수 타입이 없음
		- 자바스크립트에서 if문을 사용할 때 true/false를 처리하는 방법 :
			0, null, undefined ==> false로 처리 
			그 외 나머지(값이 있으면) ==> true로 처리 
	 -->
	 
	 <!-- HTML 페이지 부분 -->
	 <h1 id="title">자바스크립트가 할 수 있는 일들</h1>
	 <button onclick="changeCSS()">클릭</button>
	 <!-- 버튼을 클릭하면 changeCSS()함수를 호출 -->
	 
	 <!-- 자바스크립트 부분 -->
	 <script type="text/javascript">
	 	function changeCSS(){
	 		console.log('changeCSS() 호출');
	 		
	 		var title = document.getElementById('title');
	 		//document : 현재 HTML 문서의 정보를 갖고 있는 객체
	 		//getElementById : id 속성 값으로 요소 찾기
	 		
	 		title.style.backgroundColor = 'cyan';
	 		title.style.fontSize = '300%';
	 		title.style.color = 'red';
	 		
	 		
	 	}
	 </script>
</body>
</html>

Intro

자바스크립트가 할 수 있는 일들

03_output

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Output</title>
</head>
<body>
	<h1>자바스크립트 출력 방법</h1>
	<h2>document.write() 함수 사용</h2>
	
	<script type="text/javascript">
		document.write('<p>안녕하세요</p>');
	</script>
	<hr>
	
	<button onclick="test1()">Click!</button>
	
	<h2>innerHTML 속성 사용</h2>
	<div id="output"></div>
	<button onclick="test2()">Click!</button>
	
	<h2>다이얼로그(dialog) 사용</h2>
	<button onclick="showAlert()">alert</button>
	<button onclick="showConfirm()">confirm</button>
	<button onclick="showPrompt()">prompt</button>
	
	<h2>콘솔 로그 출력</h2>
	<button onclick="showLog()">로그 출력</button>
	
	
	<script type="text/javascript">
		/*
			* JavaScript 디스플레이 속성 
			- innerHTML : HTML 요소에 작성
			- document.write() : HTML 문서에 작성 
			- window.alert() : 경고 박스에 작성
			- console.log() : 브라우저 콘솔 창에 작성
		*/
	
	function test1(){
		document.write('<p>test1() 호출</p>');
	}//end test1()
	
	function test2(){
		var output = document.getElementById('output');
		output.innerHTML = 'test2() 출력 완료!';
	}//end test2()
	
	function showAlert(){
		alert(1 + 2 + '입니다.');
	}//end showAlert()
	
	function showConfirm(){
		var result = confirm('삭제하시겠습니까?');
		// confirm의 선택 결과를 리턴 : 확인(true), 취소(false)
	}//end showConfirm()
	
	function showPrompt(){
		var result = prompt('이름 입력','이름');
		//prompt에 입력된 결과를 리턴 : 문자열 
		document.getElementById('output'.innerHTML) = result;
	}//end showPrompt()
	
	function showLog(){
		console.log('테스트입니다.');
	}
	</script>
	
</body>
</html>

Output

자바스크립트 출력 방법

document.write() 함수 사용

innerHTML 속성 사용

다이얼로그(dialog) 사용

콘솔 로그 출력

04_variable

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Variable</title>
</head>
<body>
	<h1>자바스크립트 변수 선언과 사용</h1>
	<div id="output"></div>
	
	<script type="text/javascript">
		var output = document.getElementById('output');
		console.log(output);
		console.log(typeof output); // typeof : 변수 타입
		
		// * 변수 초기화 방법 
		// - var 변수 이름 = 초기값;
		// - var 변수 이름 
		// 	 변수 이름 = 값;
		
		// * 변수 선언 
		// - var : 함수 범위의 변수 선언.
		// - let : 블록 범위의 변수 선언. 
		// - const : 상수 정의.
		
		// * 자바스크립트의 변수 타입 
		// 1) 숫자(number) 타입 : 정수(-1,0,1,2,..), 실수(1.2)
		// 2) 문자열(string) 타입 : '문자열', "문자열"
		// 3) 논리형(boolean) 타입 : true, false
		// 4) 객체(object) 타입 : 요소(element), 데이터와 기능의 그룹회된 형태
		// 5) null 타입 
		// 6) 함수(function)
		
		let x = 123; // 변수의 선언과 초기화를 동시에 
		let y;
		y = 456; // 변수 초기화 
		let sum = x + y;
		output.innerHTML += 'sum = ' + sum + '<br>';
		
		// * 중요) 자바스크립트 변수 타입 선언을 var 나 let으로 통합
		// x는 숫자 타입의 변수지만, 문자를 저장하면 문자 타입으로 
		// 자동 형 변환된다.
		x = '안녕'; // 문자열로 자동 형 변환 
		y = '자바스크립트'; // 문자여로 자동 형 변환
		sum = x + y;
		output.innerHTML += 'sum = ' + sum + '<br>';
		
		let check = confirm('?');
		if(check){
			output.innerHTML += '참(true)';
		}else{
			output.innerHTML += '거짓(false)';
		}
		
	</script>
</body>
</html>

Variable

자바스크립트 변수 선언과 사용

05_if

if 문법 ::
if (조건) {
// 조건이 참 일때 실행되는 코드 블럭
}

else 문법 ::
if (조건) {
// 조건이 참 일때 실행되는 코드 블럭
} else {
// 조건이 거짓일때 실행되는 코드 블럭
}

else if 문법 ::
if (조건1) {
// 조건1이 참일때 실행되는 코드 블럭 }
else if (조건2) {
// 조건1이 거짓이고 조건2가 참 일때 실행되는 코드 블럭
} else {
// 조건1이 거짓이고 조건2가 거짓 일때 실행되는 코드 블럭
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>If</title>
</head>
<body>
	<h1>JavaScript if문, 비교연산자, 삼항연산자</h1>
	<input type="text" id="input">
	<button onclick="input()">전송</button>
	<div id="output"></div>
	
	<script type="text/javascript">
		function input(){
			let output = document.getElementById('output');
			let x = document.getElementById('input').value;
			//input.value : 입력받은 데이터를 저장
			console.log(x);
			console.log(typeof x);
			
			// 자동 형 변환이 발생하여 값만 비교 
			if(x>0){
				output.innerHTML += '양수<br>';
			}else if(x == 0){
				output.innerHTML += '0<br>';				
			}else if(x < 0){
				output.innerHTML += '음수<br>';
			}
			
			// ===, !== : 타입과 값을 함께 비교
			let age = '18';
			if(age === 18){
				output.innerHTML += '=== 연산자 결과 : 참<br>';
			}else{
				output.innerHTML += '=== 연산자 결과: 거짓<br>';

			}
			
		}	
	
	</script>
	
</body>
</html>

JavaScript if문, 비교연산자, 삼항연산자

06_switch

switch(expression) {
case x :
// code block
break;
case y :
// code block
break;
default :
// code block
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Switch</title>
</head>
<body>
	<h1>자바스크립트 Switch</h1>
	<div id="output">
	"둘"
	<br>
	"1.1"
	<br>
	</div>
	
	<script type="text/javascript">
		// * 자바스크립트의 switch문 사용
		// - 자바스크립트는 숫자 타입을 정수/실수로 구분하지 않음
		// - 실수 타입도 switch-case 구문에서 사용할수 있음 
		// - 자바는 실수 타입을 switch-case 구문에서 사용할 수 없음
	
		let output = document.getElementById('output');
		
		let x = 2;
		// switch-case 문에서는 형 변환하여 비교하지 않음
		x = parseInt(x); // parseInt() : 숫자로 변경
		switch(x){
		case 1 :
			output.innerHTML += '하나<br>';
			break;
		case 2:
			output.innerHTML += '둘<br>';
			break;
		default :
			output.innerHTML += '모르는 값<br>';
			break;
		}
		
		let y = 1.1;
		switch(y){
		case 1.0: 
			output.innerHTML += '1.0<br>';
			break;
		case 1.1:
			output.innerHTML += '1.1<br>';
			break;
		default :
			output.innerHTML += '모르는 값 <br>';
			break;
		}
		
	</script>
</body>
</html>

Switch

자바스크립트 Switch

"둘"
"1.1"

07_for

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>For</title>
</head>
<body>
	<h1>자바스크립트 for문, 전역/지역 변수</h1>
	<div id="output">
	<h1> heading1</h1>
	<h2> heading1</h2>
	<h3> heading1</h3>
	<h4> heading1</h4>
	<h5> heading1</h5>
	<h6> heading1</h6>
	"test() 내부 : x = 1"
	<br>
	"test() 내부 : n = 10"
	<br>
	</div>
	<script type="text/javascript">
		// * 자바스크립트의 전역 변수, 지역 변수 선언 
		// - 자바스크립트의 전역 변수(Gloval Variable)
		// <script> 태그 아래에 선언된 변수 
		// 선언된 위치와 상관없이 변수를 사용할 수 있응ㅁ 
		// 주의) 전역 변수의 사용보다는 함수 내에서 
		//	지역 변수로 선언하여 사용하는 것이 안전 
		
		// - 자바스크립의 지역 변수(Local Variable) : 
		//   함수(function) 내부에서 선언된 변수 
		
		let output = document.getElementById('output');
		
		// output.innerHTML += ' + i + <br>';
		// let i = 1;
		
		// 자바스크립트의 반복문 
		// - 자바 문법과 동일 
		for(let x = 1; x <= 6; x++){ // x는 for문 안에 지역변수 
			output.innerHTML += '<h' + x + '> heading' + x + '</h' + x + '>';
		}
		
		let x = 1; 
		function test(){
			let n = 10; // 지역 변수 
			output.innerHTML += 'test() 내부 : x = ' + x + '<br>';
			output.innerHTML += 'test() 내부 : n = ' + n + '<br>';
		}
		
		// 함수 호출
		test();
	</script>
</body>
</html>

For

자바스크립트 for문, 전역/지역 변수

heading1

"test() 내부 : x = 1"
"test() 내부 : n = 10"

08_while

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>자바스크립트 while문</h1>
	<div id="output"></div>
	
	<script type="text/javascript">
		let output = document.getElementById('output');
		
		// 1. 구구단 출력 2 ~ 9단까지
		for(let x = 2; x <= 9; x++) {
			for(let y = 1; y <= 9; y++) {
				output.innerHTML 
				+= x + ' X ' + y + ' = ' + (x * y) + '<br>';
			}
			output.innerHTML += '<hr>';
		}
		
		// 2. 별 출력
		// ＊＊＊＊＊＊＊
		// ＊＊　　　＊＊
		// ＊　＊　＊　＊
		// ＊　　＊　　＊
		// ＊　＊　＊　＊
		// ＊＊　　　＊＊
		// ＊＊＊＊＊＊＊
		for(let i = 0; i < 7; i++) {
			for(let j = 0; j < 7; j++) {
				if(i == 0 || i == 6 || j == 0 || j == 6 || i == j || i + j == 6){
					output.innerHTML += '＊'; // (ㅁ 한자 3번)
				} else {
					output.innerHTML += '　'; // (ㄱ 한자 1번)
				}
			}
			output.innerHTML += '<br>';
		}
		
	</script>
</body>
</html>

Insert title here

자바스크립트 while문

'백엔드 교육과정 > 3월' 카테고리의 다른 글

2024.03.25_ Bootstrap , JQuery (0)	2024.03.25
2024.03.21_ JavaScript_function ~ object, HW3_회원가입 페이지,HW2_연락처 프로그램 (0)	2024.03.22
2024.03.19_ 신입 웹 개발자 로드맵 , HTTP/CSS (0)	2024.03.19
2024.03.18_ 사이드 프로젝트 발표, 배포 방법 (0)	2024.03.18
2024.03.15 _ 사이드 프로젝트 발표 전 점검 (0)	2024.03.15

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					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

글 보관함

티스토리 뷰

2024.03.20_ Web02 CSS / 이클립스 자바스크립트 설치 / Web03 javaScript

CSS Text

Left

Center

Right

CSS Link

CSS List

CSS Table

JavaScript 소개

자바스크립트가 할 수 있는 일들

자바스크립트 출력 방법

document.write() 함수 사용

innerHTML 속성 사용

다이얼로그(dialog) 사용

콘솔 로그 출력

자바스크립트 변수 선언과 사용

JavaScript if문, 비교연산자, 삼항연산자

자바스크립트 Switch

자바스크립트 for문, 전역/지역 변수

heading1

heading1

heading1

heading1

heading1

heading1

자바스크립트 while문

'백엔드 교육과정 > 3월' 카테고리의 다른 글

티스토리툴바