YYYEJI

[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 파일에 스타일을 정의합니다.

 

 

 

 

 ◡̈

 

'HTML(or XML) & CSS & JavaScript' 카테고리의 다른 글

[JavaScript] Tag name을 통해 element 찾는 방법  (0) 2022.10.25
[JavaScript] id를 통해 element 찾는 방법  (0) 2022.10.25
[HTML] 간단한 HTML Tag 정리  (0) 2022.10.14
[JavaScript] DOM이란?  (0) 2022.10.10
[XML] XSD restriction의 pattern  (0) 2022.10.09
'HTML(or XML) & CSS & JavaScript' Related Articles more