CSS를 적용하는 방법

CSS를 HTML문서에 적용하는 방법부터 알아보겠습니다.

3가지 방법이 있는데요.

외부문서로 저장하여 연결하기 (Linked Style)

<link rel="stylesheet" type="text/css" href="스타일시트 경로" />

CSS파일을 따로 관리 할 수 있어서 소스에 섞임이 없어서 가장많이 쓰이는 방식이며 다른 소스에 적용시켜도 그대로 적용이 되므로 하나의 CSS로 여러 패이지를 적용시키는 방법입니다.

위의 소스를 아래 head태그안에 넣어야 합니다.

아래와 같이

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>외부 CSS 파일 적용</title>
<link rel="stylesheet" type="text/css" href="스타일시트 경로" />
</head>
<body>
<div>
</div>
</body>
</html>

문서 내부에 정의하기 (Embedded Style)

문서 내부에 정의 하는 방법은 위와 같이 외부 문서로 지정하지 않고 CSS를 헤드 태그 안에 스타일 태그를 선언하여서 그 안에 적용하는 방법 입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>스타일 태그에 CSS 코드 작성</title>
<style type="text/css">
    div{background:#fff}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

태그에 직접 지정하기 (Inline Style)

태그에 직접 지정하는 것은 아래처럼 태그 안에 style="요소"를 지정하는 방식입니다. 그럴 경우 오직 저 태그만 해당 스타일이 적용 되게 됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>태그에 직접 CSS코드 작성</title>
</head>
<body>
    <div style="background:#fff">
</div>
</body>
</html>