2011웹표준[03] css소개

[ABYDOS] 웹 표준

(3강) CSS 소개

2011년 02월 09일

1. Css 개요

2. 스타일 시트 적용방법

3. CSS 문법 및 속성

목차(INDEX)
4. Css의 장점

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.

CSS 특징

• <STYLE> … </STYLE>태그를 사용하여 정의
• Type 속성에 스타일 시트의 MINE 타입을 명시
• CSS : “text/css”로 지정
• <STYLE> 태그는 <HEAD> 태그 내에서만 사용
• 외부 파일로 삽입할 경우 스타일 시트 파일의 확장자는 “.CSS”로 지정


스타일의 속성

• 상위 요소에서 하위 요소로 스타일이 상속

• <BODY> 태그에 정의되는 스타일은 <BODY> 태그 내부에 영향을 줌

<HTML>
<HEAD>
<TITLE> 스타일 속성 예제 </TITLE>
<STYLE TYPE=“text/css”>
H1{
COLOR:RED;
}
</STYLE>
</HEAD>
<BODY>
<H1>H1태그를 사용할 경우 적용되는 스타일</H1>
<H2>H2태그를 사용할 경우</H2>
</BODY>
</HTML>


클래스 정의

• 같은 태그 내에서 서로 다른 스타일을 지정할 경우 클래스를 정의

• 특정 상황에서 정의된 스타일을 지정할 경우 큰 효과 발휘

<HTML>
<HEAD>
<TITLE> 클래스 정의 예제 </TITLE>
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>


클래스/아이디

• 클래스
.(마침표)를 사용한다.
.class_name {color:orage}
<h1 class=class_name>클래스적용</h1>

• 아이디
클래스와 비슷하지만, 한 문서에서 같은 아이디는 하나만 존재해야 한다.
#(샵)을 사용한다.
.id_name {color:orage}
<h1 id=id_name>클래스적용</h1>


스타일 시트 적용방법

임베딩(Embedding) 스타일 시트 방식
<HEAD>…</HEAD> 부분에 직접 삽입하기

인라인(inline) 스타일 시트 방식
태그에 스타일시트 직접 삽입하기

링킹(linking) 스타일 시트 방식
외부 스타일시트 불러오기 – 링크 형식

임포트(inport) 스타일 시트 방식
외부 스타일시트 불러오기 – 임포트 형식


임베딩(Embedding) 스타일 시트

형식
<!—
적용태그{속성:값;속성:값;}
적용태그{속성:값;속성:값;}
-->
</STYLE>

• 공통 스타일시트가 적용되는 페이지 수가 적을 경우


인라인(Inline) 스타일 시트

형식
<태그 STYLE=“속성:값”>

• 적용할 스타일 내용이 부분적일 때 사용


링킹(Linking) 스타일 시트

형식
<LINK REL=“stylesheet” TYPE=“text/css”
HREF=“스타일시트파일명.css”>

• 다른 파일에 작성한 스타일시트를 자싞의 문서에 삽입가능
• 여러 HTML문서에서 스타일시트 공유
• HTML 문서를 수정하지 않고 스타일시트 문서를 변경하여
웹 문서에 적용


임포트(Import) 스타일 시트

형식
<!—
@import url(“스타일시트파일.css”)
-->
</STYLE>

• 다른 스타일시트에서 지정한 것보다 우선권이 높음


CSS 문법 및 속성

http://www.homejjang.com/07/css_basic.php

http://webejoa.com/css/index.html


CSS margin/padding/border

padding은 content의 border으로부터 inisde,
margin은 content의 border으로 부터 outside

padding, margin{상, 우, 하, 좌} -> 시계방향
padding, margin{상하, 좌우}
padding, margin{상, 좌우, 하}


스타일 시트의 장점

• HTML 요소의 기능 확장

• 통일된 문서 양식을 디자인 가능

• 문서 형식을 다양하게 구성 가능

• 사용자의 환경 user agent에서 독립된 문서 제작


과제

•달력 만들기


2011웹표준[03] css소개

More Related Content

Similar to 2011웹표준[03] css소개 (20)

2011웹표준[03] css소개