넷스케이프의 Dynamic HTML

Dynamic HTML 개요

넷스케이프사의 네비게이터 4.x에서는 Dynamic HTML을 구현

Style Sheet

Content Positioning

Downloadable Font

1.스타일 시트 개요

웹 페이지의 스타일 관련 속성들을 지정

캐스캐이딩 스타일 시트 사용하기

자바스크립트와 도큐먼트 개체 모델 사용하기

스타일 상속

캐스캐이딩 스타일 시트 사용하기

<STYLE TYPE = "text/css">

<!--

P {font-size:18pt; margin-left:20pt;}

H1 {color:blue;}

-->

</STYLE>

자바스크립트와 도큐먼트 개체 모델 사용하기

도큐먼트 개체 모델을  사용하는 스타일 시트를 정의.

document.tags.H1.color = "red"

<STYLE TYPE = "text/javascript">

tags.P.fontsize = "18pt";

tags.P.marginleft = "20pt";

tags.H1.color = "blue";

</STYLE>

with(tags.P) {

color="green";

font-weight="bold";

font-style="italic";

font-family="helvetica";

}

=========

CSS 구문

=========

<STYLE TYPE = "text/CSS">

P {

textAligh:Center; margin-left:20%; margin-right:20%;}

H4 {

text-decoration:underline; color:green;}

H5 {

text-transfor:uppercase; colr:red;

border-width:4pt; border-style:outset;

background-color:yellow; padding:4pt

border-color:red;}

BLOCKQUOTE {

color:blue; font-style:italic;

line-height:1.5; text-indent:10% }

</STYLE>

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

자바스크립트 구문

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

<STYLE TYPE = "text/javascript">

with (tags.B) {

textAlign = "center"; marginLeft="20%", margin-right="20%";}

with (tags.H4) {

textDecoration = "underline"; color = "green";

textTransform = "uppercase"; }

with (tags.H5) {

color = "red";

borderWidths="4pt"; borderStyle = "outset";

backgroundColor = "yellow"; paddings("4pt");

borderColor = "red"; }

with (tags.BLOCKQUOTE) {

color = "blue"; fontStyle = "italic";

lineHeight = 1.5; textIndent = "20pt"; }

</STYLE>

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

스타일 시트 사용 예

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

<H4>스타일 시트 사용</H4>

<BLOCKQUOTE>

스타일 시트를 사용하면, 텍스트 색상이나 여백, 페이지 요소들의 정렬, 폰트 스타일,  폰트크기, 폰트 굵기 등과 같은 웹 페이지의 스타일 관련 속성들을 지정할 수 있다.

<H5>스타일 시트 사용2 </H5>

</BLOCKQUOTE>

<P>스타일 시트를 사용하면, 텍스트 색상이나 여백, 페이지 요소들의 정렬, 폰트 스타일,  폰트크기, 폰트 굵기 등과 같은 웹 페이지의 스타일 관련 속성들을 지정할 수 있다.</P>

스타일 상속

자식 요소는 부모 요소의 스타일을 가져오거나 상속받는다.

<STYLE TYPE = "text/css">

H1 {color:blue; }

</STYLE>

<BODY>

<H1>자식 요소는 부모 요소의 스타일을 가져오거나 <EM>상속</EM>받는다.</H1>

========

CSS 구문

========

<STYLE  TYPE = "text/css">

BODY {color:green;}

</STYLE>

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

자바스크립트 구문

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

<STYLE TYPE = "text/javascript">

tags.BODY.color = "green";

</STYLE>

2. 스타일 시트 만들기와 스타일 할당하기

<STYLE> 태그를 사용하여 스타일 시트 정의하기

외부 파일에서 스타일 시트 정의하기

스타일의 클래스 정의하기

개별적인 named 클래스 정의하기

문맥 상의 선택 범주(contextual select criteria) 사용하기

요소 각각에 스타일 지정하기

스타일 시트 조합하기

<STYLE> 태그를 사용하여 스타일 시트 정의하기

문서의 헤더 부분에서 <STYLE> 태그를 사용

========

CSS 구문

========

<HEAD>

<STYLE TYPE="text/css">

H1 {color: blue; text-transform: uppercase; }

BLOCKQUOT {color: red; font-style: italic; }

</STYLE>

</HEAD>

<BODY>

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

JavaScript 구문

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

<HEAD>

<STYLE TYPE = "text/javascript">

tags.H1.textTransform = "uppercase";

tags.H1.color = "blue";

tags.BLOCKQUOTE.color = "red";

tags.BLOCKQUOTE.font-style = "italic";

</STYLE>

</HEAD>

<BODY>

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

스타일 시트 사용례

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

<H1>파랑새는 날고 있다.</H1>

<B>BLOCKQUOTE>포도주는 빨강 색이다.</B>

외부 파일에서 스타일 시트 정의하기

문서와 별도의 파일에 스타일 시트를 정의한  후, 해당 스타일 시트를 문서에 링크

========

CSS 구문

========

/* 외부 스타일 시트 mystyles1.htm */

all.BOLDBLUE {color: blue; font-weight: bold;}

H1 {line-height: 18pt;}

P {color: yellow}

/* end of file */

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

JavaScript 구문

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

/* 외부 스타일 시트 mystyles1.htm */

classes.BOLDBLUE.all.color = "blue";

classes.BOLDBLUE.all.fontWeight = "bold";

tags.H1.lineHeight = "18pt";

tags.P.color = "yellow";

/* end of file */

외부에 정의한 스타일 시트를 문서에서 사용하려면, <LINK> 태그를 사용

========

CSS 구문

========

<HTML>

<HEAD>

<TITLE>A Good Title</TITLE>

<LINK REL=STYLESHEET TYPE = "text/css"

HREF="http://style.com/mystyles1.htm">

</HEAD>

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

JavaScript 구문

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

<HTML>

<HEAD>

<TITLE>A Good Title</TITLE>

<LINK REL=STYLESHEET TYPE = "text/javascript"

HREF="http://style.com/mystyles1.htm">

스타일의 클래스 정의하기

각 요소에 개별적으로 적용

스타일 시트에서 스타일 클래스를 정의한 후, HTML 요소의 CLASS 속성을 사용

========

CSS 구문

========

<STYLE TYPE = "text/css">

all.GREENBOLD {color:#44CC22; font-weight:bold;}

</STYLE>

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

JavaScript 구문

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

<STYLE TYPE = "text/javascript">

class.GREENBOLD.all.color = "#44CC22"

class.GREENBOLD.all.fontWeight = "bold"

</STYLE>

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

스타일 시트 예제

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

<H1 CLASS=GREENBOLD>클래스 정의하기</H1>

<P CLASS =  GREENBOLD>스타일의 클래스를 정의하여 적절한 스타일 클래스를 스타일을 사용해야 하는 각 요소에 개별적으로 적용시킬 수도 있다. </P>

<BLOCKQUOTE CLASS = GREENBOLD>스타일의 클래스를 정의하여 적절한 스타일 클래스를 스타일을 사용해야 하는 각 요소에 개별적으로 적용시킬 수도 있다.

</BLOCKQUOTE>

스타일 클래스를 정의할 대, 해당 스타일을 사용할 수 있는 HMTL 요소를 지정할 수도 있고, 모든 요소가 해당 스타일을 사용할 수 있도록 all이라는 키워드를 사용할 수도 있다.

========

CSS 구문

========

<STYLE TYPE = "text/css">

all.DARKYELLOW {color:#EECC00;}

P.RED1 {color: red; font-weight:bold;}

BLOCKQUOTE.red1 {color:red; font-weight:bold;}

</STYLE>

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

JavaScript 구문

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

<STYLE TYPE = "text/javascript">

classes.DARKYELLOW.all.color ="#EECC00";

classes.RED1.P.color = "red";

classes.RED1.P.fontWeight = "bold";

classes.RED1.BLOCKQUOTE.color = "red";

classes.RED1.BLOCKQUOTE.fontweight = "bold";

</STYLE>

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

스타일 시트 사용례

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

<BODY>

<P CLASS=red1>스타일 정의 내리기</P>

<P>스타일 정의 내리기 </P>

<BLOCKQUOTE CLASS=red1>스타일 정의 내리기</BLOCKQUOTE>

<H5 CLASS=red1>스타일 정의 내리기</H5>

<P CLASS=darkyellowclass>스타일 정의 내리기</P>

<H5 CLASS=darkyellowclass>스타일 정의 내리기</H5>

HTML 요소는 한가지 스타일 클래스만 사용할 수 있다. HTML  요소에서 하나 이상의 스타일 클래스를 지정할  경우, 최초의 클래스만 사용한다.

<P CLASS="RED1" CLASS="DARKYELLOW">스타일 정의 내리기</P>

개별적인 named 클래스 정의하기

스타일 클래스에서 제외된 스타일 관련 속성을 표현

위치가  정해진 HTML 컨텐트의 레이어를 정의하는데도 유용

스타일 이름  앞에 #를 붙이고, 자바스크립트 구문에서는 ids 프로퍼티를 사용

=========

CSS 구문

=========

<STYLE TYPE = "text/css">

all.STYPE1 {line-height: 20pt; font-size:18pt;

font-weigth: bold; color: red; }

#BLUE1 {color: blue; }

</STYLE>

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

자바스크립트 구문

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

<STYLE TYPE = "text/javascript">

with (classes.STYLE1.all) {

lineHeight = "20pt";

fontSize = "18pt";

fontWeight = "bold";

all.color = "red";

}

ids.BLUE1.color = "blue";

</STYLE>

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

스타일 시트 사용례

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

<P CLASS="STYLE1">namde 스타일을 CSS 구문으로 정의하려면 스타일 이름  앞에 #를 붙이고, 자바스크립트 구문에서는 ids 프로퍼티를 사용한다.

스타일을 요소에 적용하려면 해당 스타일 이름을 요소 ID 속성의 값으로 지정하면 된다 </P>

<P CLASS="STYLE1" ID="BLUE1">namde 스타일을 CSS 구문으로 정의하려면 스타일 이름  앞에 #를 붙이고, 자바스크립트 구문에서는 ids 프로퍼티를 사용한다.

스타일을 요소에 적용하려면 해당 스타일 이름을 요소 ID 속성의 값으로 지정하면 된다</P>

문맥 상의 선택 범주(contextual select criteria) 사용하기

특정 종류의 모든 HTML 요소가 사용하는 스타일도  정의

문맥상의 선택 범주를 사용하면 스타일 응용 전체에 걸쳐 제어

========

CSS 구문

========

<STYLE TYPE = "text/css">

H1 EM {color:gree;}

</STYLE>

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

자바스크립트 구문

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

<STYLE TYPE="text/javascript">

contextual(tags.H1, tags.EM).color = "green";

</STYLE>

<H1>내 강아지는 <EM>노란색 공을 </EM>가지고 논다.</H1>

=========

CSS 구문

=========

<STYLE TYPE = "text/css">

all.MAGENTACLASS {color:magenta;}

DIV P.MAGENTACLASS {font-style: italic;}

DIV P.MAGENTACLASS B {font-size:18pt;}

</STYLE>

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

자바스크립트 구문

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

<STYLE TYPE = "text/javascript">

classes.MAGENTACLASS.all.color = "magenta";

contextual(tags.DIV, classes.MAGENTACLASS.P).fontStyle ="italic";

contextual(tags.DIV, classes.MAGENTACLASS.P, tags.B).fontSize = "18pt";

</STYLE>

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

스타일 시트 사용례

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

<DIV CLASS=MAGENTACLASS>

<H3>눈이 오고 있네요.</H3>

<P>하늘에서 눈이 <B>펑펑 내리고 </B>거리에는 쌓이기 시작합니다 도시의 때들이</P>

<P>하수구로 쓸려 내려갑니다 나뭇잎과 같이</P>

</DIV>

<P>도시에 내린 눈은 따듯하지 않습니다. 근방 녹아 내리니 말입니다.</P>

요소 각각에 스타일 지정하기

해당 태그에서만 사용할 스타일을 정의

========

CSS 구문

========

<P STYLE = "color:green; font-weight:bold;

margein-right:20%; margin-left:20%;

border-width:2pt; border-color:blue;">

HTML 태그의 STYLE 속성을 사용하여 해당 태그에서만 사용할 스타일을 정의할 수

있다. </P>

<P>HTML 태그의 STYLE 속성을 사용하여 해당 태그에서만

<SPAN  STYLE="color:red;   font-style:italic;">사용할  </SPAN>스타일을 정의할 수있다 .</P>

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

자바스크립트 구문

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

<P STYLE = "color = 'green'; fontWeight = 'bold';

marginRight = '20%'; marginLeft = '20%';

borderWidth = '2pt'; borderColor = 'blue';">

HTML 태그의 STYLE 속성을 사용하여 해당 태그에서만 사용할 스타일을 정의할 수

있다.  </P>

<P>HTML 태그의 STYLE 속성을 사용하여 해당 태그에서만  <SPAN  STYLE="color='red';  fontStyle='italic';">사용할 </SPAN>스타일을 정의할 수

있다.</P>

스타일 시트 조합하기

하나 이상의 스타일 시트를 사용하여 문서에 대한  스타일들을 설정

<STYLE TYPE = "text/css"

SRC="http://www.networksunlimited.org/styles/corporate">

</STYLE>

<STYLE TYPE = "text/css"

SRC="styles/whitepaper"></STYLE>

<STYLE TYPE = "text/css"

SRC="styles/networkthings"></STYLE>

<STYLE TYPE = "text/css"

H1 {color: red;} /* 외부 시트를 덮어쓴다 */

</STYLE>

로컬에서 정의한 스타일은 <STYLE>  요소에서 정의된 스타일보다 우선

외부 스타일 시트에서  정의한 스타일보다 우선

========

CSS 구문

========

<STYLE TYPE = "text/css">

P {color:blue;}

B {color:green;}

</STYLE>

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

자바스크립트 구문

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

<STYLE TYPE = "text/javascript">

tags.P.color = "blue";

tags.B.color = "green";

</STYLE>

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

스타일 시트 사용례

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

<P>하나 이상의 스타일 시트를 사용하여 <B>문서에 대한  스타일</B>들을 설정할 수 있다. </P>

<P STYLE="color:red">하나 이상의 스타일 시트를 사용하여<B>문서에 대한  스타일</B>들을 설정할 수 있다.</P>

3.블록 레벨 요소를 위한 포맷 프로퍼티

블록 레벨 요소는  새로운 행에서 시작되는  것을 가리키는 것

블록 레벨 포매팅 개요

여백 및 폭 설정하기

테두리 폭과 색상, 스타일 설정하기

안여백 설정하기

블록 레벨 요소의 포매팅 프로퍼티 상속

블록 레벨 포매팅 개요

스타일 시트는 블록 레벨 요소 각각이 상자로 둘러싸여 있는 것처럼 처리.

========

CSS 구문

========

<STYLE TYPE="text/css">

P {

background-color:#CCCCFF;

/* 여백 */

margin-left:20%; margin-right:20%;

/* 테두리 폭 */

border-top-width:10pt; border-bottom-width:10pt;

border-right-width:5pt; border-left-width:5pt;

/* 테두리 스타일과 색상 */

border-style:outset; border-color:blue;

/* 안여백 */

padding-top:10pt; padding-bottom:10pt;

padding-right:20pt; padding-left:20pt;

}

H3 {

/* 폰트 크기와 두께 */

font-size:14pt;

font-weight:bold;

/*background-image: URL{"\guide\images\aspincl.gif");*/

/* 폭의 90%만큼의 제목을 가운데 배치한다.*/

width:90%;

float:center;

border-color:green;

border-style:solid;

/* 테두리의 네 모서리의 두께를 모두 똑같게 */

border-width:10pt;

/* 네 모서리의 안여백을 모두 똑같게 */

padding:20pt;

}

</STYLE>

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

자바스크립트 구문

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

<STYLE TYPE = "text/javascript">

with (tags.P) {

backgroundColor="#CCCCFF";

/* P 테두리 스타일과 색상 */

borderStyle="outset"; borderColor="blue";

/* P 보더 폭 */

borderTopWidth="10pt"; borderBottomWidth="10pt";

borderLeftWidth="5pt"; borderRightWidth="5pt";

/* P 안여백 */

paddingTop="10pt"; paddingBottom="10pt";

paddingLeft="20pt"; paddingRight="20pt";

/* P 여백 */

marginLeft="20%"; marginRights="20%";

}

with (tags.H3) {

/*backgroundImage="images/grenlite.gif";*/

/* 폰트 크기와 두께 */

fontSize="14pt"; fontWeight="bold";

/* H3 테두리 스타일과 색상 */

borderStyle="solid"; borderColor="green";

/* 폭의 90%가 되게 제목을 가운데 배치*/

width=90%; align="center";

/* 테두리의 모든 모서리가 같은 두께가 되게 */

borderWidths("10pt");

/* 모든 모서리의 안여백이 같게 */

paddings("20pt");

}

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

스타일 시트 사용례

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

<H3>스타일 시트는 블록 레벨 요소 각각이 상자로 둘러싸여 있는 것처럼 처리한다.</H3>

<P>각 상자는  여백과 테두리, 안여백 등  형식 스타일 특성을 가질 수 있고,  배경 이미지나 색상을 가질 수도 있다.</P>

<P> 각 상자는  여백과 테두리, 안여백 등  형식 스타일 특성을 가질 수 있고,  배경 이미지나 색상을 가질 수도 있다.</P>

여백 및 폭 설정하기

문서(혹은 부모 요소)의 모서리에서 요소 삽입까지의 거리를 가리키는 것

· margin-top/marginTop

· margin-bottom/marginBottom

· margin-left/marginLeft

· margin-right/marginRight

· CSS 구문: margin 프로퍼티 설정

자바스크립트 구문: margins() 함수 사용

========

CSS 구문

========

<STYLE TYPE="text/css">

BODY {margin-left:20pt; margin-right:20pt;}

</STYLE>

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

자바스크립트 구문

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

<STYLE TYPE = "text/javascript">

with (tags.BODY){

marginLeft="20pt"; marginRight="20pt";

}

</STYLE>

테두리 폭과 색상, 스타일 설정하기

· border-top-width/borderTopWidth

· border-bottom-width/borderBottomWidth

· border-left-width/borderLeftWidth

· border-right-width/borderRightWidth

· CSS 구문:border-width, border-color 프로퍼티 사용

자바스크립트 구문: borderWidths(), borderColor() 함수 사용

안여백 설정하기

컨텐트의 테두리와 컨텐트간의 간격

· padding-top/paddingTop

· padding-bottom/paddingBottom

· padding-left/paddingLeft

· padding-right/paddingRight

· CSS 구문: padding 프로퍼티 사용

자바스크립트 구문: paddings() 함수 사용

블록 레벨 요소의 포매팅 프로퍼티 상속

부모 요소의 폭과 여백, 테두리 특성 및 안여백은 자식 요소에 상속되지 않는다.