[ABYDOS] 웹 표준 (3강) CSS 소개 2011년 02월 09일
1. Css 개요            2. 스타일 시트 적용방법            3. CSS 문법 및 속성목차(INDEX)            4. Css의 장점
CSS 개요• CSS란 Cascading Style Sheets'의 약자이다.• HTML의 한계성을 극복하기 위한 방안의 하나• HTML이 할 수 없는 스타일 목록,이펙트 효과 등을 할 수 있다.• Cascading S...
CSS 특징•   <STYLE> … </STYLE>태그를 사용하여 정의•   Type 속성에 스타일 시트의 MINE 타입을 명시•   CSS : “text/css”로 지정•   <STYLE> 태그는 <HEAD> 태그 내...
스타일의 속성• 상위 요소에서 하위 요소로 스타일이 상속• <BODY> 태그에 정의되는 스타일은 <BODY> 태그 내부에 영향을 줌<HTML>         <HEAD>                         <TI...
클래스 정의• 같은 태그 내에서 서로 다른 스타일을 지정할 경우 클래스를 정의• 특정 상황에서 정의된 스타일을 지정할 경우 큰 효과 발휘<HTML>         <HEAD>                         ...
클래스/아이디• 클래스 .(마침표)를 사용한다..class_name {color:orage}<h1 class=class_name>클래스적용</h1>• 아이디 클래스와 비슷하지만, 한 문서에서 같은 아이디는 하나만 존재해...
스타일 시트 적용방법임베딩(Embedding) 스타일 시트 방식<HEAD>…</HEAD> 부분에 직접 삽입하기인라인(inline) 스타일 시트 방식태그에 스타일시트 직접 삽입하기링킹(linking) 스타일 시트 방식외부...
임베딩(Embedding) 스타일 시트형식   <STYLE TYPE=“text/css”>             <!—                   적용태그{속성:값;속성:값;}                   적용태...
인라인(Inline) 스타일 시트형식<태그 STYLE=“속성:값”>• 적용할 스타일 내용이 부분적일 때 사용ABYDOS        Copyright abydos All rights Reserved.
링킹(Linking) 스타일 시트형식<LINK REL=“stylesheet” TYPE=“text/css”HREF=“스타일시트파일명.css”>• 다른 파일에 작성한 스타일시트를 자싞의 문서에 삽입가능• 여러 HTML문서에...
임포트(Import) 스타일 시트형식<STYLE TYPE=“text/css”>     <!—               @import url(“스타일시트파일.css”)     -->     </STYLE>• 다른 스타일시...
CSS 문법 및 속성http://www.homejjang.com/07/css_basic.phphttp://webejoa.com/css/index.htmlABYDOS                              C...
CSS margin/padding/border padding은 content의 border으로부터 inisde,  margin은 content의 border으로 부터 outsidepadding, margin{상, 우, ...
스타일 시트의 장점• HTML 요소의 기능 확장• 통일된 문서 양식을 디자인 가능• 문서 형식을 다양하게 구성 가능• 사용자의 환경 user agent에서 독립된 문서 제작ABYDOS             Copyrig...
감사합니다.ABYDOS
과제 •달력 만들기ABYDOS     Copyright abydos All rights Reserved.
Upcoming SlideShare
Loading in …5
×

2011웹표준[03] css소개

3,002 views

Published on

1 Comment
0 Likes
Statistics
Notes
  • 좋은 자료 감사합니다.
    다시 봐도 잘 정리 되어 있어서 좋은 것 같습니다.

    8번 페이지에서...
    임포트(inport)... 오타 있네요
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
3,002
On SlideShare
0
From Embeds
0
Number of Embeds
1,180
Actions
Shares
0
Downloads
30
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

2011웹표준[03] css소개

  1. 1. [ABYDOS] 웹 표준 (3강) CSS 소개 2011년 02월 09일
  2. 2. 1. Css 개요 2. 스타일 시트 적용방법 3. CSS 문법 및 속성목차(INDEX) 4. Css의 장점
  3. 3. CSS 개요• CSS란 Cascading Style Sheets'의 약자이다.• HTML의 한계성을 극복하기 위한 방안의 하나• HTML이 할 수 없는 스타일 목록,이펙트 효과 등을 할 수 있다.• Cascading Style Sheets 텍스트 색상, 폰트 스타일, 폰트 굵기 등을 지정하기 위한 문법CSS의 이점1. HTML의 제약성에서 탈피한다.: 문자와 문자를 제한없이 겹치는 등 HTML에서는 불가능한 작업을 할 수 있다.2. 홈페이지 젂체에 통일감과 일관성을 유지한다.: 반복적으로 사용하는 서식을 등록해 사용할 수 있으며, 문서 젂체 서식을 파일로생성하여 모든 문서에 적용할 수 도 있다.3. 홈페이지 제작 시간을 감소시키고 문서의 용량을 줄여준다.: 문서마다 반복되는 서식을 CSS 파일로 저장하여 링크 설정만 하면 모든 문서에 같은 서식이 적용된다.4. 기존 홈페이지의 개념을 넘는 DHTML, XML의 기초가 된다.: 레이어를 이용해 동적인 메뉴판이나 마우스를 따라 움직이는 문자등을 구현할 수 있다.ABYDOS Copyright abydos All rights Reserved.
  4. 4. CSS 특징• <STYLE> … </STYLE>태그를 사용하여 정의• Type 속성에 스타일 시트의 MINE 타입을 명시• CSS : “text/css”로 지정• <STYLE> 태그는 <HEAD> 태그 내에서만 사용• 외부 파일로 삽입할 경우 스타일 시트 파일의 확장자는 “.CSS”로 지정ABYDOS Copyright abydos All rights Reserved.
  5. 5. 스타일의 속성• 상위 요소에서 하위 요소로 스타일이 상속• <BODY> 태그에 정의되는 스타일은 <BODY> 태그 내부에 영향을 줌<HTML> <HEAD> <TITLE> 스타일 속성 예제 </TITLE> <STYLE TYPE=“text/css”> H1{ COLOR:RED; } </STYLE> </HEAD> <BODY> <H1>H1태그를 사용할 경우 적용되는 스타일</H1> <H2>H2태그를 사용할 경우</H2> </BODY> </HTML>ABYDOS Copyright abydos All rights Reserved.
  6. 6. 클래스 정의• 같은 태그 내에서 서로 다른 스타일을 지정할 경우 클래스를 정의• 특정 상황에서 정의된 스타일을 지정할 경우 큰 효과 발휘<HTML> <HEAD> <TITLE> 클래스 정의 예제 </TITLE> <STYLE TYPE=“text/css”> H1.AA{ COLOR:RED; } H1.BB{ COLOR:BLUE; } </STYLE> </HEAD> <BODY> <H1 CLASS=“AA”>H1태그에 클래스 AA를 적용</H1> <H2>H2태그를 사용할 경우</H2> <H1 CLASS=“BB”>H1태그에 클래스 BB를 적용</H1> <H2>H2태그를 두번째 사용할 경우</H2> </BODY> </HTML>ABYDOS Copyright abydos All rights Reserved.
  7. 7. 클래스/아이디• 클래스 .(마침표)를 사용한다..class_name {color:orage}<h1 class=class_name>클래스적용</h1>• 아이디 클래스와 비슷하지만, 한 문서에서 같은 아이디는 하나만 존재해야 한다.#(샵)을 사용한다..id_name {color:orage}<h1 id=id_name>클래스적용</h1>ABYDOS Copyright abydos All rights Reserved.
  8. 8. 스타일 시트 적용방법임베딩(Embedding) 스타일 시트 방식<HEAD>…</HEAD> 부분에 직접 삽입하기인라인(inline) 스타일 시트 방식태그에 스타일시트 직접 삽입하기링킹(linking) 스타일 시트 방식외부 스타일시트 불러오기 – 링크 형식 임포트(inport) 스타일 시트 방식외부 스타일시트 불러오기 – 임포트 형식ABYDOS Copyright abydos All rights Reserved.
  9. 9. 임베딩(Embedding) 스타일 시트형식 <STYLE TYPE=“text/css”> <!— 적용태그{속성:값;속성:값;} 적용태그{속성:값;속성:값;} --> </STYLE> • 공통 스타일시트가 적용되는 페이지 수가 적을 경우ABYDOS Copyright abydos All rights Reserved.
  10. 10. 인라인(Inline) 스타일 시트형식<태그 STYLE=“속성:값”>• 적용할 스타일 내용이 부분적일 때 사용ABYDOS Copyright abydos All rights Reserved.
  11. 11. 링킹(Linking) 스타일 시트형식<LINK REL=“stylesheet” TYPE=“text/css”HREF=“스타일시트파일명.css”>• 다른 파일에 작성한 스타일시트를 자싞의 문서에 삽입가능• 여러 HTML문서에서 스타일시트 공유• HTML 문서를 수정하지 않고 스타일시트 문서를 변경하여 웹 문서에 적용ABYDOS Copyright abydos All rights Reserved.
  12. 12. 임포트(Import) 스타일 시트형식<STYLE TYPE=“text/css”> <!— @import url(“스타일시트파일.css”) --> </STYLE>• 다른 스타일시트에서 지정한 것보다 우선권이 높음ABYDOS Copyright abydos All rights Reserved.
  13. 13. CSS 문법 및 속성http://www.homejjang.com/07/css_basic.phphttp://webejoa.com/css/index.htmlABYDOS Copyright abydos All rights Reserved.
  14. 14. CSS margin/padding/border padding은 content의 border으로부터 inisde, margin은 content의 border으로 부터 outsidepadding, margin{상, 우, 하, 좌} -> 시계방향 padding, margin{상하, 좌우} padding, margin{상, 좌우, 하}ABYDOS Copyright abydos All rights Reserved.
  15. 15. 스타일 시트의 장점• HTML 요소의 기능 확장• 통일된 문서 양식을 디자인 가능• 문서 형식을 다양하게 구성 가능• 사용자의 환경 user agent에서 독립된 문서 제작ABYDOS Copyright abydos All rights Reserved.
  16. 16. 감사합니다.ABYDOS
  17. 17. 과제 •달력 만들기ABYDOS Copyright abydos All rights Reserved.

×