웹마당넷 |스타일 시트의 정의 + 3가지 형태의 적용 방법

CSS3

제 목

스타일 시트의 정의 + 3가지 형태의 적용 방법

작성자

오렌지

등록일

2007-12-10 19:40:26

조회수

5,927

CSS [cascading style sheets]

기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다. 간단히 스타일시트라고도 한다.

HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.

따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.

각기 다른 사용자 환경에서 동일한 형태의 문서를 제공한다는 이점도 있다. CSS로 만들어진 문서는 사용자들의 브라우저 환경에 따라 홈페이지가 다르게 나타나는 일이 없고 어느 환경에서나 제작자가 의도한대로 그 효과가 전달된다. [네이버 백과사전]

스타일 시트를 웹 문서에 적용하는 방법에는 다음과 같은 3가지가 있다.

첫째, 인라인(Inline) 방식. 필요할때 즉흥적으로 사용.
<HEAD>~</HEAD>에 스타일에 대한 사전 정의없이 즉흥적으로 필요할 때 마다 <BODY>~</BODY>사이의 특정 태그 에 스타일시트 코드를 삽입하는 방법.

인라인(Inline) 방식 적용 예

결과화면

<TABLE BORDER="1">
<TR>
<TD STYLE="font-size:30px">나라디자인</TD>
</TR>
</TABLE>

나라디자인

드림위버 MX 2004 를 사용하면 소스보기 창에서 코드 자동완성 기능을 사용할 수 있으므로 스타일시트의 모든 속성을 외우고 있을 필요는 없다. 소스보기 창에서 TD따위의 기존 HTML태그 안에 커서를 놓은 다음 Space 키를 눌러 한칸 띄우기 하게 되면 해당 태그에 적용할 수 있는 HTML명령어 또는 CSS명령어가 나타나기 때문에 사용자는 ↓↑키 또는 마우스를 이용하여 원하는 속성과 값을 선택하기만 하면 된다. 즉, HTML태그의 속성 또는 CSS의 속성만 이해하고 있으면 된다.

둘째, 임베디드(Embeded) 방식. 현재 문서에서만 사용.
<HEAD>~</HEAD>사이에 특정 HTML태그(BODY, TABLE, TD, INPUT, SELECT.. 따위)에 대하여 사용자가 원하는 형태의 스타일로 태그 재 정의 해 놓으면 현재 문서의 본문 HTML태그는 사용자의 태그 재 정의에 따르게 된다. 만약 TD에 대하여 재 정의 하였다면 현재 문서의 모든 TD는 사용자가 정의한 형태 대로 나타난다. 이렇게 TD를 재 정의 하는 방법은 흔히 문서 내 모든 서체의 크기를 한가지 크기로 통일하기 위하여 자주 사용되는 방법으로서 대부분의 문자들이 TD태그 안에 포함되어 있다는 점을 이용한 것이다.

태그 재 정의 임베디드(Embede) 방식

결과화면

<HTML>

<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>

<BODY>
<TABLE BORDER="1">
<TR>
<TD>나라디자인</TD>
</TR>
</TABLE>
</BODY>

</HTML>

나라디자인

단, 이렇게 TD태그를 재 정의한 경우 현재 문서의 모든 TD태그에 대하여 영향을 미치게 되므로 예외를 허용할 수 있는 방법을 사용할 수 있다. 이것은 TD와 같은 HTML 태그를 재 정의하는 대신 CLASS(우리말로 굳이 번역하자면 집합)라는 형태의 스타일시트를 만들어 놓고 사용자가 지정하는 대상에 대하여만 스타일시트를 적용해 주는 것이다. 사용자는 문서의 <HEAD>~</HEAD>에 CLASS 라는 것을 정의해 놓고 본문의 특정 태그안에 CLASS="***" 이라는 코드를 삽입하여 문서 전체에 스타일이 적용되는 것을 방지하고 필요한 곳에만 스타일을 적용할 수 있게 된다.

CLASS 정의 임베디드(Embede) 방식

결과화면

<HTML>

<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>

<BODY>
<TABLE BORDER="1">
<TR>
<TD CLASS="title">나라디자인</TD>
</TR>
</TABLE>
</BODY>

</HTML>

나라디자인

<HEAD>~</HEAD>에서 정의내린 title 이라는 CLASS 이름은 사용자 임의로 만들어내는 것으로서 영문, 숫자 만 사용 가능하며 대소문자를 구분하지 않고 띄어쓰기 할 수 없으며 TD, TABLE 따위의 HTML 태그와 동일한 이름은 사용할 수 없다. <HEAD>~</HEAD>에서 CLASS를 정의하는 방법은 CLASS이름 앞에 점을 찍어 주는 것으로서 HTML 태그 재 정의 방식과 구분되도록 한다.

만약 한가지 대상에 서로 충돌하는 태그 재 정의 스타일과 CLASS 정의 스타일이 동시에 적용되었다면 CLASS 방식의 스타일시트가 우선 적용될 것이다.

셋째, 링크(Link) 방식. 여러개의 문서에서 사용.
스타일시트 정의 파일(***.css)을 별도로 만들어 놓고 모든 문서에서 ***.css파일을 불러오기 하여 사용하는 방식으로 웹 브라우저는 문서가 로딩될 때 링크된 ***.css 파일을 사용자의 샘틀에 함께 내려받기 한다. 태그 재 정의 방식과 CLASS 방식으로 스타일을 사전 정의 해 놓을 수 있다는 것은 임베디드(Embeded)방식과 동일하다.

style.css 파일의 소스 코드

td {font-size: 12px;} /* td 태그를 재 정의 하였음 */
.title {font-size: 30px;} /* title 이라는 이름으로 CLASS 를 정의 하였음 */

링크(Link) 방식으로 스타일을 적용한 예

결과화면

제목

내용

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

※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.

번호

제목

글쓴이