웹프로그래밍/css

CSS 삽입방법

zelkova 2014. 7. 25. 21:14

<목차로 돌아가기>


CSS 삽입방법


CSS삽입방법에는 아래와 같이 3가지 방법이 있습니다.

- 외부(External) 스타일시트

- 내부(Internal) 스타일시트

- 라인(Inline) 스타일시트



외부(External) 스타일시트


 외부 스타일시트가 가장 이상적이라고 생각됩니다. 외부에서 불러오기 대문에 여러페이지에 적용시킬 수 있 습니다. 외부스타일 시트를 여러페이지에서 사용하고 있고 각 페이지마다 변경해야 할 때 외부에서 적용되는 스타일 시트만을 수정함으로써 작업량을 대폭 줄일 수 있습니다.


Example

메모장에 아래의 파일을 작성 후 test.css 이름으로 저장합니다.


test.css

  1. hr { 
  2.     height:10px;
  3. }
  4. p {
  5.     margin-left: 30px;
  6.     font-size: 30px;
  7.     color:red;
  8. }
  9. body {background-image: url("images/background.gif");}

html 페이지에 아래와 같이 작성하면 외부CSS 불러와서 적용할 수 있습니다.


main.html

  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="test.css">
  4. </head>
  5. <body>
  6. <hr>
  7. <p> 이것이 예제입니다.</P>
  8. <hr>
  9. 참 쉽죠?
  10. </body>
  11. </html>

혹시 이해가 안되면 아래의 파일을 받아서 확인해보세요 바로 이해가 되실 겁니다.

CSSExam.zip





내부(Internal) 스타일시트


외부CSS와 달리 현재 문서에만 적용되는 형식입니다. 내부CSS는 아래와 같이 적용할 수 있습니다.


  1. <html>
  2. <head>
  3. <style>
  4.     hr { 
  5.         height:10px;
  6.     }
  7.     p {
  8.         margin-left: 30px;
  9.         font-size: 30px;
  10.         color:red;
  11.     }
  12.     body {
  13.         background-image: url("images/background.gif");
  14.     }
  15. </style>
  16. </head>
  17. <body>
  18. <hr>
  19. <p> 이것이 예제입니다.</P>
  20. <hr>
  21. 참 쉽죠?
  22. </body>
  23. </html>

결과는 당연히 똑같습니다.



라인(Inline) 스타일시트


라인스타일 시트는 스타일시트의 장점을 잃어버린 스타일 시트입니다. 이 방법은 자주 사용하지 않는 것이 좋습니다.


  1. <html>
  2. <head>
  3. </head>
  4. <body style="background-image: url("images/background.gif");">
  5. <hr style="height:10px;">
  6. <p style="margin-left: 30px;font-size: 30px;color:red;"> 이것이 예제입니다.</P>
  7. <hr style="height:10px;">
  8. 참 쉽죠?
  9. </body>


이것도 결과는 결국 같습니다.




복수 (Multiple) 스타일시트


만약 HTML요소가 두개가 중복되어 지정되어 있다면 더 자세하게 기입된 CSS구문이 적용됩니다.



test.css

  1. p {
  2.     font-size: 100px;
  3.     color:red;
  4. }


main.html
  1. <html>
  2. <head>
  3. <style>
  4.     p {
  5.         margin-left: 30px;
  6.         font-size: 25px;
  7.         color:blue;
  8.     }
  9. </style>

  11. <link rel="stylesheet" type="text/css" href="test.css">
  12. </head>
  13. <body>
  14. <hr>
  15. <p> 이것이 예제입니다.</P>
  16. <hr>
  17. 참 쉽죠?
  18. </body>
  19. </html>

main.html의 CSS가 더 자세하게 기입되어 있으므로 main.html의 CSS가 적용됨을 확인할 수 있습니다.


반응형
저작자표시

'웹프로그래밍 > css' 카테고리의 다른 글

CSS 링크 관련 스타일  (0) 2014.08.11
CSS 배경 스타일  (0) 2014.07.27
CSS선택자  (0) 2014.07.25
CSS - 메뉴 제작하기  (0) 2014.06.09
필터 효과  (0) 2011.02.18

'웹프로그래밍/css'의 다른글

  • 현재글CSS 삽입방법

관련글

티스토리툴바