ToDoDoDo

CSS 사용법

브라우저가 스타일 시트를 읽으면 스타일 시트의 정보에 따라 HTML 문서의 서식을 지정합니다.

CSS를 삽입하는 3 가지 방법

  • 외부 style sheet
  • 내부 style sheet
  • Inline style


외부 스타일 시트(External Style Sheet)

외부 스타일 시트를 사용하면 하나의 파일 만 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다!
각 페이지는 <link> 요소 안에 외부 스타일 시트 파일에 대한 참조를 포함해야합니다.
<link> 요소는 <head> 섹션 안에 있습니다.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10

외부 스타일 시트는 텍스트 편집기로 작성할 수 있습니다.
파일에 html 태그가 없어야합니다.
스타일 시트 파일은 .css 확장자로 저장해야합니다.
다음은 "mystyle.css"의 모습입니다.

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}
1
2
3
4
5
6
7
8

속성 값과 단위 사이에 공백을 추가하지 마세요!
(X) margin-left : 20 px;
(O) margin-left : 20px;




내부 스타일 시트(Internal Style Sheet)

한 페이지에 고유 스타일이있는 경우 내부 스타일 시트가 사용될 수 있습니다.
내부 스타일은 <style> 요소 내에서 HTML 페이지의 <head> 섹션 내에 정의됩니다.

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

        h1 {
            color: maroon;
            margin-left: 40px;
        } 
    </style>
</head>
<body>
    <h1>이 h1 태그의 스타일은 위의 head > style 에서 지정되었습니다.</h1>
    <p>이 p 태그는 별도로 style 에서 지정되지 않았기 때문에 웹브라우저의 기본값을 적용합니다.</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

전체 소스로 실습하기


인라인 스타일(Inline Styles)

인라인 스타일은 단일 요소에 고유 한 스타일을 적용하는 데 사용될 수 있습니다.
인라인 스타일을 사용하려면 관련 요소에 스타일 속성을 추가하십시오.
style 속성은 모든 CSS 속성을 포함 할 수 있습니다.

<!DOCTYPE html>
<html>
<body>
    <h1 style="color:blue;margin-left:30px;">태그 내부에 style 속성값을 통해 스타일이 적용됩니다.</h1>
    <p>이 p 태그는 별도로 style 에서 지정되지 않았기 때문에 웹브라우저의 기본값을 적용합니다.</p>
</body>
</html>
1
2
3
4
5
6
7

전체 소스로 실습하기

인라인 스타일은 스타일 시트의 많은 장점을 상실합니다.
(별도 css 파일에 작성하는게 장점이 많습니다.)
이 방법은 되도록이면 피하세요.




다중 스타일 시트(Multiple Style Sheets)

각기 다른방식으로 선언된 스타일 시트에서 동일한 요소에 대해 속성이 정의 된 경우
마지막으로 읽은 스타일 시트의 값이 사용됩니다.

/* mystyle.css */
h1 {
  color: navy;
}
1
2
3
4
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style>
        h1 {
            color: orange;
        }
    </style>
</head>
<body>
    <h1>머리글</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

내부 스타일이 외부 스타일 시트에 대한 링크 뒤에 정의되면 <h1> 요소는 "orange"가됩니다.

그러나 아래와 같이 내부 스타일이 외부 스타일 시트에 대한 링크 앞에 정의되어있는 경우
<h1> 요소는 "navy"가됩니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: orange;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <h1>머리글</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

전체 소스로 실습하기



적용되는 순서(Cascading Order)

HTML 요소에 둘 이상의 스타일이 지정된 경우 어떤 스타일이 사용될까요?
페이지의 모든 스타일은 다음 규칙에 따라 새로운 "가상"스타일 시트로 "계단식"됩니다.
여기서 번호 1은 우선 순위가 가장 높습니다.

  1. 인라인 스타일 (HTML 태그 내부에 작성되는 다음과 같은 형식 <h1 style="..."></h1>)
  2. 외부(<link rel=...) 및 내부(<style>...</style>) 스타일 시트(<head> 부분에 있음)
  3. 브라우저 기본값

따라서 인라인 스타일이 가장 우선 순위가 높으며 작성된 순서에 따라 외부 및 내부 스타일과 브라우저 기본값이 적용됩니다.

← CSS 컬러 →