[CSS] 적용 방법 3가지 (Inline, Embedded, External CSS)

HTML(or XML) & CSS & JavaScript

[CSS] 적용 방법 3가지 (Inline, Embedded, External CSS)

YEJI ⍢ 2022. 10. 18. 03:03

728x90

CSS 적용 방법으로 3가지가 있습니다.

① 인라인 CSS (Inline CSS)

② 내부 CSS (Embedded CSS)

③ 외부 CSS (External CSS)

Inline CSS

✓ h.html

<!DOCTYPE html>
<html>
    <body>
        <p style='color:greenyellow; text-align:center; background-color: black; font-style:italic;'> Hello world? </p>
    </body>
    
</html>

Inline은 start tag 안에 sytle 속성을 넣어서 정의하여 스타일을 지정합니다.

Embedded CSS

✓ h.html

<!DOCTYPE html>
<html>
    <style>
        p {
            color:greenyellow; 
            text-align:center; 
            background-color: black; 
            font-style:italic;
        }
    </style>
    <body>
        <p> Hello world? </p>
    </body>
    
</html>

속성으로가 아닌 <style> 태그 안에 CSS를 정의해서 스타일을 정의합니다.

External CSS

✓ h.html

✓ h.css

p {
    color:greenyellow; 
    text-align:center; 
    background-color: black; 
    font-style:italic;
}

<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet' href='h.css'>
    </head>
    <body>
        <p> Hello world? </p>
    </body>
    
</html>

같은 .html 파일이 아닌 .css 파일을 새로 생성해서 .css 파일에 스타일을 정의합니다.

◡̈