CSS란 무엇인가?
CSS 는 Cascading Style Sheets 의 약자로 일반적으로 CSS 내지는 스타일 시트 라고 불리어 집니다.
이것이 하는 주된 기능(?)은 문서의 글자모양, 크기, 링크형식 결정, 행간 길이 조절, 여러종류의 문자종류 설정, 마진값 조절, 문자에 간단한 효과주기 등입니다.
1~2 년 전만 해도 쓰는 사람도 드물고 -_-; 넷스케이프에서는 개무시당하던(_-_), 그리고 어떤 곳에서는 '최신의 기술' 운운으로 불리어졌던 것이었으나 지금은 왠만한데서는 다 쓰이고 있고 넷스케이프에서도 정신차리고 지원해주기 시작하고 있습니다.
(물론 아직까지 완벽히 지원되지는 않습니다.)
찾아볼래야 단점은 찾기 어렵고 ...
장점을 대라면 백과사전을 집필해도 될 정도이기 때문에...
간단하게 장점을 설명해 드리자면 CSS 의 사용으로 링크를 자신의 취향에 맞게 다양하게 변경시킬 수 있고 태그마다 폰트 사이즈는 어쩌구, 링크 형식은 어쩌구 하는 서식을 적어줄 필요도 없어집니다.
또한 많은 페이지의 제작시 또는 각 섹션마다 디자인이 다른 페이지의 작성시 각각에 맞게 일관되게 웹페이지들을 만들수 있다는 장점이 있습니다.
그럼 어떻게 사용하는지 알아볼까요?
CSS 의 자세한 설정은 다음에 배우도록 하고 우선은 어떻게 사용하는지부터 알아보도록 하겠습니다.
크게 2가지 방법으로 많이들 쓰이고 있는데
첫번째는 head 와 head 사이에 직접 스타일 시트를 적어주는 것 입니다.
<head>
<STYLE TYPE='text/css'>
<!--
.bad {color:yellow; font-weight:bold;}
-->
</STYLE>
</head>
위에서 오렌지색으로 표시된 부분이 Class 이름 이라고 합니다.
점 하나 찍고 이름을 쓴 뒤 {,} 안에다가 원하는 형식을 쓰시면 됩니다.
위에 처럼 적어주신후 일반적인 문자는
'엔쥔 바보 ㅋㅋㅋ'
이렇게 나오지는 CSS 를 적용시키면
'엔쥔 바보 ㅋㅋㅋ'
처럼 나오게 됩니다.
CSS 에서는 언제나 쓰실때 헤드에서 정의한 class 이름을 ' class ' 란 이름으로 불러오시면 됩니다.
위에처럼 만드실려면
<font class="bad">'엔쥔 바보 ㅋㅋㅋ'</font>
라고 적으시면 되는겁니다.
( ! 클래스를 적용시키실땐 앞에 점 찍으면 안됩니다~)
대강 이해가 가시나요?
Style 안에다가 클래스 이름을 지정하시고 원하는 스타일들을 쭉 적어 놓으신뒤 원하는 부분에다가 쓰실땐 class=" " 를 사용하여 적용 시키시기만 하면 됩니다.
그런데 이 방법은 각각의 페이지의 헤드마다 모두 이 스타일 시트를 적어줘야 한다는 점이 단점입니다.
그래서 조금이라도, 한 글자라도 더 적게 적기위해 등장한 방법이 CSS 파일을 만들어 두고 불러오는 방법입니다.
사용법은 별반 다를게 없습니다.
원하는 CSS 스타일을 죽 적은다음 css 라는 확장자를 가진 파일로 만듭니다.
뭐 ngine.css 이런 식으로요..이름이야 뭘 해도 상관없습니다. 확장자만 css 면 됩니다.
그리고는 헤드와 헤드 사이에
<link rel="StyleSheet" href="/파일이 위치한 경로/ngine.css" type="text/css">
라고만 적어주시면 됩니다. 그러면 위와 똑같이 쓸수 있습니다.
이렇게 해두면 ngine.css 파일 하나만 변형하셔도 연결된 모든 페이지에서 같이 변형된 효과를 보실수 있고 일일이 스타일 시트 작성할 필요없이 저 부분만 복사하셔서 문서마다 붙이면 되니 훨~ 간편해집니다.
이것이 기본적인 CSS 파일의 사용법입니다.
보통은 2가지 방법중 밑에것이 조금더 자주 쓰입니다만 제 경우는 2가지를 병행하여;; 쓰고 있습니다.
뭐 이 부분은 대강 이렇게 돌아가는구나~ 라고만 아시면 됩니다.
이것이 하는 주된 기능(?)은 문서의 글자모양, 크기, 링크형식 결정, 행간 길이 조절, 여러종류의 문자종류 설정, 마진값 조절, 문자에 간단한 효과주기 등입니다.
1~2 년 전만 해도 쓰는 사람도 드물고 -_-; 넷스케이프에서는 개무시당하던(_-_), 그리고 어떤 곳에서는 '최신의 기술' 운운으로 불리어졌던 것이었으나 지금은 왠만한데서는 다 쓰이고 있고 넷스케이프에서도 정신차리고 지원해주기 시작하고 있습니다.
(물론 아직까지 완벽히 지원되지는 않습니다.)
찾아볼래야 단점은 찾기 어렵고 ...
장점을 대라면 백과사전을 집필해도 될 정도이기 때문에...
간단하게 장점을 설명해 드리자면 CSS 의 사용으로 링크를 자신의 취향에 맞게 다양하게 변경시킬 수 있고 태그마다 폰트 사이즈는 어쩌구, 링크 형식은 어쩌구 하는 서식을 적어줄 필요도 없어집니다.
또한 많은 페이지의 제작시 또는 각 섹션마다 디자인이 다른 페이지의 작성시 각각에 맞게 일관되게 웹페이지들을 만들수 있다는 장점이 있습니다.
그럼 어떻게 사용하는지 알아볼까요?
CSS 의 자세한 설정은 다음에 배우도록 하고 우선은 어떻게 사용하는지부터 알아보도록 하겠습니다.
크게 2가지 방법으로 많이들 쓰이고 있는데
첫번째는 head 와 head 사이에 직접 스타일 시트를 적어주는 것 입니다.
<head>
<STYLE TYPE='text/css'>
<!--
.bad {color:yellow; font-weight:bold;}
-->
</STYLE>
</head>
위에서 오렌지색으로 표시된 부분이 Class 이름 이라고 합니다.
점 하나 찍고 이름을 쓴 뒤 {,} 안에다가 원하는 형식을 쓰시면 됩니다.
위에 처럼 적어주신후 일반적인 문자는
'엔쥔 바보 ㅋㅋㅋ'
이렇게 나오지는 CSS 를 적용시키면
'엔쥔 바보 ㅋㅋㅋ'
처럼 나오게 됩니다.
CSS 에서는 언제나 쓰실때 헤드에서 정의한 class 이름을 ' class ' 란 이름으로 불러오시면 됩니다.
위에처럼 만드실려면
<font class="bad">'엔쥔 바보 ㅋㅋㅋ'</font>
라고 적으시면 되는겁니다.
( ! 클래스를 적용시키실땐 앞에 점 찍으면 안됩니다~)
대강 이해가 가시나요?
Style 안에다가 클래스 이름을 지정하시고 원하는 스타일들을 쭉 적어 놓으신뒤 원하는 부분에다가 쓰실땐 class=" " 를 사용하여 적용 시키시기만 하면 됩니다.
그런데 이 방법은 각각의 페이지의 헤드마다 모두 이 스타일 시트를 적어줘야 한다는 점이 단점입니다.
그래서 조금이라도, 한 글자라도 더 적게 적기위해 등장한 방법이 CSS 파일을 만들어 두고 불러오는 방법입니다.
사용법은 별반 다를게 없습니다.
원하는 CSS 스타일을 죽 적은다음 css 라는 확장자를 가진 파일로 만듭니다.
뭐 ngine.css 이런 식으로요..이름이야 뭘 해도 상관없습니다. 확장자만 css 면 됩니다.
그리고는 헤드와 헤드 사이에
<link rel="StyleSheet" href="/파일이 위치한 경로/ngine.css" type="text/css">
라고만 적어주시면 됩니다. 그러면 위와 똑같이 쓸수 있습니다.
이렇게 해두면 ngine.css 파일 하나만 변형하셔도 연결된 모든 페이지에서 같이 변형된 효과를 보실수 있고 일일이 스타일 시트 작성할 필요없이 저 부분만 복사하셔서 문서마다 붙이면 되니 훨~ 간편해집니다.
이것이 기본적인 CSS 파일의 사용법입니다.
보통은 2가지 방법중 밑에것이 조금더 자주 쓰입니다만 제 경우는 2가지를 병행하여;; 쓰고 있습니다.
뭐 이 부분은 대강 이렇게 돌아가는구나~ 라고만 아시면 됩니다.
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
