6/7
장 드림위버 활용
CSS(Cascade Style Sheet) 활용
1.
스타일 시트 정의 방법
스타일시트의 종류
1)
내부 스타일시트
외부 스타일시트
행 (inline) 스타일시트
<head><style type="text/css" 또는 type="text/javascript">
선택자 { 속성 : 속성값 } ... --> </style> </head>
<link rel="stylesheet" type="text/css" 또는 type="text/javascript" href=" 파일명 .css">
CSS Style 속성
스타일시트 정의 방법
기본 사용 형식
스타일을 정의하기 위한 기본 요소 :
속성과 속성값으로 구성
스타일을 적용할 대상을 선택자 (selector)
라 함
선택자 1, ...., { 속성 1 : 속성값 1; 속성 2: 속성값 2; ... 속성 n: 속성값 n}
BODY { background-color : yellow; }
P { color:blue; background:red } H2 { background:yellow }
[
기본예제 1]
내부 스타일시트 연습
1. <HTML><HEAD><TITLE> 스타일시트 </TITLE> 2. <STYLE> 3. <!— 4. BODY { 5. background-color : yellow; 6. } 7. --> 8. </STYLE> 9. </HEAD> 10. <BODY> <H3> 스타일시트 - 배경색이 노란색 </H3> 11. </BODY> 12. </HTML> 내부 스타일시트[
기본예제 2]
외부 스타일시트 정의
1. <HTML>2. <HEAD><TITLE> 외부스타일시
트 기본 사용법 </TITLE>
3. <link rel="stylesheet" type="te xt/css" href=“test.css"> 4. </HEAD> 5. <BODY> 6. <H1> 스타일 적용된 제목 H1 </H1> 7. <P> 첫번재 스타일시트 문단입 니다 ... 색은 파란색 배경색은 빨 간색입니다 .</P> 8. </BODY> 9. </HTML>
<body>에서 <p> 태그 글자색은 blue, 배경색은 red 를 적용
<body>에서 <h1> 태그 배경색을 yellow 로 지정 1. p { color:blue; background:red} 2. h1{ background:yellow} --- test.css
---내부 스타일시트 선택자 정의 방법
기본 사용 형식
스타일을 정의하기 위한 기본 요소 :
속성과 속성값으로 구성
스타일을 적용할 대상을 선택자 (selector)
라 함
1)
독립 태그
에
같은 스타일
적용 방식
2)
같은 태그
에
서로 다른 스타일
적용 시
선택자 1, ...., { 속성 1 : 속성값 1; 속성 2: 속성값 2; ... 속성 n: 속성값 n}BODY { background-color : yellow; } ; 1) 기본 형식 ( 태그별 적용 )
BODY, TABLE { background-color : yellow; } ; 2) 복합 ( 태그 중첩 ) 형식
.con1, p.con2 { color:blue; background:red } ; 3) 클래스 선택자 형식 #aa { background:yellow } ; 4) ID 형식
[
기본예제 3]
중첩 스타일시트 정의 연습
1. <HTML><HEAD><TITLE> 태그 중첩 이용 </TITLE> 2. <STYLE> 3. <!— 4. p, a {font-family: 궁서 ; color:red; } 5. --> 6. </STYLE> 7. </HEAD> 8. <BODY> 9. <center>10. <p><a href=http://www.naver.com> 네이버검색 </a></p> 11. </center>
12. </BODY> 13. </HTML>
[
기본예제 4] CLASS
스타일시트 정의 연습
1. <HTML><HEAD><TITLE> 클래스 이용 - 스타일시트 </TITLE> 2. <STYLE type="text/css">
3. <!—
4. p.content1 {font-family: 궁서 ; color:red; }
5. .content2 {font-family: 굴림 ; background:yellow; } 6. --> 7. </STYLE> 8. </HEAD> 9. <BODY><center> 10. <p CLASS="content1“ > 동해물과 백두산이 마르고 닳도록 ...</p> 11. <h1 CLASS="content2“ > 가을하늘 공활한데 높고 구름 없이 ...</p> 12. </BODY></HTML>
[
기본예제 5] ID
스타일시트 정의 연습
1. <HTML><HEAD><TITLE> ID 이용 - 스타일시트 </TITLE>2. <STYLE type="text/css"> 3. <!—
4. #con1 {font-family: 궁서 ; color:red;}
5. #con2 {font-family: 굴림 ; background:green;} 6. --> 7. </STYLE> 8. </HEAD> 9. <BODY> 10. <center> 11. <p ID="con1“ > 동해물과 백두산이 마르고 닳도록 ...</p> 12. <h3 ID="con2“ > 가을하늘 공활한데 높고 구름 없이 ...</h3> 13. </center> 14. </BODY> 15. </HTML> 2개의 클래스명을 지정하고 , 스타일을 정의 04와 05 행에서 지정한 스타일을 적용
1. 기본형 (Tag 별 )
스타일 시트 적용하기
Step-1
1)Propertes 패널 CSS <New CSS Rule> [Edit Rule] 또는 2) 바탕화면 우측마우스 버튼 CSS StylesNew 또는 3) [Format] 메뉴 CSS StylesNew ① ② ③ ④ ⑤ ⑥ ⑦
① ③ ④ ② ⑤ ⑥ ⑦
2.
새 Class
스타일 시트 삽입하기
메뉴 [Format][CSS Styles] [New]
또는
마우스 우측 버튼 클릭 [CSS Styles] [New]
step-1)
스타일 적용범위
클래스 스타일 이름 클래스 선택자
step-2)
스타일 지정
스타일 속성 : pp. 139 참조
Step-5)
스타일 지정
디자인 창에서 대상 선택
Properties 패널 에서 Class 리스트에서 선택 ①
3.
새 ID
스타일 시트 정의하기
Propertes
패널 CSS <New CSS Rule> [Edit Rule]
①
② ③
④ ⑤
기존 ID
스타일 적용
1) 대상 선택
2) Properties HTML ID 창에
대상 ID 스타일명
입력
① ② ③4. 행 (inline)
스타일 시트 적용하기
Inline 스타일
각 태그에 style=“ 속성 : 속성명 ; ” 형식으로 정의
대상 선택 후 CSS <New inline Style> Edit Rule 버튼 선택 스
타일 지정
① ②
③
5. Compound
Compound : 복합체 , 혼합의 , 복식의
텍스트 하이퍼링크 선택자
A ; 하이퍼링크 태그 A:link ; 하이퍼링크 보통 상태 A:visited ; 하이퍼링크 방문 상태 지정 A:hover ; 하이퍼링크 롤오버 상태 지정 A:active ; 하이퍼링크 활성 상태 지정 CSS 예제 A { color: blue; text-decoration: none; padding-top: 5px; padding-left: 7px }A:hover, A:active { color: green; text-decoration: none; padding-top: 5px; padding-left: 7px }
1)
하이퍼링크 스타일 지정
2)
복합 태그 스타일 지정
1) ID 2) Tag
6.
외부 스타일 시트 정의
1) [File][New] [blank page][CSS]Create
