happy cat image

everdevel

So This Is Love

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.
























에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

방문해 주셔서 감사합니다.

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>

봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.

농구 황제가 아닌 인간 마이클 조던의 삶, 그가 거둔 무수한 실패와 성공을 기록한 책. “우리가 몰랐던 이야기……. 빛나는 영웅의 삶 이면에 존재하던 외롭고 자존심 강한 한 남자를 매우 흥미롭게 파고들었다.” - 《퍼블리셔스 위클리》


    
    

강좌로 돌아가기

댓글 0개

정렬기준