<html>
<head>
<style type="text/css">
.test
{
border-top-style:dashed;
border-top-color:yellow;
border-right-style:double;
border-right-color:blue;
border-left-style:double;
border-left-color:blue;
border-bottom-style:dashed;
border-bottom-color:red;
border-bottom-width:12;
padding:20px;
}
.test1
{
border-style:dashed double dashed double;
border-color:yellow blue red;
border-width:4 4 10 4;
padding:20px;
}
</style>
</head>
<body>
<p class="test">
일반 직접방식.
내용의 위쪽선은 노랑 점선<br>
내용의 오른쪽선은 파랑 2줄선<br>
내용의 아래쪽선은 빨강 점선, 선두께 : 10<br>
내용의 좌측선은 파랑 2줄선<br>
내용의 안쪽여백 20px<br>
</p>
<p class="test1">
몽땅방식.
내용의 위쪽선은 노랑 점선<br>
내용의 오른쪽선은 파랑 2줄선<br>
내용의 아래쪽선은 빨강 점선, 선두께 : 10<br>
내용의 좌측선은 파랑 2줄선<br>
내용의 안쪽여백 20px<br>
</p>
<table class="test1">
<tr><td>테이블도 되나?</td></tr>
<tr><td class="test1">테이블 셀도 되나?</td></tr>
</table>
iframe도 되나?
<iframe class="test1" src="060304.htm"></iframe>
<br>
<span class="test1" >span도? 깨져보이지만 되는거</span><br>
그럼 이미지도 당연히~~
<img src="../html/image/back2.gif" class="test1"><br>
<textarea class="test1">텍스트 박스도</textarea>
</body>
</html>
Posted by 말없제이
,
<html>
<head>
<style>
.border1
{
border-style:dashed;
backgrund-color:yellow;
}
.border2
{
border-top-style:double;
border-bottom-style:dotted;
border-left-style:solid;
border-right-style:none;
background-color:gray;
}
.border3
{
border-style:double;
border-color:blue red green yellow;
}
.border4
{
border-style:double;
border-width:1px;
}
.border5
{
border:10px dashed blue;
}
.margin1
{
border:10px dashed blue;
margin:40px 30px 20px 10px;
}
.padding1
{
border:10px dashed blue;
padding:40px 30px 20px 10px;
}
</style>
<body>
<h1>테두리를 꾸미는 스타일 </h1>
<xmp>
.border1
{
border-style:dashed;
backgrund-color:yellow;
}
</xmp>
<p class="border1">
border-style: 테두리 형태지정<br>
none(테두리 미지정)<br>
dotted(원)<br>
dashed(점선)<br>
solid(한줄)<br>
double(두줄)<br>
groove(입체감있게표현)<br>
ridge(테두리가 볼록하게)<br>
inset(테두리 전체가 들어간 모양)<br>
outset(테두리 전체가 튀어난 모양)
</p>
<br>
<xmp>
.border2
{
border-top-style:double;
border-bottom-style:dotted;
border-left-style:solid;
border-right-style:none;
background-color:gray;
}
</xmp>
<p class="border2">
방향을 지정할수 있다.<br>
방향을 지정할수 있다.<br>
방향을 지정할수 있다.<br>
방향을 지정할수 있다.<br>
</p>
<xmp>
.border3
{
border-style:double;
border-color:blue red green yellow;
}
</xmp>
<p class="border3">
색상을 지정할수 있다.<br>
1개지정 : 상하좌우 같은색<br>
2개지정 : 상하,좌우 색<br>
3개지정 : 상,좌우,하 색<br>
4개지정 : 상,우,하,좌 색<br>
border-방향-color으로 사용가능.
</p>
<xmp>
.border4
{
border-style:double;
border-width:1px;
}
</xmp>
<p class="border4">
두께를 지정할수 있다.<br>
1개지정 : 상하좌우<br>
2개지정 : 상하,좌우<br>
3개지정 : 상,좌우,하<br>
4개지정 : 상,우,하,좌<br>
border-방향-width 으로 사용가능.
</p>
<xmp>
.border5
{
border:10px dashed blue;
}
</xmp>
<p class="border5">
단축해서 지정가능<br>
border-width border-style border-color
</p>
<br><br>
<h1>여백 설정 스타일</h1>
<xmp>
.margin1
{
border:10px dashed blue;
margin:40px 30px 20px 10px;
}
</xmp>
<table border="1"><tr><td>
<p class="margin1">
바깥여백 지정<br>
1개지정 : 상하좌우<br>
2개지정 : 상하,좌우<br>
3개지정 : 상,좌우,하<br>
4개지정 : 상,우,하,좌<br>
margin-방향 으로 사용가능.
</p>
</td></tr></table>
<xmp>
.padding1
{
border:10px dashed blue;
padding:40px 30px 20px 10px;
}
</xmp>
<table border="1"><tr><td>
<p class="padding1">
안쪽여백 지정<br>
1개지정 : 상하좌우<br>
2개지정 : 상하,좌우<br>
3개지정 : 상,좌우,하<br>
4개지정 : 상,우,하,좌<br>
padding-방향 으로 사용가능.
</p>
</body>
</html>
Posted by 말없제이
,

<html>
<head>
<style>
.disc{list-style-type:disc;}
.deci{list-style-type:deci;}
.incircle{list-style-type:circle;list-style-position:inside;}
</style>
<body>
<h1>목록 속성 설정 </h1>
list-style-type에 넣을수 있는것<br>
none(지정하지않음)<br>
disc(검은원)<br>
circle(원형)<br>
square(사각형)<br>
upper-alpha(대문자 알파벳)<br>
lower-alpha(소문자 알파벳)<br>
decimal(1부터 시작하는 수)<br>
upper-roman(대문자 로마자)<br>
lower-roman(소문자 로마자)<br>

.disc{list-style-type:disc;}<br>
<ul class="disc">
<li>수박
<li>사과
<li>딸기
</ul>

.deci{list-style-type:deci;}<br>
<ol class="deci">
<li>장미
<li>튤립
<li class="incircle">민들레
</ol>

list-style-type 옵션.<br>
list-style-image:url(...) : 그림목록<br>
list-style-position : 목록의 들여/내어쓰기 inside(들여쓰기),outside(내어쓰기<br>

.incircle{list-style-type:circle;list-style-position:inside;} <br>
<ul style="list-style-image:url(../html/image/bt_cancel.gif)">
<li>하나
<li>둘
<li>셋
</ul>
</body>
</html>

Posted by 말없제이
,

<html>
<head>
<style>
.bcolor { background-color:yellow;} /* background-color: 배경색상 */
.bimage { background-image:url(../html/image/back2.gif);} /* background-image:url(../html/image/back2.gif) : 배경그림 */
.bimage2 { background-image:url(../html/image/back2.gif);background-repeat:no-repeat;} /* background-repeat : repeat그림반복, no-repeat(반복x), repeat-x(x반복), repeat-y(y반복) */
.bimage3 { background-image:url(../html/image/back2.gif);background-repeat:no-repeat;background-postition:right center;} /* background-postition : 배경그림 위치, left,cetner,right/top,center,bottom/ % */
.bimage4 { background-image:url(../html/image/back2.gif);background-attachment:fixed;} /* background-attachment: 배경그림 스크롤 scroll,fixed */
</style>
</head>
<body class="bimage4">

<h1>배경색상/배경그림 지정</h1>
background-color: 배경색상지정<br>
background-image:url(../html/image/back2.gif); : 배경그림지정<br>
보통 <body>내에서 작성하나<br>
<br>
<xmp>
.bimage { background-image:url(../html/image/back2.gif);} /* background-image:url(../html/image/back2.gif) : 배경그림 */
.bimage2 { background-image:url(../html/image/back2.gif);background-repeat:no-repeat;} /* background-repeat : repeat그림반복, no-repeat(반복x), repeat-x(x반복), repeat-y(y반복) */
.bimage3 { background-image:url(../html/image/back2.gif);background-repeat:no-repeat;background-postition:right center;} /* background-postition : 배경그림 위치, left,cetner,right/top,center,bottom/ % */
.bimage4 { background-image:url(../html/image/back2.gif);background-attachment:fixed;} /* background-attachment: 배경그림 스크롤 scroll,fixed */
<body class="bimage4">
</xmp>
<table class="bcolor" border="1" width="900"><tr><td>테이블에도 적용됨.</td></tr></table>
<table class="bimage" border="1" width="900" height="500"><tr><td>테이블에도 적용됨.</td></tr></table>
<table class="bimage2" border="1" width="900" height="500"><tr><td>background-repeat:no-repeat;</td></tr></table>
</body>
</html>

Posted by 말없제이
,

<html>
<head>
<style>
.fontAttr
{
font-family:모아12,궁서,굴림; /* 글꼴 없으면 다음차레 글꼴.*/
font-style:italic; /* 글형태 (normal,italic(이태릭),oblique(기울임) */
font-weight:900; /* 글자굵기 100-900,normal(400),blod(700) */
font-size:50; /* 글자 크기 */
color:blue; /* 글자 색상 */
}
.space{ letter-spacing:5em }
.space1{ word-spacing:3em }
.line { line-height:35pt }
.nwrap { white-space:nowrap; }
.talign { text-align:justify;font-size:20; } /* text-align : 좌우정렬 : left,center,right,justify(좌우정렬) */
.taligna { text-align:left;font-size:20; }
.valign { vertical-align:bottom;font-size:20; } /* vertical-align : 세로방향정렬 : top,middle(기본값),bottom */
.f50 { font-size:50; }
.baseline { vertical-align:baseline;font-size:10; } /* vertical-align -- 계속 -- baseline(부모 베이스라인정렬) */
.vtextbottom { vertical-align:text-bottom;font-size:10; } /* vertical-align -- 계속 -- text-top/text-bottom(부모요소의 폰트 아래정렬) */
.vunit { vertical-align:5em;font-size:10; }/* vertical-align -- 계속 -- 5em(다섯배만큼 위쪽으로) */
.tdeco { text-decoration:underline overline; font-size:40 } /* text-decoration : underline(밑줄),overline(텍스트위),line-throuth(가운데선),none */
.bcolor { background-color:yellow;} /* background-color: 배경색상 */
</style>
</head>
<body>
<h1>글꼴에 대한 설정</h1>
<xmp>
<head>
<style>
.fontAttr
{
font-family:모아12,궁서,굴림; /* 글꼴 없으면 다음차레 글꼴.*/
font-style:italic; /* 글형태 (normal,italic(이태릭),oblique(기울임) */
font-weight:900; /* 글자굵기 100-900,normal(400),blod(700) */
font-size:50; /* 글자 크기 */
color:blue; /* 글자 색상 */
}
</style>
</head>
</xmp>
<p class="fontAttr">
글자임
</p>
<br>
<h1>문장과 문단을 제어</h1>
<xmp>
.space{ letter-spacing:5em }
.space1{ word-spacing:3em }
.line { line-height:35pt }
</xmp>
<p class="space">letter-spacing : 글자와 글자 사이의 간격을 조정</p>
<p class="space1">word-spacing : 단어사이의 간격을 조정</p>
<p class="line">line-height : 문단 줄간격..
`원룸형 주택`이 내년 상반기 송파구 삼전동에서 첫 공급된다.
도시형 생활주택의 한 유형으로, 고령자와 1~2인 가구가 입주하게 된다.
임대료는 주변 시세의 30% 수준이다.
<이 기사는 2일 오전 10시 35분 경제 재테크 케이블방송 이데일리TV
'종목작전타임 시즌3' 2부 프로그램에 방송된 내용입니다.
이데일리TV는 인터넷으로도 시청할 수 있습니다.
</p>

<table border="1" width="300" bordercolor="blue">
<tr>
<td>
이 문장은 white-space:normal을 테스트 하기 위한 문장입니다.
</td>
</tr>
</table>
<br>
.nwrap { white-space:nowrap; }
<br>
<table border="1" width="300" bordercolor="blue">
<tr>
<td class="nwrap">
이 문장은 white-space:nowrap을 테스트 하기 위한 문장입니다.
</td>
</tr>
</table>
<br><br>
기본모양.<br>
<table border="1" width="800" height="200">
<tr>
<td class="taligna">
`원룸형 주택`이 내년 상반기 송파구 삼전동에서 첫 공급된다.
도시형 생활주택의 한 유형으로, 고령자와 1~2인 가구가 입주하게 된다.
임대료는 주변 시세의 30% 수준이다.
<이 기사는 2일 오전 10시 35분 경제 재테크 케이블방송 이데일리TV
'종목작전타임 시즌3' 2부 프로그램에 방송된 내용입니다.
이데일리TV는 인터넷으로도 시청할 수 있습니다.
</td>
</tr>
</table>
<br>
text-align:justify;지정.<br>
<table border="1" width="800" height="200">
<tr>
<td class="talign">
`원룸형 주택`이 내년 상반기 송파구 삼전동에서 첫 공급된다.
도시형 생활주택의 한 유형으로, 고령자와 1~2인 가구가 입주하게 된다.
임대료는 주변 시세의 30% 수준이다.
<이 기사는 2일 오전 10시 35분 경제 재테크 케이블방송 이데일리TV
'종목작전타임 시즌3' 2부 프로그램에 방송된 내용입니다.
이데일리TV는 인터넷으로도 시청할 수 있습니다.
</td>
</tr>
</table>
<br>
vertical-align:bottom;지정.<br>
<table border="1" width="800" height="200">
<tr>
<td class="valign">
`원룸형 주택`이 내년 상반기 송파구 삼전동에서 첫 공급된다.
도시형 생활주택의 한 유형으로, 고령자와 1~2인 가구가 입주하게 된다.
임대료는 주변 시세의 30% 수준이다.
<이 기사는 2일 오전 10시 35분 경제 재테크 케이블방송 이데일리TV
'종목작전타임 시즌3' 2부 프로그램에 방송된 내용입니다.
이데일리TV는 인터넷으로도 시청할 수 있습니다.
</td>
</tr>
</table>
<br>
<div class="f50">기본글자
<span class="baseline">vertical-align:baseline; 베이스라인</span>
<span class="vtextbottom">vertical-align:text-bottom; 텍스트</span>
<span class="vunit">vertical-align:5em; 5em설정(다섯배만큼 위쪽으로 올라가서)</span>
</div>
<br><br>
<span class="tdeco">text-decoration:underline overline;글자에 장식</span>
<br>
</table>
</body>
</html>

Posted by 말없제이
,

package ch06;

import ch05.sub.*;

public class ColorCar extends Car
{
 /*
  * 메서드 오버라이딩 : 오버로딩과 다르다
  * 계승에서 상위클래스의 멤버함수의 이름,인자의 수까지
  * 완벽히 똑같은 이름을 하위클래스에서 구현할 경우
  * 상위클래스의 멤버함수는 은닉화되어 힘을 읽어버리며,
  * 하위클래스의 멤버함수가 그 함수를 대신하게 된다.
  * (상위클래스의 멤버함수의 재정의)
  * */
 
 public ColorCar()
 {
  // TODO 자동 생성된 생성자 스텁
  //super();
 }
 
 //아래의 print는 상위클래스의 print와 이름은 같지만,
 //인자의 수가 다르므로 멤버함수의 오버로딩에 해당.
 public void print(String message)
 {
  System.out.println(message);
 }
 
 //상위클래스의 print메서드의 오버라이딩
 public void print()
 {
  // TODO 자동 생성된 메소드 스텁
  //super는 상위클래스를 가르키는 지시어이다.
  //따라서 아래와 같이 super.print()를 지정하면,
  //상위 클ㄹ래스의 print()가 호출된다.
  //super는 보통 지금처럼 오버라이딩시
  //하위에서 상위클래스의 오버라이딩된 원본 메서드를 호출할때 사용.
  super.print();
  System.out.println("Hello Color Car()");
 }
 
 public static void main(String[] args)
 {
  ColorCar colorCar = new ColorCar();
  colorCar.print("aa");
  colorCar.print();  
 }
}

사용자 삽입 이미지

Posted by 말없제이
,

**** Ch0605.java ****
package ch06;

//public은 자료 참조할수 있게 노출..
//private은 내부에서만 노출
import ch05.sub.*;

public class Ch0605
{
 public static void main(String[] args)
 {
  Car car = new Car("a","b");
  //car.name = "b";
 
  /*
   * 접근제어자 : 외부의 클래스에서 직접 접근할 수 있는
   * 권한을 부여하는 지시어로
   *
   * public은 외부에서 어떠한 상황이라도 모두
   * 접근이 가능하도록하는 지시어이다.
   * 계승시에도 public접근권한을 지정한 멤버변수, 멤버함수는
   * 하위 클래스에 자연스레 모든것이 계승된다.
   *
   * private는 해당클래스에만 멤버변수, 멤버함수를 조작하거나,
   * 참조할 수 있으며, 외부클래스에서는 참조 및 호출이 불가능하다.
   * 계승의 경우에는 private으로 지정된 멤버변수, 멤버함수는
   * 계승의 사용이 불가능하다.
   *
   * protected는 패키지가 서로 다를경우,
   * new로 생성된 개체의 멤버변수 접근은 금지되지만,
   * 계승의 경우 멤버변수,멤버함수의 접근이 허용된다.
   *
   * */
 
 }
}

**** 0606.java *****
package ch06;

import ch05.sub.*;

public class Ch0606 extends Car
{
 public Ch0606()
 {
  // TODO 자동 생성된 생성자 스텁
 
 }
 public static void main(String[] args)
 {
  new Ch0606();
 }
}

**** ch05.sub.Car.java ******
package ch05.sub;

public class Car
{
 //Java는 file당 한 class만 존재.(c는 여러개 가능.)
 
 //현재는 public 용어 신경쓰지 말고...
 //Car클래스의 멤버변수 owner
 //private String owner;
 protected String owner;
 
 //Car클래스의 벰버변수 name
 //private String name;
 protected String name;
 
 //Car클래스의 멤버함수 print() 정의
 public void print()
 {
   System.out.println("Owner : "+owner+", name : "+name );
 
 }
 
 //반환형 없는 함수이며 클래스이름과 같은 이름을
 //같은 함수를 생성자함수라고 부른다.
 //아래와 같은 이자없는 생성자는 프로그래머가
 //지정하지 않앙도 자여스레 컴파일러가 생상자함수를
 //강제로 만들어준다.
 
 //public void Car() // 생성자 함수가 아니라 일반함수로 인식.
 public Car(String name, String owner)
 {
  // TODO 자동 생성된 생성자 스텁
  System.out.println("Car생성자 실행");
  //매개변수와 멤버변수 이름이 같을때, 매개변수로 인식됨.
  //name = name;
  //반드시 클래스의 멤버변수를 가르킬때에는
  //this.멤버변수명을 사용하여야 한다.
  this.name = name;
  this.owner = owner;
  //생성자를 이용하여 멤버변수 조작하는 방법...이였음.
 
  //생성후 new Mission() 객체 일일이 생성해야하므로, 미리 호출될때 생성.
  mission = new Mission();


 }
 
 // Mission 클래스 추가후
 //멤버변수에 사용자 정의 클래스 레퍼런스를 지정할경우
 //Car클래스는 Mission클래스에 대해 소유관계를 맺는다고 한다.(집합)
 public Mission mission;
 
 public Car()
 {
  /*
   * 기본생성자의 첫줄에 컴파일러가
   * 상위클래스의 생성자를 자동으로 호출한다.
   * super() : 상위클래스의 생성자함수를 의미
   * this() : 현재클래스의 생성자 함수를 의미.
   * */
  // TODO 자동 생성된 생성자 스텁
  System.out.println("Car()~~~");
 }
}

Posted by 말없제이
,

package ch06;

//1.ch03패키기 work5029a.java 사용위해 import
import ch03.Work0529a;

//public class Ch0604  // work5029a.java 클래스 계승
public class Ch0604 extends Work0529a
{
 public Ch0604()
 {
  // TODO 자동 생성된 생성자 스텁
  //상위클래스의 Work0529a()클래스의 run(8,8)메서드를 호출할것.
  //소유 -> 계승
  super.run(9, 9);
 }
 
 public static void main(String[] args)
 {
  new Ch0604();
 }
}

Posted by 말없제이
,

package ch06;

//클래스의 계승은 아래 클래스이름 뒤에
//extends 클래스 이름을 쓰면 계승이 이루어 진다.
public class Ch0603 // extends Ch0601
{
 public Ch0603()
 {
  // 만약 계승 안받는다면, 개체변수 생성해서 받을수 있다.(소유)
  Ch0601 ch0601 = new Ch0601();
 
  // TODO 자동 생성된 생성자 스텁
  ch0601.x = 1;
  ch0601.y = 2;
  int z = ch0601.calc();
  System.out.println(z);
  ch0601.print();
 
 }
 
 public static void main(String[] args)
 {
  new Ch0603();
 }
 
}

Posted by 말없제이
,

**** Ch0601.java ****
package ch06;

public class Ch0601
{
 //계승관련 코딩으로 보고나서 .설명
 public String message;
 public int x,y;
 
 public Ch0601()
 {
  // TODO 자동 생성된 생성자 스텁
  System.out.println("Ch0601() 생성자");
 }
 
 public int calc()
 {
  return x+y;
 }
 
 public void print()
 {
  System.out.println("x : "+x+", y : "+y);
 }
 
 public static void main(String[] args)
 {
 
 }
}

**** Ch0602.java ****
package ch06;

//클래스의 계승은 아래 클래스이름 뒤에
//extends 클래스 이름을 쓰면 계승이 이루어 진다.
//C++과 다른점 : 클래스 다중계승이 자바는 원칙적으로 허용되지 않는다.
//ex) public class Ch0602 extends Ch0601,Ch0603... 안됨.(다중계승이 루프로 될가능성 있음)
public class Ch0602 extends Ch0601
{
 public Ch0602()
 {
  // TODO 자동 생성된 생성자 스텁
  //super()는 자바컴파일러가 알아서 생성자의 첫줄에 자동으로 붙여 실행한다.
  super(); //상위클래스의 생성자함수를 가르킨다.
  //super지시어 : 상위클래스를 가르키는 지시어
  //this지시어 : 현재클래스를 가르키는 지시어
 
  //super.x = 1;
  x = 1;
  y = 2;
  int z = calc();
  System.out.println(z);
  print();
 
 }
 
 public static void main(String[] args)
 {
  new Ch0602();
 }
 
}


Posted by 말없제이
,