아무 생각 없이 작성한 포스트였는데 알고보니 100번째로 작성한 포스트군요. 작성 도중에 지워 버린 포스트도 있고, 시작만 하고 완성하지 못해 공개 해놓지 못한 포스트들도 있어서 컨텐츠의 개수는 100개가 안되지만 어쨌거나 100번째로 작성하고 있는 포스트라니..감회가 새롭습니다. 예전에 네이버 블로그를 사용 할 때는 거의 모든 포스트들이 다른 블로그의 내용들을 가지고 온 것들이었는데, 이 블로그의 포스트들은 모두 제 손을 거쳐 탄생된 것들이어서 더욱 애착이 가네요^^;
가장 먼저 해야 할 일은 CSS를 작성하는 것이지만 작성에 결과를 바로 바로 보면서 진행 해 나갈 수 있도록 하기위해 CSS를 로딩하는 방법에 대해 먼저 알아 보도록 하겠습니다. 만일 이 포스트를 읽고 계시는 분 중에 CSS작성에 대해서는 관심이 없고 기존에 작성되어 있는 CSS 정의들을 로딩하기만 원하시는 분들은 여기 까지만 읽으셔도 무방합니다.
1. 다른 파일에 있는 CSS 로딩 하기(External Style Sheet)
<link rel='stylesheet' type='text/css' href='cascading/style/sheet/path.css' />2. HTML 파일에서 CSS 선언 하여 사용하기(Internal Style Sheet)
HTML codes are here!!
...
<style type="text/css">
<!-- CSS codes are here!! -->
</style>
...
HTML codes are here!!
3. HTML 엘리먼트에 CSS 직접 적용하기(Inline Styles)
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>4. Multiple Style Sheets 적용시 우선 순위
만일 여러개의 External CSS를 사용하거나, Internal CSS를 사용하고 또 Inline CSS를 사용하는데 똑같은 엘리먼트에 다른 스타일을 정의 했을 수도 있다. 이런 경우 Inline > Internal > External 순서로 하위 CSS가 먼저 적용되고, 그 다음 상위 CSS가 적용된다. 예를 들어 :
/* external CSS */
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
/* internal CSS */
h3 {
text-aligh: right;
font-size: 20pt;
}라면 Extrnal CSS 보다 우선 순위가 높은 Internal CSS
h3 {
text-aligh: right;
font-size: 20pt;
}과 같은 스타일이 적용된다.
하지만 만약 external css가 <head> 태그 내에 선언된 internal css 뒤에 위치한다면 internal css와 external css의 스타일이 적용되는 순서는 바뀐다. 즉, css가 선언된 순서가 중요하다는 뜻이다.
부록 1. 참고
http://www.w3schools.com/css/css_howto.asp
내용이 마음에 드셨다면 공감(❤)과 짧은 댓글 달아 주시면 더욱 좋은 내용의 글로 보답 하겠습니다. 감사합니다.
