CSS (Cascading style Sheets)란?
HTML Tag를 이용하여 홈페이지를 만들기 위해서는 많은 태그들이 사용된다. 태그들을 많이 사용하다보면 복잡해진다. 또한, 통일성 있는 문서를 만들기 위해서 동일한 태그들을 계속적으로 기술하는것도 비효율적이다. 이러한 경우 매번 기술해야하는 태그들을 하나의 스타일로 정한 후 이를 HTML 문서에 적용하므로써 깔끔하게 문서를 작성할 수 있다.
CSS는 태그의 속성을 하나의 스타일로 설정하는 용도로 쓰이지만, 그림이나 레이어에 적용하여 웹 페이지를 동적으로 다이나믹하게 구성할 수 있도록 한다.
CSS로 가능한 작업
1. HTML 문서 내에 글꼴의 종류, 크기, 여백, 색 등을 지정합니다.
2. 글자의 정렬 방식을 결정하거나 글자에 그림자를 지정하는 등 다양한 효과를 줄 수 있다.
3. 박스에 다양한 효과를 줄 수 있다.
4. 사용자의 웹브라우저 환경에 관계없이 일정한 화면을 보여줄 수 있다.
CSS의 기본 형식
CSS는 두 부분으로 나뉜다. 스타일의 설정과 스타일의 적용부분이다. 아래 예제를 통하여 자세히 알아보자
selector는 스타일을 지정할 HTML Tag를 정의한다. 이 HTML Tag는 실제로 사용하고 Tag라야 한다. 예를 들면 table, tr, td는 테이블 관련 Tag 로써 CSS을 적용할 대상으로 적당하지만, k1, box, row 같은 것은 HTML Tag가아니므로 CSS 적용 대상으로 사용할 수 없다.
속성( property)
기본으로 설정된 스타일 중 변경하고자 하는 속성 글자의 크기나 글자의 색상 등이 바로 이 속성에 해당한다. 값을 지정하기 위해서는 콜론(:)을 기술한 후 값을 지정한다. 다음은 H1 태그의 글자색을 빨간색으로 지정하기 위한 예이다.
여러가지 속성을 한꺼번에 지정하기 - 1
태그에 여러가지 속성을 지정하고 싶을 때에는 각 속성들을 구분하기 위해 세미콜론(;)을 사용한다. 즉 속성과 값을 세미콜론(;)으로 구분하여 지정한다.
다음은 P Tag에 글꼴을 굴림체, 크기는 18pt, 색상은 빨간색으로 지정하는 CSS의 예제다
여러가지 속성을 한꺼번에 지정하기 - 2
아래와 같이 여러가지 속성을 한꺼번에 지정하여 사용할 수 있다.
주의사항
다음과 같이 속성에 값을 지정할 때에 이중 따옴표(")로 둘러싸면 이를 인식하지 못한다.
다른 Tag에 같은 속성 지정하기
각각 다른 Tag에 같은 속성을 한꺼번에 지정할 수 있다. 아래 CSS는 HTML Tag 중 p, td, body Tag를 만나면 같은 속성이 적용된다.
예제 소스
실행결과
이번 강좌에서는 CSS 기본에 대하여 알아보았다. 다음 시간에는 홈페이지에 CSS를 지정하여 적용하는 법을 알아보자
HTML Tag를 이용하여 홈페이지를 만들기 위해서는 많은 태그들이 사용된다. 태그들을 많이 사용하다보면 복잡해진다. 또한, 통일성 있는 문서를 만들기 위해서 동일한 태그들을 계속적으로 기술하는것도 비효율적이다. 이러한 경우 매번 기술해야하는 태그들을 하나의 스타일로 정한 후 이를 HTML 문서에 적용하므로써 깔끔하게 문서를 작성할 수 있다.
CSS는 태그의 속성을 하나의 스타일로 설정하는 용도로 쓰이지만, 그림이나 레이어에 적용하여 웹 페이지를 동적으로 다이나믹하게 구성할 수 있도록 한다.
CSS로 가능한 작업
1. HTML 문서 내에 글꼴의 종류, 크기, 여백, 색 등을 지정합니다.
2. 글자의 정렬 방식을 결정하거나 글자에 그림자를 지정하는 등 다양한 효과를 줄 수 있다.
3. 박스에 다양한 효과를 줄 수 있다.
4. 사용자의 웹브라우저 환경에 관계없이 일정한 화면을 보여줄 수 있다.
CSS의 기본 형식
CSS는 두 부분으로 나뉜다. 스타일의 설정과 스타일의 적용부분이다. 아래 예제를 통하여 자세히 알아보자
selector { 속성 : 값}
selector는 스타일을 지정할 HTML Tag를 정의한다. 이 HTML Tag는 실제로 사용하고 Tag라야 한다. 예를 들면 table, tr, td는 테이블 관련 Tag 로써 CSS을 적용할 대상으로 적당하지만, k1, box, row 같은 것은 HTML Tag가아니므로 CSS 적용 대상으로 사용할 수 없다.
속성( property)
기본으로 설정된 스타일 중 변경하고자 하는 속성 글자의 크기나 글자의 색상 등이 바로 이 속성에 해당한다. 값을 지정하기 위해서는 콜론(:)을 기술한 후 값을 지정한다. 다음은 H1 태그의 글자색을 빨간색으로 지정하기 위한 예이다.
H1 { color : red }
여러가지 속성을 한꺼번에 지정하기 - 1
태그에 여러가지 속성을 지정하고 싶을 때에는 각 속성들을 구분하기 위해 세미콜론(;)을 사용한다. 즉 속성과 값을 세미콜론(;)으로 구분하여 지정한다.
selector {
속성1 : 값 ;
속성2 : 값 ;
속성3 : 값 ;
:
속성4 : 값 ;
}
속성1 : 값 ;
속성2 : 값 ;
속성3 : 값 ;
:
속성4 : 값 ;
}
다음은 P Tag에 글꼴을 굴림체, 크기는 18pt, 색상은 빨간색으로 지정하는 CSS의 예제다
P {
font-size : 18pt;
font-family : 굴림;
color : red;
}
font-size : 18pt;
font-family : 굴림;
color : red;
}
여러가지 속성을 한꺼번에 지정하기 - 2
아래와 같이 여러가지 속성을 한꺼번에 지정하여 사용할 수 있다.
P {font-size : 18pt;font-family : 굴림;color : red;}
주의사항
다음과 같이 속성에 값을 지정할 때에 이중 따옴표(")로 둘러싸면 이를 인식하지 못한다.
P {
font-size : "18pt";
font-family : "굴림";
color : "red";
}
font-size : "18pt";
font-family : "굴림";
color : "red";
}
다른 Tag에 같은 속성 지정하기
각각 다른 Tag에 같은 속성을 한꺼번에 지정할 수 있다. 아래 CSS는 HTML Tag 중 p, td, body Tag를 만나면 같은 속성이 적용된다.
p, td, body {
font-size : 18pt;
font-family : 굴림;
color : red;
}
font-size : 18pt;
font-family : 굴림;
color : red;
}
예제 소스
<style>
p, td
{
font-size : 15pt;
font-family : 굴림;
color : red;
}
</style>
<body>
<p>P Tag에 적용됩니다</p><br>
여기는 적용되는 Tag가 없습니다<br>
<table width="300" border="1">
<tr>
<td>테이블에 적용됩니다.</td>
</tr>
</table>
</body>이번 강좌에서는 CSS 기본에 대하여 알아보았다. 다음 시간에는 홈페이지에 CSS를 지정하여 적용하는 법을 알아보자
'Tip & Tech > CSS & HTML' 카테고리의 다른 글
| 구글 캘린더를 블로그나 웹페이지에 끼워 넣기 (0) | 2011.06.24 |
|---|---|
| 홈페이지를 위한 CSS - 홈페이지에 적용하기 (0) | 2011.04.10 |
| wysiwyg web editor Ckeditor 설치 및 설정 (13) | 2011.04.05 |
| 마우스오버 버튼 만들기 (0) | 2010.06.24 |
| 아이폰 웹어플리케이션 개발시 꼭 알아야 할 것 (0) | 2010.04.17 |
댓글