1) HTML에 CSS 사용하기

HTML문서에 CSS를 사용하는 방법

  • 외부 스타일 시트(External Style Sheet)
  • 내부 스타일 시트(Internal Style Sheet)
  • HTML태그내에 스타일 지정(Inline Styles)

 

외부 스타일 시트(External Style Sheet)

 

CSS 파일을 만들어 그 파일을 HTML 문서에 입력하여 사용하는 방식이다.

 

<head>
  <link rel ="stylesheet" href="/static/css/test.css">
</head>

 

이 방법의 장점은 홈페이지 전체의 스타일을 일관성있게 유지하면서 변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있다.

반면 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있다.

그리고 외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css파일을 관리하는 노하우가 필요하다.

그럼에도 불구하고 전문적인 홈페이지를 만들려면 외부 스타일 시트를 적극적으로 활용해야 한다.

 

내부 스타일 시트(Internal Style Sheet)

 

<head></head> 사이에 <style></style>을 지정해 주는 방식이다.

 

<head>
  <style>
    body > p {
      background-color:red;
    }
  </style>
</head>

 

HTML문서마다 스타일을 매번 지정해 주어야 하지만, 한 문서에만 해당되는 스타일을 지정할때 사용하면 된다.

 

HTML 태그 내에 스타일 지정(Inline Styles)

 

태그안에 style 구문을 넣어서 다이렉트로 CSS를 지정하는 방식이다.

 

<div style="padding-left:20px"></div>

 

내용과 스타일의 분리 그리고 이로 인한 스타일 일괄변경의 효율성 측면으로 볼때는 바람직하지 않는 방법이다.

그러나 위의 소스에서도 보듯이 직관적으로 사용이 가능하다는 장점이 있다.