html 내에 CSS 연결하기

최대 1 분 소요

html 내에 CSS 연결하기

  • 아래와 같이, html 문서 내 <head> 태그 내에 다음 부분을 넣어줍니다.
<link rel="stylesheet" href="style.css">
  • 전체 html 문서를 보면 다음과 같죠.
  • 사실 꼭 <head>에 들어갈 필요는 없습니다. 그냥 <body>에 넣어도 css가 적용되기는 해요.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test html</title>
        <!-- 이렇게 CSS를 연결합니다 -->
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p> This is p!!</p>
    </body>
</html>
  • test.html과 같은 폴더 내에 style.css를 둡니다.
/*
style.css
*/
p {
    color:blue;
}
  • 혹은 그냥 다음처럼 내부에 바로 작성해도 문제는 없습니다.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test html</title>
        <!-- 이렇게 CSS code를 직접 넣어줍니다 -->
        <style>
            p {
                color:blue;
            }
        </style>
    </head>
    <body>
        <p> This is p!!</p>
    </body>
</html>

태그: ,

카테고리:

업데이트:

댓글남기기