WEB 2일차 다섯번째) div

WEB/CSS 2012. 9. 13. 00:52

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.f{

float: left;

}

#box {

/*

position

alsolute : div를 원하는 위치에 놓는 것이 가능하다.(절대좌표)

relative : 해당 div앞에 있는 태그를 기준으로 위치가 결정된다.

fixed : 해당 좌표에서 고정되어 스크롤을 해도 위치가 변하지 않는다.

*/

position: fixed;

border: dashed blue;

width: 500px;

left: 50px; top: 50px

}

</style>

</head>

<body>

<div>

이 구역을 침범하지마!!!!

</div>

몽골마

<!--

상대경로 : 앞에 '/'가 없는 상태로 나오는 경로

>> 현재 경로를 기준으로 상대적으로 경로를 파악한다.

. : 현재경로, .. : 상위경로

-->

태연

몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마

</div>

<div>

나는 밑에 있고 싶어!!!

</div>

</body>

</html>

② 실행 화면

DIV 1

이 구역을 침범하지마!!!!

몽골마

태연

몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마 몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마몽골마

나는 밑에 있고 싶어!!!

저작자표시

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 여섯번째) div로 레이아웃 잡기 (0)	2012.09.13
WEB 2일차 네번째) CSS 두번째 (0)	2012.09.13
WEB 2일차 세번째) CSS 첫번째 (0)	2012.09.13

모데스티

,

WEB 2일차 네번째) CSS 두번째

WEB/CSS 2012. 9. 13. 00:49

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

div {

border: medium solid blue;

height: 100px;

}

.red {

/* "."은 클래스, "#"은 ID*/

color : red;

}

#center {

text-align: center;

}

.back {

background-color: yellow;

}

div p{

/* div안의 p(div의 자식 p) */

border: thick solid black;

color: navy;

}

/* 방문하지 않았던 링크(LINK)와 방문했던 링크(VISITED)가 표시되는 효과*/

a:LINK, a:VISITED {

text-decoration: none; color: black;

}

/* 마우스 커서를 올렸을 때 색깔이 바뀌도록*/

a:HOVER {

text-decoration: underline; color: #0F0; font-weight: bold;

}

/* 마우스 버튼을 눌렀을 때 */

a:ACTIVE {

text-decoration: none; color: black;

}

</style>

</head>

<body>

</div>

몽골용단, 털광필

</div>

레드

</p>

</body>

</html>

② 실행화면

CSS 2

오늘 뭐 먹지???

몽골용단, 털광필

배고파! 배고파! 배고파!

레드

빠알간색

저작자표시

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 여섯번째) div로 레이아웃 잡기 (0)	2012.09.13
WEB 2일차 다섯번째) div (0)	2012.09.13
WEB 2일차 세번째) CSS 첫번째 (0)	2012.09.13

모데스티

,

WEB 2일차 세번째) CSS 첫번째

WEB/CSS 2012. 9. 13. 00:46

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

/* CSS에서 유일한 주석

selector(선택자) {

선언부

}

*/

div {

/* border : 3가지 (선스타일, 선굵기, 선색깔) 순서없이*/

border: thin solid black;

padding : 100px; /* px : pixel 픽셀 */

/* margin : 위 오른쪽 아래쪽 왼쪽 */

margin : 100px 50px 150px 50px;

/*

transparent : 위의 margin과 아래의 margin이 겹칠 수 있다.

*/

}

body{

/*

body태그안에 div가 있으므로 div가 body의 속성을 상속받을 수 있다.

border, padding, margin은 상속되지 않는다.

*/

font-family: '궁서', dotum;

/* color : yellow; 색이름 지정 */

color : #666666; /* RGB 컬러 지정 두개의 숫자가 같을경우 ex) #FF0011 = #F01*/

}

p {

/*

border는 상속되지 않는 속성이므로 강제로 div의 속성을 상속받도록 해야한다

padding, margin, width, height도 마찬가지

*/

border : inherit;

}

</style>

</head>

<body>

<div>

몽골용단의 말춤 기대됨

</div>

<div>

저녁은 뭘 먹지???

</div>

</body>

</html>

② 실행화면

CSS 1

p태그
몽골용단의 말춤 기대됨

저녁은 뭘 먹지???

저작자표시

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 여섯번째) div로 레이아웃 잡기 (0)	2012.09.13
WEB 2일차 다섯번째) div (0)	2012.09.13
WEB 2일차 네번째) CSS 두번째 (0)	2012.09.13

모데스티

,

WEB 2일차 두번째) a태그

WEB/HTML 2012. 9. 13. 00:43

① 태그 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

저녁 뭐 먹지??<br />

</body>

</html>

② 실행화면

a태그 가자~!(네이버로 이동합니다)
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
저녁 뭐 먹지??
맨위로

저작자표시

'WEB > HTML' 카테고리의 다른 글

WEB 2일차 첫번째) FORM태그 (0)	2012.09.13
WEB 1일차 세번째) Table태그 (0)	2012.09.13
WEB 1일차 두번째) H태그(헤더태그)와 P태그(문단태그) (0)	2012.09.13

모데스티

,

WEB 2일차 첫번째) FORM태그

WEB/HTML 2012. 9. 13. 00:42

① 태그 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<!--

form의 방식

get방식은 주소창에 입력한 값이 보여지지만

post방식은 주소창에 값이 보이지않지만 입력을 확인하는 텍스트 박스가 나온다.

-->

<label for="userid">유저아이디</label>

<option>프로그래머</option>

</select> <br />

<input type="radio" name="gender" value ="m" /> 남

<input type ="checkbox" name="hobby" value="reading" /> 독서

<input type ="checkbox" name="hobby" value="drama" /> 드라마보기

<input type ="checkbox" name="hobby" value="movie" /> 영화보기

<input type ="checkbox" name="hobby" value="basket" /> 농구

</form>

</body>

</html>

② 실행화면

폼태그

저작자표시

'WEB > HTML' 카테고리의 다른 글

WEB 2일차 두번째) a태그 (0)	2012.09.13
WEB 1일차 세번째) Table태그 (0)	2012.09.13
WEB 1일차 두번째) H태그(헤더태그)와 P태그(문단태그) (0)	2012.09.13

모데스티

,

WEB 1일차 세번째) Table태그

WEB/HTML 2012. 9. 13. 00:39

① 태그 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<!-- 2. 테이블의 구동방식 : 다른 태그들이 자리를 잡은 후에 테이블이 그 자리를 밀어내고

만들어진다. -->

</tr>

</tr>

</table>

<br />

</tr>

</tr>

</tr>

</tr >

</tr >

</table>

</body>

</html>

② 실행화면

테이블

1행 1열		1행 2열
2행 1열	2행 2열

구분	1열	2열	3열	4열
1행	a1	a2
2행		b1	b2
3행		b1	c1	c2
3행	d1		d2	c2

저작자표시

'WEB > HTML' 카테고리의 다른 글

WEB 2일차 두번째) a태그 (0)	2012.09.13
WEB 2일차 첫번째) FORM태그 (0)	2012.09.13
WEB 1일차 두번째) H태그(헤더태그)와 P태그(문단태그) (0)	2012.09.13

모데스티

,

WEB 1일차 두번째) H태그(헤더태그)와 P태그(문단태그)

WEB/HTML 2012. 9. 13. 00:22

① 태그 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<p>

본문     영역

<본문     영역>

</p>

<p>

두번째 <br />

본문<br />

<strong>굵게!(strong은 css로 교체하는 것이 가능)</strong><br />

<strong>font태그도 사용금지</strong>

</p>

<p>

<a href="http://validator.w3.org/check?uri=referer"><img

src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>

</p>

</body>

</html>

② 실행화면

내꺼다!

안녕 세상아~~!!!

본문 영역 <본문 영역>

두번째
본문
원조 굵게!(b태그는 이제 안씀)
굵게!(strong은 css로 교체하는 것이 가능)
원조 이탤릭(기울임꼴)(i태그도 이제 안씀)
이탤릭(기울임꼴)(em도 css로 교체하는 것이 가능)
font태그도 사용금지

저작자표시

'WEB > HTML' 카테고리의 다른 글

WEB 2일차 두번째) a태그 (0)	2012.09.13
WEB 2일차 첫번째) FORM태그 (0)	2012.09.13
WEB 1일차 세번째) Table태그 (0)	2012.09.13

모데스티

,

Java Advanced 1일차 두번째) 상속구조 만들기

Java/Java Advanced 2012. 9. 10. 10:56

1) 상속구조

2) Java소스

① Cellphone : tell과 call의 메소드를 가지고 있다.

package phone;

public class Cellphone {

/**

* @param args

*/

void tell(){

System.out.println("전화기능.");

}

public static void main(String[] args) {

// TODO Auto-generated method stub

Cellphone c1 = new Smartphone();

Cellphone c2 = new Featurephone();

Cellphone c3 = new IPhone();

Cellphone c4 = new Android();

call(c1);

call(c2);

call(c3);

call(c4);

}

public static void call(Cellphone m){

m.tell();

}

② Featuerphone 클래스 : Cellphone의 필드와 메소드를 상속받는다.

package phone;

public class Featurephone extends Cellphone {

void cacao(){

System.out.println("카톡안됌 ㅅㄱ");

}

@Override

void tell() {

// TODO Auto-generated method stub

System.out.println("2G 또는 3G");

}

/**

* @param args

*/

public static void main(String[] args) {

// TODO Auto-generated method stub

new Featurephone().cacao();

}

③ Smartphone 클래스 : Smartphone클래스는 Cellphone클래스의 필드와 메소드를 상속받는다.

package phone;

public class Smartphone extends Cellphone {

void cacao(){

System.out.println("카톡가능");

}

@Override

void tell() {

// TODO Auto-generated method stub

System.out.println("3G or 4G");

}

/**

* @param args

*/

public static void main(String[] args) {

// TODO Auto-generated method stub

new Smartphone().tell();

Cellphone c = new Smartphone();

System.out.println(c);

}

④ Iphone 클래스 : Iphone 클래스는 Smartphone클래스의 필드와 메소드를 상속받는다.

package phone;

public class IPhone extends Smartphone{

void market(){

System.out.println("앱스토어");

}

void cacao() {

System.out.println("앱스토어에서 구매");

}

@Override

void tell() {

// TODO Auto-generated method stub

System.out.println("아직 3G ㅠㅠ");

}

/**

* @param args

*/

public static void main(String[] args) {

// TODO Auto-generated method stub

}

⑤ Adroid 클래스 : Android 클래스는 Smartphone 클래스의 필드와 메소드를 상속받는다.

package phone;

public class Android extends Smartphone {

void market() {

System.out.println("안드로이드마켓");

}

void cacao() {

System.out.println("안드로이드마켓에서 구매");

}

@Override

void tell() {

// TODO Auto-generated method stub

System.out.println("LTE로 한다.");

}

/**

* @param args

*/

public static void main(String[] args) {

// TODO Auto-generated method stub

Android c = new Android();

Cellphone.call(c);

}

저작자표시

'Java > Java Advanced' 카테고리의 다른 글

Java Advanced 1일차 첫번째) Inheritance (0)	2012.09.10

모데스티

,

Java Advanced 1일차 첫번째) Inheritance

Java/Java Advanced 2012. 9. 10. 10:43

0) REVIEW

① Object (객체) : 모든 것, Class로 만들어 진다.

② Class(클래스) : 객체를 만들어 내는 틀

③ 접근제한자

ⓐ Private : 클래스 안에서만 사용가능, 상속x

ⓑ Default : 같은 패키지안에서 상속가능

ⓓ Public : 제한이 없다.

1) Inheritance(상속)

ⓐ Coffee : Mocha Class의 부모클래스인 Coffee는 drink와 smell의 메서드를 가지고 있다.

package inheritance;

public class Coffee {

// 필드(Field) : 속성(Attribute, Property), 멤버변수(Member Variable), 전역변수...

String origin; // 원산지

int size; // 용량

void smell() {

System.out.println("냄새가 나다");

}

void drink() {

System.out.println("커피를 마시다");

}

/**

* @param args

*/

public static void main(String[] args) {

Coffee c = new Coffee(); // 객체 생성

c.size = 300;

System.out.println(c.size);

Coffee c1 = new Coffee();

c1.size =500;// hashcode를 가지고 있다.

System.out.println(c1.size);

c = c1;

System.out.println(c.size);

System.out.println(c1.size);

}

ⓑ Mocha : Coffee의 부모클래스에서 필드와 메소드를 상속받는다.

Coffee의 클래스의 drink()를 오버라이딩(메소드 재정의)하고 있다.

package inheritance;

public class Mocha extends Coffee {

boolean isCream;

// private < default < protected < public >> 접근제한자

// private : 클래스 안에서만 접근가능, 상속x

// default : 같은 패키지 안에서 접근가능

// protected : 다른 패키지라도 상속받은 경우 접근가능

// public : 제한x

// 생성자가 하나도 없으면 컴파일러에 의해서 기본생성자가 만들어진다.

public Mocha() {

}

// annotation

@Override

void drink() {

super.drink(); // 부모(super)클래스의 drink메서드도 같이 호출

System.out.println("모카 커피를 마셔요.");

}

/**

* @param args

*/

public static void main(String[] args) {

new Mocha().drink();// Mocha객체 생성

System.out.println(32);

System.out.println("문자");

Coffee m = new Mocha();

Object o = m;

System.out.println(m);

System.out.println(o);

Mocha m2 = new Mocha();

m2.drink();

m.drink();

// 원래 Mocha이므로 Mocha의 drink가 실행 => m의 실체를 알자!!!

// o.drink();

>> 불가능 Object에는 drink()메서드가 정의되어 있지 않기 때문에

// p(m)(x) : m의 타입은 Coffee이므로

p(m2);

p(3); // 참조형이 아니라 기본형이기 때문에 참조형으로 박싱(Integer)

// Wrapper class : Byte, Short, Integer, Long, Double,

Boolean, Character, Float

p("문자");

}

@Override

//

public String toString() {

// TODO Auto-generated method stub

return "나는 모카! 일반 커피가 아니지";

}

// static 이 있을 경우 클래스 소유, 없으면 객체소유

// 객체 : 모든 것

// 클래스 : 객체를 만들어내는 틀

// Static >> 클래스가 로딩(메모리에 적재) 될때 같이 로딩된다.

// 접근할 때 클래스명.메서드명() 이름 형태로 불러온다.

public static void p(Mocha m) { // 유연하지 못하다.

// 자동으로 toString이 실행된다

System.out.println(m.toString());

}

public static void p(Object m) { // 유연하다.

System.out.println(m);

}

저작자표시

'Java > Java Advanced' 카테고리의 다른 글

Java Advanced 1일차 두번째) 상속구조 만들기 (0)	2012.09.10

모데스티

,

Oracle 9일차 여섯번째) Having절 서브쿼리와 계층형 쿼리

Oracle 2012. 8. 28. 18:08

1) Having절 서브쿼리 : Having절에서 사용

※문제) 부서별 월급합계의 평균보다 높은 월급합계를 가지는 부서의 부서명과 월급합계를 출력

① From절 서브쿼리와, Where절 서브쿼리를 사용

>> 부서별 급여합계의 평균인 57618 보다 큰 부서명과 월급합계가 출력된다.

② Having절 서브쿼리 사용

>> Group by의 조건절인 Having절에 서브쿼리를 사용한 결과와

From절, Where절 서브쿼리를 사용한 결과가 같다.

2) 계층형 쿼리

① 계층형 쿼리 >> Hierarchy (계층구조)
Root(뿌리) -> 제일 꼭대기

Branch(가지) -> 말단이 아닌 Node

leaf(잎) -> 말단인 Node

② Connect By

저작자표시

'Oracle' 카테고리의 다른 글

Oracle 3일차 두번째) WHERE, ORDER BY, WHERE IN, WHERE NOT IN 과 예제풀이 (0)	2012.09.14
Oracle 3일차 첫번째) 예제에 쓰일 HR스키마의 구조파악 (0)	2012.09.14
Oracle 9일차 다섯번째) 복수컬럼 서브쿼리와 상관 서브쿼리 (0)	2012.08.28
Oracle 9일차 네번째) 복수행 서브쿼리 (0)	2012.08.28
Oracle 9일차 세번째) 단일행 서브쿼리 (0)	2012.08.28

모데스티

,

'전체보기'에 해당되는 글 49건

WEB 2일차 다섯번째) div

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 네번째) CSS 두번째

빠알간색

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 세번째) CSS 첫번째

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 두번째) a태그

'WEB > HTML' 카테고리의 다른 글

WEB 2일차 첫번째) FORM태그

'WEB > HTML' 카테고리의 다른 글

WEB 1일차 세번째) Table태그

'WEB > HTML' 카테고리의 다른 글

WEB 1일차 두번째) H태그(헤더태그)와 P태그(문단태그)

안녕 세상아~~!!!

'WEB > HTML' 카테고리의 다른 글

Java Advanced 1일차 두번째) 상속구조 만들기

'Java > Java Advanced' 카테고리의 다른 글

Java Advanced 1일차 첫번째) Inheritance

'Java > Java Advanced' 카테고리의 다른 글

Oracle 9일차 여섯번째) Having절 서브쿼리와 계층형 쿼리

'Oracle' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

모데스티

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31