CSS(Cascading Style Sheet)
스타일은 HTML 문서 내에 서체의 종류, 크기, 색, 여백 등을 지정하여 사용자의 web browser 환경에 상관없이 일정한 화면을 보여주는 기능이다. table이나 form에 의존하던 문서의 레이아웃을 미려하게 표현할 수 있고, 텍스트의 크기나 글꼴, 줄 간격, 배경 색상 등을 자유롭게 지정하여 표현할 수 있다.
- CSS를 사용 하는 이유
모든 값을 사용할 수 있다.
일관성 있는 문서들을 만들 수 있다.
유지 보수의 편리성이 있다.
■ 지정방법
1) Inline Style
Inline Style 은 HTML Tag 속에 style 속성을 사용하여 직접 지정한다.
- 사용 : <div style="color:red;">여기는 적색으로 나타난다.</div>
2) embedded style sheet 방식
스타일 시트의 기본적인 사용 방법으로 html의 <head>~</head> 사이에 삽입하여 <style type="text/css">~<style> 사이에 정의한다. 또한 같은 스타일을 중복해서 지정 했을 때는 나중에 지정 한 것이 적용된다.
- 형식 : <style type="css/text" media="값">....</style>
- 옵션
MEDIA : Style Sheet가 적용되어야하는 매체를 지정한다. 가능한 값은 다음과 같다.
print : 프린터 출력인 경우
screen : 화면 출력인 경우
projection : 프로젝터 출력인 경우
braille : 점자출력 장치로 출력하는 경우
aural : 음성 출력인 경우
all : 모든 매체를 통한 출력인 경우(내정치)
- 예
<style type="text/css">
p { background: yellow; color: black }
</style>
:
<body>
<p>배경색은 노랑, 폰트색은 검정입니다. </p>
</body>
3) Linked style sheet 방식
<HEAD> ~ </HEAD> 사이에 Link Element 를 사용하여 CSS file(확장자가 .css 인 파일)을 연결 시켜서 사용하는 방식이다.
- 형식 : <link rel=stylesheet href="파일명" type="text/css">
4) Imported style sheet
이 방식은 결과적으로 Linked style sheet와 같고 위치는 Embedded 방식과 마찬 가지로 Style block 속에 들어간다.
- 형식 : @import url("파일명"); 또는 @import "파일명";
■ 사용 방식에 따른 Style 적용의 우선 순위(Cascading order)
1) Inline style sheet
2) Embedded style sheet
3) Linked style sheet
4) Imported style sheet
■ CSS 기본 문법
- Property Block
{CSS Property : value | keyword }
Inline style 을 제외한 모든 Style Property 와 Value, Keyword 는 중괄호 ({ }) 속에 들어 감.
- 1 개의 Property를 사용할 경우
{CSS Property : (사용값) value | keyword}
1 개의 Property를 사용할 경우 CSS Property와 사용값 사이를 colon(:) 으로 구분.
- 여러 개의 Property를 사용할 경우
{ CSS Property : (사용값) value | keyword ; CSS Property : (사용값) value | keyword ; ........ }
여러 개의 Property를 사용할 경우 CSS Property와 사용값 사이를 colon(:) 으로 구분하고 다음에 오는 CSS Property와 사용값 사이에는 semi-colon (;) 을 찍어서 구분해 가면서 연속적으로 필요한 만큼 나열
■ 주석
/* 주석 */
■ @charset Rule
문서에서 사용되는 문자세트(character set)을 지정
<style type="text/css">
@charset "utf-8"
</style>
■ 길이단위
- 상대 길이 단위(Relative length units)
em : 해당 글꼴의 'font-size'
ex : 해당 글꼴의 'x-height'
px : pixel. 화면 해상도에 대한 상대 크기
% : 자기가 속해 있는 상위 Tag의 크기 또는 상속받은 값에 대한 100분율 상대 단위)
- 절대 길이 단위
in : 인치(inch) - 1 inch = 2.54 centimeters.
cm : centimeters
mm : millimeters
pt : 점(point) - CSS2에서 사용되는 점은 1/72 인치와 같다.
pc : 피카(pica) - 1 피카(pica)는 12 점(point)들과 같다.
- 예
width: 50px;
margin-left: 2em;
■ !important (중요도)
!important 선언은 모든 style 규칙에 우선하며 inline style, id selector, class selector들로 같은 style 속성을 선언했더라도 그 값을 모두 무시하여 !important로 선언한 속성값을 적용시킨다.
- 형식
{속성 : 속성값 !important }
- 예
* {color : #000000 !important;}
■ inherit(상속)
인헤릿은 상위 요소에 속하는 스타일이 하위 요소에까지 이어지는 현상을 의미하며, border, margin, padding, float, position 등의 속성은 하위 요소에 상속되지 않는다.
- 예
<style type="text/css">
.top {background-color: white; font-style: italic;}
.sub-top {background-color: inherit; font-style: normal; }
<div class="top">
<p class="sub-top">테스트 ~~~</p>
</div>
'CSS' 카테고리의 다른 글
| CSS 배경 스타일 (0) | 2013.06.24 |
|---|---|
| CSS Box 스타일 (0) | 2013.06.23 |
| CSS Font 및 문단 모양 (0) | 2013.06.23 |
| CSS Selector (0) | 2013.06.23 |
| css selectors (0) | 2013.06.23 |