본문 바로가기
Not Using/Java script/HTML/CSS

CSS

longer 2011. 11. 15. 13:20
HTML의 단점을 보완하기 위해 스타일 시트 즉, CSS(Cascading Style Sheets)를 사용한다.

다양한 기능의 확장
통일된 문서양식제공-각태그마다 속성을 일일이 지정해줬던 HTML과 달리 CSS를 사용하면 한번의 속성 정의로 여러 문서에                               동시에 다양하게 적용 할 수 있다. 즉, 문서의 형식이 모듈화된다.
사용자환경과 상관없는 독립된 문서 제작 가능 - 현재 많은 종류의 브라우저가 있다. 이에따라 html문서의 결과물이 다르게                                                  표시될 수 있는데 css를 사용하므로써 이를 방지할 수 있다.

문서형식의 다양화 - 간단한html사용법과 추가적인 css사용으로 더욱 멋진 웹페이지 만들 수 있다.
로딩시간단축 - 통일된 문서 양식을 제공하므로써 브라우저가 읽어야하는 문자의 수가적으므로 로딩시간이 단축된다.

<STYLE TYPE="text/css">
<!--H1{FONT-SIZE:30pt;COLOR:blue} -->
</STYLE>
 
<BODY>
<H1>CSS사용하기</H1>
</BODY> 

웹페이지에 전체적으로 사용할 style이므로 body밖에 선언해주고 css정의의 기본형식은 {속성:값;속성:값;속성:값}이다. 



임베디드 방식
>말그대로 HTML문서에 CSS를 삽입하는 방식로 <HEAD>태그안에 <STYLE>태그를 사용하여 정의하는 것이다.

링크방식
>HTML문서와는 별도로 스타일만 설정한 CSS파일을 만들어 사용하는 방법이다.
CSS만을 사용하는 페이지는 확장자를 CSS로 하며 *.CSS를 따로 만들고 <HEAD>태그 내에 해당 CSS파일을 링크시킨다.
CSS파일을 링크시킬 때는 스타일시트에 링크하고 있는 것을 나타내는 REL속성과 CSS의 경로를 입력하는 HREF속성, 그리고 스타일 시트의 종류를 나타내는 TYPE속성을 사용한다.

사실 스타일 시트를 정의하는 것은 CSS이외에도 여러가지가 있다. 하지만 현재는 CSS만을 다루므로 REL속성값은 'stylesheet', TYPE속성값은 'text/css'로 지정한다.

 
ex)css.html
<HEAD>
<TITLE>CSS사용하기1</TITLE>
<LINK REL="stylesheet" HREF="test.css" TYPE="text/css">

</HEAD>
<BODY>
<H1>CSS사용하기!!</H1>
</BODY> 

test.css

H1 {font-size: 40pt; color: blue}

링크는 test.css 스타일을 정의해놓은 페이지를 링크시켜준다.
<H1>은 html의 <H1>이 아니고 test.css에서 정의해놓은 H1의 스타일을 사용한 것이다. 
 


 인라인방식 
인라인 방식은 각 태그에 직접 스타일을 적용하는 방법이다.임베디드 방식이 페이지 전체에 적용된다고 하면 인라인 방식은 하나의 태그 안에서만 적용된다.


ex)<H1 STYLE="font-size: 30pt; color: blue">CSS사용하기</H1>
 
우선순위
링크<임베디드<인라인




클래스 속성
css를 정의하는 방법은 앞서 말한 방법이외에 여러가지가 있다. 그중 하나가 클래스를 지정하는 방법이다.
css태그에 속성을 정해 줌으로써 정해진 속성의 효과를 나타나도록한다. 하지만 우리가 태그를 쓰다보면 하나의 태그로 여러가지 속성을 써야 할 경우가 생긴다. 이때 사용하는 것이 바로 클래스이다.


<HEAD>
<TITLE>CLASS속성1</TITLE>
<STYLE TYPE="text/css">
<!--
P.test1{COLOR:blue;FONT-SIZE:10pt}
P.test2{COLOR:green;FONT-SIZE:15pt} -->
</STYLE> 
</HEAD>
 
<BODY>
<P CLASS="test1">클래스 사용하기</P>
<P CLASS="test2">클래스 사용하기</P>
</BODY>


<!--태그. 클래스이름{속성:값;속성:값;속성:값}-->
 임베디드 형식으로 CSS를 선언해주고 P라는 태그를 정의, 클래스를 선언해주고 
속성을 지정, BODY에서 해당 태그에 클래스를 사용해주면 된다. 
 

<HEAD><TITLE>CLASS속성1</TITLE>
<STYLE TYPE="text/css">
<!--
.test1{COLOR:green;FONT-SIZE:15pt}
-->
</STYLE>
</HEAD>
 
<BODY>
<H1 CLASS="test1">클래스 사용하기</H1>
<P CLASS="test1">클래스 사용하기</P>
<FONT CLASS="test1">클래스 사용하기</FONT>
</BODY>

또한 특정 HTML태그가 아닌 어떤 태그에도 적용이 가능하다. FONT, H1태그등에 클래스속성을 적용시킬 수 있다.


아이디 속성 

클래스속성 사용 대신에 아이디 속성을 사용하여 스타일을 정의할 수도 있다. 아이디 속성을 사용하는 방법은 전체적으로 클래스 속성을 사용할 때와 같다. 다만 다른점은 '.'대신에 '#'를 사용하여 정의한다. 그리고 스타일을 적용하기 위해 CLASS속성대신 ID속성값을 입력하여 사용한다. ID와 CLASS의 차이점은 ID는 하나의 페이지에 단한번만 사용할 수 있다는 점이다.

  

'Not Using > Java script/HTML/CSS' 카테고리의 다른 글

fetch API  (0) 2023.12.10
CSS 계속  (0) 2011.11.15
홈페이지 프레임 연결과 기타태그  (0) 2011.11.15
TAG_ATTRIBUTE3  (0) 2011.11.15
TAG_ATTRIBUTE2  (0) 2011.11.14

'Not Using/Java script/HTML/CSS' Related Articles

티스토리툴바