알골의세계정복
[CSS #2] CSS한번에 끝내기 - CSS 위치, 삽입, 파일 링크, 우선순위 본문
1. CSS 넣는법
- 외부 CSS
- 내부 CSS
- 인라인 CSS
2. 외부 CSS
- CSS를 외부 파일로 작성한 경우, 아래 한줄로 HTML문서에 불러 올 수 있다.
- 외부 CSS파일을 텍스트로 작성되어 있어야 되고, css확장자를 갖어야 한다. 또한 HTML 태그를 포함하면 안된다.
<head>
<link rel="stylesheet" href="stylesheet_link_name.css">
</head>
3. 내부 CSS
- 특정 HTML 페이지에만 적용되는 스타일을 넣을 때 사용
- HTML에 <head> 태그 안에 <style> </style>사이에 정의 된다.
<head>
<style>
p { color: red; text-align: center; }
</style>
</head>
<body>
<p>Hello World</p>
</body>
4. 인라인 CSS
- 특정 HTML에 요소에 직접적으로 적용한다.
- style 속성을 이용해서 적용
<body>
<h1 style="color:red; font-size:10px;>helloworld!</h1>
</body>
5. 하나의 요소에 여러방식의 스타일이 적용되면 어떤 스타일이 적용될까?
- 하나의 HTML 파일에 여러개의 스타일이 적용되면 아래의 우선순위에 따라 가상의 스타일 파일을 만들어 적용하게 된다.
1. 인라인 CSS
2. 외부 또는 내부 CSS 시트
3. 브라이저 기본 설정
- 인라인 CSS는 어디서든 가장 높은 우선 순위를 갖으며 외부, 내부, 브라이저 기본설정을 덮어 쓰기 한다.
- 외부 또는 내부 CSS는 동일한 우선순위를 갖으며 <head></head> 에서 들어가 있는 위치에 따라 우선순위가 정해진다. 먼저 들어간 스타일은 다음에 쓰여진 스타일에 덮어씌우기 된다.
즉,
<head>
<style> 우선순위 4 </style>
<link rel="stylesheet" href="우선순위3.css>
<style> 우선순위 2</style>
<link rel="stylesheet" href="우선순위1.css>
</head>
