Front-end/CSS

CSS 추가 방식

CSS를 HTML 문서에 추가하는 방법으로는 총 세 가지가 존재한다.

1. External CSS

  HTML 문서의 <head> 섹션 안에 <link> 태그를 이용해 외부 css 파일의 경로를 지정할 수 있다. 이러한 방식으로 여러 HTML 파일에 동일한 CSS 스타일을 적용할 수 있다.

 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

2. Internal CSS

  <style> 섹션 안에서 CSS 문법을 사용해 지정하며, 단일 HTML 문서에 유니크한 CSS 스타일을 적용할 수 있다. 

 

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

이 방식을 사용할 경우, style 태그 안에서 주석은 CSS 스타일대로 /* */ 방식을 사용한다.

 

3. Inline CSS

  HTML 특정 요소에 CSS를 개별적으로 적용할 수 있다. style 속성을 이용하여 지정한다.

 

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

 

이 방식은 CSS의 다양한 장점을 죽이는 방법이므로, 꼭 필요할 때만 사용해야 한다.

 

여러 방식이 동시에 적용되었을 때는 나중에 나온 스타일이 적용된다.

 

<!-- mystyle.css에서 h1의 색을 navy로 지정했다고 가정 -->

<!-- 방식 1. h1의 색은 orange로 지정된다. -->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

<!-- 방식 2. h1의 색은 navy로 지정된다. -->
<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

'Front-end > CSS' 카테고리의 다른 글

CSS Selectors  (0) 2021.02.26
'Front-end/CSS' 카테고리의 다른 글
sung960929