본문 바로가기
공부일지

230912 (HTML, Java)

CD가참둥그렇다 2023. 9. 12. 16:51

Eclipse를 이용한 HTML 개발

 

1. 개발 환경

 - eclipse

 - tomcat : tomcat9를 기반으로 하고 eclipse의 switch workspace - other를 이용해서 새로운 워크스페이스를 지정한다.

 

2. 예제를 이용한 웹 개발

명품 웹 프로그래밍을 이용한다.

 

1) 1장

 

테스트 1

- html의 기본 구조를 이용한 간단한 창 띄우기

 

<!DOCTYPE html>

  • 문서 유형을 지정하는 태그, html5 문서를 나타낸다.

<html>

  • html 파일의 시작과 끝을 지정하는 태그

<head>

  • 웹 브라우저에 문서 정보를 보여주는 태그

<meta>

  • 메타 데이터는 데이터의 데이터.
  • 주요 역할은 화면에 표시될 글자의 인코딩 정보를 표시함.
  • 인코딩은 대부분 UTF-8을 사용한다.
  • 검색엔진에서 정보를 받아올 때 읽어서 분류한다.
  • meta 데이터의 다른 요소
    • <meta name=”keywords” content=”html의 구조”>-웹 문서의 키워드 = html의 구조
    • <meta name=”description” content=”html의 구조를 알아봅시다.”>- 웹 문서의 설명 = html의 구조를 알아봅시다.
    • <meta name=”author” content=”CD”>- 웹 문서의 저자 = CD

<title>

  • 웹 문서의 제목을 나타낸다.

<body>

  • 웹 브라우저에 표시할 정보를 지정한다.

<h3>

  • 제목을 지정하는 태그. 숫자는 폰트 크기를 나타낸다. 숫자가 작을수록 큰 글자

<hr>

  • 평행선을 그어주는 태그

<span(폰트 지정 문구)></span>

  • 특정 문구를 강조하는 태그, span 뒤에 폰트를 지정하는 문구를 넣으면 <span>구문 안의 내용만 해단 폰트로 변경된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 페이지의 구성요소</title>
</head>
<body>
	<h3>Elvis Presley</h3>
	<hr>
	He was an American singer and actor. In November 1956,
	he made his film debut in <span style="color:blue">Love Me Tender</span>
	He is often regerred to as "<span>th King of Rock and Roll</span>".
</body>
</html>

 

테스트2

- <head>에 <style>을 이용한 웹 페이지 꾸미기

 

<style>

background-color : linen : 배경 색상을 지정

color : green : 바디 태그 안에 글꼴 색상이 녹색

margin-left : 40px : 마진 여백 왼쪽

margin-right : 40px : 마진 여백 오른쪽

text-align : center : 정렬 방법 중앙

height : 5px : 높이 5픽셀

border : solid grey : 테두리 색상

font-size : 20px : 폰트 크기 20

마진, 패딩

margin : border 바깥쪽의 여백

padding : border 안쪽의 여백

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 페이지의 구성 요소</title>
<style>
	body {background-color : linen; 
		color : green;
		margin-left : 40px; 
		margin-right : 40px;}
	h3 {text-align : center; 
		color : darkred;}
	hr {height : 5px; 
		border:solid grey;
		background-color : grey;}
	span{color : blue; 
		font-size : 20px;}	
</style> 
</head>
<body>
	<h3>Elvis Presley</h3>
	<hr>
	He was an American singer and actor. In November 1956, 
	he made his film debut in <span style="color:blue">Love Me Tender</span>
	He is often referred to as "<span>the King of Rock and Roll</span>".
	
</body>
</html>
​

 

 

테스트3

  • <script> : 내부에 동작 명령어를 담는 태그
function show()	{ 
document.getElementById("fig").src = "ElvisPresley.png"
}
function hide() {
document.getElementById("fig").src = "";
}
  • document.getElementById("fig").src = "ElvisPresley.png"
    • 현재 페이지에서 ID가 “fig”인 요소의 src를 "ElvisPresley.png"로 변경
  • document.getElementById("fig").src = ""
    • 현재 페이지에서 ID가 “fig”인 요소의 src를 ""로 변경(null상태)
  • id와 class의 차이
    • id : 유일한 식별자, 여러 번 사용할 수 없다.
    • class : 반복 사용 가능한 식별자
  • function : 명령어를 지정하는 문구, 기능 담당을 나타냄Java의 method와 같은 역할
  • method : 기능
  • function show() : show()라는 이름의 명령어를 만들고 실행할 행동을 지정함
  • function hide() : hide()라는 이름의 명령어를 만들고 실행할 행동을 지정함
<h3 onmouseover="show()" onmouseout="hide()">Elvis Presley</h3>
<hr>
<div><img id="fig" src=""></div>
<hr>
  • <h3> 내부에 작성 : h3만 영향을 끼치는 명령어
  • onmouseover=”show()” : 마우스 올라가 있을 때 작동함
  • onmouseout : 마우스가 나갈 때 작동
  • <div> : divide 분리의 약어, 영역을 나누는 역할
  • <img id="fig" src=""> : 이미지 표시용 태그, id=fig인 src와 연동된다. 기본 상태는 “”없는 상태
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹 페이지의 구성 요소</title>
<style>
	body {background-color : linen; 
		color : green;
		margin-left : 40px; 
		margin-right : 40px;}
	h3 {text-align : center; 
		color : darkred;}
	hr {height : 5px; 
		border:solid grey;
		background-color : grey;}
	span{color : blue; 
		font-size : 20px;}	
</style> 
<script>
	function show()	{ /* img 이미지 달기 */
		document.getElementById("fig").src = "ElvisPresley.png"
	}
	function hide() { /* <img> */
		document.getElementById("fig").src = "";
	}
</script>
</head>
<body>
	<h3 onmouseover="show()" onmouseout="hide()">Elvis Presley</h3>
	<hr>
	<div>
	<img id="fig" src="">
	</div>
	<hr>
	He was an American singer and actor. In November 1956, 
	he made his film debut in <span style="color:blue">Love Me Tender</span>
	He is often referred to as "<span>the King of Rock and Roll</span>".
	
</body>
</html>

onmouseover 상태
onmouseout 상태

 

 

2) 2장

 

테스트3

 

<h1 title="h1태그로 작성하였습니다">1장 홈페이지</h1>

  • <h1>의 내부에 있는 title은 마우스를 올렸을 때 나오는 툴팁 대화상자의 글을 나타낸다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>툴팁 달기</title>
</head>
<body>
	<h1 title="h1태그로 작성하였습니다">1장 홈페이지</h1>
	<h2 title="h2태그로 작성하였습니다">1절 HTML 언어</h2>
</body>
</html>

 

Eclipse를 이용한 Java 개발

 

변수

1. 변수란?

  • 값을 저장할 수 있는 메모리 특정 부위의 이름
  • 값을 담아두는 상자의 이름

 

2. 변수의 선언

  • 변수 타입과 이름을 지정해 주는 행위
    • Int name; → name이라는 이름의 Int종류 변수를 생성한다.
  • x, y, z의 변수를 선언하고 각각 5, 10, 15의 값을 지정하고 각각 출력해보기
package pack01.variable;

public class Ex01_Variable {
	public static void main(String[] args) {
		int x;
		int y;
		int z;
		x = 5;
		y = 10;
		z = 15;	

		System.out.println(x);
		System.out.println(y);
		System.out.println(z);
	}
}

Q. 내부에 변수 3개를 자유로운 이름으로 만들고, 값을 할당하고, 출력해기

package pack01.variable;

public class Test_Variable {
	public static void main(String[] args) {
		int age = 28;
		int phoneNumber = 36498125;
		int	houseNumber = 306;
		
		
		System.out.println("나이=" + age);
		System.out.println("전화번호=" + phoneNumber);
		System.out.println("집호수=" + houseNumber);
		
	}
}

3. 나열과 초기화

  • 나열 : 변수 여러개를 동시에 선언하는 것
  • 초기화 : 변수를 선언하고 처음으로 값을 할당하는 것
  • 초기화식 : 변수를 선언하면서 바로 값을 할당하는 것
package pack01.variable;

public class Ex02_Variable {
	public static void main(String[] args) {
		int x=12 , y=23 , z=34;
		
		System.out.println(x);
		System.out.println(y);
		System.out.println(z);
		
	}
}

  • 테스트
    1. 변수 num1을 선언하시오
    2. 변수 num1에 값을 1을 할당하시오
    3. 변수 num2를 값 10을 주고 초기화 하시오.
    4. 변수 num3~5까지의 변수를 나열로 변수 선언을 하시오.
    5. num3~5까지의 변수에 값을 각각 3, 4, 5를 할당하시오.
    6. 변수 num6~8까지를 나열을 이용해서 초기화하시오.(값을 무작위)
package pack01.variable;

public class Test_Variable02 {
	public static void main(String[] args) {
		int num1;
		num1 = 1;
		int num2 = 10;
		int num3, num4, num5;
		num3 = 3;
		num4 = 4;
		num5 = 5;
		int num6=66, num7=77, num8=88;
		
		System.out.println(num1);
		System.out.println(num2);
		System.out.println(num3);
		System.out.println(num4);
		System.out.println(num5);
		System.out.println(num6);
		System.out.println(num7);
		System.out.println(num8);
		
	}
}

4. 변수를 이용한 다른 변수의 값 할당

  • 변수를 이용한 변수의 값 할당하기
package pack01.variable;

public class Ex03_Variable {
	public static void main(String[] args) {
		int value;
		int result = value + 10;
	}
}
  • 오류 발생, 지역변수 값이 초기화 되지 않았기 때문에 오류 발생
  • 메인 메소드의 내부 변수는 초기화(값 할당) 전에 사용 불가
package pack01.variable;

public class Ex03_Variable {
	public static void main(String[] args) {
		int value = 10;
		int result = value + 20;
		
		System.out.println(result);
		System.out.println(value);
	}
}

 

 

 

'공부일지' 카테고리의 다른 글

230914(Java)  (1) 2023.09.14
230914(HTML)  (0) 2023.09.14
230913(Java)  (0) 2023.09.13
230913(HTML)  (0) 2023.09.13
230911 (개발자, 프로그래밍 언어, 개발환경 구축, Eclipse)  (0) 2023.09.11

'공부일지' Related Articles

티스토리툴바