CSS 적용방법

CSS 를 적용하는 방법에는 대표적으로 3가지가 있습니다.

1. style 태그 사용

2. css 파일 불러오기

3. style 속성 사용

1. style 태그 사용

html의 <style> 태그를 이용합니다.

test.html

<html>
  <head>
    <h1>CSS</h1>
  </head>
  <style>
    a {
      color: red;
    }
  </style>
  <body>
    <ol>
      <li><a href="1.html">Apple</a></li>
      <li><a href="2.html">Banana</a></li>
      <li>
        <a href="3.html">Watermelon</a>
      </li>
    </ol>
  </body>
</html>

2. css 파일 불러오기

css 를 쉽게 관리하기 위해서 css 파일과 html 파일을 분리합니다.

a {
  color: blue;
}

test.css

css 파일을 만든 후 <head> 태그 안에 <link> 태그를 삽입해 줍니다.

rel : 현재 문서와 외부 리소스 사이의 연관 관계를 명시합니다.
href : css 파일의 경로를 입력합니다.

<html>
  <head>
    <h1>CSS</h1>
    <link rel="stylesheet" href="test.css" />
  </head>

  <body>
    <ol>
      <li><a href="1.html">Apple</a></li>
      <li><a href="2.html">Banana</a></li>
      <li>
        <a href="3.html">Watermelon</a>
      </li>
    </ol>
  </body>
</html>

test.html

3. style 속성 사용하기

따로 css 를 분리하지 않고 style 속성을 이용하여 쉽게 css 를 사용할 수 있습니다.

<html>
    <head>
        <h1>CSS</h1>
    </head>
    <style>
        a {
            color:red;
        }
    </style>
    <body>
        <ol>
            <li><a href="1.html">Apple</a></li>
            <li><a href="2.html">Banana</a></li>
            <li><a href="3.html" style="color:blue;text-decoration:underline;">Watermelon</a></li>
        </ol>

    </body>
</html>

저작자표시

'Web > 🧩 html + CSS' 카테고리의 다른 글

컬러 (0)	2020.11.03
결합 선택자 (0)	2020.11.03
선택자 (0)	2020.11.03
CSS의 정의 (0)	2020.11.03
[한번에 보기] CSS 정복편 (0)	2020.06.09

''@

CSS 적용방법

CSS 를 적용하는 방법에는 대표적으로 3가지가 있습니다.

1. style 태그 사용

2. css 파일 불러오기

3. style 속성 사용하기

'Web > 🧩 html + CSS' 카테고리의 다른 글

티스토리툴바

CSS 적용방법

CSS 를 적용하는 방법에는 대표적으로 3가지가 있습니다.

1. style 태그 사용

2. css 파일 불러오기

3. style 속성 사용하기

'Web > 🧩 html + CSS' 카테고리의 다른 글

'Web/🧩 html + CSS' Related Articles

티스토리툴바