스타일 시트 1

스타일 시트 1 계원조형예술대학 멀티미디어디자인과 2005년 인터넷1

스타일 시트의 필요성 • Html 문서는 인터넷에서 볼 수 있는 문서이고 일반적으로 텍스트와 그림으로 이루어져 있다. 그 동안은 HTML 문서의 구조나 레이아웃 보다는 정보를 전하는 것에 치중하여 HTML문서의 꾸미기에 소홀해 왔지만 스타일 시트가 개발되면서 HTML문서의 구조도 많이 달라지게 되었다. • 스타일 시트는 워드프로세서를 이용하여 만든 문서처럼 다양한 레이아웃과 꾸미기가 가능해지기 때문에 이젠 HTML문서도 구조적인 문서로 인정되기 시작함 • 스타일 시트 : 문서의 외형을 구체적으로 명시하기 위한 문장의 집합 • 웹 페이지의 외형을 제어하기 위한 언어 • 웹 페이지의 내용에 하나하나 스타일을 지정하지 않고 태그 에 따라 별도의 스타일 정보를 정의하여 종류별로 일괄적인 스타일 적용 • 웹 페이지의 구성 요소의 위치 자유롭게 지정

스타일시트의 기능과 장점 • 웹 페이지 구성 요소에 크기, 색깔 등의 스타일을 일괄적으로 적용 • 글자 간격, 문단 간격, 위치 등 HTML 태그로는 제어할 수 없는 부분을 제어. • 문서의 구조와 스타일의 분리 • 스타일의 변경과 웹 페이지의 일관성 유지가 용이 • 동적 HTML(DHTML) ⊙ 기존 HTML의 단점을 개선해 동적인 웹 페이지를 만들 수 있도록 하기 위한 것 ⊙ 영어로 Dynamic HTML, 또는 약자로 DHTML ⊙ 서버와 관계된 기술인 자바 애플릿이나 CGI와는 달리 HTML문서 자체의 기능이므로 브라우저에서 실행되어 서버의 부담이 적고, 이벤트에 대한 즉각적 반응이 가능 ⊙ 웹 페이지의 구성 요소의 위치를 자유롭게 지정. ⊙ 자바 애플릿이나 CGI보다 구현이 쉬움. ⊙ Netscape Navigator와 Internet Explorer에서 서로 지원하는 방식이 달라 호환이 잘 되지 않는 것이 단점 결론 : 동적 HTML이란 스타일 시트를 이용해 웹 페이지의 서식과 구성요소의 위치를 지정하고, JavaScript를 이용해 마우스의 움직임, 폼의 입력 등 웹 페이지 상에서 일어나는 이벤트를 받아들여 문서 객체모델로 정의된 객체의 상태를 동적으로 변환시키는 것이라 말할 수 있다.

Style Sheet를 정의하기 위한 문법의 종류 • CSS(Cascading Style Sheet) • CSS (계단식 스타일 시트)란? Cascade의 사전적 의미는 계단식의 정보전달이지만, 스타일시트에서 의미는 하나의 태그에 단계적으로 여러가지 속성을 부여한다는 뜻 • 스타일 정보를 속성(Property)과 속성값(Property-value)으로 지정 • 스타일 언어의 표준 : 가장 많이 사용되는 대표적인 스타일 시트 • 1998년 5월 12일 W3C Recommendation • Internet Explorer 4.0 및 Netscape Navigator 4.0이상에서 지원 • JSSS(JavaScript Style Sheet) • JavaScript로 스타일 정보를 제어 • Netscape Navigator 4.0이상에서 채택 • Internet Explorer에서는 지원되지 않음

스타일 시트 선언 • 선택자(Selector) : CSS의 적용대상. 주로 HTML 태그 • 속성(Property) : 선택자에 적용되는 속성. 글자체,배경색등 • 값(Value) : 속성값을 지정 • 선언부(Declaration) : 속성과 값의 나열 선언부(Declaration) 선택자(SELECTOR) H1 { font-style :italic ; color :red } 속성 (Property) 값 (Value)

스타일 시트 사용시 주의사항 • HTML 과 마찬가지로 대소문자나 빈 칸은 구분하지 않는다. • CSS안에 요소를 설정할 때에는 기존에 없는 태그를 사용해서는 안됨 • 즉, HTML에서 CSS의 사용은 기존 태그의 확장과 재사용에서만 이용됨 < 새로운 태그의 사용은 XML문서에서의 사용에 이용된다. > • 속성과 속성값들을 열거하여 사용시 반드시 구분은 세미콜론( ; )을 이용하여야 함

선택자 지정방법 • 스타일을 적용할 부분을 설정하는 선택자에는 다양한 지정 방법이 있으며 기본적인 지정 방식은 다음과 같으며 이 방법들을 조합하여 지정이 가능함 • 1. 태그각각의 지정 H1 { BACKGROUND : SKYBLUE}/* 배경 : 하늘색 */H2 { BACKGROUND : SKYBLUE}/* 배경 : 하늘색 */H3 {BACKGROUND : NAVY ; COLOR:WHITE}/* 배경 : 남색 */

선택자 지정방법 태그각각의 지정 예

선택자 지정방법 • 2. 여러 태그 동시지정 • 여러 개의 선택자가 같은 속성을 사용할 때는 하나로 묶어서 쓸 수 있다. • 즉 동일한 속성과 값을 갖는 태그들을 하나로 묶어서 정의할 수 있다. H1 { FONT-FAMILY : 돋움}/* 서체 : 돋움 */H2 {FONT-FAMILY : 돋움 }/* 서체 : 돋움 */H3 {FONT-FAMILY : 돋움 }/* 서체 : 돋움 */  H1,H2,H3 { FONT-FAMILY : 돋움 }/* 서체 : 돋움 */ CSS의 한글 글꼴 지원 익스플로러는 윈도우 시스템내의 모든 글꼴을 사용할 수 있으나네스케이프는 한가지 글꼴만을 사용할 수 있기 때문에 한글 글꼴에 관한 FONT-FAMILY속성에 대해서는 설정하는 것이 무의미할 수 있다

선택자 지정방법 여러 태그 동시지정 예

속성 정의 방법 • 태그에 대하여 여러가지 속성들을 정의하는 것이 가능하다 H1 {FONT-WEIGHT:BOLD; FONT-SIZE:30pt; FONT-FAMILY:돋움;} /* 글자의 두께 : BOLD 글자의 크기 : 30 포인트 서체 : 돋움 */ FONT속성의 shorthand property 어떤 속성은 shorthand property라고 부르는 일종의 대표속성을 가지고 있어서, 여러속성들을 한번에 설정할 수 있다. FONT-WEIGHT, FONT-SIZE, LINE-HEIGHT, FONT- FAMILY순으로 속성값을 공백으로 구분하여 나열하여 준다. ◈ 이러한 경우에는 순서가 바뀌어 적용되면 안된다. 속성들에서 다시 정리함

속성 정의 방법 속성들의 나열 예

속성 정의 방법 shorthand property 예

스타일 시트를 HTML에 삽입 • 스타일시트 삽입하기 • 스타일시트를 삽입하는 방법 중 자주 사용되는 것은 다음 3가지이다. • 문서의 HEAD에 정의하기 • style 속성 이용하기 • 외부 스타일시트 연결하기

스타일 시트를 HTML에 삽입 • 문서의 HEAD에 정의하기 1. HEAD에 정의할 때는 STYLE element를 사용 2. TYPE 속성은 반드시 함께 써 주어야 함 3. 주석 표시는 의례적으로 넣음 • 스타일시트를 지원하지 않는 브라우저가 스타일을 무시하도록 하기 위해 사용 4. 스타일을 정의하는 부분은 { } 안에 넣는다. 5. 속성과 값은 콜론(:)으로 구분 6. 2개 이상의 속성을 쓸 때는 세미콜론(;)으로 구분 3 4 <HTML> <HEAD> <STYLE TYPE = “TEXT/CSS”> <!— H1 { font-style : italic ; color : red} --> </STYLE> </HEAD> <BODY> <H1> 빨간 이탤릭체의 H1. </H1> <H1> Me too. </H1> </BODY> </HTML> 1 2 5 6

스타일 시트를 HTML에 삽입 • style 속성 이용하기 • 특정한 element에 한 번만 스타일을 적용할 때는 style 속성을 사용 -InLine Style Sheet • 사용법 1. 사용하고자 하는 태그 내에 style 속성 사용 2. 속성에 대한 속성 값들은 " " 표시를 하고 속성과 값을 써줌 3. 속성과 값 사이에 콜론(:)을 사용함 4. 속성과 속성 사이에 세미콜론(;)을 사용함 <HTML> <HEAD> </HEAD> <BODY> <H1 style = “font-style : italic ; color : red”>빨간 이탤릭체의 H1. </H1> <H1> 스타일 적용 될까요?? </H1> </BODY> </HTML> 1 2 3 4

스타일 시트를 HTML에 삽입 • 외부 스타일시트 연결하기 1. 먼저 다음과 같은 내용의 파일을 만들고 style.css로 저장 2. HEAD 부분에 LINK 태그를 사용해 style.css 파일을 연결 REL은 연결하는 문서가 스타일시트 문서임을 말해줌 TYPE은 스타일시트의 형식 HREF는 스타일시트 파일의 경로 1 h1 { font-style :italic ; color :red } 2 <LINK rel= "stylesheet"type= "text/css"href="style.css"> 아무리 많은 문서를 만들어도 스타일은 style.css 파일에서 모두 정의해 주고, 문서들에는 LINK element만 넣어주면 된다. 수정을 할 때는 style.css 파일만을 고치면 된다.

스타일 시트를 HTML에 삽입 외부 스타일시트 연결하기 예 3 4 5 <HTML> <HEAD> <LINK rel= "stylesheet"type= "text/css"href="style.css"> </HEAD> <BODY> <H1> 빨간 이탤릭체의 H1. </H1> <H1> 스타일 적용 될까요?? </H1> </BODY> </HTML> 2

스타일 시트 적용 방법 • 선택적으로 css 적용 스타일시트를 적용하는 방법에는 여러 가지가 있습니다. 한 개의 태그에 속성을 지정할 수도 있고, 여러 개의 태그를 한번에 지정할 수도 있습니다. Class 속성은 여러 태그들의 그룹을 식별하는데 사용되고 Id 속성은 개별 태그를 식별하는데 사용됩니다. • Class 사용 • 특정 Class를 지정한 태그에 대해서만 스타일을 적용합니다. • Class이름앞에 태그 이름을 지정한 경우, 그 태그 안에서 지정된 Class가 지정되어 있는 것만이 대상이 됨 • 요소이름.class 이름 • .class이름 : 전역클래스로 사용 h1.myClass { font-style :italic ; color :red } .myClass { font-style :italic ; color :red }

스타일 시트 적용 방법 태그.class 사용 예

스타일 시트 적용 방법 .class의 사용 예

스타일 시트 적용 방법 • ID 사용 • 특정 ID를 지정한 태그에 대해서만 스타일을 적용함 • ID 앞에 태그 이름을 지정한 경우에는 그 태그 안에서 지정된 ID가 있는 것만이 대상이 됨 • 이 선택자는 class 선택자와 비슷하지만 이 선택자는 오직 하나의 태그에서만 사용할 수 있습니다. 구문은 #과 이름입니다. 그리고 각 태그에서 사용하기 위해서 ID 속성으로 사용합니다. • 태그이름 태그이름 태그이름 …… • 특정 태그에 포함된 태그에 대해서만 스타일을 적용함 • 태그 속의 태그에게 지정하는 선택자입니다. 지정한 택 안에 있다면 다른 태그 속에 있는 태그에도 지정합니다. 구문은 선택자 사이에 공백을 넣어주어서 지정합니다. • 상위 태그(계층)부터 순서대로 스페이스로 구분하여 지정함 #myID { font-style :italic ; color :red } h1 b{ font-style :italic ; color :red }

스타일 시트 적용 방법 ID의 사용 예

스타일 시트 적용 방법 태그이름 태그이름 태그이름…사용 예

스타일 시트 적용 방법 • 임의의 범위에 스타일 시트를 적용시킬 때 • <Span>태그나 <Div>태그는 임의의 범위에 스타일을 적용시키고자 할 경우에 사용함 • 다른 태그에서 따로 지정하지 않은 범위의 스타일을 적용할 목적의 태그로 지정하는 경우에 사용 • 대부분의 경우에 ID 속성이나 CLASS 속성과 함께 사용함 <SPAN> ~ </SPAN> 한줄에 스타일을 적용 <DIV> ~ < DIV> 한 문단에 스타일을 적용

스타일 시트 적용 방법 <SPAN><DIV>의 사용 예

주석의 사용 • 스타일 시트에서는 주석을 [/* ~ */]을 사용 • 주석 안에는 다른 주석을 포함할 수 없으며 HTMl 문서에서 사용하는 [ </STYLE> </HEAD> <BODY> <H1> 빨간 이탤릭체의 H1. </H1> <H1> Me too. </H1> </BODY> </HTML> 주석입니다.

스타일 시트 1

스타일 시트 1

Presentation Transcript