Adding CSS

vancouver·2023년 4월 16일

CSS 이해하기

목록 보기

2/23

index

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>Adding CSS</title>
</head>

<body>
  <h1>Three Methods of Adding CSS</h1>
  <!-- Create 3 Links to The 3 Webpages: inline, internal and external -->
  <a href="./external.html">external</a>
  <a href="./inline.html">inline</a>
  <a href="./internal.html">internal</a>
</body>

</html>

inline

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>Inline</title>
</head>

<body>
<h1 style="color: Blue;">Style Me in Blue!</h1>
</body>

</html>

inline style sheet

<h1 style="color: Blue;">Style Me in Blue!</h1>

해당 태그(위 코드에서는 h1)가 선택자(selector)가 되고, CSS 코드에는 속성(property)과 값(value)만 들어간다. 따라서 꾸미는 데 한계가 있으며, 재사용이 불가능하다는 단점이 있다.

Style Me in Blue!

internal

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>Internal</title>
  <style>
    h1 {
      color:red;
    }
  </style>
</head>

<body>
<h1>Style Me in Red!</h1>
</body>

</html>

internal style sheet

<head>
	<style>
    	h1 {
        color:red;
        }
    </style>
</head>

<style> 태그는 보통 <head>와 </head> 사이에 넣으나, HTML 문서의 어디에 넣어도 잘 적용된다.
이 방법은 HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있다는 장점이 있으나, 또 다른 HTML 문서에는 적용할 수 없다는 단점이 있다.

Style Me in Red!

external

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>External</title>
  <link rel="stylesheet"
         href="./style.css">
</head>
<body>
  <h1>Style Me in Green</h1>

</body>
</html>

external style sheet

<head>
	 <link rel="stylesheet"
         href="./style.css">
</head>

/*style.css*/
h1 {	
    color:green;
}

위 코드는 HTML 파일과 CSS 파일이 같은 폴더에 있다고 가정했을 때의 코드로, 경로는 적절히 수정해야 한다. 예를 들어 HTML 문서가 있는 폴더에 css 폴더가 있고, 그 안에 style.css 파일이 있다면 다음과 같이 한다.
이 방법의 장점은 여러 HTML 문서에 사용할 수 있다는 것이다. style.css를 적용시키고 싶은 문서에 태그로 연결만 해주면 된다.