'Java & Oracle' 카테고리의 글 목록 (5 Page)

Java Script

<!DOCTYPE html>

<head>

<title>hello</title>

</head>

<body>

document.writeln( /* 사용자에게 보여지는 */

"<p style='color:red;font-size:30pt'>Hello, JavaScript!!!</p>");

console.log("Hello, World"); /* 개발자에게 보여주는 */

</script>

</body>

</html>

-------------------------------------------------

입력 받는

<!DOCTYPE html>

<head>

<title>hello</title>

<style>

body{ background-color: yellow}

</style>

function hello(){ /* body가 로딩이 끝나면 */

var irum = prompt("당신의 이름은 ? ", "");

alert("Welcome!!!" + irum + "님!!!");

}

</script>

</head>

</body>

</html>

----------------------------------

입력, 출력

hello2.html

<!DOCTYPE html>

<head>

<title>hello</title>

</head>

<body>

<form>

<p><label>성을 입력해 주세요.

<p><label>이름을 입력해 주세요.

</form>

</body>

</html>

javascript.js

function setFullname(){

var firstName = document.forms[0].familyName.value;

var secondName = document.forms[0].irum.value;

var fullName = firstName + " " + secondName;

document.forms[0].result.value = fullName;

}

style.css

body {

background-color: white;

font-family: Arial, Helvetica, Sans-serif;

}

input[type="text"]{

width:50px;

border:1px solid #ccc;

}

input[type="button"]{

font-size:25pt;

background-color: navy;

color:red;

}

input[name="result"]{

width:200px;

border:none;

font-size:1.5em;

color:green;

}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

두 정수의 곱 계산

<!DOCTYPE html>

<head>

<title>hello3</title>

<style>

body{

font-size:2em;

}

input[type="number"], input[type="text"]{

font-size:30pt;

background-color: yellow;

text-align:right;

width:150px;

}

input[type="button"]{

font-size:1.5em;

}

</style>

function calc(){ /* 자바스크립트에서는 텍스트박스의 내용이 자동정수로 바뀜. 더하기는 안됨 */

var result = document.forms[0].firstNumber.value *

document.forms[0].secondNumber.value;

document.forms[0].result.value = result;

}

</script>

</head>

<body>

<form>

<input type="number" name="firstNumber" value="0"> X

<input type="number" name="secondNumber" value="0"> =

</form>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

버튼 색 클릭으로 백그라운드 색 바꾸는

<!DOCTYPE html>

<head>

<title>Hello4</title>

<style>

#red{ color:red;font-size:25pt;background-color: blue;}

#blue { color:blue;font-size:25pt;background-color: red;}

</style>

function change(str){

if(str == "red"){

document.body.style.backgroundColor = '#ff0000';

}else{

document.body.style.backgroundColor = '#0000ff';

}

</script>

</head>

<body>

</body>

</html>

만약 onclick를 onmouseover로 바꾸면 마우스가 버튼 위로 올라갔을 때 색 변경됨

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

곱 계산을 js파일 html 파일 나눠서

<!DOCTYPE html>

<head>

<title>JavaScript 위치</title>

<style>

body{

font-size:2em;

}

input[type="number"], input[type="text"]{

font-size:30pt;

background-color: yellow;

text-align:right;

width:150px;

}

input[type="button"]{

font-size:1.5em;

}

</style>

</head>

<body>

<form>

<input type="number" name="firstNumber" value="0"> X

<input type="number" name="secondNumber" value="0"> =

</form>

</body>

</html>

calc.js

function calc(){

var result = document.forms[0].firstNumber.value *

document.forms[0].secondNumber.value;

document.forms[0].result.value = result;

}

자바 스크립트 파일 선언 <script src="js/calc.js"></script> 은 body의 제일 밑이나 head에 있어야 한다.(body가 모두 실행되고 나서 실행 되어야하므로)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

구구단 5단

<!DOCTYPE html>

<head>

<style>

.aaa{

font-family: "Lucida Fax", Tahoma, Helvetica, Arial, Verdana, Serif;

display:inline-block;

margin:30px;

font-size:25pt;

}

</style>

//1. HTML 코드를 생산한다.

function myfun(n){

var htmlStr = "<h2>" + n + "단</h2>";

htmlStr += "<p class='aaa'>";

for(var i = 1 ; i <= 9; i++){

htmlStr += n + " x " + i + " = " + n * i + "<br>";

}

htmlStr += "</p>";

document.write(htmlStr);

}

myfun(5);

</script>

</head>

<body>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

두개의 수 받아서 사칙연산

<!DOCTYPE html>

<head>

<style>

body{

font-size:2em;

}

input[type="number"], input[type="text"]{

font-size:30pt;

background-color: yellow;

text-align:right;

width:150px;

}

input[type="button"]{

font-size:1.5em;

}

select {

font-size:2em;

}

</style>

//연산을 수행한다.

function calc(){

var first = document.forms[0].firstNumber.value;

var second = document.forms[0].secondNumber.value;

var op = document.forms[0].operator.value;

var result;

switch(op){

case "더하기": result = parseInt(first) + parseInt(second); break; /* 더하기는 parseInt 사용하여 정수로 바꿔줘야함 (다른 연산처럼 자동으로 계산안됨)*/

case "빼기": result = first - second ; break;

case "곱하기": result = first * second ; break;

case "나누기": result = first / second; break;

}

document.forms[0].result.value = result;

}

</script>

</head>

<body>

<form>

</select>

<input type="number" name="secondNumber" value="0"> =

</form>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

비만도계산

<!DOCTYPE html>

<head>

<style>

*{

margin:0;padding:0;

}

#wrapper{

width:700px;

}

form{

float:left;

}

fieldset{

width:300px;

height:250px;

border : 1px solid #ccc;

padding:30px;

}

legend{

font-size:1.5em;

font-weight:900;

}

form p{

font-size:1.2em;

padding:5px;

}

input[type="text"]{

width:170px;

text-align:right;

font-size:1.5em;

}

input[type="button"], input[type="reset"]{

width:150px;

font-size:1.5em;

background-color:yellow;

margin-left:10px;

}

#result {

font-size:1.5em;

}

</style>

window.onload = init;

function init(){

document.getElementById("mybtn").addEventListener("click", calc, false); /* click 이벤트 발생. 함수 calc 호출. false는 전파 안하겠다는 의미 */

}

function calc(){

var height = document.forms[0].height.value / 100;

var weight = document.forms[0].weight.value;

var bmi = weight / (height * height);

var result = document.forms[0].irum.value + "님!!!<br>";

if(bmi < 18.5){

result += "<span style='color:orange;'>저체중(";

}else if(bmi >= 18.5 && bmi < 25.0){

result += "<span style='color:green;'>정상(";

}else if(bmi >= 25.0 && bmi < 30.0){

result += "<span style='color:red;'>과체중(";

}else if(bmi >= 30.0){

result += "<span style='color:red;'>비만(";

}

result += bmi + ")</span>";

document.getElementById('result').innerHTML = result;

}

</script>

</head>

<body>

<form>

<legend>Private Information</legend>

<p id="result">Result</p>

</fieldset>

</form>

</div>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

max , min

<!DOCTYPE html>

<head>

<title>JavaScript Demo</title>

window.addEventListener("load", aaa, false);

function aaa(){

var max = Number.MAX_VALUE;

var min = Number.MIN_VALUE;

var str = "JavaScript's 가장 큰 값 = " + max + "<br>";

str += "가장 작은 값 = " + min + " 입니다.";

document.getElementById('result').innerHTML = str;

}

</script>

</head>

<body>

</body>

</html>

출력:

JavaScript's 가장 큰 값 = 1.7976931348623157e+308

가장 작은 값 = 5e-324 입니다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

+ 할 때 조심

<!DOCTYPE html>

<head>

<title>JavaScript Demo</title>

window.addEventListener("load", checkNumber, false);

function checkNumber(){

var testA = "1000" + "1";

var testB = "1000" - "1";

var testC = "1000" * "5";

var testD = "1000" / "25";

var str = "\"1000\" + \"1\" = " + testA + "<br>";

str += "\"1000\" - \"1\" = " + testB + "<br>";

str += "\"1000\" x \"5\" = " + testC + "<br>";

str += "\"1000\" / \"25\" = " + testD;

document.getElementById('result').innerHTML = str;

}

</script>

</head>

<body>

</body>

</html>

출력:

"1000" + "1" = 10001

"1000" - "1" = 999

"1000" x "5" = 5000

"1000" / "25" = 40

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

변수의 lifecycle

<!DOCTYPE html>

<head>

<title>JavaScript Demo</title>

//변수 scope(lifecycle)

testA();

testB();

function testA(){

var scope = "local_A";

document.write(scope); //local_A

}

function testB(){

document.write(scope);

}

</script>

</head>

<body>

</body>

</html>

출력은 local_A 가 하나만나오게된다.

그리고 크롬에서 열었을 떄 ctrl+shift+j 를 눌러서 보면 scope is not defined 의 에러가 뜬다.

--------------------

변수의 lifecycle2

<!DOCTYPE html>

<head>

<title>JavaScript Demo</title>

//variable's scope

testA();

function testA(){

var scope = "local_A";

document.write(scope);

testB();

function testB(){

document.write(scope);

}

</script>

</head>

<body>

</body>

</html>

출력:

local_Alocal_A

----------------------

변수의 lifecycle3

<!DOCTYPE html>

<head>

<title>JavaScript Demo</title>

//variable's scope

testA();

function testA(){

var scope = "local_A";

document.write(scope);

testB();

function testB(){

var scope = "local_B";

document.write(scope);

}

</script>

</head>

<body>

</body>

</html>

출력:

local_Alocal_B

------------------------

변수의 lifecycle4

<!DOCTYPE html>

<head>

<title>JavaScript Demo</title>

//variable's scope

testA();

function testA(){

var scope = "local_A";

document.write(scope);

testB();

function testB(){

scope = "local_B";

document.write(scope);

}

document.write(scope);

}

</script>

</head>

<body>

</body>

</html>

출력:

local_Alocal_Blocal_B

testB() 에서 scope를 var scope 로 정의해주면 마지막 출력은 local_B가 아닌 local_A가 나온다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

변수의 lifecycle5

<!DOCTYPE html>

<head>

<title>JavaScript Demo</title>

//variable's scope

var scope = "global";

testA();

testB();

function testA(){

document.write(scope);

}

function testB(){

document.write(scope);

}

</script>

</head>

<body>

</body>

</html>

출력:

globalglobal

scope 을 global variable 로해서 어디서든 출력 가능.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

값복사

<!DOCTYPE html>

<head>

<title>JavaScript Demo</title>

//variable's scope

var a = true; //boolean's value

var b = a; //값복사

a = false;

document.write(b);

</script>

</head>

<body>

</body>

</html>

출력:

true

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

배열의 값 복사 : 배열은 객체이므로 주소복사이기 때문에 값이 변하면 따라 바뀜

<!DOCTYPE html>

<head>

<title>JavaScript Demo</title>

var a = [1,2,3,4];

var b = a;

a[0] = 100;

document.write(b[0]);

</script>

</head>

<body>

</body>

</html>

출력:

100

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

함수 복사 : 함수도 객체이므로 주소복사

<!DOCTYPE html>

<head>

<title>JavaScript Demo</title>

var a = function(name){

document.write(name + "님! 환영합니다.");

};

var b = a; //주소복사

b("홍길동");

</script>

</head>

<body>

</body>

</html>

출력:

홍길동님! 환영합니다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

변수의 lifecycle

<!DOCTYPE html>

<head>

<title>JavaScript Demo</title>

//variable's scope

testA();

function testA(){

var scope = 'local_A';

document.write(scope + "<br>");

testB();

function testB(){

document.write(scope + "<br>");

var scope = 'local_B';

document.write(scope + "<br>");

}

document.write(scope + "<br>");

}

</script>

</head>

<body>

</body>

</html>

출력:

local_A

undefined

local_B

local_A

위에서 undefined는 만들어져있는데 값이 없는 것이다. 이것은 이름을 scope라고 같이써서 그런 것이므로 이런문제가 발생했다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

변수의 lifecycle

<!DOCTYPE html>

<head>

<title>Variable</title>

<style>

</style>

function first_function(){

a = 1;

document.write("first_function's a: " + a +"<br></br>");

second_function();

document.write("first_function's a : " +a+ "<br><br>");

}

function second_function(){

var a= 100;

document.write("second_fuction's a : " +a+ "<br><br>");

}

</script>

</head>

<body>

first_function();

</script>

</body>

</html>

출력:

first_function's a: 1

second_fuction's a : 100

first_function's a : 1

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

계산 퀴즈

<!DOCTYPE html>

<head>

</head>

<body>

<form>

<p> 이름과 계산의 답을 입력 한 후 완료 단추를 눌러주세요.</p>

</fieldset>

</form>

</div>

</body>

</html>

style.css

body {

font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;

}

#wrapper {

width: 690px;

}

form {

float: left;

}

fieldset {

width: 280px;

height: 300px;

border: 1px solid #aba23c;

padding: 30px;

}

legend {

font-size: 1.5em;

font-weight: bold;

}

form p {

font-size: 0.9em;

}

input[type="number"] {

width: 50px;

float: right;

}

input[type="text"] {

width: 70px;

}

fieldset p:first-of-type {

color: #888;

font-size: 0.8em;

margin-top: 0;

}

fieldset p:nth-of-type(2) {

text-align: right;

}

.qnumber {

margin-right: 15px;

color: #999;

font-weight: bold;

}

input[type="button"] {

width: 70px;

}

fieldset p:last-of-type {

position: relative;

width: 70px;

margin: 30px auto 0;

}

#resultarea {

width: 280px;

height: 286px;

margin-top: 14px;

padding: 30px;

float: right;

border: 1px solid #aba23c;

visibility: hidden;

}

#resultarea p {

color: #888;

font-size: 0.8em;

}

#score {

color: red;

font-size: 1.2em;

font-weight: bold;

}

scripts.js

/**

* @author Instructor

*/

function setFullname(){

var firstName = document.forms[0].familyName.value;

var secondName = document.forms[0].irum.value;

var fullName = firstName + " " + secondName;

document.forms[0].result.value = fullName;

}

----------------

계산퀴즈 -내꺼

<!DOCTYPE html>

<head>

<style>

*{

margin:0;padding:0;

}

#wrapper{

width:700px;

}

form{

float:left;

}

fieldset{

width:400px;

height:400px;

border : 1px solid #ccc;

padding:30px;

}

legend{

font-size:1.5em;

font-weight:900;

}

form p{

font-size:1.2em;

padding:5px;

}

input[type="text"]{

float:right;

width:50px;

font-size:1em;

}

input[type="button"], input[type="reset"]{

width:150px;

font-size:1.5em;

background-color:yellow;

margin-left:10px;

align:center;

}

label{

font-size:1.5em;

}

#result {

position:absolute;

left:470px;

top:-1px;

}

</style>

window.onload = init;

function init(){

document.getElementById("complete").addEventListener("click", calc, false); /* click 이벤트 발생. 함수 calc 호출. false는 전파 안하겠다는 의미 */

}

function calc(){

var sum = 0;

var ans = [11, 5, 42, 5, 11];

var ans1 = document.forms[0].num1.value;

var ans2 = document.forms[0].num2.value;

var ans3 = document.forms[0].num3.value;

var ans4 = document.forms[0].num4.value;

var ans5 = document.forms[0].num5.value;

if(ans[0]==ans1){

sum += 20;

document.forms[0].num1.style.backgroundColor= '#D5D5D5';

} else {

document.forms[0].num1.style.backgroundColor= '#ff0000';

}

if(ans[1]==ans2){

sum += 20;

document.forms[0].num2.style.backgroundColor= '#D5D5D5';

} else {

document.forms[0].num2.style.backgroundColor= '#ff0000';

}

if(ans[2]==ans3){

sum += 20;

document.forms[0].num3.style.backgroundColor= '#D5D5D5';

} else {

document.forms[0].num3.style.backgroundColor= '#ff0000';

}

if(ans[3]==ans4){

sum += 20;

document.forms[0].num4.style.backgroundColor= '#D5D5D5';

} else {

document.forms[0].num4.style.backgroundColor= '#ff0000';

}

if(ans[4]==ans5){

sum += 20;

document.forms[0].num5.style.backgroundColor= '#D5D5D5';

} else {

document.forms[0].num5.style.backgroundColor= '#ff0000';

}

var result = "<fieldset>" +document.forms[0].name.value + "님의 2014년 5월 27일 계산 퀴즈 결과는 " + "<span style='color:red;'>" +sum + "</span>입니다.</fieldset>";

document.getElementById('result').innerHTML = result;

}

</script>

</head>

<body>

<form>

<p>이름과 계산의 답을 입력 한 후 완료 단추를 눌러주세요.</p>

</fieldset>

</form>

</div>

</body>

</html>

저작자표시

'Java & Oracle' 카테고리의 다른 글

자바스크립트 for ~ in, email형식, 객체만들기, 출력을 새창으로, number, string, 달력, date, 시계, math, d-day 계산기 (0)	2014.05.29
자바스크립트 배열, 값 접근, delete, in, 성적관리프로그램, 소수구하기, 구구단, 환자 관리 프로그램 (0)	2014.05.28
layout, navigation, clipping, border-shadow (0)	2014.05.26
font-family, vertical-align, list-style-type 이미지로, position, float (0)	2014.05.23
CSS 속성 , selector (0)	2014.05.22

layout

<!DOCTYPE html>

<head>

<title>layout</title>

<style>

/*

* 원하는 레이아웃을 하기 위해서는 두가지를 먼저 해줘야 한다.

* 1. 바디 전체를 한 div로 묶어줌. class 이름을 줌.

* 2. 모든 요소는 마진과 패딩을 없앤다.

*/

*{ /* margin, padding 초기화 */

margin:0;

padding:0;

}

#wrapper{

width:700px;

background-color: gray;

margin-left:auto; /* 좌 우 margin 을 auto 로 주면 가운데 정렬 */

margin-right:auto;

}

header{

width:680px; /* 왼쪽 패딩 10px, 오른쪽 패딩 10px을 넣어주어 */

padding:10px;

height:80px;

background-color: lightgray;

}

nav{

float:left;

width:160px;

padding:10px

}

nav+section{ /* nav를 메뉴로 사용하고, article을 오른쪽으로 붙여주기 위해서 */

float:right;

width:500px;

padding:10px;

background-color: darkgray;

}

footer{

clear:both; /*위와 같이 하면 footer는 왼쪽 nav 밑에 붙게 되는데, 포지셔닝을 해제해서 원래 위치로 보내기 위해 사용 */

padding:5px;

background-color:#000;

color: #fff;

}

body{

font-size:0.9em;

font-family:"Lucida Calligraphy","Times New Roman",Arial,Verdana,Serif;

}

p{

margin-bottom:20px;

}

li{

list-style-type:none;

margin-bottom:10px;

}

a{

text-decoration:none;

color:white;

cursor:move;

}

a:hover{

color:red;

font-weight:900;

}

</style>

</head>

<body>

<header><h1>Site Title</h1></header>

<nav>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Custom Service</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<h2>1st Article Title</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipis cing elit,

sed diam nonummy nibh euismod tinci dunt ut laorenim

ad minim veniam, quis nostrud exerci tation ullam corper

suscipit lobortis nisl ut aliq eet dolore magna aliquam erat

volut pat. Ut wisi enim ad minim veniam, quis nostrud

exerci tation ullamcorper suscipit lobortis nisl ut aliquip

ex ea commodo consequat Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.</p>

</article>

<h2>2nd Article Title</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipis cing

elit, sed diam nonummy nibh euismod tinci dunt ut laorenim

ad minim veniam, quis nostrud exerci tation ullam corper

suscipit lobortis nisl ut aliq eet dolore magna aliquam erat

volut pat. Ut wisi enim ad minim veniam, quis nostrud exerci

tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo consequat Lorem ipsum dolor sit amet Lorem

ipsum dolor sit amet.</p>

</article>

</section>

<p>Lorem ipsum dolor sit amet, consectetuer adipis cing elit.</p>

</footer>

</div>

</body>

</html>

-----------------------------------------------

layout1 : 위의 layout 만든 것을 position 을 absolute로 하여 만듬.

<!DOCTYPE html>

<head>

<title>layout1</title>

<style>

*{

padding:0; margin:0;

}

#wrapper { width:700px;}

header{

width:680px;

padding:10px;

height:80px;

background-color: lightgray;

font-size:10pt;

}

nav{

width:160px;

padding:10px;

background-color: gray;

position: absolute;

height:400px;

}

nav+section{

width:500px;

padding:10px;

background-color: darkgray;

position: absolute;

left:180px; /* nav가 왼쪽을 차지하고 있고, 오른쪽에 article을 나오게 하기 위해 */

height:400px;

}

footer{

width:680px;

padding:10px;

background-color:black;

color:white;

position:absolute;

top:520px;

}

body{

font-size:0.9em;

font-family:"Lucida Calligraphy","Times New Roman",Arial,Verdana,Serif;

}

p{

margin-bottom:20px;

}

li{

list-style-type:none;

margin-bottom:10px;

}

a{

text-decoration:none;

color:white;

cursor:move;

}

a:hover{

color:red;

font-weight:900;

}

</style>

</head>

<body>

<header><h1>Site Title</h1></header>

<nav>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Custom Service</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<h2>1st Article Title</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipis cing elit,

sed diam nonummy nibh euismod tinci dunt ut laorenim

ad minim veniam, quis nostrud exerci tation ullam corper

suscipit lobortis nisl ut aliq eet dolore magna aliquam erat

volut pat. Ut wisi enim ad minim veniam, quis nostrud

exerci tation ullamcorper suscipit lobortis nisl ut aliquip

ex ea commodo consequat Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.</p>

</article>

<h2>2nd Article Title</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipis cing

elit, sed diam nonummy nibh euismod tinci dunt ut laorenim

ad minim veniam, quis nostrud exerci tation ullam corper

suscipit lobortis nisl ut aliq eet dolore magna aliquam erat

volut pat. Ut wisi enim ad minim veniam, quis nostrud exerci

tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo consequat Lorem ipsum dolor sit amet Lorem

ipsum dolor sit amet.</p>

</article>

</section>

<p>Lorem ipsum dolor sit amet, consectetuer adipis cing elit.</p>

</footer>

</div>

</body>

</html>

---------------------------

layout2 : 위의 소스로 배너를 포함한 3단 편집으로 바꿈

<!DOCTYPE html>

<head>

<title>layout2</title>

<style>

*{

margin:0;padding:0

}

#wrapper{

width:700px;

background-color: gray;

position: relative;

margin:auto;

}

header{

width:680px;

padding:10px;

height:80px;

background-color: lightgray;

}

nav{

float:left;

width:160px;

padding:10px;

font-family:"Times New Roman";

}

#rightside{

width:520px;

float:right;

}

#rightside>section{

width:300px;

padding: 10px;

float:left;

background-color: darkgray;

}

#rightside>aside{

float:right;

width:180px;

padding:10px;

font-family:Verdana;

}

footer{

clear:both;

padding:5px;

width:690px;

background-color: #000;

color:#fff;

}

body{

font-size:0.9em;

font-family: "Lucida Calligraphy","Times New Roman", Arial, Verdana, Serif;

}

p{

margin-bottom:20px;

}

li{

list-style-type: none;

margin-bottom:10px;

}

li > a{

text-decoration: none;

color:white;

cursor:move;

}

li > a:hover{

color:red;

font-weight:900;

}

</style>

</head>

<body>

<header><h1>Site Title</h1></header>

<nav>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Custom Service</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<h2>1st Article Title</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipis cing elit,

sed diam nonummy nibh euismod tinci dunt ut laorenim

ad minim veniam, quis nostrud exerci tation ullam corper

suscipit lobortis nisl ut aliq eet dolore magna aliquam erat

volut pat. Ut wisi enim ad minim veniam, quis nostrud

exerci tation ullamcorper suscipit lobortis nisl ut aliquip

ex ea commodo consequat Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.</p>

</article>

<h2>2nd Article Title</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipis cing

elit, sed diam nonummy nibh euismod tinci dunt ut laorenim

ad minim veniam, quis nostrud exerci tation ullam corper

suscipit lobortis nisl ut aliq eet dolore magna aliquam erat

volut pat. Ut wisi enim ad minim veniam, quis nostrud exerci

tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo consequat Lorem ipsum dolor sit amet Lorem

ipsum dolor sit amet.</p>

</article>

</section>

<aside>

<p>Lorem ipsum dolor sit amet, consectetuer adipis cing elit,

sed diam nonummy nibh euismod tinci dunt ut laorenim

ad minim veniam.</p>

</aside>

</div>

</section>

<p>Lorem ipsum dolor sit amet, consectetuer adipis cing elit.</p>

</footer>

</div>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

navigation : display를 inline으로

<!DOCTYPE html>

<head>

<title>navigation</title>

<style>

*{

padding:0;margin:0;

}

nav{

font-size:1.2em;

font-family: Verdana, Sans-Serif;

font-weight:900;

}

nav ul{

background-color: black;

padding:10px;

}

nav li{

display:inline; /* li 는 원래 밑으로 내려오는 데 display를 inline으로 바꿔줌을써 옆으로 나오게 한다 */

margin:0 10px;

}

nav a{

color:#bbb;

text-decoration: none;

}

nav a:hover{

text-decoration: underline;

color:#FFFFFF;

}

</style>

</head>

<body>

<nav>

<ul>

<li><a href="https://mail.google.com/mail">Gmail</a></li>

</ul>

</nav>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

clipping : 이미지를 자르는

<!DOCTYPE html>

<head>

<title>clipping</title>

<style>

img[src $='littleprince.png']{

position: absolute;

clip:rect(20px, 175px, 95px, 110px); /* 위 우 하 좌 : 위 좌는 잘려나가는크기, 우 하는 영역의 사이즈를 잡아줘서. 우하-위좌 하면 됨 */

}

</style>

</head>

<body>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

border-radius : 박스를 만드는데 꼭지점 부분을 px을 크게 할 때마다 더욱 더 동그랗게 만듬.

<!DOCTYPE html>

<head>

<title>border-radius Property</title>

<style>

.box{

border : thick dashed black;

border-radius : 10px;

}

</style>

</head>

<body>

<h1>Lorem ipsum dolor amet</h1>

</div>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

border-shadow : 박스에 그림자를 만드는..

<!DOCTYPE html>

<head>

<title>border-shadow Property</title>

<style>

div{

border: 3px solid black;

background-color : yellow;

width : 400px;

height : 100px;

box-shadow: 10px 10px 30px black;

color: blue;

}

</style>

</head>

<body>

<h1>Lorem ipsum dolor amet</h1>

</div>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

Font Face : 있는 폰트 사용...?

<!DOCTYPE html>

<head>

<title>FontFace Basic</title>

<style>

@font-face{ /* 이게 안되면 다음거~~ 이런식 */

font-family:'AAA';

src:local('NanumGothic'),

url('fonts/NanumGothic.eot'),

url('fonts/NanumGothic.ttf'),

url('fonts/NanumGothic.woff');

}

*{

font-family:'AAA';

}

</style>

</head>

<body>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

calendar

<!DOCTYPE html>

<head>

<title>calendar</title>

<style>

table{

margin:auto;

border-collapse: collapse;

font-size:0.9em;

margin-top:30px;

font-family:"Lucida Sans Typewriter";

}

td, th{

width:90px;

padding:8px;

}

th{

text-align:left;

color:#fff;

background-color: #ccc;

font-size:1.2em;

font-style:italic;

}

th:first-child{

color:#ff0000;

}

th:last-child{

color:#0000ff;

}

td{

height:70px;

vertical-align: top;

border-bottom:1px solid #ccc;

}

td:first-child{

color:red;

}

td:last-child{

color:blue;

}

caption{

background-color: #ff0099;

text-align:left;

color:white;

padding-top:50px;

}

#month{

font-size:35pt;

}

#year{

color:#ccc;

}

#today{

font-size:0.7em;

color:red;

position: relative;

display:block;

height:40px;

top:20px;

}

</style>

</head>

<body>

<table>

<thead>

</thead>

<tbody>

<tr><td>1</td><td>2</td><td>3</td><td>4<span id="today">지방선거일</span></span></td><td>5</td><td>6<span id="today">현충일</span></td><td>7</td></tr>

</tbody>

</table>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

practice

<!DOCTYPE html>

<head>

<title>pyramid</title>

<style>

*{

margin:0;padding:0;

}

article{

width:600px;

border:20px solid #ccc;

position: relative;

top:20px;

left:20px;

}

img{

border:1px solid #bbb;

padding:10px;

background-color: white;

}

p{

color:#808080;

display:inline-block;

font-size:0.9em;

line-height:1.5em;

vertical-align: top;

width:270px;

margin:15px 10px;

}

figure{

position:absolute;

width:430px;

left:10px;

top:200px;

}

h1{

color:#033;

position:absolute;

top:-35px;

right:25px;

background-color: white;

padding:10px;

}

</style>

</head>

<body>

<h1>피라미드(pyramid)</h1>

</figure>

<p>피라미드(pyramid)는 일반적으로 정사각뿔 꼴의 고대 유적을 가리킨다. 고대 중국, 이집트, 메소포타미아, 중앙아메리카 등 많은 문명권에서 피라미드 형태의 유적을 만들었다. 고구려의 태왕릉이나 장수왕릉등도 정사각뿔 형태이므로 피라미드의 일종이다.</p>

<p>그중에서 고대 이집트의 유적, MAk Did he 특히 기자의 3대 피라미드가 가장 유명하다. 이집트의 피라미드는 대체로 국왕, 왕비 등 왕족의 무덤으로 쓰였을 것이라는 설이 가장 유력하지만, 무덤이 아닐 가능성도 배제할 수 없다. 피라미드의 어원은 고대 그리스어 피라미스이며, 이집트인은 “메르라”라고 불렀다고 한다. 현재 80여 기가 알려져 있으나 대부분 카이로 서쪽 아부 라와슈에서 일라훈에 이르는 90킬로미터인 나일 강 서안 사막 연변에 점재해 있다.</p>

</article>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

practice

index.html

style.css

저작자표시

'Java & Oracle' 카테고리의 다른 글

자바스크립트 배열, 값 접근, delete, in, 성적관리프로그램, 소수구하기, 구구단, 환자 관리 프로그램 (0)	2014.05.28
자바 스크립트 기본 (0)	2014.05.27
font-family, vertical-align, list-style-type 이미지로, position, float (0)	2014.05.23
CSS 속성 , selector (0)	2014.05.22
HTML5 drag & drop, geolocation , storage, webworker, file api, web database (0)	2014.05.21

CSS

font-family

<!DOCTYPE html>

<head>

<style>

/*

* Serif : 명조체

* Sans-serif : 고딕체

* monospace : 글자폭이 같은 폰트

* Cursive : 필기체

* Fantasy : 그래픽 폰트

*/

p {

font-size:30pt;

font-family: NanumMyeongjo, Georgia, Serif;

}

</style>

</head>

<body>

</body>

</html>

-----------------

Vertical-Align CSS : 글씨의 수직 위치 지정

<!DOCTYPE html>

<head>

<title>Vertical-Align CSS</title>

<style>

p {

color : red;

font-family: Impact, Helvetica, Arial, Tahoma;

font-size:50pt;

letter-spacing: -0.02em;

}

#movie {

color:black;

font-size:20pt;

vertical-align: text-top;

}

</style>

</head>

<body>

<p>Titanic<span id="movie">The Movie.</span></p>

</body>

</html>

----------------

Vertical-Align CSS : 표 안에서 수직위치

<!DOCTYPE html>

<head>

<title>Vertical-Align CSS</title>

<style>

table{

border-collapse: collapse;

font-size:1.2em;

width:500px;

}

th, td {

border : 1px solid #000;

padding : 5px;

}

th{

background-color:#0000ff;

color:white;

}

th:first-child{

width : 200px;

border-top-width : 0px;

border-left-width : 0px;

background-color: white;

}

#year {

text-align:center;

vertical-align: middle;

}

</style>

</head>

<body>

<table>

</table>

</body>

</html>

---------------------------------

list-style-type : 리스트 스타일 타입을 이미지로

<!DOCTYPE html>

<head>

<title>list-style-type CSS</title>

<style>

/* list-style-type : none --> navigation 만들 때 유용 */

li {

/*list-style-type: hangul;*/

list-style-image: url('images/dot.png');

vertical-align:top;

list-style-position: inside;

}

</style>

</head>

<body>

<ol>

<li>먼저 이해하고 다음에 이해시켜라</li>

</ol>

</body>

</html>

-----------------------------

Padding, Margin

<!DOCTYPE html>

<head>

<title>Padding & Margin</title>

<style>

li{

list-style-type: decimal;

list-style-position: outside;

color : teal;

font-weight:bold;

}

h1{

margin:0;

padding : 0;

background-color: yellow;

}

ol{

margin : 0 0 0 30px; /* margin과 padding 으로 내어쓰기효과를 줌 */

padding: 0 0 0 30px;

background-color:orange;

}

</style>

</head>

<body>

<ol>

<li>먼저 이해하고 다음에 이해시켜라</li>

</ol>

</body>

</html>

-------------------------------

각각의 영역마다 색 주기

<!DOCTYPE html>

<head>

<title>Border CSS</title>

<style>

body {

background-color: pink;

}

span{

background-color: yellow;

}

p {

background-color:maroon;

border-width : 1px;

border-style: dotted;

border-color:#008080;

}

</style>

</head>

<body>

<p>이것은 <span>첫번째</span> 단락입니다.</p>

</body>

</html>

body는 box모델에, span은 인라인 모델에 영향

-----------------------------

<!DOCTYPE html>

<html>

<head>

<title>pageview table</title>

<style>

table{

empty-cells: hide; /* 빈셀은 아예 디스플레이 되지 않게 숨김 */

caption-side: bottom;

}

th, td{

border : 1px solid #888888;

width : 120px;

text-align:center;

padding : 3px 10px;

}

th+td, th+td+td{ /* th 옆에있는 td 와 th옆에 있는 td옆에있는 td */

text-align:right;

}

th{

background-color: #ccc;

}

caption{

text-align:left;

font-size:0.8em;

padding : 5px 10px 0 10px;

}

cite{

float:right; /* 들어서 오른쪽 으로 보냄 */

}

</style>

</head>

<body>

<table>

<caption>판도라 TV의 순방문자수와 페이지뷰<cite>출처: 랭키닷컴</cite></caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

-------------------------------

practice

cssdemo7.html

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</head>

<body>

<h1 id="maintitle">MILK TEA Recipes</h1>

<h2 class="subtitle">The wonderful taste of milk tea lies</h2>

</hgroup>

</header>

<h2 class="foodname">Sweet Milk Tea</h2>

<h3 class="recipestep1">Ingredients</h3>

<ul>

<li>1 tablespoon plus 1 teaspoon black tea leaves</li>

<li>1 tablespoon plus 1 teaspoon sugar</li>

<li>Water <i>(optional)</i></li>

</ul>

<h3 class="recipestep2">Directions</h3>

<p>In case you are concerned about the calories in milk, you can take 3 cups milk and 1 cup water for this recipe. Pour milk (or milk and water solution) in a saucepan and bring it to boil. Reduce heat to medium-low and add black tea leaves. Cover with a lid and allow lea leaves to steep for 4-5 minutes. Strain milk tea in serving mugs. Add sugar according to your taste, stir and serve hot.</p>

</section>

<h2>Chinese Milk Tea</h2>

<h3>Ingredients</h3>

<ul>

<li>2 cups water</li>

<li>1 tablespoon black tea leaves</li>

<li>Cold sweetened condensed milk</li>

<li>Sugar or honey <i>(optional)</i></li>

</ul>

<h3>Directions</h3>

<p>Pour water in a saucepan and place over medium-high heat. As it starts boiling, add tea leaves in a silk bag and dip it in the water. Reduce heat and continue to boil for 25 minutes. For a strong taste, you can boil for a longer period. Pour hot tea in porcelain cups. <i>Stir in cold condensed milk and sugar as per your taste.</i> Your Chinese milk tea with condensed milk is ready to serve.</p>

</section>

<p id="comment">So, these were some delectable milk tea recipes for your perusal during the monsoons. As far as milk tea calories are concerned, one small cup serving of regularly made milk tea provides 60 calories. This calorie count may fluctuate depending upon the milk tea ingredients used in the recipe and also the size of the serving cup.</p>

<p>By <a href="http://www.buzzle.com/authors.asp?author=21405">Ningthoujam Sandhyarani</a></p>

</footer>

</body>

</html>

style.css

body {

font-size: 10pt;

width: 500px;

}

header {

background-color: #b98860;

height: 75px;

padding-top: 5px;

text-align: center;

border-radius: 10px;

}

section {

margin-bottom: 40px;

}

li {

list-style: circle;

color: gray;

}

footer {

font-size: 0.9em;

color: aqua;

}

#maintitle {

font-size: 1.8em;

color: pink;

margin-bottom: 0;

}

#comment {

color: lightgray;

}

.subtitle {

font-size: 0.9em;

color: yellowgreen;

margin-top: 0;

}

.foodname {

color: purple;

margin-left: 20px;

}

.recipestep1 {

margin-bottom: 0;

font-style: italic;

color: orange;

}

.recipestep2 {

margin-bottom: 0;

font-style: italic;

color: #555;

}

#china h2 {

color: purple;

margin-left: 20px;

}

#china h2+h3 {

margin-bottom: 0;

font-style: italic;

color: orange;

}

#china ul+h3 {

margin-bottom: 0;

font-style: italic;

color: #555;

}

section>p {

color: gray;

}

section p i {

color: lime;

background-color: #a76031;

}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

dispay hidden은 없어지면 공간도 사라지지만, visibility hidden은 공간은 무조건 확보.

나의 오른쪽에 무엇을 놓을 수 있느냐 없느냐의 차이가 block element(오른쪽에 무엇을 놓아 어떤것도 놓을 수없음 ) 과 inline element(오른쪽을 비워놔서 무엇을 놓을 수 있음) 의 차이.

- 원래 밑으로 떨어지는 것을 disply : inline을 줌으로써 오른쪽으로 계속 붙여줌. 원래 있던 성격을 바꾸는 방법임.

----------------------------------

position : relative, absolute

<!DOCTYPE html>

<head>

<title>Position</title>

<style>

*{

margin:0; padding:0;

}

article{

width:300px;

height:300px;

background-color: #ddd;

}

p:first-child{

width:150px;

height:100px;

background-color: orange;

position:absolute; /* 오렌지색을 절대위치를 사용해서 위치를 잡아주면 첫 공간은 비게 되어, 초록색이 올라오게된다 */

top:50px;

left:50px;

}

p:last-child{

width:150px;

height:100px;

background-color: green;

/*position:relative; /* p의 첫번째 자식에 상대적인 위치를 잡아줌 */

top:50px;

left:30px;

}

</style>

</head>

<body>

</article>

</body>

</html>

-----------------------------

position : z-index

<!DOCTYPE html>

<head>

<title>z-index</title>

<style>

*{

margin:0; padding:0;

}

article{

width:300px;

height:300px;

background-color: #ddd;

}

p:first-child{

width:150px;

height:100px;

background-color: orange;

position:absolute;

top:50px;

left:50px;

z-index: 1; /* article 이 0이고 이것을 1로 줌 */

}

p:last-child{

width:150px;

height:100px;

background-color: green;

position:absolute;

top:20px;

left:20px;

z-index: 2; /* article 이 0이고 orange가 1인데 green이 2라서 green이 가장 위로올라감 */

}

</style>

</head>

<body>

</article>

</body>

</html>

-----------------------------------

float : p 태그에는 안됨.

<!DOCTYPE html>

<head>

<title>float CSS</title>

<style>

*{

margin:0; padding:0;

}

body{ /* body의 위와 옆에 15px의 공간을 줌 */

padding:15px;

}

p{

font-size:0.9em;

line-height: 2em;

margin-bottom: 1.5em;

}

#mars{

float:right;

margin:5px;

}

p:nth-of-type(2){

clear:both; /* 둘다 걸려있는 position 해제? */

display:block;

}

#venus{

float:left;

margin:5px;

}

</style>

</head>

<body>

</figure>

<p>금성(金星, Venus)은 태양계의 두 번째 행성이다. 샛별, 새별로 불리기도 했다.

태양 주위를 224일 주기로 돌고 있으며 달에 이어서 밤하늘에서 두 번째로 밝은 천체이다.

가장 밝을 때의 밝기는 -4.5등급이다.

금성의 명칭은 오행 중 하나인 '금(金)'에서 유래하였으며, 태백성(太白星)으로도 불렸다.

금성은 그 출현 시간에 따라 다른 이름으로 불렸는데 저녁 무렵에 나타나는

금성을 장경성라고 부르고 새벽 무렵에 나타나는 금성을 샛별 혹은 명성(계명성)이라 불렀다.

서양에서는 로마 신화의 미를 상징하는 여신의 이름을 따라 비너스 (영어:Venus)라 부른다.

</p>

</figure>

<p>

화성(火星, Mars)은 태양계의 네 번째 행성이다.

붉은색을 띠기 때문에 동양권에서는 불을 뜻하는 화(火)를 써서 화성 또는

형혹성(熒惑星)이라 부르고, 서양권에서는 로마 신화의 전쟁의 신 마르스의 이름을

따 Mars라 부른다. 오늘날 영어에서 3월을 뜻하는 March도 여기서 생겼다.

</p>

</body>

</html>

저작자표시

'Java & Oracle' 카테고리의 다른 글

자바 스크립트 기본 (0)	2014.05.27
layout, navigation, clipping, border-shadow (0)	2014.05.26
CSS 속성 , selector (0)	2014.05.22
HTML5 drag & drop, geolocation , storage, webworker, file api, web database (0)	2014.05.21
HTML5 form (0)	2014.05.20

CSS

CSS 주는 방법

1. Inline Style : 직관적.일일이 다 주어야해서 손이 많이감.권장할만한 방법아님.

<!DOCTYPE html>

<head>

<title>cssdemo</title>

</head>

<body>

<h1 style="text-align:center;width:300px;height:50px;font-size:2em;color:red;font-weight:bold">이것은 CSS연습의 첫번째 제목입니다.</h1>

</body>

</html>

em은 상대사이즈.

--------------------

2. Embedded Style : 신경쓸 것이 많아진다. inline보다 더 안좋은 방식.

<!DOCTYPE html>

<head>

<title>cssdemo</title>

h1 { /* Embedded style */

text-align:center;

width:300px;

height:50px;

font-size:2em;

color:red;

font-weight: bold;

}

</style>

</head>

<body>

<h1>이것은 CSS 연습의 첫번째 제목입니다.</h1>

</body>

</html>

media="all" 은 모든 디바이스가 가능하다. 다른 건 해상도가 340x240인 애만 사용한다던지 하면 다르게 써줌.

css의 주석은 /* */ 이다

--------------------------------

3. External style + 4. Imported style

default.css

* {

font-size:12pt;

margin:0;

padding:0;

}

style.css

@import('default.css'); /* imported style */

dt {

font-size:2.5em;

color:#fff; /*white*/

text-align:center;

position:relative;

top:40px;

text-shadow: 0px 0px 5px black; /*위 하 좌 우 순으로 */

}

dd{

height:40px;

color:#000;

text-align:center;

position:relative;

top:70px;

background-color:rgba(200,200,200,0.7);

padding:10px;

}

cssdemo1.html

<!DOCTYPE html>

<head>

<title>cssdemo1</title>

</head>

<body>

<dl>

<dt><ruby>不聞先王之遺言<rt>불문선왕지귀언</rt>,

不知學問之大也<rt>부지학문지대야</rt></ruby></dt>

</dl>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

Selector

<!DOCTYPE html>

<head>

<title>cssdemo2</title>

<style>

/* Type Selector - Tag Selector */

div {

width : 200px;

}

.aaa { /* Type Selector - Class Selector */

color : gray;

font-weight : 900;

}

#bbb { /* Type Selector - ID Selector */

color : red;

font-style : italic;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

selector 자식

<!DOCTYPE html>

<head>

<title>cssdemo3</title>

<style>

/*article h1 {color:pink;} */ /* article 요소의 모든 자손(손자까지 포함) */

article > h1 {color : pink;} /* 자손 요소 중 직계자손만 해당 */

/* ex) a b c d 는 a의 자식인 b의 자식은 c의 자식인 d*/

</style>

</head>

<body>

<div>

</div>

<ol>

</ol>

<p>이것은 두번째 단락입니다.</p>

</article>

</body>

</html>

------------------------------

selector 형제

<!DOCTYPE html>

<head>

<title>cssdemo4</title>

<style>

/* 형제 관계 */

/*h1 ~ p {color: red; }*/ /*안됨.왠지는 모름.*/

/* 인접 형제 관계 */

h1 + p {color:red;}

p strong {color:green;} /*자식관계*/

</style>

</head>

<body>

<div>

</div>

<ol>

</ol>

<p>이것은 두번째 단락입니다.</p>

</article>

</body>

</html>

-----------------------------------

selector 모든 선택자

<!DOCTYPE html>

<head>

<title>cssdemo5</title>

<style>

/* 모든 선택자 */

article h1 ~ * {color:blue;} /*안됨*/

</style>

</head>

<body>

<div>

</div>

<ol>

</ol>

<p>이것은 두번째 단락입니다.</p>

</article>

</body>

</html>

---------------------------------------

Static Pseudo selector

<!DOCTYPE html>

<head>

<title>cssdemo6</title>

<style>

/* Pseudo Selector */

a:link { /*방문 전 링크*/

color: brown;

text-decoration: line-through;

}

a:visited { /*방문 후 링크*/

color:green;

text-decoration: none; /*링크처럼 안 보이게 하기 위해 언더라인을 주지않음 */

}

</style>

</head>

<body>

<a href="../index.html">홈으로가기</a>

</body>

</html>

--------------------

Dynamic Pseudo Selector

<!DOCTYPE html>

<head>

<title>cssdemo7</title>

<style>

/* Dynamic Pseudo Selector */

td, th {

border:1px solid black;

}

th {

background-color: brown;

}

caption{

font-size:1.5pc;

margin:5px;

font-style:italic;

}

tbody tr:hover { /* tbody에 있는 tr에 대해서 마우스를 위로 올리면 */

background-color: yellow;

}

tbody td:active { /* tbody에 있는 td에서 마우스를 클릭하면 */

background-color: red;

}

</style>

</head>

<body>

<table>

<thead>

</thead>

<tbody>

<tr><td>:visted</td><td>한번 이상 방문한 링크 상태</td></tr>

<tr><td>:hover</td><td>마우스로 요소위에 올라간 상태</td></tr>

<tr><td>:active</td><td>마우스로 요소를 클릭할 때의 상태</td></tr>

<tr><td>:focus</td><td>요소가 포커스가 맞춰진 상태</td></tr>

</tbody>

</table>

</body>

</html>

--------------------------------

구조적 Pseudo Selector

<!DOCTYPE html>

<head>

<title>cssdemo8</title>

<style>

/* 구조적 가상 선택자 */

p:only-child { /* 자기 부모의 요소에서 볼 때 유일한 요소 *//*두번째 단락의 p는 형제가 있으므로 아님*/

background-color: yellow;

width : 200px;

}

</style>

</head>

<body>

<div>

<p>이것은 첫번째 단락입니다.</p>

</div>

<div>

<h3>이것은 두번째 div의 헤딩입니다.</h3>

<p>이것은 두번째 단락입니다.</p>

</div>

</body>

</html>

--------------------------------

구조적 Pseudo Selector 2

<!DOCTYPE html>

<head>

<title>cssdemo9</title>

<style>

/* 구조적 가상 선택자 */

p:only-of-type{ /* 자기 부모요소의 입장에서 같은 타입의 요소들이 없을 때 */

color : red; /* 따라서 세번째 단락과 네번째 단락은 이것에 속하지 않는다 */

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

----------------------------------

구조적 Pseudo Selector 3 : first-child, last-child - 첫번째 자식, 마지막 자식

<!DOCTYPE html>

<head>

<title>cssdemo10</title>

<style>

li:first-child{

font-size:3em;

}

li:last-child{

color: red;

}

</style>

</head>

<body>

<ol>

<li>C-language</li>

<li>Object-C</li>

<li>Visual C#</li>

</ol>

</body>

</html>

---------------------------------

구조적 Pseudo Selector 4 : - n번째 자식

<!DOCTYPE html>

<head>

<title>cssdemo11</title>

<style>

p:nth-of-type(2){ /* 같은 부모 요소의 자손 요소 중 같은 타입의 n번째 자식요소 *//* 여기서는 두번째 자식을 뜻함 */

color:red; /* 위에서 부터 카운트, 카운트 1부터 시작 */

}

p:nth-last-of-type(2){ /* 같은 부모 요소의 자손 요소 중 같은 타입의 n번째 자식 요소 */

color:green; /* 아래로부터 카운트 */

}

</style>

</head>

<body>

</section>

</body>

</html>

-----------------------------

구조적 Pseudo Selector 5

<!DOCTYPE html>

<head>

<style>

#example h2:first-of-type { /* section 자식 요소 중 h2와 같은 요소 중 첫번째 */

color:purple; /* example 의 id를 가진 h2중에서 첫번째만 */

}

#example h2:nth-of-type(2){ /* example 의 id를 가진 h2중에서 두번째만 */

color :teal;

}

#example h2:last-of-type{ /* example 의 id를 가진 h2중에서 마지막만 */

color : olive;

}

</style>

</head>

<body>

</section>

</body>

</html>

--------------------------------

구조적 Pseudo Selector 6 : lang

<!DOCTYPE html>

<head>

<style>

p:lang(ko){

color : navy;

font-size:25mm;

}

p:lang(en){

color : maroon;

font-size:30px;

}

</style>

</head>

<body>

<p lang="ko">오후되니까 졸리다.</p> /* 컴퓨터에서는 지금 작성된 것이 어느나라말인지 알지 못하기 떄문에 명시적으로 써줬음 */

<p lang="en">Hello, World</p>

</body>

</html>

-------------------------------

구조적 Pseudo Selector 7 : not

<!DOCTYPE html>

<head>

<style>

#bbb li:not(.b){ /* b가 아닌 나머지 */

color:fuchsia;

}

</style>

</head>

<body>

</ul>

</body>

</html>

-----------------------------

구조적 Pseudo Selector 8 : first-letter, first-line

<!DOCTYPE html>

<head>

<style>

p{

color:gray;

font-size:1.5em;

line-height: 1.5em;

}

p:first-letter{

font-size:4em;

color:darkblue;

float:left;

margin-top: 10px;

margin-right: 5px;

}

p:first-line{

font-weight:900;

}

</style>

</head>

<body>

<p>정홍원 국무총리의 후임 총리 후보자에 안대희(60) 전 대법관이 내정된 것으로 22일 알려졌다.<br>

박근혜 대통령은 이르면 오늘 오후 안 전 대법관을 새 총리 후보자로 지명할 예정인 것으로 전해졌다.

안 전 대법관은 지난 대선 때 새누리당 정치쇄신특별위원장을 맡았으며 한광옥 국민대통합위원장 영입 문제로 박 대통령과 한 차례 마찰을 빚은 뒤 정치 일선을 떠나 있었다.</p>

</body>

</html>

---------------------------------

selector : 속성 선택자

<!DOCTYPE html>

<head>

<style>

p[title]{ /* p 타입의 title 이라는 속성이 있는것에게(속성은 []를 사용함) */

color:#FF0000;

}

</style>

</head>

<body>

</body>

</html>

-----------------------

selector : 속성 선택자 2

<!DOCTYPE html>

<head>

<style>

fieldset { width : 150px; }

input { border:1px solid aqua; }

input[required] { border-color:orange; } /* input 타입의 required 라는 속성이 있는것에게만 */

input[type='tel'] { border-color:red; }

</style>

</head>

<body>

<p><label>이름 :

</fieldset>

<p><label>전화번호 : <input type="tel" name="hp"

maxlength="13" placeholder="010-0000-1111"></label></p>

<p><label>Email : <input type="email" name="email" required></label></p>

</form>

</body>

</html>

-----------------------------------------

selector : 속성 선택자 3

<!DOCTYPE html>

<head>

<style>

a[href ^='css'] { /* ^= 'value' value로 시작하는 */ color:red; } /* ^는 css라는 글자로 시작하는 */

a[href $='kr'] { /* $= 'value' value로 끝나는 */ color:green} /* $는 kr 로 끝나는 */

a[href *= 'daum'] { /* *= 'value' value가 포함되어 있는(띄어쓰기와 상관없이) */

color : orange; } /* *은 daum 이라는 글자를 포함하면(띄어쓰기와 상관없이) */

a[href ~= 'aaa'] { /* ~= 'value' value로 포함되어 있는(띄어쓰기로 구분되어 있어야) */

color : aqua; } /* ~은 aaa로 포함되어 있는(띄어쓰기 구분), 정확하게 띄어쓰기 되어야 찾음. aa a 이런식은 못찾음. aaaa 못찾음. */

</style>

</head>

<body>

<p>

</p>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

=========================================================

CSS 속성

배경(background)

<!DOCTYPE html>

<head>

<title>background properties</title>

<style>

body{

background-image:url('images/jimin.jpg');

background-attachment: fixed;

background-position:right center;

background-repeat:repeat-x;

}

</style>

</head>

<body>

</body>

</html>

-----------------------------------

간격

<!DOCTYPE html>

<head>

<title>Text Propeties</title>

<style>

section { line-height: 200%;} /* 행간의 간격 */

p:first-child { letter-spacing: 50px;} /* 글자간 간격*/

p:last-child { word-spacing: 100px;} /* 단어간 간격*/

</style>

</head>

<body>

</section>

</body>

</html>

---------------------------

border 꾸미기

<!DOCTYPE html>

<head>

<title>Border Properties</title>

<style>

button {

font-size:70px;

background-color: yellow;

border-width:5px;

border-color:red blue green orange; /* 위 우 밑 좌 순서 (시계방향) */

border-style:dotted dashed double inset; /* ... --- 두줄 움푹들어간것 순서*/

}

</style>

</head>

<body>

<button>Click Me!</button>

</body>

</html>

----------------------------

저작자표시

'Java & Oracle' 카테고리의 다른 글

layout, navigation, clipping, border-shadow (0)	2014.05.26
font-family, vertical-align, list-style-type 이미지로, position, float (0)	2014.05.23
HTML5 drag & drop, geolocation , storage, webworker, file api, web database (0)	2014.05.21
HTML5 form (0)	2014.05.20
Applet (0)	2014.05.19

frameset : 표준아님.

<head>

<title>framesetdemo</title>

</head>

</frameset>

</html>

frameset은 body의 역할을 대신함. 그래서 frameset을 쓰면 body를 쓰면 안된다.

<frameset cols="5*,3*,2*"> 이런 식으로 쓰면 5:3:2의 비율을 뜻함.

------------------------------

frameset

framesetdem.html

<head>

<title>framesetdemo</title>

</head>

</frameset>

</html>

left.html

<html>

</body>

</html>

right.html

<html>

</body>

</html>

margin은 화면의 끝쪽에서 글씨가 떨어지는 공간을 주는 것.

frameborder 프레임 사이를 경계짓는 선.

border 프레임 사이를 경계짓는 선의 두께.

bodercolor 프레임 사이를 경계짓는 선의 색.

target="_blank" 새 창으로 뜸

target="_self" 현재 창에서 이동.

target="_top" 부모의 프레임을 사용..?

target="right" 프레임의 이름을 주어 그 프레임에 뜨게.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

Drag

dragdrop.html

<!DOCTYPE html>

<head>

</head>

<body>

<h1> Drag & Drop Practice </h1>

<br/>

</body>

</html>

dragdrop.css

#div1{

width:200px;height:200px;padding:10px;border:1px solid #aaaaaa;

}

dragdrop.js

function allowDrop(evt) {

evt.preventDefault();

}

function drag(evt){

evt.dataTransfer.setData("Text", evt.target.id);

}

function drop(evt){

evt.preventDefault();

var data = evt.dataTransfer.getData("Text");

evt.target.appendChild(document.getElementById(data));

}

preventDefault 드래그 오버할 때(ex)이미지가 다른 이미지의 위를 넘어갈 때) 기본 이벤트를 정지.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

geolocation

<!DOCTYPE html>

<head>

</head>

<body>

<p id="demo">Click the button to get your coordinates:</p>

var x=document.getElementById("demo");

function getLocation(){

if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(showPosition);

}else{

x.innerHTML="Geolocation is not supported by this browser.";

}

function showPosition (position) {

x.innerHTML="Latitude:"+position.coords.latitude+"<br>Longitude"+position.coords.longitude;

}

</script>

</body>

</html>

값은

Latitude:36.992107

Longitude127.112945

이런식으로 나옴.

-------------------

geolocation : 지도로 나오게

<!DOCTYPE html>

<head>

</head>

<body>

<p id="demo">Click the button to get your position :</p>

var x=document.getElementById("demo");

function getLocation(){

if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(showPosition);

}else{

x.innerHTML="Geolocation is not supported by this browser.";

}

function showPosition (position) {

var str = position.coords.latitude + ","+ position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+str+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";

}

</script>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

Manifest

C:\Program Files (x86)\Apache Software Foundation\Apache2.2\conf 폴더의 mime.types 파일을 열어

1429라인에 text/cache-manifest appcache 이 있다

다음라인에 text/cache-manifest manifest 를 추가해준다.

저장 후 아파치 서비스를 죽였다 살려줌. 관리자 권한 명령프롬프트 켜서 net stop apache2.2 후 net start apache2.2

offlinedemo.html

<!DOCTYPE html>

<body>

<p>Try opening<a href="index1.html" target="_blnk"> this page </a>,

then go offline, and reload the page.

the script and the image should still work. </p>

</body>

</html>

demo_html.appcache

CACHE MANIFEST

offlinedemo.html

demo_time.js

images/check.png

demo_time.js

function getDateTime(){

var d = new Date();

document.getElementById('timePara').innerHTML=d;

}

실행은 인터넷이 끊은 상태에서 실행 해보면 된다. 크롬에서는 오프라인상태에서 ctrl+shift+j 에서 Resource 탭에서 Application Cache에서 오프라인 되었을 때 가져온 파일의 목록을 볼 수 있다..?

127.0.0.1:80/0521/offlinedemo.html 로 접속(원래 스타트누르면 8020 인데 80포트로 잡아줘야함)

CACHE MANIFEST 오프라인이되어서도 파일에 저장해야할 파일의 목록

NETWORK 네트워크가 다시 연결되었을 때 받아야할 파일 리스트

FALLBACK NETWORK 에서 불러올 파일이 실패했을 떄, 대체해서 보여줄 파일(실패시에)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

checkstorage

<!DOCTYPE html>

<head>

<title> HTML 5 Web Storage </title>

function getData(){

if(typeof(Storage)!=="undefined"){

localStorage.lastname="Smith";

document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;

} else{

document.getElementById("result").innetHTML = "Sorry, your browser does not support web storage...";

}

</script>

</head>

</body>

</html>

localStorage 에 저장했기 때문에 컴퓨터에서 삭제하기전까지 남아있다.

크롬에서는 오프라인상태에서 ctrl+shift+j 에서 Resource 탭에서 Local Storage에서 lastname이 smith인 것을 볼 수 있다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

localStorage

<!DOCTYPE html>

<head>

<title> localStorage </title>

function clickCounter(){

if(typeof(Storage)!=="undefined"){

if(localStorage.clickcount){

localStorage.clickcount=Number(localStorage.clickcount)+1;

} else {

localStorage.clickcount=1;

}

document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + "time(s).";

} else{

document.getElementById("result").innetHTML = "Sorry, your browser does not support web storage...";

}

</script>

</head>

<body>

<p>Click the button to see the counter increase</p>

<p>

<button onclick="clickCounter()" type="button">Click me!</button></p>

</body>

</html>

출력이 아래와 같이 나옴

Click the button to see the counter increase

Click me! <---버튼임

You have clicked the button 58time(s).

위 Click me! 버튼을 누르면 카운트가 올라가고. 브라우저마다 서로 값을 가지고 있기 때문에 크롬에서한 것이 익스플로어로 값을 가져가지 않는다. (크롬에서는 80포트가 되고 8020은 안되네. 나머진 8020도 다되는데)

이 정보는 다시 들어왔을 때 값을 계속 가지고 있기 때문에 이어진다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

SessionStorage : 세션이 살아잇을 때만 정보를 가지고 있고, 세션을 닫으면 정보를 날림.

<!DOCTYPE html>

<head>

<title> sessionStorage </title>

function clickCounter(){

if(typeof(Storage)!=="undefined"){

if(sessionStorage.clickcount){

sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;

} else {

sessionStorage.clickcount=1;

}

document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + "time(s).";

} else{

document.getElementById("result").innetHTML = "Sorry, your browser does not support web storage...";

}

</script>

</head>

<body>

<p>Click the button to see the counter increase</p>

<p>

<button onclick="clickCounter()" type="button">Click me!</button></p>

</body>

</html>

브라우저가 닫히면 가지고있는 정보를 날리기 때문에 다시 초기화 된다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

=======================================================================

web worker 사용 전 예제

<!DOCTYPE html>

<head>

<title>webworkerdemo</title>

setTimeout(function(){

console.log('A');

}, 1000);

setTimeout(function(){

console.log('B');

}, 1000);

</script>

</head>

<body>

</body>

</html>

크롬에서 ctrl+shift+j 로 console을 볼 수 있는데 AAABBB 순서가 변하지 않는다. (단일 쓰레드이므로?)

--------------------------------------------

web worker 사용 전 예제2

<!DOCTYPE html>

<head>

<title>webworkerdemo</title>

setTimeout(function(){

for(var i = 0 ; i < 100; i++){

console.log('A');

}

}, 1000);

while(true){}

</script>

</head>

<body>

<font size='7' color='red'>Hello, World</font>

</body>

</html>

무한 루프에 걸려서 Hello, World도 찍지 못하고 아무것도 하지 못한다.

---------------------------------------------------

web worker는 응답을 기다리면서 다른 작업을 처리할 수 있게 하는 것이다. foreground에 영향을 주지않고 background 에서 돈다.

<!DOCTYPE html>

<html>

<body>

<p>Count numbers: <output id="result"></output></p>

<button onclick="startWorker()">StartWorker</button>

<button onclick="stopWorker()">StopWorker</button>

var w;

function startWorker(){

if(typeof(Worker)!=="undefined"){

if(typeof(w)=="undefined"){

w=new Worker("demo_workers.js");

}

w.onmessage = function (event){

document.getElementById("result").innerHTML=event.data;

};

} else{

document.getElementByuId("result").innerHTML="Sorry, your browser does not suport Web Workers...";

}

function stopWorker(){

w.terminate();

}

</script>

</body>

</html>

demo_time.js

function getDateTime(){

var d = new Date();

document.getElementById('timePara').innerHTML=d;

}

출력:

Count numbers: 3

StartWorker StopWorker

Start 누르면 1씩 증가. Stop누르면 멈춤. 새로고침해야 다시 start누를 수 있음.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

web worker fibonacci

<!DOCTYPE html>

<head>

<title>webworkerdemo</title>

function test(){

var worker = new Worker('webworkerfibo.js');

worker.onmessage = function (event) {

document.getElementById('aaa').innerHTML = event.data;

worker.terminate();

};

worker.postMessage(50);

}

</script>

</head>

<div id="aaa">Result</div>

</body>

</html>

webworkerfibo.js

function fibonacci(n) {

if (n < 2) {

return n;

} else {

return fibonacci(n - 2) + fibonacci(n - 1);

}

onmessage = function (event) {

postMessage(fibonacci(event.data));

};

피보나치 50번째 수를 구하기에는 시간이 걸리기 때문에 백그라운드에 두고 다른 작업을 처리 할 수 있다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

file api : 파일에 대한 정보

<!DOCTYPE html>

<head>

<title>filedemo</title>

</head>

<body>

<div id="aaa">Result</div>

//File API

var filetag = document.getElementById('myfile');

filetag.onchange = function(){

var files = this.files;

var str = '';

for(var i = 0 ; i < files.length ; i++){

var file = files[i];

str += '<p>File name : ' + file.name + "<br />";

str += 'File type : ' + file.type + "<br />";

str += 'File size : ' + file.size + "<br />";

str += 'File lastmodified date : ' + file.lastModifiedDate + "</p>";

str += "<hr>";

}

document.getElementById('aaa').innerHTML = str;

};

</script>

</body>

</html>

출력 : 파일을 선택하면 그에대한 정보를 출력.

File name : fieldset.html

File type : text/html

File size : 637

File lastmodified date : Tue May 20 2014 11:54:49 GMT+0900 (Korea Standard Time)

설명: multiple 은 여러파일을 한번에 불러올 수 있음.

---------------------------------------------------

file api : 파일에 대한 내용(이미지불러오기)

<!DOCTYPE html>

<head>

<title>filedemo</title>

</head>

<body>

<div id="aaa">Result</div>

//File API

var filetag = document.getElementById('myfile');

filetag.onchange = function(){

var file = this.files;

var reader = new FileReader();

reader.onload = function(){

var imgTag = document.createElement('img');

igTag.width = 400;

imgTag.height = 400;

imgTag.src = reader.result;

document.body.appendChild(imgTag);

};

reader.readAsDataURL(file);

};

</script>

</body>

</html>

설명:

reader.onload 는 파일이 로드되었는지 확인하는 작업. 안써줘도 상관엄음.

BLOB형으로 해야한다면서 출력 안됨..

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

web database

<!DOCTYPE html>

<head>

<title>Web SQL Database</title>

//if(!window.openDatabase){ //지원하지 않는다면

// alert("이 브라우저는 Web SQL Database 를 지원하지 않습니다.");

// return false;

// }else{ //지원한다면

// }

var db = window.openDatabase("mydb", "1.0", "나의 첫번째 디비", 1024*1024);

db.transaction(function(x){ //Query 문 실행부분

var str = "CREATE TABLE emp(idx INTEGER PRIMARY KEY,";

str += " irum VARCHAR NOT NULL,";

str += " age INTEGER NOT NULL)";

x.executeSql(str);

});

db.transaction(function(x){

x.executeSql("INSERT INTO emp(idx, irum, age) VALUES(1, '조성모', 28)");

x.executeSql("INSERT INTO emp(idx, irum, age) VALUES(2, '설운도', 38)");

x.executeSql("INSERT INTO emp(idx, irum, age) VALUES(3, '이미자', 48)");

x.executeSql("INSERT INTO emp(idx, irum, age) VALUES(4, '이문세', 58)");

},

function(error){

alert("Insert error : " + error.message);

},

function(){

alert("Insert Success");

}

);

</script>

</head>

<body>

</body>

</html>

크롬에서 ctrl+shift+j 해서 resource 탭에서 WebSQL-mydb-emp 테이블이 있는 것을 확인 할수 있다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

저작자표시

'Java & Oracle' 카테고리의 다른 글

font-family, vertical-align, list-style-type 이미지로, position, float (0)	2014.05.23
CSS 속성 , selector (0)	2014.05.22
HTML5 form (0)	2014.05.20
Applet (0)	2014.05.19
HTML5 tag, table (0)	2014.05.15

<!DOCTYPE html>

<head>

<title>tabledemo</title>

</head>

<body>

<h2>커뮤니케이션 수단으로서의 인터넷</h2>

<table>

<col>

</colgroup>

<thead>

</thead>

<tbody>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

출처 : 2006년 5월 통계자료 <cite>

</td>

</tr>

</tfoot>

</table>

</figure>

</body>

</html>

style.css

table {

border-collapse: collapse;

font-size : 15pt;

width : 700px;

}

thead{

background-color: yellow;

}

td, th {

border : 1px solid black;

text-align:center;

padding : 10px;

}

footer{

text-align:right;

}

#aaa{

text-align:right;

border-bottom-width:0px;

border-right-width:0px;

border-left-width:0px;

font-size:15px;

}

thead, tfoot, tbody 는 순서 상관없이 사용한다. 하지만 꼭 colgroup 다음에 써야한다.

colgroup은 걍 구조만 잡아주는 용. 그림을 그려준다던가 하는 역할은 아니다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

form : method 부분은 두가지로 나뉠 수 있다.

1. post : 패킷의 body를 통해 전송

data 노출x, body에 들어가기 때문에 size 신경안씀, submit 만 가능.

ex)회원가입

2. get : 패킷의 url을 통해 전송

data 노출, size 1kbyte 이하, 직접 url편집 or link를 통해서도 전송가능.

ex)인터넷사이트에서 링크를 통해 이동.

-------------------------------

<!DOCTYPE html>

<head>

<title>formdemo</title>

function test(){

//alert(document.form1.irum.value);

alert(document.forms[0].irum.value);

}

</script>

</head>

<body>

</form>

</body>

</html>

-------------------------------------------

위와 같은 기능(버튼없음)이지만, label과 input을 분리함. input을 분리해서 for를 사용했다(서로연결됨). label인 "이름 : " 을 클릭하면 tf가 선택된다.

<!DOCTYPE html>

<head>

<title>labeldemo</title>

</head>

<body>

<form>

</form>

</body>

</html>

--------------------------------------

input type="password"

<!DOCTYPE html>

<head>

<title>password</title>

</head>

<body>

<form>

</form>

</body>

</html>

패스워드만 ***로 안보이게 표시.

------------------------------------------

required

예전 방식.

<!DOCTYPE html>

<head>

<title>required</title>

function test(){

var f = document.forms[0];

if(f.irum.value == "" || f.irum.value.length == 0){

alert("이름이 빠졌습니다.");

f.irum.focus();

return false;

}

if(f.userid.value == "" || f.userid.value.length == 0){

}

if(f.userpwd.value == "" || f.userpwd.value.length == 0){

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

required 를 사용하면

<!DOCTYPE html>

<head>

<title>required</title>

</head>

<body>

</form>

</body>

</html>

작성이 안된 텍스트필드에 입력란을 작성해달라고 툴팁이 뜬다. input type을 submit로 해서 서버로 전송하게 함. 여기서 다 채워서 전송을 누르면 test.jsp를 아직 안만들어서 에러 발생.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

placeholder

<!DOCTYPE html>

<head>

<title>placeholder</title>

</head>

<body>

<p><label>입사날짜 : <input name="hiredate"

placeholder="2014-05-20"></label></p>

</body>

</html>

palceholder는 텍스트필드에 흐릿하게 적어줌. 위처럼 형식을 써준다던가, 아니면 설명을 써준다든지 한다.(ex)이름쓰는란에 placeholder 를 사용하여 Your ID로 설명을 써줌.)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

maxlength

<!DOCTYPE html>

<head>

<title>maxlength</title>

</head>

<body>

<form>

</form>

</body>

</html>

size는 글자 수 만큼의 공간을 준다. 거기에 maxlength를 주면 공간은 size만큼 있지만 실제로 쓸 수 있는 공간은 maxlength 만큼이다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

autofocus

<!DOCTYPE html>

<head>

<title>autofocus</title>

</head>

<body>

</form>

</body>

</html>

자동으로 포커스를 맞춰줌.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

fieldset = swing의 titleborder와 같다.

<!DOCTYPE html>

<head>

<title>fieldset</title>

</head>

<body>

</fieldset>

</form>

</body>

</html>

legend는 fieldset의 제목.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

radio : 여러개 중 하나만 선택.

<!DOCTYPE html>

<head>

<title>radio</title>

</head>

<body>

<form>

</p>

</form>

</body>

</html>

name은 같아야하고 value는 달라야함. checked 는 기본 선택.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

checkbox

<!DOCTYPE html>

<head>

<title>checkbox</title>

</head>

<body>

<p>

<label><input type="checkbox" name="interesting" value="javascript">JavaScript</label>

</p>

<p>

<label><input type="checkbox" name="interesting" value="jsp">Servlet/JSP</label>

<label><input type="checkbox" name="interesting" value="jquery">jQuery</label>

</p>

</fieldset>

</form>

</body>

</html>

checked 는 기본 선택.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

select : 체크박스or 라디오를 겹친게 select 임. 하나를 선택할 수도 여러개를 선택할 수도 있음. 콤보박스, JList 역할 가능.

<!DOCTYPE html>

<head>

<title>select</title>

</head>

<body>

</select>

</p>

</form>

</body>

</html>

size는 한번에 보여줄 수 있는 옵션의 개수, multiple은 컨트롤 키와 쉬프트 키를 이용하여 여러개 선택가능.

selected 는 처음 기본 선택이 설정되게.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

fileupload

<!DOCTYPE html>

<head>

<title>fileupload</title>

</head>

<body>

</form>

</body>

</html>

파일 업로드는 인코딩 타입을 이렇게 : enctype="multipart/form-data"

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

이미지 버튼

<!DOCTYPE html>

<head>

<title>inputimage</title>

</head>

<body>

</form>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

hidden

<!DOCTYPE html>

<head>

<title>hidden</title>

</head>

<body>

</form>

</body>

</html>

hidden은 디스플레이 되지않음.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

number

<!DOCTYPE html>

<head>

<title>number</title>

function test(){

alert(document.getElementById('yourage').value);

}

</script>

</head>

<body>

<form>

</p>

</form>

</body>

</html>

오른쪽에 작은 화살표 생겨서 step 수 만큼 번호 +

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

datalist

<!DOCTYPE html>

<head>

<title>datalist</title>

</head>

<body>

<form>

</datalist>

</form>

</body>

</html>

select와 같이 옵션이 아래로 쭈욱 나열됨. label이 나오고 선택하면 value가 나옴(브라우저마다 조금씩 다름).

사파리 안됨.

input type 의 url은 지원하는 브라우저가 없다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

지금까지 배운걸로 회원가입 ui

<!DOCTYPE html>

<head>

</head>

<body>

<p><label>이름 : <input type="text" name="irum" placeholder="홍길동"

required autofocus></label></p>

<p><label>아이디 : <input type="text" name="userid" placeholder="Enter your ID"

required></label></p>

<p><label>패스워드 : <input type="password" name="passwd"

placeholder="반드시 패스워드 요망" required></label></p>

</fieldset>

<p><label>주민등록번호 :

<input type="text" maxlength="6" size="6" name="jumin1"> -

</label></p>

<p><label>휴대전화 :

</select>

</label></p>

<p><label>Email : <input type="email" placeholder="aaa@bbb.com"></label></p>

</fieldset>

<p>

</p>

</fieldset>

</datalist>

</fieldset>

<label for="c-language">C-language</label>

<label for="visualc++">Visual C++</label>

</p>

<label for="android">Android</label>

<label for="objectc">Object-C</label>

</p>

</fieldset>

<!--<input type="submit" value="가입하기">

</p>

</form>

</body>

</html>

member.css

body {

font-size:15pt;

}

label{

width:20pt;

background-color: yellow;

}

input+label{

width : 30pt;

}

인접해서나오는 것은 +로 표현함

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

practice1

<!DOCTYPE html>

<html>

<head>

<title>pageview table</title>

</head>

<body>

<figcaption><h2>판도라 TV의 순방문자수와 페이지뷰</h2></figcaption>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

<p>

<span class="tableCode">표11 판도라TV의 순방문자수와 페이지뷰</span>

</p>

</footer>

</figure>

</body>

</html>

style1.css

table {

border-collapse: collapse;

font-size : 15pt;

width : 700px;

}

thead{

background-color: #A6A6A6;

}

td, th {

border : 1px solid black;

text-align:center;

padding : 10px;

}

footer{

text-align:right;

}

#aaa{

text-align:left;

border-bottom-width:0px;

border-right-width:0px;

border-left-width:0px;

font-size:15px;

}

#bbb{

border-bottom-width:0px;

border-right-width:0px;

border-left-width:0px;

text-align:right;

font-size:15px;

}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

practice2

<!DOCTYPE html>

<html>

<head>

<title>Pizza Ordering Form</title>

</head>

<body>

<h1>Pizza Ordering Form</h1>

<p>

<label class="custinput" for="name">Customer name:</label>

</p>

<p>

<label class="custinput" for="custtel">Telephone:</label>

</p>

<p>

<label class="custinput" for="custemail">E-mail address:</label>

</p>

<legend> Pizza Size </legend>

<p><label> <input type=radio name=size value="small"> Small </label></p>

<p><label> <input type=radio name=size value="medium"> Medium </label></p>

<p><label> <input type=radio name=size value="large"> Large </label></p>

</fieldset>

<legend> Pizza Toppings </legend>

<p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>

<p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>

<p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>

<p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>

</fieldset>

<p><label>Preferred delivery time: <input type="time" min="11:00" max="21:00" step="900" name="delivery" required></label></p>

<p><label>Delivery instructions:<br><textarea name="comments" maxlength="1000"></textarea></label></p>

<p><button type="submit">Submit order</button><p>

</form>

</body>

</html>

pizzaorder.css

.custinput {

display: inline-block;

width: 120px;

}

.custinput+input {

display: inline-block;

width: 150px;

}

fieldset {

width: 250px;

}

textarea {

width: 270px;

height: 70px;

}

저작자표시

'Java & Oracle' 카테고리의 다른 글

CSS 속성 , selector (0)	2014.05.22
HTML5 drag & drop, geolocation , storage, webworker, file api, web database (0)	2014.05.21
Applet (0)	2014.05.19
HTML5 tag, table (0)	2014.05.15
이클립스 스탠다드 설치, Aptana Studio 설치, HTML5 (0)	2014.05.14

Image Tag

<!DOCTYPE html>

<html>

<head>

<title> Image tag </title>

</head>

<body>

</body>

</html>

-----------------------------------

이미지를 가운데로 방법1 (표준아님)

</center>

이미지를 가운데로 방법2

</div>

-------------------------------

vspace="50" : 이미지의 위 아래의 수직간격을 줌.

hsapce="100" : 이미지의 수평간격을 줌.

--------------------------------

iframe 사용

<!DOCTYPE html>

<head>

<title>iframe</title>

<style>

.aaa {width:250;height:300}

</style>

<body>

<caption> 검색엔진의 시작페이지 비교</caption>

</tr>

</tr>

</table>

</body>

</html>

--------------------------------

embed

<!DOCTYPE html>

<html>

<head>

<title> embed </title>

</head>

<body>

</body>

</html>

실행은 이런식이었는데 file:///D:/WebHome/0519/embed.html/ 음..

-------------------------------

video

<!DOCTYPE html>

<html>

<head>

<title> Video Tag </title>

</head>

<body>

</body>

</html>

설명: controls 는 조절 부분이 있게

-----------------------------------

Mouseover video

<!DOCTYPE html>

<html>

<head>

<title> Mouseover Video </title>

</head>

<body>

</video>

<h1>Point at the video to play it!</h1>

</body>

</html>

비디오에 마우스를 올리면 진행되고, 비디오 바깥으로 마우스를 가져가면 비디오가 멈추는.

----------------------------

오디오 클릭으로 소리 키고 끄기

<!DOCTYPE html>

<html>

<title>Audio cue</title>

function toggleSound(){

var music = document.getElementById("clickSound");

var toggle = document.getElementById("toggle");

if(music.paused){

music.play();

toggle.innerHTML = "Pause";

}

else{

music.pause();

toggle.innerHTML = "play";

}

</script>

<head>

</head>

<body>

</audio>

</body>

</html>

--------------------------------------

<!DOCTYPE html>

<head>

</head>

<body>

<video controls="controls" width="640" height="360"

data-setup"{}">

</video>

</body>

</html>

트랙이 인터넷익스플로어에서만 보임.

-----------------------------

라인 그리기

<!DOCTYPE html>

<head>

<title>Diagonal line with canvas</title>

function drawDiagonal(){

var canvas = document.getElementById('diagonal');

var context = canvas.getContext('2d');

context.beginPath();

context.moveTo(70,140);

context.lineTo(140,70);

context.stroke();

}

window.addEventListener("load", drawDiagonal, true);

</script>

</head>

<body>

</body>

</html>

------------------------------

/*

Applet = Application + let(접미사) --> J2SE

--Lifecycle

--init(),start() or paint(), stop(), destroy()

Servlet = Server + Applet --> J2EE

MIDlet = MIDP + Applet --> J2ME

공통점 : 라이프사이클이 똑같다. 부모로부터 상속 받는 것도 똑같다.

*/

import java.awt.Font;

import java.awt.Graphics;

public class HelloWorldApplet extends java.applet.Applet{

private Font font;

@Override

public void init(){

this.font = new Font("Verdana", Font.BOLD + Font.ITALIC, 35);

}

@Override

public void paint(Graphics g){

setFont(this.font);

g.drawString("Hello, World", 30,50);

}

명령프롬프트로 컴파일해서 클래스파일을 만들어서

<!DOCTYPE html>

<html>

<head>

<title> Java Applet Tag </title>

</head>

<body>

<h2>Java Applet Tag</h2>

</body>

</html>

html 파일도 위처럼 만들어 준후 같은 위치에 class파일과 html파일을 만들어서

http://localhost/0519/helloworldapplet.html 하면 되야하는데 안됨.

방안 : 컴파일을 1.7로 해주고 javac -source 1.7 -target 1.7 HelloWorldApplet.java 치고

제어판 -java - security 탭에가서 보안을 제일아래로 내려줌.

크롬을 쓴다면 url에 chrome://plugins 들어가

Java(TM) - 버전: 10.55.2.14

Next Generation Java Plug-in 10.55.2 for Mozilla browsers 을 항상 허용 체크.

브라우저를 닫았다가 다시 열어. 다시 http://localhost/0519/helloworldapplet.html 들가면 ....

되긴되는데 깜박이네.. 음..

-------------------------------

버튼 누르면 색 바뀌게

AplletEvent.java

import java.awt.Button;

import java.awt.Color;

import java.awt.Font;

import java.awt.Graphics;

import java.awt.event.ActionEvent;

import java.awt.event.ActionListener;

public class AppletEvent extends java.applet.Applet implements ActionListener{

private Button btnBlue, btnRed;

private Font font;

@Override

public void init(){

this.font = new Font("Times New Roman", Font.BOLD,30);

this.btnRed = new Button("RED");

this.btnRed.setBackground(Color.blue);

this.btnBlue = new Button("BLUE");

this.btnBlue.setBackground(Color.red);

this.btnRed.addActionListener(this);

this.btnBlue.addActionListener(this);

add(this.btnBlue); add(this.btnRed);

this.setBackground(Color.yellow);

}

@Override

public void paint(Graphics g){

g.setFont(this.font);

g.drawString("Hello, World!!!", 30, 50);

}

@Override

public void actionPerformed(ActionEvent evt) {

switch(evt.getActionCommand()){

case "RED" : this.setBackground(Color.red); break;

case "BLUE" : this.setBackground(Color.blue); break;

}

자바컴파일해서 클래스파일을 html과 같은 위치에

<!DOCTYPE html>

<html>

<head>

<title> Java Applet Tag </title>

</head>

<body>

<h2>Java Applet Tag</h2>

</body>

</html>

-------------------------------------

리스트에 담기 및 삭제

import java.applet.Applet;

import java.awt.BorderLayout;

import java.awt.Button;

import java.awt.Color;

import java.awt.Font;

import java.awt.Label;

import java.awt.List;

import java.awt.Panel;

import java.awt.TextField;

import java.awt.event.ActionEvent;

import java.awt.event.ActionListener;

import java.awt.event.ItemEvent;

import java.awt.event.ItemListener;

public class ShoppingMall extends Applet implements ActionListener, ItemListener{

private Panel p, p1;

private TextField tfAdd, tfRemove;

private Button btnAdd, btnRemove;

private List cart;

private Font font;

@Override

public void init(){

this.setBackground(Color.YELLOW);

this.font = new Font("Arial", Font.BOLD, 30);

this.setLayout(new BorderLayout());

this.p = getNorth();

this.p1 = getSouth();

cart = new List();

this.cart.setFont(font);

this.cart.addItemListener(this);

this.add(this.p, "North");

this.add(this.p1, "South");

this.add(this.cart, "Center");

}

private Panel getNorth(){

Panel pNorth = new Panel();

pNorth.add(new Label("담기 : "));

pNorth.add(this.tfAdd = new TextField(10));

this.tfAdd.setFont(font);

pNorth.add(this.btnAdd = new Button("담기"));

this.btnAdd.setFont(font);

this.btnAdd.addActionListener(this);

return pNorth;

}

private Panel getSouth(){

Panel pSouth = new Panel();

pSouth.add(new Label("삭제 : "));

pSouth.add(this.tfRemove = new TextField(10));

this.tfRemove.setFont(font);

pSouth.add(this.btnRemove = new Button("삭제"));

this.btnRemove.setFont(font);

this.btnRemove.addActionListener(this);

return pSouth;

}

@Override

public void actionPerformed(ActionEvent evt){

if(evt.getSource() == btnAdd || evt.getSource() == tfAdd){

this.cart.add(this.tfAdd.getText().trim());

this.tfAdd.setText((""));

}else if(evt.getSource() == btnRemove || evt.getSource() == tfRemove){

this.cart.remove(tfRemove.getText().trim());

this.tfRemove.setText("");

}

@Override

public void itemStateChanged(ItemEvent evt){

this.tfRemove.setText(this.cart.getSelectedItem());

}

자바 컴파일 후

<!DOCTYPE html>

<html>

<head>

<title> Java Applet Tag </title>

</head>

<body>

<h2>Java Applet Tag</h2>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

이미지의 위치를 마우스클릭할떄 바뀌는 것

import java.applet.Applet;

import java.awt.Graphics;

import java.awt.Image;

import java.awt.event.MouseAdapter;

import java.awt.event.MouseEvent;

public class ImageApplet extends Applet {

private Image image;

private int mouseX;

private int mouseY;

@Override

public void init(){

this.addMouseListener(new MouseAdapter(){

public void mouseClicked(MouseEvent evt){

mouseX = evt.getX();

mouseY = evt.getY();

repaint();

}

});

this.image = this.getImage(this.getDocumentBase(), "images/duke.jpg");

}

public void paint(Graphics g){

g.drawImage(this.image, this.mouseX, this.mouseY, this);

}

컴파일해서 imageapplet 클래스파일 두개를 모두 옮겨준 후

<!DOCTYPE html>

<html>

<head>

<title> Java Applet Tag </title>

</head>

<body>

<h2>Java Applet Tag</h2>

</body>

</html>

------------------------------

마우스가 움직이면 이미지가 따라 움직이는

import java.applet.Applet;

import java.awt.Graphics;

import java.awt.Image;

import java.awt.event.MouseEvent;

import java.awt.event.MouseMotionAdapter;

public class ImageApplet extends Applet {

private Image image;

private int mouseX;

private int mouseY;

@Override

public void init(){

this.addMouseMotionListener(new MouseMotionAdapter(){

public void mouseMoved(MouseEvent evt){

mouseX = evt.getX();

mouseY = evt.getY();

repaint();

}

});

this.image = this.getImage(this.getDocumentBase(), "images/duke.jpg");

}

public void paint(Graphics g){

g.drawImage(this.image, this.mouseX, this.mouseY, this);

}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

Param

import java.awt.Font;

import java.awt.Graphics;

public class ParamDemo extends java.applet.Applet{

@Override

public void paint(Graphics g){

String fontName = this.getParameter("fonts"); //html파일에서 fonts = Tahoma 이다.

int fontSize = Integer.parseInt(this.getParameter("size"));

Font font = new Font(fontName, Font.BOLD, fontSize);

g.setFont(font);

g.drawString(fontName,25,50);

}

<!DOCTYPE html>

<html>

<head>

<title> Java Applet Tag </title>

</head>

<body>

<h2>Java Applet Tag</h2>

</applet>

</body>

</html>

-----------------------------------

applet clock

import java.awt.Font;

import java.awt.Graphics;

import java.util.Date;

public class AppletClock extends java.applet.Applet implements Runnable{

private Date date;

private Thread runner;

private Font font;

private boolean isStop;

@Override

public void start(){

date = new Date();

font = new Font("Arial", Font.BOLD, 30);

runner = new Thread(this);

isStop = false;

runner.start(); //Thread가 스타트 하는..

}

@Override

public void stop(){

if(runner != null){

isStop = true;

runner = null;

}

@Override

public void run(){

//Thread가 실행하는 코드

while(!isStop){

date = new Date();

repaint();

try{

Thread.sleep(1000);

}catch(Exception ex){}

}

@Override

public void paint(Graphics g){

g.setFont(font);

g.drawString(date.toString(), 10, 50);

}

<!DOCTYPE html>

<html>

<head>

<title> Java Applet Tag </title>

</head>

<body>

<h2>Java Applet Tag</h2>

</applet>

</body>

</html>

1초마다 계속 repaint하여 시계처럼 동작.

----------------------

정해진 시간에 소리가 나게

import java.applet.AudioClip;

import java.awt.Font;

import java.awt.Graphics;

import java.util.Date;

public class AppletClock extends java.applet.Applet implements Runnable{

private Date date;

private Thread runner;

private Font font;

private boolean isStop;

private AudioClip audio;

@Override

public void init(){

audio = this.getAudioClip(getCodeBase(),"audio/bs-ironman.mid");

}

@Override

public void start(){

date = new Date();

font = new Font("Arial", Font.BOLD, 30);

runner = new Thread(this);

isStop = false;

runner.start(); //Thread가 스타트 하는..

}

@Override

public void stop(){

if(runner != null){

isStop = true;

runner = null;

}

@Override

public void run(){

//Thread가 실행하는 코드

while(!isStop){

date = new Date();

repaint();

try{

Thread.sleep(1000);

}catch(Exception ex){}

}

@Override

public void paint(Graphics g){

g.setFont(font);

String str = date.toString();

g.drawString(date.toString(), 10, 50); //Mon May 19 16:45:14 KST 2014

if(str.equals("Mon May 19 16:52:00 KST 2014")){

this.audio.play();

}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

저작자표시

'Java & Oracle' 카테고리의 다른 글

HTML5 drag & drop, geolocation , storage, webworker, file api, web database (0)	2014.05.21
HTML5 form (0)	2014.05.20
HTML5 tag, table (0)	2014.05.15
이클립스 스탠다드 설치, Aptana Studio 설치, HTML5 (0)	2014.05.14
HTML5 (0)	2014.05.13

CentOS 에서

su

어제 받은 데모 rpm -Uvh jdk-8u5-linux-x64-demos.rpm 설치.

ls /usr/java/jdk1.8.0_05 로 확인 가능.

오페라 다운 받고 rpm -ivh opera*.rpm 설치.

CentOs 64비트에서는 구글 크롬이 지원하지않는다. 그래서

wget http://chrome.richardlloyd.org.uk/install_chrome.sh

위와 같이 써서 다운을 받는다.

chmod u+x install_chrome.sh 로 실행권한을 주고

./install_chrome.sh 로 설치.(꽤걸림)

service httpd start //Apach service를 켜줌.

HTML5폴더에 index.html(간단한 소스) 의 파일을 만들어서 윈도우즈 웹브라우저에서 http://192.168.89.130/HTML5/ 로 접속해서 확인.

service vsftpd start 해주어서 ftp 서비스를 열어준 후에, 파이어질라 를 이용해서 CentOS로 파일을 넘겨줌.

chmod 777 /WebHome -R //WebHome 폴더의 권한을 줌. 파일의 원활한 이동을 위하여

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

id, class, title

<!DOCTYPE html>

<html>

<head>

<title> id, class, title 연습 </title>

<style>

#jimin{border-color:black;bor-width:10px}

.aaa{font-size:30pt;color:yellow}

dt{font-size:30pt;font-family:궁서체}

</style>

</head>

<body>

<dl>

<dd>document 내의 유일한 태그를 지칭할 때</dd>

<dt>class방식</dt>

<dd>docuent 의 여러개의 태그를 한꺼번에 지칭할 때</dd>

<dt>title방식</dt>

<dd>특정 태그의 보조 역할 : 간단한 설명,Browser 에서는 툴팁으로 보임.</dd>

</dl>

<hr>

<dl>

<dt title="진인사대천명">盡人事待天命</dt>

<dl>

</body>

</html>

설명 :

#jimin{border-color:black;bor-width:10px}

.aaa{font-size:30pt;color:yellow}

----------------------------

Section

<!DOCTYPE html>

<html>

<head>

<title> HTML5 Section Tag </title>

</head>

<body>

</section>

</section>

</body>

</html>

----------------------------------------

nav Tag

<!DOCTYPE html>

<html>

<head>

<title>Search Engines </title>

</head>

<body>

<nav>

<ul>

<li><a href="http://www.google.com">Google</li>

<li><a href="http://www.naver.com">Naver</li>

</ul>

</nav>

</body>

</html>

----------------------------------------

article Tag

<!DOCTYPE html>

<html>

<head>

<title> article Tag </title>

</head>

<body>

</header>

상담을 원하시면 <a href='mailto:chocoddan@naver.com'>me</a> 에게 메일주세요.

</address>

</footer>

</article>

</body>

</html>

---------------------------------------

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

<li><a href='id.class.title.html'>id.class.title</a></li>

<li><a href='section.html'>section Tag</a></li>

</ul>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<!DOCTYPE html>

<html>

<head>

<title> anchor Tag </title>

</head>

<body>

<nav>

<h3>IT vendors</h3>

<ul>

<li><a href="http://www.oracle.com" target="_blank">Oracle</a></li>

<li><a href="http://www.micorsoft.com" target="_self">Microsoft</a></li>

<li><a href="http://www.google.com" target="_parent">Google</a></li>

<li><a href="http://www.samsung.co.kr" target="top">Samsung</a></li>

</ul>

</nav>

<hr>

<nav>

<ol>

</ol>

</nav>

<hr>

<h3>Anchor를 이용한 Email 연결하기 </h3>

<hr>

</ol>

<hr>

<ul>

</ul>

</body>

</html>

설명:

_blank 새창

_self 현재창에서 여는지

pdf파일과 이미지파일은 인터넷 창에서 그냥 열리고, zip과 exe파일은 다운을 받음.

파이어폭스로 실행해보면 다운을 받을때 물어본다.

type은 mime type을 쓴다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

small & big Tag

<!DOCTYPE html>

<html>

<head>

<title> small & big Tag </title>

</head>

<body>

<h3>small Tag</h3>

<p>This is a <small>Sample</small> Text</p>

<p>This is a <big>Sample</big> Text</p>

</body>

</html>

설명:

기본보다 크기를 1 크게, 1작게

---------------------------------

strike Tag

<!DOCTYPE html>

<html>

<head>

<title> strike Tag</title>

<style>

span{text-decoration:line-through}

</style>

</head>

<body>

<h3>strike Tag</h3>

<figcaption> price : <s>$10,000</s> <span>$9,000</span> $8,000</figcaption>

</figure>

</body>

</html>

설명:

strike tag는 글의 가운데 줄을 긋는 것.

----------------------------------

cite Tag : 기울임

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</figure>

</article>

</figure>

</article>

</body>

</html>

-----------------------------

q Tag : ""를 시작과 끝에 써줌. q title은 마우스올렸을 때 설명 나오게.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>액션 영화 표적은 역린과 다르게 또다른 매력이 있습니다...<q title="류승룡" cite="http://movie.naver.com/movie/bi/mi/basic.nhn?code=106547">가장 큰 매력은 누가 뭐래도 가장 핫한 배우 류승룡의 탁월한 연기력과 액션신이 아닐까 합니다</q>물론 개인적으로는 특별 출연으로 동생 역할을 한...

</body>

</html>

-------------------------------

ruby Tag : 글씨 위에 글씨를 넣는. <rp>태그는 루비주석을 사용할 때 rt요소가 적용되지 않는 브라우저를 위해 사용

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ruby>

</ruby>

</body>

</html>

-----------------------------

wbr Tag : 화면이 클 때는 상관없지만 화면에 끝에 걸릴 때 중간에 긴단어를 끊을 때 사용. (화면밑으로 내려가는)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Word lineBReak Tag</h1>

<p>Try to shrink the browser window, to view how

the word "XMLHtttpRequest" ion the paragraph

below will break:</p>

<p>To learn AJAX, you must be familiar

with the XML<wbr>Http<wbr>Request Object.</p>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

Table - tr은 행 td는 칸, 각각에 색or 이미지 넣기

<!DOCTYPE html>

<html>

<head>

<title> table Tag </title>

</head>

<body>

<h1>Table Tag</h1>

</table>

</body>

</html>

--------

Table - rowspan, colspan

</table>

--------

Table - td대신 th를 사용하면 가운데 정렬 + Bold 가능. 위치만 맞추고 싶을 때는 align 사용가능.

cellpading은 외곽선과의 간격.

border='0' 을 주면 선이 사라져서 정렬 효과 가능.

<!DOCTYPE html>

<html>

<head>

<title> table Tag </title>

<style>

table{font-size:30pt}

</style>

</head>

<body>

<h1>Table Tag</h1>

<tr><td rowspan='4' align='center' style='color:red'>JAVA</td><th colspan='2'>Oracle</th></tr>

<tr><td>Spring</td></tr>

</table>

</body>

</html>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

저작자표시

'Java & Oracle' 카테고리의 다른 글

HTML5 form (0)	2014.05.20
Applet (0)	2014.05.19
이클립스 스탠다드 설치, Aptana Studio 설치, HTML5 (0)	2014.05.14
HTML5 (0)	2014.05.13
아파치 HTTP, ISS 설치 (0)	2014.05.12

www.eclipse.org 접속.

Eclipse Standard 4.3.2, 200 MB 다운.

eclipse 실행. HTML 코딩을 하기위한 준비과정.

Help - Install New Software 선택.

Work with : 를 Kepler ~~ 로 맞춰줌. 목록이 뜨면 Web, XML, Java EE ~~~ 를 확장시켜서

Eclipse Web Developer Tools 선택하고 next. finish 로 설치.

설치가 끝나면 Window-Open Perspective - Other 눌러서 Web 을 선택.

Window - Preferences 선택. 왼쪽에 Web에사 HTML Files와 CSS Files 를 선택해서 encoding 을 UTF-8로 선택.

새로운 웹프로젝트를 만들어서 sample.html을 아래와 같이 만들어 테스트해보자.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

body {background-color:yellow}

p{font-size:30pt;color:red;font-weight:900}

</style>

</head>

<body>

<p>Hello, HTML5</p>

</body>

</html>

만들어서 실행을 시킬때는 위의 지구모양 클릭. 그래서 http://localhost/0514/WebContent/sample.html 해주면 확인가능.

툴을 사용할 것이기 때문에 WebContent 폴더 아래에 써주어야 한다.

Window-Web browser 에서 어떻게 출력할 것인지 변경 가능.

http://www.aptana.com/ 접속해서. Downloads 탭에가서 Standalone Version 다운로드.

실행 중인 Apache2.2 를 stop 해줌.

다운받은 aptana studio 설치. next -> I agree -> C:\Program Files (x86)\Aptana Studio 3\ 경로에 설치(폴더 만듬) next.

next. XML Documents 까지 체크하고 (모두 다체크) -> 계속 next 해서 설치함.

설치 후 Aptana Studio 실행. 경로 설정하기 전 WebHome 폴더에 가서 .metadata 폴더를 지움(깨끗하게 실행하기 위해)

경로 WebHome으로 지정해서 실행.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

CentOS 에 들어가서 자바설치해보자.

http://www.oracle.com 접속. Downloads - Java for Developers 가서 JDK(8u5) 눌러서

Linux x64 133.87 MB jdk-8u5-linux-x64.rpm 다운.

Linux x64 52.72 MB jdk-8u5-linux-x64-demos.rpm 다운.

터미널 켜서 다운받은 폴더이동.

java -version 으로 자바가 깔려있는지 확인.(jre만 깔려있음 javac -version 하면 없음)

su

rpm -Uvh jdk-8u5-linux-x64.rpm 로 설치 (-Uvh 에서 U는 있으면 업그레이드 없으면 설치. -ivh 하면 그냥 설치)

ls /usr/java 에 rpm이 깔린다.

cd /usr/java

cd jdk1.8.0_05

java -version 보면 아직도 옛날꺼다

alternatives --config java 하면 깐 버전이 없고 1번 2번이 있다. 그래서 최신버전을 등록해줘야함

alternatives --install \

> /usr/bin/java java /usr/java/jdk1.8.0_05/bin/java 3 //3번에 지정하겠다.

alternatives --config java 해서 지금 정해준 번호 3번을 선택한다.

java -version 으로 확인 하면 최신버전으로 나옴.

javac -version 로 보면 아까 설치된 것이 없었기 떄문에 최신버전으로 나옴. 만약 기존게 있었다면 java 처럼 등록해서 하면됨.

이제 환경설정 해주자.

gedit /etc/profile 들어가서 제일 마지막에 아래와 같이 작성.

#-----------------------------------------------------

# JAVA 1.8.0_05 Settings

#-----------------------------------------------------

JAVA_HOME=/usr/java/jdk1.8.0_05

CLASSPATH=.:$JAVA_HOME/jre/lib/rt.jar

PATH=$JAVA_HOME/bin:$PATH

export JAVA_HOME

export CLASSPATH

export PATH

저장 후에

source /etc/profile 로 마무리.

www.eclipse.org 접속해서

Eclipse Standard 4.3.2 리눅스 버전다운.

이클립스는 관리자권한으로 해서 설치할 필요가 없기 때문에 내 계정으로 가서 설치해주자

exit 해서 다운받은 폴더로이동.

tar xvfz eclipse*.tar.gz 로 압축 풀어주고.

mv eclipse ../Eclipse 이클립스 위치 이동.

su

chmod 777 /WebHome -R //이클립스 워크스페이스를 WebHome 폴더로 하기 위해 권한을 줬음.

http://www.aptana.com/ 접속.

Eclipse Plug-in Version 다운 누르면

http://download.aptana.com/studio3/plugin/install 를 복사하라고한다. 복사해서

이클립스의 Help - Install New Software 선택해서 Work with : 에 복사 한것을 붙여 넣고 Add를 누름.

이름 Aptana Studio 3 하고 경로에 다시 위의 복사한 것을 붙여 넣어주고 ok. 하고 next 눌르고 눌러 설치를 한다.

실행해서 Run Configuration 에서 Web Browser 우측 버튼 new 선택해서 크롬을 하나 만들어줌.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<!DOCTYPE html>

<head>

<style>

body{color:black}

p{color:red}

</style>

</head>

<body>

<p>Hello</p>, World!!!

</body>

</html>

출력:

Hello

, World!!!

p태그는 자동으로 줄이 바뀐다. 줄이 안바뀌게하려면 p태그를 모두 span 으로 바꿔주면 줄이 안바뀌고 출력 된다.

----------------------------

https://opentutorials.org/ 생활코딩 홈페이지.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

띄어쓰기

<!DOCTYPE html>

<head>

<style>

p {font-size:40pt}

</style>

</head>

<body>

</body>

</html>

좋지 않은 방법으로는

<p>안<span style="color:white">ㅁㄴㅇㄻㄴㅇㄹㄴㅁㅇㄹㄴㅁㅇㄹㅇㄻㄴㅇㄹ</span>녕하세요</p> 이런 방법도 있다.

pre 태그를 사용하면 내가 입력한 그대로(엔터 스페이스 모두) 그대로 인식.

<body>

<pre>

서 시

윤동주

하늘을 우러러 한 점 부끄럼이 없기를

잎새에 이는 바람에도

이하 생략...

</pre>

</body>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<body>

</body>

수평선 그려줌. 아무 조건없으면 중앙정렬

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

오 나의 님은 피어날 장미<br>

오 나의 님 감미로워<p>

이처럼 예뻐 사랑스러 나는 사랑해<br>

언제까지나 사랑하리<br>

온바다가 마를까지

</blockquote>

사용해서 br로 다음 줄에 쓸 것인지 p로 다다음 줄에 쓸 것인지

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

리스트 1

<!DOCTYPE html>

<head>

<style>

h1{text-align: center;color: green}

body{font-size:20pt}

</style>

</head>

<body>

<h1>Android 기반 Java Development Expert Class Curriculum</h1>

<li>

<ol type="A">OS

<li>Windows 8.1</li>

<li>Ubuntu14.04</li>

<li>CentOS</li>

</ol>

</li>

<li>C-language</li>

<li>Oracle</li>

<li>

<ol type="1">Web Scripts>

<li>JavaScript</li>

<li>JQuery</li>

<li>Web Scripts</li>

<li>Servlet/JSP</li>

</ol>

</body>

</html>

타입은 i는 로마자, A는 대문자 순서, 1은 숫자로 증가해나간다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

리스트 2

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Unordered List tag</h1>

<ul>Drinks

<li>Coffee</li>

</ul>

<ul>Color

<li>Green</li>

</ul>

<ul type="square">Languages

<li>Python</li>

</ul>

</body>

</html>

· 이것을 사용해서 리스트를 정렬.

아래와 같이 각각에 타입을 줄 수도 있음.

<li type="disk">Coffee</li>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

이미지 넣기

<!DOCTYPE html>

<head>

<title>Figure & figcaption Tag</title>

</head>

<body>

<h1>Figure & figcaption Tag</h1>

<figcaption>Kinds of Web Browsers</figcaption>

</figure>

</body>

</html>

저작자표시

'Java & Oracle' 카테고리의 다른 글

Applet (0)	2014.05.19
HTML5 tag, table (0)	2014.05.15
HTML5 (0)	2014.05.13
아파치 HTTP, ISS 설치 (0)	2014.05.12
PL/SQL 커서, Exception (0)	2014.05.08

CentOS에서

rpm -qa | grep openssh-server //있는 것 확인.

su

service sshd status //런닝중인 것을 볼 수 있다.

serivce sshd stop

service sshd start

ifconfig 로 아이피 확인.

윈도우즈에서 putty 로 접속. (캐릭터셋을 utf-8 로 바꾸어서)

Putty에서

rpm -qa | grep vsftpd //없는 것확인.

su

yum -y install vsftpd

cd /var/ftp

cd pub

vi test.html 해서 아래와 같이입력 후 저장

<html>

<head>

<title>Welcome!!!</title>

<head>

<body>

<font size='7'>Welcome</font>

</body>

</html>

그리고 service vsftpd start

cat /etc/sysconfig/iptables //파이어월의 파일. 명령프롬프트에서는 그래픽을 띄울 수없으니

vi /etc/sysconfig/iptables 들어가서 아래 라인을 추가해줌.

-A INPUT -m state --state NEW -m tcp -p tcp --dport 21 -j ACCEPT

그리고 service iptables restart 해주면

윈도우즈에서 웹브라우저로 ftp://192.168.89.130/ 접속하면 안들어가진다.

cd /etc/sysconfig 들어가서

cd /etc/selinux

vi config 들어가서

SELINUX=enforcing 을 SELINUX=disalbed 로 바꿔줌.

그리고 centos에서 파이월을 21번포트를 열어주면 웹브라우저에서 접속가능.

cd /WebHome

groupadd iusers

useradd -g iusers -d /WebHome -s /bin/bash -m ftpuser

cd /etc

cd vsftpd

vi vsftpd.conf 에서 아래를 바꿈

anonymous_enable=NO 와

chroot_local_user=NO

chroot_list_enable=YES

# (default follows)

chroot_list_file=/etc/vsftpd/chroot_list 으로 바꿈.

vi chroot_list 들어가서 ftpuser 라고만 쓰고 저장 후 나옴

service vsftpd stop

service vsftpd start

passwd ftpuser

비번 설정은 ftpuser 로

ls -l /WebHome

chown ftpuser:iusers /WebHome -R

su ftpuser

chmod 755 /WebHome -R

웹브라우저에서 다시 ftp://아이피 써서 들어가면 들어가진다. (그런데 파일이 없음)

(파일질라 Host:아이피 / Username: ftpuser / Password:ftpuser)

다시 vi /etc/vsftpd/vsftpd.conf 들어가서 아래의 내용을 주석을 풀어줌.

ascii_upload_enable=YES

ascii_download_enable=YES

다시 service vsftpd restart 를 해서 서비스 재시작을 해줌.

그리고 센트오에스 리붓.

다시 putty 연결해서

su

rm -rf /WebHome

mkdir /WebHome //루트권한으로 만들어준 것임.

chown ftpuser:iusers /WebHome -R

chmod 755 /WebHome -R

service vsftpd restart 하면

파일질라 Host:아이피 / Username: ftpuser / Password:ftpuser Port:21로 들어가면 들어가짐.

그리고 크기가 작은 파일 하나를 업로드 해서

웹브라우저에서 ftp://아이피 접속하면 업로드한 파일을 볼 수 있다.

/WebHome에 어제했던 index.html 을 넣고

웹브라우저로 http://아이피 로 접속하면 출력된화면을 볼 수 있다. 안되면 service httpd start 하고 다시 접속.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

윈도우즈에서 note++을 열어서

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Sample</title>

</head>

<body>

First Name : <input type="text" id="firstname" style="background-color:yellow;font-size:30pt" /><br/>

Last Name : <input type="text" id="lastname" style="color:red;font-style:italic;font-size:10mm"><br/>

</form>

</body>

</html>

위와같이 만들어서 D드라이브의 WebHome폴더에 sample.html로 저장.

웹브라우저에서 http://localhost/sample.html

http://localhost/sample.html 로 접속하면 볼 수 있다.

html의 주석처리는  이런식으로 할 수 있다.

-----------------------------------

태그를 바깥으로 빼는 방법을 써서 작성해보자.

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Sample</title>

.aaa{font-size:30pt;color:red}

.bbb{font-family:궁서체;font-style:italic;font-size:10mm}

.ccc{background-color:yellow;font-size:25pt}

.ddd{font-weight:900;text-decoration:underline;font-size:40px}

</style>

</head>

<body>

<span class="ddd">First Name : </span> <input type="text" id="firstname" class="ccc"/><br/>

</form>

</body>

</html>

그리고 라벨에도 span을 써서 넣어주었다.

------------------------------------------------

.aaa{font-size:30pt;color:red}

.bbb{font-family:궁서체;font-style:italic;font-size:10mm}

.ccc{background-color:yellow;font-size:25pt}

.ddd{font-weight:900;text-decoration:underline;font-size:40px}

를 sample.css에 저장.

그리고 sample.html에서는 스타일 부분 한줄만 바뀜.

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Sample</title>

</head>

<body>

<span class="ddd">First Name : </span> <input type="text" id="firstname" class="ccc"/><br/>

</form>

</body>

</html>

------------------------------------------------

위의 코드에서 전송 눌렀을 때 창 뜨게

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Sample</title>

window.onload = function1;

function function1(){

alert("Hello, World");

document.getElementById('userform').firstname.focus();

document.getElementById('mybutton').onclick = myclick;

}

function myclick(){

var firstname = document.getElementById('firstname').value;

var secondname = document.getElementById('lastname').value;

alert("Hi!!! " + firstname + ", "+ secondname);

}

</script>

</head>

<body>

<span class="ddd">First Name : </span> <input type="text" id="firstname" class="ccc"/><br/>

</form>

</body>

</html>

-----------------------------------------------------

위 코드 분리

sample.js

window.onload = function1;

function function1(){

alert("Hello, World");

document.getElementById('userform').firstname.focus();

document.getElementById('mybutton').onclick = myclick;

}

function myclick(){

var firstname = document.getElementById('firstname').value;

var secondname = document.getElementById('lastname').value;

alert("Hi!!! " + firstname + ", "+ secondname);

}

sample.html

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Sample</title>

</head>

<body>

<span class="ddd">First Name : </span> <input type="text" id="firstname" class="ccc"/><br/>

</form>

</body>

</html>

된다면 sample.html, sample.js, sample.css 세개를 centos에 옮겨 http://192.168.89.130/sample.html 로 접속해서 되는지 확인.

-----------------------------------------

html 도움되는 사이트

www.tutorialspoint.com

http://www.w3schools.com/

--------------------------------

notepad++ 에서 Plugins - Plugin Manger - Show plugin Manager - Preview HTML 체크해서 install. 설치하면위의 오른쪽에 생긴것을 누르면 출력 미리보기 가능.

Plugins - Plugin Manger - Show plugin Manager - Web edit 체크해서 install.

기본적인 템플릿을 만들 수 있는 Plugins - Newfile&Browser (지난번에 설치해서 있음) 에서 create html file 1을 눌르면 html4버전으로 나온다.

Encoding을 UTF-8로 바꿔주고 Plugins - Newfile&Browser - Option 에서 New file No. 를 File 1로 해주고 Edit Initial Text를 눌러서 아래와 같이 수정 후 save. 변경한 화면에서도 save.

<!DOCTYPE html>

<html>

<head>

<title> New Document </title>

</head>

<body>

</body>

</html>

다시 Plugins - Newfile&Browser - Create Html File 1을 눌르면 변경완료된다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

http://validator.w3.org/check 사이트에서 Validate by File Upload 탭에 가서 html파일을 올리면 에러 및 워닝 체크.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

IIS 서비스 중지.

IIS Manager 에가서 Default Document 눌러주고, 기본문서 5개를 모드 remove 해서 지워줌.

오른쪽 Restart 를 눌러서 서비스 재시작해줌. 웹브라우저에서 localhost 로 더이상 접속 안됨.

그럼 Add눌러서 abc.html 해서 하나 넣어주고 다시 서비스 재시작.

안됨.. 그럼 World Wide Web Publishng service 를 중지하고 Manual 로 바꿔줌.

C:\Program Files (x86)\Apache Software Foundation\Apache2.2\conf 에서 httpd.conf 를 열어줌.

244라인 DirectoryIndex index.html 을 DirectoryIndex aaa.html 로 변경.

173라인 ServerName localhost:80 로 변경.

47라인 Listen 80 로 변경. IIS 서비스를 모두 죽이고 아파치를 80번포트로 사용. 그래서 저장 후

관리자 권한으로 명령프롬프트 켜서 net stop apache2.2 하고 net start apache2.2 하고

웹브라우저로 localhost로 들어가면 기본문서인 aaa.html이 없으므로 있는 폴더를 모두 다 보여줌.

저작자표시

'Java & Oracle' 카테고리의 다른 글

HTML5 tag, table (0)	2014.05.15
이클립스 스탠다드 설치, Aptana Studio 설치, HTML5 (0)	2014.05.14
아파치 HTTP, ISS 설치 (0)	2014.05.12
PL/SQL 커서, Exception (0)	2014.05.08
PL/SQL - 커서, 프로시저 (0)	2014.05.07

AlreadyNo의 블로그

Java & Oracle

자바 스크립트 기본

'Java & Oracle' 카테고리의 다른 글

layout, navigation, clipping, border-shadow

'Java & Oracle' 카테고리의 다른 글

font-family, vertical-align, list-style-type 이미지로, position, float

'Java & Oracle' 카테고리의 다른 글

CSS 속성 , selector

'Java & Oracle' 카테고리의 다른 글

HTML5 drag & drop, geolocation , storage, webworker, file api, web database

'Java & Oracle' 카테고리의 다른 글

HTML5 form

'Java & Oracle' 카테고리의 다른 글

Applet

'Java & Oracle' 카테고리의 다른 글

HTML5 tag, table

'Java & Oracle' 카테고리의 다른 글

이클립스 스탠다드 설치, Aptana Studio 설치, HTML5

'Java & Oracle' 카테고리의 다른 글

HTML5

'Java & Oracle' 카테고리의 다른 글

+ Recent posts

티스토리툴바