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. CSS 특징
• <STYLE> … </STYLE>태그를 사용하여 정의
• Type 속성에 스타일 시트의 MINE 타입을 명시
• CSS : “text/css”로 지정
• <STYLE> 태그는 <HEAD> 태그 내에서만 사용
• 외부 파일로 삽입할 경우 스타일 시트 파일의 확장자는 “.CSS”로 지정
ABYDOS Copyright abydos All rights Reserved.
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. 클래스 정의
• 같은 태그 내에서 서로 다른 스타일을 지정할 경우 클래스를 정의
• 특정 상황에서 정의된 스타일을 지정할 경우 큰 효과 발휘
<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. 클래스/아이디
• 클래스
.(마침표)를 사용한다.
.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. 스타일 시트 적용방법
임베딩(Embedding) 스타일 시트 방식
<HEAD>…</HEAD> 부분에 직접 삽입하기
인라인(inline) 스타일 시트 방식
태그에 스타일시트 직접 삽입하기
링킹(linking) 스타일 시트 방식
외부 스타일시트 불러오기 – 링크 형식
임포트(inport) 스타일 시트 방식
외부 스타일시트 불러오기 – 임포트 형식
ABYDOS Copyright abydos All rights Reserved.
9. 임베딩(Embedding) 스타일 시트
형식
<STYLE TYPE=“text/css”>
<!—
적용태그{속성:값;속성:값;}
적용태그{속성:값;속성:값;}
-->
</STYLE>
• 공통 스타일시트가 적용되는 페이지 수가 적을 경우
ABYDOS Copyright abydos All rights Reserved.
10. 인라인(Inline) 스타일 시트
형식
<태그 STYLE=“속성:값”>
• 적용할 스타일 내용이 부분적일 때 사용
ABYDOS Copyright abydos All rights Reserved.
11. 링킹(Linking) 스타일 시트
형식
<LINK REL=“stylesheet” TYPE=“text/css”
HREF=“스타일시트파일명.css”>
• 다른 파일에 작성한 스타일시트를 자싞의 문서에 삽입가능
• 여러 HTML문서에서 스타일시트 공유
• HTML 문서를 수정하지 않고 스타일시트 문서를 변경하여
웹 문서에 적용
ABYDOS Copyright abydos All rights Reserved.
12. 임포트(Import) 스타일 시트
형식
<STYLE TYPE=“text/css”>
<!—
@import url(“스타일시트파일.css”)
-->
</STYLE>
• 다른 스타일시트에서 지정한 것보다 우선권이 높음
ABYDOS Copyright abydos All rights Reserved.
13. CSS 문법 및 속성
http://www.homejjang.com/07/css_basic.php
http://webejoa.com/css/index.html
ABYDOS Copyright abydos All rights Reserved.