[CSS] CSS를 HTML에 적용하는 법

Jan 15, 2024

Contents

1. CSS 파일을 읽어 들여 적용하는 방법 입니다.2. <head>내부에 <style>태그 넣기 3. 태그 내부에 style 속성 지정

CSS를 적용하는 방법에는 3가지가 있습니다. (더 있을 수도) 세가지 다 사용해봅시다.

1. CSS 파일을 읽어 들여 적용하는 방법 입니다.

css확장자 파일을 만들어 이를 html파일에서 읽어서 적용시키는 방법입니다. ※가장 많이 쓰는 방법이니까 반복 숙달합시다.


<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS파일 만들기</title>
    <link rel="stylesheet" href="../css/ex04.css">
</head>

<body>
    <h1>내 하루</h1>
    <p>계속 잠을 잡니다.</p>
</body>

</html>

html에서 외부 파일을 읽어들일 때는 <link>태그를 이용해야 합니다. <link rel="relationship" href="Hypertext Reference"> : 현재 문서와의 관계, 파일 위치를 차례로 적으면 됩니다. <link rel="stylesheet" href="../css/ex04.css">

2. <head>내부에 <style>태그 넣기


<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>head 내부에서 수정</title>
    <style>
        h1 {
            color: skyblue;
        }

        p {
            font-size: 18px;
        }
    </style>
</head>

<body>
    <h1>다른 나의 하루</h1>
    <p>끝없이 침전합니다.</p>
</body>

</html>

별도의 css파일을 만들지 않지만. 코드 전체가 길어져 css도 길어지기 때문에 잘은 사용되지 않습니다.

3. 태그 내부에 style 속성 지정

※정말 안쓰는 방법입니다. 보고 바로 머릿속에서 지우세요.


<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>태그 내부에 style속성 넣기</title>
</head>

<body>
    <h1 style="color: #f00">노승 하루</h1>
    <p style="font-size: 18px;">망상에 빠집니다.</p>
</body>

</html>

👋자 끝입니다. 돌아가세요.👋

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS파일 만들기</title> <link rel="stylesheet" href="../css/ex04.css"> </head> <body> <h1>내 하루</h1> <p>계속 잠을 잡니다.</p> </body> </html>

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>head 내부에서 수정</title> <style> h1 { color: skyblue; } p { font-size: 18px; } </style> </head> <body> <h1>다른 나의 하루</h1> <p>끝없이 침전합니다.</p> </body> </html>

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>태그 내부에 style속성 넣기</title> </head> <body> <h1 style="color: #f00">노승 하루</h1> <p style="font-size: 18px;">망상에 빠집니다.</p> </body> </html>