Internet Computing Laboratory @ KUT Youn-Hee Han CSS (StyleSheet) Internet Computing Laboratory @ KUT Youn-Hee Han
1. 웹 표준 학습목표 웹 표준이란? 웹 표준의 장점 웹 표준에 대하여 이해한다. xHtml과 CSS의 사용법을 익힌다. 웹 기술 발전을 장려하고 잘 운영하기 위한 규칙 웹 표준의 장점 마크업 용량이 줄어든다. 컨텐츠와 문서 모양을 분리할 수 있다. 웹 접근성이 높아진다. 향후 호환성을 보장받는다. Web Programing
1. 웹 표준 두 가지 웹 표준 XHTML(eXtensible HyperText Markup Language) HTML4.01을 XML문법으로 표현 CSS(Cascading Style Sheets) 웹 페이지에 스타일을 지정할 수 있는 문서 Web Programing
1. 웹 표준 XHTML CSS HTML4를 XML로 다시 작성한 것 규칙 장점 모든 태그와 속성은 반드시 소문자로 작성해야 한다. 속성값은 큰 따옴표 안에 써야만 한다. 모든 태그를 올바로 닫아줘야 한다. 장점 미래 어떤 웹 브라우저나 장치에서도 읽을 수 있다. CSS 웹 문서의 전반적인 스타일을 미리 저장해 둔 시트이다. 문서 전체의 일관성을 유지할 수 있다. 세세한 스타일 지정의 필요를 줄어들게 한다. Web Programing
CSS를 통하여 모든 html문서에 통일적이고 중복되는 스타일을 불러온다. 1. 웹 표준 문서의 스타일을 지정 CSS HTML 기본 마크업만 코딩 HTML HTM HTML HTML CSS를 통하여 모든 html문서에 통일적이고 중복되는 스타일을 불러온다. Web Programing
2. CSS 적용하기 방법 A. <style> 엘리먼트 사용 방법 B. 외부 스타일시트 사용 1 <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”; 방법 D. 인라인 스타일 <h1 style=“font-family:Georgia, serif; color:orange;”>제목입니다.</h1> Web Programing
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
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
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
2. CSS 적용하기 방법 D. 인라인 스타일 <h1 style=“font-family:Georgia, serif; color:orange;”>제목입니다.</h1> Web Programing
3. 마크업 Link - 링크된 글자의 스타일 Visited - 클릭한 후에 스타일 Active - 클릭했을 때의 스타일 스타일시트 텍스트디자인 Link - 링크된 글자의 스타일 Visited - 클릭한 후에 스타일 Active - 클릭했을 때의 스타일 hover - 마우스를 오버했을 때의 스타일 Web Programing
3. 마크업 CSS Text Example Style.css Web Programing a:link {font-family: "돋움,verdana"; font-size: 9pt; color: #666666; text-decoration: none; line-height:18px ;} a:visited a:active 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 .na a:active .na a:hover {font-family: "돋움,verdana"; font-size: 20pt; color: #749139; text-decoration: none; line-height:18px ;} Web Programing
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
3. 마크업 리스트 태그 아이콘 바꾸기 Web Programing <!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
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
3. 마크업 정의 리스트 용어/설명 묶음과 대화, 네비게시션, 레이아웃 등 다양한 용도로 이용할 수 있는 태그 <dl> - 정의리스트 <dt> - 용어를 정의 <dd> - 설명을 정의 Web Programing
3. 마크업 정의리스트를 활용한 폼 예제 Web Programing <!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
4. CSS CSS를 활용한 레이아웃 기존의 중첩된 테이블을 사용하지 않고 CSS를 활용하여 화면의 레이아웃을 할 수 있다. 사용법 CSS의 Float이나 position을 사용한다. 장점 코드 관리가 편하다. 텍스트 브라우저, 스크린리더 프로그램, 소형화면기기 등에서 읽을 수 있다. 중첩된 테이블을 사용하지 않는다. 스페이스를 위한 GIF를 사용하지 않는다. Web Programing
4. CSS CSS를 활용한 레이아웃 Web Programing <!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
4. CSS CSS를 활용한 레이아웃 Web Programing #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 id="content"> <p><strong>Web</strong> Programing/p> <p>KUT</p> <div id="footer"> <strong>푸터</strong> </body></html> Web Programing
4. CSS CSS를 활용한 텍스트 스타일 Web Programing <!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
4. CSS CSS를 활용한 텍스트 스타일 Web Programing #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