Park Won Il

늦깎이 개발자 지망생

[HTML/CSS] CSS를 HTML에서 사용하는 방법

최대 1 분 소요

CSS를 HTML에서 사용하는 방법

span { color : red; }

  • span : selector(선택자)
  • color : property
  • red : value
  • style을 HTML에 적용하는 3가지 방법
    • 우선순위 inline > internal > external
    • inline : HTML 태그 안에서 사용하는 방법
      • 계층적인 성격을 띄는 HTML에 Style이 섞여있다고해서 좋은 방법은 아님
  <body>
    <span style = "color:red;"> HELLO WORLD! </span>
  </body>
  • internal : head 태그 안에서 사용하는 방법
    • HTML 문서마다 스타일을 매번 지정해 주어야 하지만, 한 문서에만 해당되는 스타일을 지정할 때 사용하면 된다.
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>
    <span>HELLO WORLD!</span>
</body>
  • external : css 파일을 만들고 HTML 문서에 연결하여 사용하는 방법
    • 홈페이지 전체적인 스타일을 일관성 있게 유지하면서 변경시에도 일괄적으로 변경가능
    • 외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css 파일을 관리하는 노하우가 필요
    • 전문적인 홈페이지를 만들려면 외부 스타일 시트를 적극적으로 활용해야 한다
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./ex03.css">
</head>

<body>
    <div>
        <p>
            HELLO WORLD!
        </p>
    </div>
</body>

</html>

p{
    color : red;
}

댓글남기기

참고