본문 바로가기

CSS

<style> 적용 위치

1. 내부 스타일 시트

 

여기서 말하는 내부란 스타일이 적용될 웹 문서를 말하는 것으로,

<head> 부분에 <style> 태그를 사용하여 위치하게 된다.

<head>
	<style>
    	div {
        	color : red;
        }
    </style>
</head>
<body>
	<div>
    	<p>내부 스타일 시트</p>
    </div>
</body>

 

 

2. 외부 스타일 시트

 

외부에 CSS 파일을 만들어서 해당 스타일을 적용하고자 하는 웹 문서에 적용하는 방식이다.

<head> 부분에 다음과 같이 적용 가능하다.

<link rel="stylesheet" href="css/style.css">

rel 속성에는 불러오고자 하는 파일이 css 인 경우 반드시 stylesheet 를 작성해줘야 하며 

해당 속성이 없으면 제대로 동작하지 않는다.

 

href 속성은 이전에도 사용했듯이 파일의 경로를 작성해주면 된다.

 

 

3. 인라인 스타일

 

인라인 스타일은 별도의 스타일 시트를 구성하지 않고, 태그 자체에 style 속성을 이용하여 적용하는 것을 말한다.

<p style="color:red;"></p>

모든 태그에서 위와 같이 적용이 가능하지만, 

인라인 스타일로 스타일을 적용하게 되면 다른 css 적용이 힘들기 때문에 가능하면 사용을 지양하는 것이 좋다.

대신 태그, 클래스 선택자 단위로 스타일을 적용하도록 하자.