happy cat image

everdevel

Make It Yours, 에버디벨

UI 변경

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기

웹애플리케이션을 만들고 싶은데 이것도 알아야 하고
저것도 알아야 한다는데 어떻게 해야할지 모르겠다면

웹프로그래밍 초보자를 넘어 프로그래밍을 처음 접하는 분들을 위해
에버디벨이 1년넘게 작업한

HTML5 + CSS3 + jQuery + MySQL + PHP

한권으로 배우는 웹코딩 시작하기

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>

강좌로 돌아가기