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>