웹마스터 팁

CSS 의 개요



Cascading Style Sheet (CSS), 즉 우리가 일반적으로 스타일시트라고 부르는 CSS는 HTML, 자바스크립트와 함께 사용되어 다이나믹 HTML (DHTML)을 구현하는 중요한 요소입니다.

기존의 HTML 은 문서의 구조나 레이아웃 보다는 단순한 정보의 전달에만 치중하였기 때문에 웹 문서를 워드와 같은 구조적 문서로 꾸미기에는 한계가 있었습니다.

최근의 대부분의 웹 문서에서는 좀더 효율적이고 구조적인 웹 문서를 만들기 위해 개발된 스타일 시트를 사용합니다.

이막스(EMACA)브라우저, 아레나(ARENA)등의 W3C 표준 브라우저에서만 볼 수 있었던 스타일 시트가 본격적으로 일반 사용자들에게 알려지게 된 것은 96년 중반 마이크로소프트사의 웹브라우저 "인터넷 익스플로러3.0"이 출시되면서부터입니다. 그 이후 계속해서 안정적인 규격을 만들어내면서 넷스케이프사도 넷스케이프 게뮤니케이터 4.0(이하 커뮤니케이터)에서 스타일 시트를 지원하기에 이르렀습니다.

기존의 브라우저는 사용자 환경에 많은 영향을 받았습니다. 하나의 텍스트 문서라도 사용자 브라우저의 기본 폰트 종류와 폰트 크기에 따라서 여러 가지 형태로 나타날 수 밖에 없었지만 사용자 환경에 영향을 받지 않고 HTML 파일을 화면에 보여줄 수 있는 '스타일 시트'를 이용하면 프로그래밍을 몰라도 간단한 HTML차원에서 응용할 수 있게 됩니다.

CSS에 대한 자세한 사항은 웹표준을 주관하고 있는 W3C (http://www.w3.org) 홈페이지를 참고 하세요


CSS 의 기본적 적용형태



스타일 시트의 선언은 의외로 간단합니다. 우리가 지정하고 싶은 속성과 그 속성의 값만 지정해 주기 때문이죠. 좀더 깊이 들어가면 다양하게 지정하는 방법이 있지만 차분히 하나하나 들어가 보도록 하겠습니다. 우선 스타일 선언은 아래와 같이 합니다 ① <STYLE type="text/css">② <!--SELECTOR {PROPERTY:VALUE}② -->① </STYLE>


① <STYLE type="text/css"></STYLE> : 스타일의 형식을 css 로 한다는 뜻입니다. 최근의 브라우저들에서는 그냥 <STYLE>~</STYLE> 처럼 표기할 수도 있습니다② <!-- --> : 스타일 시트를 지원하지 않는 브라우저에서는 스타일을 불러오지 않습니다. 이것 역시 생략 해도 무방합니다

자스코의 스타일 시트

속성과 값은 (:) 으로 구분 해 주며, 여러가지 다양한 속성을 지정하고 싶을때는 (;)으로 구별하여 속성을 나열해 주면 간단하게 해결됩니다.

적용예
H1 {font -family:Arial;Color:red}


참고로 여기에서 줄수 있는 속성들로써는 font, text, image, color 등등이 있습니다.

넷스케이프와 익스플로러는 스타일 시트에 있어서 서로 다른 표준을 따르고 있기 때문에 같은 스타일 시트라 해도 화면에서의 Look & Feel이 조금씩 다릅니다.

스타일 시트를 선언하는 방법에는 3가지가 있습니다. Linking 스타일 시트 방법과 Embedding 스타일 시트법, Inline스타일 시트법이 그것입니다. 그 중 Linking 스타일 시트법에 대해서 먼저 알아 보겠습니다.

Linking 스타일 시트

이 방법은 스타일 선언을 한후 확장자가 css인 화일로 저장한 후 HTML화일에서 불러오는 방법입니다.우선 스타일 시트 화일을 작성한후 samp.css로 저장을 해보도록 하죠.

스타일시트 파일 (samp.css)

H1{font-family:Arial;font-size:40pt;Color:red}
P{font-size:12pt;line-height:20pt}



HTML 파일 (test.html)

<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="samp.css">
</HEAD>
<BODY>
<H1>스타일 시트 연습</H1>
<P>
P 태그에서 글자의 모양이 어떻게 나올까요? Linking 스타일시트를 사용하면 웹사이트 내 지정된 모든 문서와 태그에서 동일한 효과를 적용할 수 있어서 좋습니다
</P>
</BOBY></HTML>


예제보기

예제를 보면 굳이 별도로 글자크기나 색깔지정없이 H1태그 하나로 모든게 해결되는 모습을 보게 됩니다. 즉, 이 문서내에서 사용되는 모든 <H1> 태그와 <P> 태그에서는 동일한 효과를 볼 수 있습니다.

Embedding 스타일 시트

스타일 시트를 선언하는 방법 중 두번째 Embedding 스타일 시트법에 대해서 알아보겠습니다

이 방법은 Head 태그 안에서 style 선언을 해주어서 사용하는 방법입니다. 선언하는 방법은 아래와 같습니다

HTML 파일 (test_2.html)

사용방법
<HEAD>
<STYLE TYPE="text/css">
TAG1{PROPERTY:VALUE}
TAG2{PROPERTY:VALUE}
......
TAGn{PROPERTY:VALUE}
</STYLE>
</HEAD>

<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1{font-family:Arial;font-size:40pt;
Color:red}
P{font-size:12pt;line-height:20pt}
</STYLE>
</HEAD>
<BODY>
<H1>스타일 시트 연습</H1>
<P>
P 태그에서 글자의 모양이 어떻게 나올까요? Linking 스타일시트를 사용하면 하나의 문서안에서 지정된 모든 태그에서 동일한 효과를 적용할 수 있어서 좋습니다
</P>
</BOBY></HTML>


예제보기


Inline 스타일 시트

마지막 방법으로 Inline 스타일 시트 방법입니다. 이 방법은 실제 홈페이지를 만드는 와중에 속성을 지정하고 싶을때 사용하는 방법이지만 권하고 싶지는 않습니다

사용법
<TAG STYLE="PROPERTY:VALUE">

HTML 파일 (test_3.html)

<HTML>
<BODY>
<H1 STYLE="font-family:Arial;font-size:40pt;Color:red">
오늘은 날씨가 좋습니다</H1>
<P STYLE= "font-size:12pt;line-height:20pt">
Inline 스타일 시트는 한 문서내에서 특정 태그의 한군데에만 원하는 효과를 보여주고자 할 때 사용합니다</P>
</BODY></HTML>


예제보기

한가지 주의할 점은, Inline은 <BLOCKQUOTE>또는 기타 몇몇 태그 외에는 상당히 작은 부분에만 영향을 미치기 때문에 지나치게 많이 사용하는 것은 좋지 않습니다. 나중에 변경해야 할 때 수작업을 많이 해야하기 때문입니다.
적당히 조금만 사용하되, 자주 사용해야 할 때는 스타일 시트를 링크하거나 스타일 시트 파일 자체를 HTML 파일 내에 삽입하는 방법을 사용하도록 하는 것이 좋습니다.

※ 스타일시트가 중복되는 경우에서의 우선순위

가장 나중에 불러들인 스타일 시트가 우선적용됩니다
Inline 스타일 > ID 스타일 > class 스타일 > HEAD에서 지정된 스타일
지금까지의 내용을 정리하면 다음과 같습니다

[방법 1]
Linking Style Sheet

<LINK REL=StyleSheet HREF="samp.css" TYPE="text/css">

또한 아래와 같은 방법으로 불러올 수도 있습니다

<STYLE TYPE="text/css"><!-- @import url(http://www.user.com/samp.css);--></STYLE>
전체 웹사이트내에서 모든 문서에 동일한 레이아웃을 지정하려면 이와 같이 링크 스타일 시트를 사용합니다



[방법 2]
Embeding Style Sheet


<style>H1 {font-size:24pt; color:blue}</style>
HTML 문서의 HEAD 부분에 넣는 방법.

현재 문서에서 H1 태그가 사용된 모든 텍스트의 글자 크기를 24pt, 색상을 파란색으로 지정합니다

이렇게 하면 현재 스타일이 정의된 문서내에서 <H1></H1> 태그를 사용한 모든 문자의 크기와 색상이 스타일시트에서 정의한 대로 지정 됩니다

이 경우 여러문서에서 동일한 스타일을 적용시키기 위해서는 스타일시트를 style.css 파일 형태(이름은 마음대로 정하면 되지만 확장명은 반드시 css 로 지정해야 합니다)로 저장하여 두었다가 외부에서 불러오는 방법(Linking Style Sheet)을 많이 사용합니다.



[방법 3]
Inline Style Sheet

<H1 style="font-size:24pt;color:blue">안녕하세요</H1>
본문의 특정 텍스트에만 스타일을 적용 합니다

스타일을 적용하지 않은 다른 <H1>태그에는 색상과 크기가 지정되지 않습니다


제목 글쓴이 날짜
고도몰과 xe 회원 연동하는 키 포인트 410contents 2014.09.03
애드온 개발중에 이상한 버그가 생길경우 [2] 銀童 2014.08.26
div 세로 중앙 정렬팁 Ansi™ 2014.09.01
카카오톡으로 보내기(깔끔한 뷰) [4] seyriz 2014.08.11
socialXE 에서 로그인시 소셜로그인과 XE 로그인 동시 구현하기 file 큐우우 2014.08.31
XE에 페이스북 소셜 댓글 연동하는 방법 (페이스북 소셜댓글 달기) 기톨닷컴 2014.08.30
카메론 플러그인 에드온이 컨텐츠(본문)을 가릴때 팁 file oscarmike 2014.08.30
게시판의 오늘 올라온 새글의 갯수를 알아내는 방법 [8] garnecia 2014.08.22
캡챠(captcha)가 안 뜰 때 Double'U' 2014.08.29
XE 업데이트 방법 - 제1편 (0.x.x / 1.0.x / 1.1.x / 1.2.x 에서 1.2.4 버전으로 업그레이드) [38] file Gekkou 2009.11.19
XE를 앱으로, 티타늄 및 폰갭(Cordova) 사용기 [1] AJKJ 2014.08.28
익명게시판에서 관리자가 글 수정시 글의 권한이 넘어가지 않도록 하기. [5] 소시덕분에힘받아요 2014.06.11
홈페이지 제작 시, 개인정보관련/회원가입약관 처리에 대해서 [1] 양파F 2014.08.23
관리자 게시판 목록에서 브라우저 제목 클릭시 새창으로 뜨도록 수정 [2] sejin7940 2014.08.26
관리자페이지의 '서버정보출력'에 '절대경로' 가 출력되게 하는 방법 [3] sejin7940 2014.08.26
XE 알림센터 Lite 사용시에 쪽지나 호출에 대해서만 알림음을 적용하기 [17] SeungXE 2014.07.06
사용자 정의를 활용하여 폼 형식으로 개발하는 무식한 방법(2) [5] Reminisce 2014.08.22
사용자 정의를 활용하여 폼 형식으로 개발하는 무식한 방법(1) [6] Reminisce 2014.08.22
CafeXE (homepage 모듈) 메뉴노출 권한오류 수정안. Xiso 2014.08.22
사이트 디자인 설정에서 레이아웃 저장이 안될시 고치는 방법 [1] LoteM대한천자 2014.07.28