[CSS] 정의와 3가지 적용방법
공부방/CSS / 2009. 9. 4. 10:04
| CSS [cascading style sheets] |
| 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다. 간단히 스타일시트라고도 한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다. 각기 다른 사용자 환경에서 동일한 형태의 문서를 제공한다는 이점도 있다. CSS로 만들어진 문서는 사용자들의 브라우저 환경에 따라 홈페이지가 다르게 나타나는 일이 없고 어느 환경에서나 제작자가 의도한대로 그 효과가 전달된다. [네이버 백과사전] |
스타일 시트를 웹 문서에 적용하는 방법에는 다음과 같은 3가지가 있다.
첫째, 인라인(Inline) 방식. 필요할때 즉흥적으로 사용.
<HEAD>~</HEAD>에 스타일에 대한 사전 정의없이 즉흥적으로 필요할 때 마다 <BODY>~</BODY>사이의 특정 태그 에 스타일시트 코드를 삽입하는 방법.
| 인라인(Inline) 방식 적용 예 | 결과화면 | |
| <TABLE BORDER="1"> <TR> </TR> </TABLE> |
|
둘째, 임베디드(Embeded) 방식. 현재 문서에서만 사용.
<HEAD>~</HEAD>사이에 특정 HTML태그(BODY, TABLE, TD, INPUT, SELECT.. 따위)에 대하여 사용자가 원하는 형태의 스타일로 태그 재 정의 해 놓으면 현재 문서의 본문 HTML태그는 사용자의 태그 재 정의에 따르게 된다. 만약 TD에 대하여 재 정의 하였다면 현재 문서의 모든 TD는 사용자가 정의한 형태 대로 나타난다. 이렇게 TD를 재 정의 하는 방법은 흔히 문서 내 모든 서체의 크기를 한가지 크기로 통일하기 위하여 자주 사용되는 방법으로서 대부분의 문자들이 TD태그 안에 포함되어 있다는 점을 이용한 것이다.
| 태그 재 정의 임베디드(Embede) 방식 | 결과화면 | |
| <HTML> </HTML> |
|
| CLASS 정의 임베디드(Embede) 방식 | 결과화면 | |
| <HTML> </HTML> |
|
만약 한가지 대상에 서로 충돌하는 태그 재 정의 스타일과 CLASS 정의 스타일이 동시에 적용되었다면 CLASS 방식의 스타일시트가 우선 적용될 것이다.
셋째, 링크(Link) 방식. 여러개의 문서에서 사용.
스타일시트 정의 파일(***.css)을 별도로 만들어 놓고 모든 문서에서 ***.css파일을 불러오기 하여 사용하는 방식으로 웹 브라우저는 문서가 로딩될 때 링크된 ***.css 파일을 사용자의 샘틀에 함께 내려받기 한다. 태그 재 정의 방식과 CLASS 방식으로 스타일을 사전 정의 해 놓을 수 있다는 것은 임베디드(Embeded)방식과 동일하다.
| style.css 파일의 소스 코드 | |||
| td {font-size: 12px;} /* td 태그를 재 정의 하였음 */ .title {font-size: 30px;} /* title 이라는 이름으로 CLASS 를 정의 하였음 */ | |||
| 링크(Link) 방식으로 스타일을 적용한 예 | 결과화면 | ||
| <HTML> </HTML> |
| ||
style.css파일에는 TD에 대한 태그 재 정의와 title이라는 CLASS가 사전 정의되어 있다. 이렇게 스타일시트 정의로만 이루어진 CSS문서는 HTML문서와 달라서 웹 브라우저가 출력하지 않고 HTML 문서를 장식하는 용도로만 사용된다. 또한 CSS문서는 오직 스타일시트에 대한 사전 정의만 있을 뿐 다른 태그나 명령어는 필요치 않고 주석이 필요한 경우 <!--...--> 대신 /*...*/ 으로 주석처리 할 수 있다.
CSS문서를 HTML문서에 링크하여 적용하는 방법은 예제와 같이 문서의 <HEAD>~</HEAD>에 <LINK HREF="style.css" REL="stylesheet" TYPE="text/css">라고 적어주어 style.css파일을 현재의 문서에 링크한 다음 본문인 <BODY>~</BODY>에서 필요한 부분에 CLASS를 적용 하기만 하면 된다. CSS문서의 파일명은 사용자가 임의로 정하는 것으로 숫자와 영문만 사용 가능하며 대소문자를 구분한다.
만약 한가지 대상에 서로 충돌하는 링크(Link) 스타일과 임베디드(Embede) 스타일이 동시에 적용되었다면 임베디드(Embede) 방식의 스타일시트가 우선 적용될 것이다.
출처 : http://bbs.freecount.net/bbs/bbs.php?m=view&bid=study_3&id=9&page=2&cate=&q
'공부방 > CSS' 카테고리의 다른 글
| [CSS] 배경이미지에 관련된 속성 (0) | 2009.09.04 |
|---|---|
| [CSS] 각종 속성 (0) | 2009.09.04 |
| [CSS] 테두리 스타일 (0) | 2009.09.04 |
| [CSS] Style을 이용해서 input 한글/영어 제한 (0) | 2009.09.04 |
| [CSS] 글에 마우스 올리면 점선이.. (0) | 2009.09.04 |