Download ppt - CSS (StyleSheet)

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. 마크업

머리글 태그에 스타일 입히기


<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. 마크업 정의리스트를 활용한 폼 예제


<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>