1 / 22

CSS (StyleSheet)

CSS (StyleSheet). Internet Computing Laboratory @ KUT Youn-Hee Han. 1. 웹 표준. 학습목표 웹 표준에 대하여 이해한다 . xHtml 과 CSS 의 사용법을 익힌다 . 웹 표준이란 ? 웹 기술 발전을 장려하고 잘 운영하기 위한 규칙 웹 표준의 장점 마크업 용량이 줄어든다 . 컨텐츠와 문서 모양을 분리할 수 있다 . 웹 접근성이 높아진다 . 향후 호환성을 보장받는다. 1. 웹 표준. 두 가지 웹 표준

neci
Download Presentation

CSS (StyleSheet)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS (StyleSheet) Internet Computing Laboratory @ KUT Youn-Hee Han

  2. 1. 웹 표준 • 학습목표 • 웹 표준에 대하여 이해한다. • xHtml과 CSS의 사용법을 익힌다. • 웹 표준이란? • 웹 기술 발전을 장려하고 잘 운영하기 위한 규칙 • 웹 표준의 장점 • 마크업 용량이 줄어든다. • 컨텐츠와 문서 모양을 분리할 수 있다. • 웹 접근성이 높아진다. • 향후 호환성을 보장받는다. Web Programing

  3. 1. 웹 표준 • 두 가지 웹 표준 • XHTML(eXtensible HyperText Markup Language) • HTML4.01을 XML문법으로 표현 • CSS(Cascading Style Sheets) • 웹 페이지에 스타일을 지정할 수 있는 문서 Web Programing

  4. 1. 웹 표준 • XHTML • HTML4를 XML로 다시 작성한 것 • 규칙 • 모든 태그와 속성은 반드시 소문자로 작성해야 한다. • 속성값은 큰 따옴표 안에 써야만 한다. • 모든 태그를 올바로 닫아줘야 한다. • 장점 • 미래 어떤 웹 브라우저나 장치에서도 읽을 수 있다. • CSS • 웹 문서의 전반적인 스타일을 미리 저장해 둔 시트이다. • 장점 • 문서 전체의 일관성을 유지할 수 있다. • 세세한 스타일 지정의 필요를 줄어들게 한다. Web Programing

  5. 1. 웹 표준 문서의 스타일을 지정 CSS HTML 기본 마크업만 코딩 HTML HTM HTML HTML CSS를 통하여 모든 html문서에 통일적이고 중복되는 스타일을 불러온다. Web Programing

  6. 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 Programing

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

  8. 2. 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> 스타일시트 파일명 장점 CSS파일만 수정하면 사이트 전체에 대한 스타일을 변경할 수 있다. Web Programing

  9. 2. 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> 스타일시트 파일명 장점 넷스케이프 4.x대 버전처럼 @import 규칙을 지원하지 않는 웹 브라우저들은 CSS를 참조하지 않도록 숨긴다. Web Programing

  10. 2. CSS 적용하기 • 방법 D. 인라인 스타일 <h1 style=“font-family:Georgia, serif; color:orange;”>제목입니다.</h1> Web Programing

  11. 3. 마크업 • 스타일시트 텍스트디자인 Link - 링크된 글자의 스타일 Visited - 클릭한 후에 스타일 Active - 클릭했을 때의 스타일 hover - 마우스를 오버했을 때의 스타일 Web Programing

  12. 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 Programing

  13. 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 Programing

  14. 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 Programing

  15. 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 Programing

  16. 3. 마크업 • 정의 리스트 • 용어/설명 묶음과 대화, 네비게시션, 레이아웃 등 다양한 용도로 이용할 수 있는 태그 • <dl> - 정의리스트 • <dt> - 용어를 정의 • <dd> - 설명을 정의 Web Programing

  17. 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 Programing

  18. 4. CSS • CSS를 활용한 레이아웃 • 기존의 중첩된 테이블을 사용하지 않고 CSS를 활용하여 화면의 레이아웃을 할 수 있다. • 사용법 • CSS의 Float이나 position을 사용한다. • 장점 • 코드 관리가 편하다. • 텍스트 브라우저, 스크린리더 프로그램, 소형화면기기 등에서 읽을 수 있다. • 중첩된 테이블을 사용하지 않는다. • 스페이스를 위한 GIF를 사용하지 않는다. Web Programing

  19. 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 Programing

  20. 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 Programing

  21. 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 Programing

  22. 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> Web Programing

More Related