CSS

[CSS] CSS를 사용하는 3가지 방법 external, internal, inline | <link>와 <style>

3o14 2023. 7. 18. 23:45
728x90
반응형

 

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
저작자표시