CSS 삽입방법은 총 3가지 방법이 있습니다.
| Inline Style Sheet
HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다.
<p style="color: blue">Lorem ipsum dolor.</p>
| Internal Style Sheet
Internal Style Sheet은 HTML 문서 안에 스타일 코드를 넣는 방법입니다. <style>과 </style> 안에 CSS 코드를 넣습니다. 예를 들어 다음과 같은 코드를 HTML 문서에 넣으면, 문서 안의 모든 h1 요소의 글자가 파란색이 됩니다.
<style>
h1 {
color: blue;
}
</style><style> 태그는 보통 <head>와 </head> 사이에 넣으나, HTML 문서의 어디에 넣어도 잘 적용됩니다.
이 방법은 HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있다는 장점이 있으나, 또 다른 HTML 문서에는 적용할 수 없다는 단점이 있습니다.
| Linking Style Sheet
Linking Style Sheet는 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. 예를 들어 모든 h1 요소의 글자를 빨간색으로 하고 싶다면, 다음의 내용으로 style.css 파일을 만듭니다. (CSS 파일의 확장자는 css입니다.)
.h1 {
color: red;
}적용을 원하는 HTML 문서에 다음의 코드를 추가합니다.
<link rel="stylesheet" href="style.css" type="text/css">위 코드는 HTML 파일과 CSS 파일이 같은 폴더에 있다고 가정했을 때의 코드로, 경로는 적절히 수정해야 합니다. 예를 들어 HTML 문서가 있는 폴더에 css 폴더가 있고, 그 안에 style.css 파일이 있다면 다음과 같이 합니다.
<link rel="stylesheet" href="css/style.css" type="text/css">이 방법의 장점은 여러 HTML 문서에 사용할 수 있다는 것입니다. style.css를 적용시키고 싶은 문서에 <link> 태그로 연결만 해주면 됩니다.
※ 주의할 점
Linking Style Sheet를 이용할 시 css 내용이 캐시에 저장이 됩니다. 그래서 css 파일을 수정한 뒤 새로고침을 해도 웹페이지에 적용이 안되는 문제가 간혹 발생하곤 합니다. 따라서, 이 때에는 웹 브라우저 설정에서 캐시 삭제를 한 뒤 새로고침 해주시길 바랍니다.
※ 작업 Tip
매번 캐시를 삭제하면서 작업하기에는 번거로우므로,
1. 먼저 Internal Style Sheet로 작업을 진행한다.
2. 1번에서 작업이 완료되면 Linking Style sheet 형태로 변경하여 추후 수정에 용이하도록 만든다.
'코딩 | 개념 정리 > HTML & CSS' 카테고리의 다른 글
| HTML 예시문 생성 사이트 (0) | 2020.11.12 |
|---|---|
| PHP TEST 툴 정리 (0) | 2020.06.09 |
| [스크랩] OpenAPI 테스트 툴 정리 (0) | 2020.06.08 |
| 속성 선택자 (0) | 2020.05.03 |
| WebFX Colorpicker 사이트 이용하기 (0) | 2020.04.26 |
