자바 플랫폼

 

 

 

플랫폼이란?

 

- 플랫폼 = 프로그래밍이나 컴퓨터 실행을 위한 기본적인 기능을 제공하는것

- 플랫폼이 다르다는 것은 현실에서 기차 레일위로 버스가 달릴 수 없다는것

- 마찬가지로 컴퓨텅서도 플랫폼이 다르면 사용하고 설치하는 프로그램이 다르 수 밖에 없음

- JAVA의 VM은 이런 다양한 플랫폼 위에서 동일한 JAVA소스코드를 이용할 수 있는 환경을 제공

 

 

 

JDK(SDK)란?

 

JDK

- Java development kit

- 자바 프로그램 개발도구

- 게발을 위한 클래스, 컴파일러, 실행 및 배포도구를 포함 등 개발을 위한 전반적인 환경을 제공

- JDK(자바 플랫폼) =

* Java Virtual Machine + Java API

* Java Virtual Machine = Hotspot VM(현재 jdk 1.8.25)

* Java API(java application programming interface)=Library

 


 

자바의 태동

 

1991년 그린 프로젝트(Green Project)

* 선마이크로시스템즈의 제임스 고슬링(James Gosling)에 의해 시작

- 가전 제품에 들어갈 소프트웨어를 위해 개발

* 1995년에 자바 발표

 

- 플랫폼 호환성 문제 해결

* 기존 언어로 작성된 프로그램은 PC. 유닉스, 메인 프레임 등 플랫폼간에 호환성 없음

* 소스를 다시 컴파일하거나 프로그램을 재 작성해야 하는 단점

 

- 플랫폼 독립적인 언어 개발

* 모든 플랫폼에서 호환성을 갖는 프로그래밍 언어 필요

* 네트워크, 특히 웹에 최적화된 프로그래밍 언어의 필요성 대두

 

- 메모리 사용량이 적고 다양한 플랫폼을 가지는 가전 제품에 적용

* 가전제품: 작은 령의 메모리를 가지는 제어 장치, 내장형 시스템 요구 충족

 

- 초기이름 : 오크(OAK)

* 인터넷과 웹의 엄청난 발전에 힘입어 퍼지게 됨

* 웹 브라우저 Netscape에서 실행

 

- 2009년에 선마이크로시스템즈를 오라클에서 인수

 

 

 

 

이번시간부터는 홈페이지를 만들어보려고합니다.

두근두근 ... ><

열심히 도전해보아요!!

이번엔 nav부터 만들어보겠습니다.

 

<html>

<head>

<title></title>

<style type="text/css">

*{margin:0; padding:0;}

ul{list-style:none;}

h2{color:blue; margin:2px;}

#wrap{width:90%;}

#gnb nav ul{background:#111; margin-top:1em;}

#gnb nav ul li{font-style:bold; color:#eee; display:inline-block; padding-right:2em;}

</style>

</head>

<body>

<div id="wrap">

<header id="gnb">

<nav>

<h2>IT개발자스터디공간</h2>

<ul>

<li>ORACLE</li>

<li>JAVA</li>

<li>HTML&CSS</li>

<li>Big Data</li>

<li>Smart Phone</li>

</ul>

</nav>

</header>

</div>

</body>

</html>

 

결과입니다.

 

 

 

nav를 만들어 봤는데요.^^

생각보다 쉽죠??

display:inline-block;  <-- 이부분을 잘알고 있어야해요!!

body쪽에는 <li><a href="#">ORACLE</a></li> 추가해서 링크를 걸수도 있어요 !!

그거는 다음글에서 연속해서 해보도록 하겠습니다. ^^

 

 

 

html&css공부하기

 

이번글은 float , border 복습을 하겠습니다. ^^

자주자주 복습하시다보면 더 쉽게 이해할 수 있어요..

 

<html>

<head>

<title></title>

<style type="text/css">

*{margin:0; padding:0;}

#wrap{width:550px; height:250px; background:pink; border:5px dashed gray; margin:10px;}

h2{text-align:center; padding:10px;}

h3{padding-bottom:3px;}

.box1{width:260px; height:160px; background:lightgreen; float:left; margin-left:10px; }

.box2{width:260px; height:160px; background:yellow; float:right; margin-right:10px;}

#wrap:after{dispaly:block; clear:both;}

</style>

</head>

<body>

<div id="wrap">

<h2>애국가</h2>

<div class="box1">

<h3>1절</h3>

동해물과백두산이 마르고 닳도록<br>

하나님이 보우하사 우리나라만세<br>

무궁화 삼천리 화려강산<br>

대한 사람 대한으로 길이 보전하리<br>

</div>

<div class="box2">

<h3>2절</h3>

남산 위에 저 소나무 철갑을 두른 듯<br>

바람서리 불변함은 우리 기상일세<br>

무궁화 삼천리 화려강산<br>

대한 사람 대한으로 길이 보전하세<br>

</div>

</div>

</body>

</html>

 

결과입니다.

 

사이트를 만드는 그날까지 !!! 우리모두 퐈이야!!!

 

float, border // it개발자 스터디공간

html, css공부하기 **

 

이번에는 float와 clear에 대해서 예제를 올리겠습니다.

예제한번 보시면서 익혀보도록할께요 ^-^

 

<html>

<head>

<title></title>

<style type="text/css">

*{margin:5px; padding:0;}

#box1{width:150px; height:150px; background:yellow; float:left;}

#box2{width:150px; height:150px; background:green; float:left;}

#box3{width:150px; height:150px; background:blue; float:right;}

#box4{width:150px; heigth:150px; background:pink; clear:both;}

</style>

</head>

<body>

<p id="box1">박스1</p>

<p id="box2">박스2</p>

<p id="box3">박스3</p>

<p id="box4">박스4</p>

</body>

</html>

 

결과값입니다.

 

 

 

CSS에서 clear:both를 적용하기 전입니다.

float다음에 clear:both를 꼭 써야하는 이유!!

 

 

 

이해가 되시나요?? ㅠㅠ

하하핫

온라인으로 독학하는 방법도 있지만 www.oraclejava.co.kr에서 오프라인 강좌도 있으니 확인해보시구요

강사님의 도움을 받으며 몰랐던 부분을 더 자세히 공부해보세요 ^-^

 

html&css공부하기 float, clear 이였습니다. ><

 

 

이번 html과 css공부에서는 dt, dd를 이용하여 수학문제를 내보려합니다.

여러분은 다른문제를 만들어서 공부해보세요^-^

 

<html>

<head>

<title>html&css공부하기</title>

<style type="text/css">

*{margin:5px; padding:0;}

.box{width:250px; brder:1px solid black; background:#ffd112;}

.box h3{border-top:3px dashed green; padding-top:3px;}

</style>

</head>

<body>

<div class="box">

<dt><h2>x의값을 구하여라</h2></dt>

<dd>

<h3> 2x=3x-4 </h3>

<p>2x-3x=-4  / -x=-4 / x=4</p>

</dd>

<dd>

<h3>7x+5=5x+13</h3>

<p>7x-5x=-5+13  / 2x=8 / x=4</p>

</dd>

</div>

</body>

</html>

 

* 결과값입니다. ^-^

 

 

* 아래그림은 *{margin:5px; padding:0;}을 적용안했을 때의 값입니다.

비교가 되시나요?? ^^

 

 

하루에 두개씩은 올리려하나..ㅜ 시간이 안되소.....

다들 파이팅!!!

 

** 웹표준 오프라인강좌는 www.oraclejava.co.kr 에서 확인하세요 !!

'웹표준 > HTML5 & CSS3' 카테고리의 다른 글

html&css공부하기_float, border  (0) 2015.03.13
html&css공부하기 [float,clear]  (0) 2015.03.12
HTML&CSS공부하기 [padding, margin]  (0) 2015.03.10
HTML&CSS공부하기 [글자태그복습]  (0) 2015.03.10
html&css공부하기  (1) 2015.03.09

이번시간에는 padding과 margin의 값을 비교해보려합니다.

html공부 점점 재밌어지지않나요?? ㅋㅋㅋ

사실... 이런것보다.. 언넝 홈페이지를 꾸미고 싶은데..!!!!

더 열심히해서 꼭 만들자구요!!

다들 파이팅합시다!!

 

<html>

<head>

<title></title>

<style type="text/css">

*{margin:0; padding:0;}

#box1{background: yellow; width:200px; height:100px; border:5px solid #f00;}

#box2{background: green; width:200px; height:100px; border:5px dashed #0f0; padding:10px 10px;}

#box3{background: orange; width:200px; height:100px; border:5px solid #00f; margin:10px 10px;}

</style>

</head>

<body>

<div id="box1">박스1</div>

<div id="box2">박스2</div>

<div id="box3">박스3</div>

</body>

</html>

 

결과값입니다.

 

 

박스1은 padding, margin값을 주지않았습니다.

박스2는 padding값만 줬습니다.

박스3에는 margin값을 줬습니다.

 

어떻게 나타나지는지 비교가되네요 ^-^

 

다들 헷갈려하시지마시고!! 복습하시면서 확실하게 익히시길 바랍니다.

 

 

* 웹퍼블리셔 초급과정은 www.oraclejava.co.kr 에서 확인가능합니다. ^^

 

HTML&CSS공부하기 [글자태그복습]

지난번 예제를 복습하는 의미에서 올립니다. ^-^

HTML공부 아자아자!!! CSS공부 아자아자!!!

 

<html>

<head>

<title></title>

<style type="text/css">

p{font-size:150%;}

p:first-letter{font-size:300%;}

p{border-bottom:1px solid orange}

</style>

</head>

<body>

<p>ORACLE</p>

<p>JAVA</p>

<p>SMART PHONE</p>

<p>BIG DATA</P>

</body>

</html>

 

결과값입니다//

 

짜잔!!! >-<

다들 한번씩해보세요 !!!

+ Recent posts