CSS 사용하기

CSS를 사용하는 방법에는 크게 세 가지 방법이 있습니다.

1. 내부 스타일 시트 사용하기

2. 외부 스타일 시트 사용하기

3. 인라인 스타일 사용하기

위 세 방법을 알아보겠습니다.

내부 스타일 시트는 HTML 파일 내부에 CSS 코드를 작성하는 방법입니다. HTML에서 제공하는 style 태그를 이용하여 CSS 코드를 작성하면 됩니다.

<style>
  /* CSS 코드 */
</style>

실제 코드에서 내부 스타일 시트 사용하는 방법은 다음과 같습니다. HTML 파일에 head 태그에 스타일을 지정하는 것입니다.

<head>
  <title>내부 스타일 시트</title>
  <style>
    h1{
      color:red;
    }
  </style>
</head>
<body>
  <h1>내부 스타일 시트</h1>
</body>

내부 스타일 시트

외부 스타일 시트는 CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 연결하는 방법입니다. 이때 별도 파일의 확장자는 css여야 합니다. 별도로 만든 CSS 파일을 HTML 문서에서 연결할 때 사용하는 태그는 'link'입니다.

h1{
  color:red;
}

위와 같이 만든 'style.css'파일을 불러들이는 방식은 다음과 같습니다.

<head>
  <title>외부 스타일 시트</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>외부 스타일 시트</h1>
</body>

외부 스타일 시트

인라인 스타일은 HTML 태그에서 사용할 수 있는 style 속성에 CSS 코드를 작성하는 방법입니다. 태그에 직접 CSS 코드를 작성하는 방법이기 때문에 선택자 부분이 없습니다.

<body>
  <h1 style="color:red">인라인 스타일 시트</h1>
</body>

인라인 스타일 시트

CSS를 적용하는 3가지를 소개했습니다. 실무에서는 대부분 외부 스타일 시트를 사용합니다. 외부 스타일 시트는 코드를 유지 보수하기 편하기 때문입니다.

CSS 선택자 (0)	2023.01.07
CSS가 왜 필요할까? (0)	2023.01.06