CSS 삽입 위치별 차이점은 인라인, internal, external로 나눌 수 있습니다. 인라인은 편집 불편성으로 잘 사용하지 않고, 인터널과 외부 파일 삽입을 가장 많이 사용합니다.
CSS 삽입 인라인 스타일
인라인 스타일은 CSS 효과를 <body> 태그에 위치한 HTML 태그 뒤에 style 속성과 속성값을 직접 삽입합니다.
이 방법은 나중에 대량 수정에 불리합니다. 대신 개별적으로 태그에 CSS 효과를 줘야할 때 사용할 수 있습니다.
사용방법이 불편한 대신 다른 위치에 비해서 적용 우선순위가 높습니다. 만약 특정 영역만 CSS 효과를 다르게 주고 싶다면 이 방법을 사용하면 됩니다.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2 style="color:blue;">미사일</h2>
<p style="background-color:orange;border:1px solid black;">미사일이란, 목표물을 타격하기 위해 유도 기능을 장착한 로켓 무기를 말합니다.</p>
</body>
</html>CSS 내부 스타일 시트 삽입
내부 스타일 시트 삽입이란, CSS 선택자를 <head> 태그와 <style> 태그 사이에 삽입하는 형태를 말합니다. <head> 태그에 삽입된 대신, 대량 수정 기능에 유리합니다.
<!DOCTYPE html>
<html>
<head>
<style>
h2{
color:red;
}
p{
background-color:powderblue;
border:3px dotted green;
}
</style>
</head>
<body>
<h2>미사일과 로켓의 차이점</h2>
<p>유도기능이 장착되면 미사일, 없으면 로켓이라 부릅니다.</p>
</body>
</html>CSS 외부 스타일 시트 삽입
외부 스타일 시트는 내부 스타일 시트와 구조는 같습니다. 하지만 <style> 태그 사이에 선택자를 직접 삽입하지 않고, 외부 파일로 돌린후 링크 형식으로 실행합니다.
<link> 라는 빈 태그에 속성값으로 rel = "stylesheet" 와 href = "주소명.css" 주소를 적어야 합니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="파일명.css">
</head>
<body>
<h2>미사일의 어원</h2>
<p>mittere 라틴어는 던지는 활, 창 같은 투척 무기를 부르는 말입니다. emission 방출, trasmitt 전송, submit 제출 등 모두 miss/mitt 관련 단어입니다.</p>
</body>
</html>주소명.css 파일의 경우 메모장 등을 이용해서 HTML 파일 처럼 쉽게 만들 수 있습니다. html 파일을 생성하는 것 처럼 파일명의 끝에 마침표 . + css 를 붙이면 됩니다. 단 내부에는 HTML 태그가 있어서는 안됩니다. CSS 선택자만 있어야 합니다.
대부분의 웹사이트는 이렇게 외부로 CSS 파일을 따로 빼서 관리를 합니다. 왜냐하면 수정시 관리가 쉽기 때문입니다.