티스토리 뷰

IT 이야기/프로그래밍

[CSS 쉽게 이해하기] CSS 기본

하늘과 나b 2011. 12. 7. 13:51





CSS(Cascading Style Sheet)



CSS(Cascading Style Sheet)는 웹이 어떻게 보여질 것인지를 담당하는 언어로, 웹의 표현을 제어합니다.
CSS를 도입함으로써 얻을 수 있는 장점은 웹 페이지의 경량화, 쉬운 유지 및 보수를 들 수 있습니다.





CSS의 연결

 
CSS를 HTML에 연결하는 방법으로

1. Link Type : 외부 파일로 분리 
2. Embedded Type : HTML 파일 내에 Style Sheet 부분을 포함
3. Inline Type : HTML 요소 안에 직접 지정 



[알아두기] CSS를 HTML에 연결하는 방법

1. 링크 타입(Link Type) : 별도의 CSS파일을 만들어 연결하는 방법
2. 임베디드 타입(Embedded Type) : HTML 파일 내에 Style Sheet 부분을 포함하는 방법 
3. 인라인 타입(Inline Type) : HTML 요소 안에 직접 지정하는 방법 



 링크 타입(Link Type)  별도의 CSS 파일을 만들어 연결하는 방법  


 <link rel="stylesheet" type="text/css" 
  href="file.css" title="default" media="screen" />



 임베디드 타입(Embedded Type)  HTML 파일 내에 Style Sheet 부분을 포함하는 방법 


<head>
    <style type="text/css">
        /* 여기에 스타일시트 내용을 작성합니다. */
    </style>
</head>


 인라인 타입(Inline Type)  HTML 요소 안에 직접 지정하는 방법  


<p style="font-size:12px; color:#f00">
    빨간색 12픽셀 문단
</p>




그럼 우선순위는 어떻게 되나요?



만약 한 페이지에 여러가지 타입이 사용되었다면 무슨 타입부터 적용해야 할까요?

이 경우 가장 우선적으로 사용되는 것은 인라인(Inline Type)입니다. 그리고 임베디드 타입(Embedded Type)과 링크 타입(Link Type)은 나중에 선언된 것이 우선적으로 적용됩니다.

여러가지 방법으로 사용할 수 있지만 외부 파일로 분리해서 사용하는 것이 여러모로 좋습니다. 

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[C언어 소스] 대문자는 소문자 ,소문자는 대문자로 치환하는 프로그램  (3) 2012.04.17
[Javascript] 인터넷 익스플로러(Internet Explorer)에서 console.log 사용하기  (1) 2012.04.13
[Javascript] document.getElementById()  (4) 2012.04.10
[JQuery 예제] 네이버 검색창 밑에 있는 검색목록 만들기  (2) 2012.02.24
[C언어 소스] 구구단 전체/홀수/짝수별 출력하는 소스  (0) 2011.12.08
당신이 사용하고 있는 브라우저에서 HTML5를 사용한다면 점수는?  (0) 2011.12.07
[HTML 쉽게 이해하기 강좌] - <input> 태그  (0) 2011.12.07
[HTML 쉽게 이해하기 강좌] - <form> 태그  (0) 2011.12.07
[HTML 쉽게 이해하기 강좌] - Element Level에 대해서  (0) 2011.12.05
[HTML 쉽게 이해하기 강좌] - DOCTYPE에 대해서  (0) 2011.12.05
공유하기 링크
댓글