[CSS] HTML문서에 CSS를 사용하는 3가지 방법
- 외부 스타일 시트(External Style Sheet)
- 내부 스타일 시트(Internal Style Sheet)
- HTML태그내에 스타일 지정(Inline Styles)
외부 스타일 시트(External Style Sheet)
css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다.
| <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
내부 스타일 시트(Internal Style Sheet)
HTML문서내에서 <head>와 </head>사이에 스타일을 정의하는 방법입니다.
| <head> <style type="text/css"> <!-- body {font-size:9pt;} //--> </style> </head> |
HTML태그내에 스타일 지정(Inline Styles)
위의 방법들에 비해서 적용범위가 더욱 좁아진 형태입니다. 스타일을 적용하고 싶은 HTML태그안에서 정의하는 방법입니다.
| <p style="color:gray;">이 문단의 색상은 회색으로 지정됩니다.</p> |
|
이 문단의 색상은 회색으로 지정됩니다. |
<link> 외부css를 연결하는 link태그 사용법
<link> 태그는 외부의 문서를 연결시키는 태그이다.
주로 폰트, css파일 같은 스타일시트 파일을 연결한다.
<link>태그는 <head> 태그 안에 넣어주어야하고, 여러개 사용 가능하다.
<html>에서는 <link>태그는 닫지 않는다.
<link> 태그와 함께 사용할 수 있는 속성
1. href
2. rel : 현재문서와 연결문서의 관계 표시
- stylesheet : 스타일시트로 연결할 때
- alternate : 문서의 대안 버전 (프린트나 번역 사이트)로 연결할 때
- author : 저작자로 연결할 때
- help : 도움말로 연결할 떄
- license : 문서의 저작권 정보로 연결할 때
- search : 검색도구로 연결할 때
3. type : 연결문서의 MIME 유형 ( href 속성이 설정될 때만 사용 )
* MIME(Multioutpose Internet Mail Extensions)은 원래 전자메일 전송을 위한 인터넷 표준이엇으나 현재는 웹에서 내용유형을 말할 때 자주 스임
css 파일의 경우 : text/css
js 파일의 경우 : text/javascript
xml 파일의 경우 : application/xml
4. media : 연결문서가 표시될 장치 또는 미디어 유형