css (stylesheet)
DESCRIPTION
CSS (StyleSheet). Internet Computing Laboratory @ KUT Youn-Hee Han. 1. 웹 표준. 학습목표 웹 표준에 대하여 이해한다 . xHtml 과 CSS 의 사용법을 익힌다 . 웹 표준이란 ? 웹 기술 발전을 장려하고 잘 운영하기 위한 규칙 웹 표준의 장점 마크업 용량이 줄어든다 . 컨텐츠와 문서 모양을 분리할 수 있다 . 웹 접근성이 높아진다 . 향후 호환성을 보장받는다. 1. 웹 표준. 두 가지 웹 표준 - PowerPoint PPT PresentationTRANSCRIPT
CSS (StyleSheet)
Internet Computing Laboratory @ KUT
Youn-Hee Han
Web Programing2
1. 웹 표준
학습목표 웹 표준에 대하여 이해한다 . xHtml 과 CSS 의 사용법을 익힌다 .
웹 표준이란 ? 웹 기술 발전을 장려하고 잘 운영하기 위한 규칙
웹 표준의 장점 마크업 용량이 줄어든다 . 컨텐츠와 문서 모양을 분리할 수 있다 . 웹 접근성이 높아진다 . 향후 호환성을 보장받는다 .
Web Programing3
1. 웹 표준
두 가지 웹 표준 XHTML(eXtensible HyperText Markup
Language) HTML4.01 을 XML 문법으로 표현
CSS(Cascading Style Sheets) 웹 페이지에 스타일을 지정할 수 있는 문서
Web Programing4
1. 웹 표준XHTML
HTML4 를 XML 로 다시 작성한 것 규칙
모든 태그와 속성은 반드시 소문자로 작성해야 한다 . 속성값은 큰 따옴표 안에 써야만 한다 . 모든 태그를 올바로 닫아줘야 한다 .
장점 미래 어떤 웹 브라우저나 장치에서도 읽을 수 있다 .
CSS 웹 문서의 전반적인 스타일을 미리 저장해 둔 시트이다 . 장점
문서 전체의 일관성을 유지할 수 있다 . 세세한 스타일 지정의 필요를 줄어들게 한다 .
Web Programing5
1. 웹 표준
HTML HTM HTML HTML
CSS 문서의 스타일을지정
HTML 기본마크업만 코딩
CSS 를 통하여 모든 html 문서에 통일적이고 중복되는 스타일을 불러온다 .
Web Programing6
2. CSS 적용하기
방법 A. <style> 엘리먼트 사용<style type="text/css">
// 스타일 시트 작성</style>
방법 B. 외부 스타일시트 사용 1<link rel=“stylesheet” type=“text/css” href=“style.css”/>
방법 C. 외부 스타일시트 사용 2<style type=“text/css”>
@import “style.css”;</style>
방법 D. 인라인 스타일<h1 style=“font-family:Georgia, serif; color:orange;”> 제목입니다 .</h1>
Web Programing7
2. CSS 적용하기
방법 A. <style> 엘리먼트 사용<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"><head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" /><title> 문서 제목 </title><style type="text/css">
// 스타일 시트 작성
</style></head>
<body>
// 문서 메인
</body></html>
Web Programing8
2. CSS 적용하기
스타일시트 파일명
장점CSS 파일만 수정하면 사이트 전체에 대한 스타일을 변경할 수 있다 .
방법 B. 외부 스타일시트 사용 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"><head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" /><title> 문서 제목 </title><link rel=“stylesheet” type=“text/css” href=“style.css”/>
</head>
<body>
// 문서 메인
</body></html>
Web Programing9
2. CSS 적용하기
스타일시트 파일명
장점넷스케이프 4.x 대 버전처럼 @import 규칙을 지원하지 않는웹 브라우저들은 CSS 를 참조하지 않도록 숨긴다 .
방법 C. 외부 스타일시트 사용 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"><head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" /><title> 문서 제목 </title><style type=“text/css”>
@import “style.css”;</style>
</head>
<body>
// 문서 메인
</body></html>
Web Programing10
2. CSS 적용하기
방법 D. 인라인 스타일<h1 style=“font-family:Georgia, serif; color:orange;”> 제목입니다 .</h1>
Web Programing11
3. 마크업
스타일시트 텍스트디자인
Link - 링크된 글자의 스타일
Visited - 클릭한 후에 스타일
Active - 클릭했을 때의 스타일
hover - 마우스를 오버했을 때의 스타일
Web Programing12
3. 마크업
CSS Text Example
Style.css
a:link {font-family: "돋움 ,verdana"; font-size: 9pt; color: #666666; text-decoration: none; line-height:18px ;}a:visited {font-family: "돋움 ,verdana"; font-size: 9pt; color: #666666; text-decoration: none; line-height:18px ;}a:active {font-family: "돋움 ,verdana"; font-size: 9pt; color: #666666; text-decoration: none; line-height:18px ;}a:hover {font-family: "돋움 ,verdana"; font-size: 9pt; color: #ff8000; text-decoration: underline; line-height:18px ;}
.na a:link {font-family: "돋움 ,verdana"; font-size: 20pt; color: #666666; text-decoration: none; line-height:18px ;}
.na a:visited {font-family: "돋움 ,verdana"; font-size: 20pt; color: #666666; text-decoration: none; line-height:18px ;}
.na a:active {font-family: "돋움 ,verdana"; font-size: 20pt; color: #666666; text-decoration: none; line-height:18px ;}
.na a:hover {font-family: "돋움 ,verdana"; font-size: 20pt; color: #749139; text-decoration: none; line-height:18px ;}
Web Programing13
3. 마크업
CSS Text Example
Test.html
<html><head><title>Title</title><link rel='stylesheet' type='text/css' href=‘style.css'></head>
<body>SytleSheep Example<br>Default Link - <a href="http://icl.kut.ac.kr">icl link</a><p><div class="na">Class Link –
<a href="http://ime.kut.ac.kr">ime link</a></div></body></html>
Web Programing14
3. 마크업
리스트 태그 아이콘 바꾸기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"><head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" /><style type="text/css">#fig ul {
list-style: none;}
#fig li {background: url(li_bull.gif) no-repeat 0 50%;padding-left: 17px;}
</style></head><body>
<div id="fig"><ul>
<li> 소개하고픈 링크 </li><li> 즐겨읽는 책 </li><li> 좋아하는 영화 </li><li> 함께 듣는 음악 </li>
</ul></div>
</body></html>
Web Programing15
3. 마크업
머리글 태그에 스타일 입히기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"><head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" /><style type="text/css">h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #FFA500;
}</style>
</head>
<body>
<h1>Web Programing</h1>
</body></html>
장점
• 포함하고 있는 텍스트에 의미를 부여한다 .•스타일과 관계없이 시각 /음성 브라우저 모두 머리글로 인식하여 처리한다 .• CSS 로 머리글만 쉽게 스타일을 입힐 수 있다 .• 검색엔진은 머리글 태그에 포함된 키워드에 중요도를 부여한다 .
Web Programing16
3. 마크업
정의 리스트 용어 /설명 묶음과 대화 , 네비게시션 , 레이아웃 등
다양한 용도로 이용할 수 있는 태그 <dl> - 정의리스트 <dt> - 용어를 정의 <dd> - 설명을 정의
Web Programing17
3. 마크업 정의리스트를 활용한 폼 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"><head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" /><style type="text/css" media="screen">#fig5_8 form dt {
float: left;padding-right: 10px;}
</style></head><body><div id="fig5_8"><form action="/path/to/script" id="thisform" method="post"> <dl> <dt><label for="name"> 이름 :</label></dt> <dd><input type="text" id="name" name="name" /></dd> <dt><label for="email"> 이메일 :</label></dt> <dd><input type="text" id="email" name="email" /></dd> <dt><label for="remember"> 내 정보 기억하기 </label></dd> <dd><input type="checkbox" id="remember" name="remember" /></dd> <dt><p><input type="submit" value=" 확인 " /></dt> </dl></form></div></body></html>
Web Programing18
4. CSS
CSS 를 활용한 레이아웃 기존의 중첩된 테이블을 사용하지 않고 CSS 를
활용하여 화면의 레이아웃을 할 수 있다 . 사용법
CSS 의 Float 이나 position 을 사용한다 .
장점 코드 관리가 편하다 . 텍스트 브라우저 , 스크린리더 프로그램 , 소형화면기기
등에서 읽을 수 있다 . 중첩된 테이블을 사용하지 않는다 . 스페이스를 위한 GIF 를 사용하지 않는다 .
Web Programing19
4. CSS
CSS 를 활용한 레이아웃<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"><head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" /><title>CSS 레이아웃 ( 방법 A)</title><style type="text/css" media="screen">
body {font-family: verdana, sans-serif;font-size: 12px;}
#header {background: #ccc;padding: 20px;}
#sidebar {float: right;width: 30%;background: #999;}
#content {margin-right: 34%;}
Web Programing20
4. CSS
CSS 를 활용한 레이아웃#footer {
clear: right;background: #eee;padding: 20px;}
</style></head><body><div id="header"><strong> 헤더 </strong></div><div id="sidebar"><p><strong> 사이드바 </strong></p> <ul> <li><a href="#"> 링크 항목 1</a></li> <li><a href="#"> 링크 항목 2</a></li> <li><a href="#"> 링크 항목 3</a></li> <li><a href="#"> 링크 항목 4</a></li> </ul></div> <div id="content"> <p><strong>Web</strong> Programing/p> <p>KUT</p> </div><div id="footer"> <strong> 푸터 </strong></div></body></html>
Web Programing21
4. CSS
CSS 를 활용한 텍스트 스타일<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"><head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" /><title>13 장 - 텍스트를 위한 스타일 </title><style type="text/css">
div {margin: 30px;padding: 30px;border: 1px solid #ccc;font-size: small;}
#fig13_10 {font-family: Georgia, Times, serif;line-height: 1.5em;text-align: justify;}
#fig13_10 h1 {letter-spacing: 4px;font-style: italic;text-align: center;font-variant: small-caps;}
Web Programing22
4. CSS
CSS 를 활용한 텍스트 스타일
#fig13_10 .drop { float: left; font-size: 400%; line-height: 1em; margin: 4px 10px 10px 0; padding: 4px 10px; border: 2px solid #ccc; background: #eee; }
</style></head>
<body>
<div id="fig13_10"><h1>KUT IME</h1>
<p><span class="drop">W</span>eb Programing.</p>
<p>Good day</p></div>
</body></html>