기억하기 위한 기록

[CSS] HTML문서에 CSS를 사용하는 3가지 방법 본문

Front-end/css

[CSS] HTML문서에 CSS를 사용하는 3가지 방법

곽구 2021. 4. 23. 18:49

 

 

  • 외부 스타일 시트(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 : 연결문서가 표시될 장치 또는 미디어 유형

 

 

출처 www.homejjang.com/07/how_to.php

'Front-end > css' 카테고리의 다른 글

display 속성 ( block , inline요소 등등)  (0) 2021.01.19
'Front-end/css' Related Articles more