CSS 스타일시트 문서

2012. 8. 16. 10:47

스타일시트.hwp

스타일 시트(CSS)

스타일 시트(stytle sheet) : HTML 문서 내에 스타일을 표현하거나 시각적인 효과를 개선하기 위해 사용하며, 폰트크기, 폰트스타일, 폰트색, 배경색, 문자정렬등을 문서 전체에 일관성을 부여할 수 있다.

1) 스타일지정 : 텍스트 색상, 폰트스타일등 웹 페이지의 스타일 속성을 지정(일괄 지정)

(네스케이프와 익스플로러 모두 지원된다) <head>부분에 삽입

<!--

스타일지정

//-->

</style>

**입력화면**

**출력화면**

2) 링크부분 글자색상 반전 : 링크부분에 마우스를 가져가면 색상이 반전된다.

<!--

a:link {text-decoration: none;}

a:visited {text-decoration: none;}

A:hover {color:"yellow";}

-->

</style>

**입력화면**

**출력화면** (‘yellow'이므로 마우스를 가져가면 노란색으로 변하는군요)

3) 링크부분 밑줄반전 : 링크부분에 마우스를 위치시키면 밑줄이 나타난다.

A:hover{text-decoration:underline}

**입력화면**

**출력화면**

ex) A { text-decoration: none } : 모든 링크 밑줄 없애기

ex) A:link { text-decoration: none; color: red} : 링크들 밑줄을 없애고 방문하지 않은 링크들의 색을 빨간색

A:visited { text-decoration: none; color: yellow} : 방문한 링크의 색은 노란색

ex) 본문에 <P style="color:red">나는 빨간색입니다. </P> : 빨간색으로 나타남

4) 링크로 속성 지정 :외부 화일을 연결하여 사용하는 <LINK> 택으로 사용하는 방법입 니다. 외부 화일을 만드는 방법은 메모장 같은 문서편집기로 style 구문을 작성 하고 확장자를 *.css로 지정하면 됩니다. style 구문만을 작성하지 <STYLE> 같 은 다른 HTML 태그는 필요 없습니다. 그리고 화일을 <LINK> 택의 href 속성 에 지정합니다

**입력화면**

( my.css 파일을 메모장으로 작성) **출력화면**

☞lk4250b.htm 파일을 실행하면 <LINK rel="stylesheet" type="text/css" href="my.css"> 의 “my.css"에 의해서 글씨가 빨간색이 된다.

**아래와 같이 입력해서 브라우저로 출력해 보세요** **sty.htm으로 저장**

5) 스타일 상속 : 스타일에 정의된 모든 스타일은 html문서에 영향을 미치게 된다.

**입력화면**

☞ p, h3, h6은 각각 글자크기나 글자색상등을 지정하고 있다

지정을 하지않는 곳은 body(기본설정)의 지정에 따라 표시된다

**출력화면**

7. 개체와 관련 있는 태그(tag)

1)애플릿(APPLET) : 애플리케이션의 작은 형태로서 주로 단순한 기능을 수행하는 소형 프로그램으로 자바 애플릿이라고도 한다. 주요 데이터는 웹서버에 있으며, 서버에서 다운 로드 받아 클라이언트 컴퓨터에서 실행하는 구조를 갖는다.

cf) 애니메이션 로고, 웹 사이트 장식 등에 사용(뉴스, 주식등락표, 실시간 기상도 등)

홈페이지 내 자바 애플릿을 삽입한다. W3C에서는 이 태그 대신 <OBJECT>사용을 권고한다. 자바를 지원하지 않는 브라우저를 위해 <APPLET> 태그 사이에 설명하는 텍스트를 삽입할 수 있다. 자바를 지원하는 브라우저에서는 이 텍스트들이 보이지 않는다.

☞애플릿은 스크립트보다 다양한 효과를 주기위해 팩키지화 됐다고 생각하세요. 그리고 애플릿 삽입하는 것도 그 팩키지를 넣는 다고 생각하고요. 그림삽입 할 때 처럼 class파일의 경로를 지정해주고 원하는 옵션들을 변경해주면 됩니다.

** param : 삽입된 자바 개체에 파라미터를 설정할 때 사용되고 주로 <APPLET>태그와 함께 사용된다.

가)텍스트 넣기 : 네모박스 안에 글자가 올라간다)

**입력화면** (아래는"FlewShadeText.class"소스가 있어야 실행됨)

**출력화면** ("FlewShadeText.class"소스가 없으므로 아래 사각형안에 내용이 나타나지 않는다)

나) 동영상실행 ; 네모박스 안에 불꽃놀이 동영상이 실행된다)

**입력화면** (아래는 "Firework.class" 소스가 있어야 실행됨)

**출력화면** ("Firework.class" 소스를 넣고 실행한 모양입니다)

다) 텍스트 실행

**입력화면** (아래는 “CreditRoll.class" 소스가 있어야 실행됨)

**출력화면** (아래사각형안은 “CreditRoll.class" 소스가 있으면이 출력됨)

**Parameter 수정법**

bgcolor = 배경색 지정, textcolor = 글자색 지정, fadezone = 글자가 서서히 사라지는 영역 지정

text1 = 원하는 글자를 치면 됩니다. url = 애플릿 위를 클릭하면 연결되는 주소

repeat = 반복여부 speed = 속도 vspace = 애플릿과 다른 곳과의 여백 fontsize = 글꼴 크기

라) 그림실행 ;네모박스 안에 그림이 출력되고 물방울이 움직이며 글자가 지나간다

**입력화면** ("AnWater.class"소스가 있어야 실행됨)

**출력화면**("AnWater.class"소스와 "Sadgirl.gif"그림파일이 있어야 실행된다)

수정법

* foreground : 글자색을 지정합니다.

* background : 배경색을 지정합니다.

* sleeptime : 글자가 나타나는 속도를 조절한다.

* fontsize : 글자의 크기를 지정합니다.

* item0~14 : 화면에 출력되는 글자를 적는곳

* name=image value="Sadgirl.gif" : 이미지 지정

* name=rainsize value="0" : 빗방울의 크기 지정

* name=textscroll value="waterscr.txt" : 스크롤되는 텍스트가 기록된 화일 지정

* name=textspeed value="2" : 스크롤의 속도 지정

* name=textfont value="Arial" : 스크롤되는 텍스트의 폰트지정

* name=textsize value="14" : 폰트의 크기 지정

2) EMBED : WWW협회인 W3C에서는 이태그 대신에 <object>태그를 사용할 것을 권 고한다. 이 태그를 사용한다고 해도 브라우저가 지원하지 않는 것들은 플러그 인을 설치해야 한다. <OMBED>태그는 시작 태그만 사용한다.(종료 태그 없음)

☞ <img dsrc="동영상파일명“>과 유사함(단, 실행기가 보임)

**입력화면**

**출력화면**(인쇄에는 보이지 않지만 “Safrica.avi"파일이 실행되고 있음)

3) 오버젝트(object) : <img dsrc="파일명“>과 유사함(단, 실행기가 새 창으로 실행됨)

☞ 플러그 인(plug-in): 웹 브라우저에서 해당 브라우저가 처리할 수 없는 오디오 및 비디오 등과 같은 다양한 형태의 정보를 처리하기 위해 별도의 응용 프로그램을 실행시키기 위한 일종의 인터페이스.

**입력화면**

**출력화면**(인쇄에는 보이지 않지만 “Safrica.avi"파일이 실행되고 있음)

4) 속웨이브("MotionPath.SWF") 객체 삽입**

**입력화면**

**출력화면**

5) 레이어 : 그래픽 프로그램에서나 사용되던 생소한 말이다. 서로 겹쳐짐으로 인하여 새 로운 디자인을 만들 수 있기 때문에 정렬의 개념이 없다. 예로 멋있게 디자인된 틀 위에 동영상을 올릴 수 있고 겹침의 미학을 창조할 수 있고 DHTML의 CSS 에서는 이런 레이어를 완벽하게 지원한다.

**입력화면**