<style type="text/css">
h1{
color:red;
font-face: arial;
}
</style>
</head>
<body>
<style>태그는 html 이지 css 가 아니다.
하지만 그 태그의 역할은 태그 내에 담긴 정보가 html 이 아닌 css 코드라는 사실을 웹브라우저에게 알리는 것이다.
스타일 시트를 이용하지 않고 개별 html 태그에 스타일 정의 정보를 넣을수도 있다. 하지만 별로 좋은 방법은 아니다.(인라인스타일)
<h1 style="color:red;">
---- 외부 스타일 시트----
css 명령 전반을 포함한 텍스트 파일일 뿐이다.htmll 코드는 전혀 포함하지 않는다.
따라서 <style>태그는 넣지않으며,파일은 언제나 .css 라는 확장자를가진다.
외부 스타일시트를 작성했으면, 구성하고자 하는 웹페이지에 파일을 연결해야 한다.
html 의 <link> 태그나 혹은 css 자체의 @import 지시어를 이용하여 웹페이지에 스타일시트를 연결할 수 있다.
html을 이용한 스타일시트의 연결
-html 의경우
<link rel="stylesheet" type="text/css" href="/파일명.css">
-xhtml 의경우
<link rel="stylesheet" type="text/css" href="/파일명.css"/>
rel : 링크의 형식을 표시한다.이경우에는 스타일시트로의 연결을 뜻함.
type : 브라우저에게 어떤 데이터 종류인지 알린다. css를 포함한 텍스타 파일.
href : 사이트 외부에 있는 css 파일의 위치를 가리킨다. 이 프로퍼티의 값은 url 이다.
----css 를 이용한 스타일시트의 연결----
외부 스타일시트를 연결하는 고유의 방법은 @import 지시어를 이용하는 것이다.
html 의 <style>태그 안에 다음과 같이 지시어를 넣으면 된다.
<style type="text/css">
@import url(파일명.css);
</style>
<link> 태그를 사용할 때와 마찬가지로, @import 를 한개 이상 사용하여 여러개의 외부 스타일시트를 포함시킬 수 있다.
<style type="text/css">
@import url(css/aa.css);
@import url(css/bb.css);
</style>
사이트제작팁
매니져: 미정
패밀리 사이트 바로가기
