-
[CSS] CSS를 사용하는 3가지 방법 external, internal, inline | <link>와 <style>CSS 2023. 7. 18. 23:45728x90반응형
CSS를 적용하는 3가지 방법
안녕하세요 오늘은 스크립트에 css를 적용하는 방법을 알아볼게요. CSS는 Cascading Style Sheets의 약자로 웹 페이지의 디자인과 레이아웃을 제어하는 스타일 시트 언어입니다. 이 CSS를 통해 HTML 요소에 스타일을 적용할 수 있습니다. CSS의 작성 방법에는 세 가지 주요 방법이 있습니다: 외부 스타일 시트(external style sheet), 내부 스타일 시트(internal style sheet), 인라인 스타일(inline styles)입니다. 각각에 대해 자세히 설명해드리겠습니다.
🍊 외부 스타일 시트 (External Style Sheet)
외부 스타일 시트는 별도의 CSS 파일에 스타일 규칙을 작성한 후 HTML 문서에 링크하는 방식입니다. 여러 HTML 문서에서 동일한 스타일을 공유하거나 관리하기 쉽게 만들어진 방법입니다.
htmlCopy code <!-- styles.css 파일 --> /* styles.css */ h1 { color: blue; font-size: 24px; } p { color: red; } <!-- index.html 파일 --> <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph.</p> </body> </html>🍊 내부 스타일 시트 (Internal Style Sheet)
내부 스타일 시트는 <style> 태그를 사용하여 HTML 문서 내에서 스타일 규칙을 작성하는 방식입니다. 주로 특정 HTML 문서에만 스타일을 적용해야 할 때 사용합니다.
htmlCopy code <!DOCTYPE html> <html> <head> <style> h1 { color: blue; font-size: 24px; } p { color: red; } </style> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph.</p> </body> </html>🍊 인라인 스타일 (Inline Styles)
인라인 스타일은 HTML 요소의 style 속성을 사용하여 직접 스타일 규칙을 작성하는 방식입니다. 해당 요소에만 스타일을 적용하고 싶을 때 사용됩니다.
htmlCopy code <!DOCTYPE html> <html> <body> <h1 style="color: blue; font-size: 24px;">Welcome to My Website</h1> <p style="color: red;">This is a paragraph.</p> </body> </html>
🍊 요약
위의 세 가지 방법은 각각 조금 다릅니다. 외부 스타일 시트는 여러 페이지에서 재사용 가능한 스타일을 적용할 때 유용하고, 내부 스타일 시트는 특정 페이지에만 스타일을 적용할 때 사용합니다. 인라인 스타일은 개별 요소에 스타일을 직접 적용해야 할 때 사용하면 좋습니다. 필요에 따라 이 세 가지 방법을 잘 조합하여 사용하면 좋겠습니다.
LIST'CSS' 카테고리의 다른 글
[CSS] 선택자 nth-child와 nth-of-type 사용법 (0) 2022.06.01 [CSS] 투명도 조절하기 opacity, rgba (0) 2022.06.01 [CSS] 종류별 수평선 <hr>/ z-index (0) 2022.05.30 [CSS] text-decoration (0) 2022.05.28 [CSS] 하위선택자, 자식선택자, 형제선택자, 인접 형제선택자 (0) 2022.05.28