기사의 내용

이 기사에서는 “link요소로 css파일을 불러오는 방법”에대하여 다루어 보겠습니다.

link요소로 css파일 불러오기

저번 강의 까지는 HTML문서내의 style요소를 사용하여 스타일을 수정하는 방법에 대하여 배워 보았습니다. 단, 아직 HTML문서 내에 디자인에 관한 소스가 남아있습니다. 거기서, 일단 분리하는 방법에 대하여 알아보도록 합시다.

일단 분리하기 위해서는 link라는 요소가 필요합니다. 저번 강의 에서 마지막에 사용한 소스를 분리하여 다른 css라는 이름의 폴더에 보관하여, 그 내용을 링크요소로부터 참조한 예를 아래에 기술해 봤습니다. href속성을 사용하여 참조 파일을 지정할수 있습니다.

index_css.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<h1>제 이름은 <span class = "name">댕댕이</span>입니다.</h1>
    <p><h1>취미는 <span id="hobby">게임 </span>입니다.</h1></p>
    <p>좋아하는<span class="game_name">게임</span>목록</p>
    <ul>
        <li>몬스터헌터</li>
        <li class="social_game">그랑블루 판타지</li>
        <li class="social_game">프린세스 커넥트</li>
    </ul>
    <h2>여러분 잘 부탁드립니다.</h2>
</body>
</html>

css/style.css

* {
    /*문서 전체의 색깔을 "#87CEEB"로 지정합니다.*/
    background-color:#87CEEB
}
.name {
    /*class="name"이란 클래스가 지정된 요소의 문자를 파랗게 만듭니다.*/
    color: blue;
}
#hobby {
    /*id="hobby"란 클래스 속성이 지정된 요소의 문자를 노랗게 만듭니다.*/
    color:yellow;
}
.game_name {
    /*class="game_name"이란 클래스 속성이 지정된 요소의 문자의 사이즈를 전부30px로 만듭니다.*/
    font-size: 30px
}
.social_game {
    /*class="social_game"이란 클래스 속성이 지정된 요소의 문자의 색을 녹색으로 만듭니다.*/
    color:green
}
h2 {
    /*h2태그 문자를 두껍게 표시합니다.*/
    font-style: bold;
}

완성소스

이걸로 문서의 스타일이 완전히 분리되었습니다. 실제로 웹사이트에서는 이와같은 css파일과 HTML파일을 분리하여 link요소로 관련짓는것이 주된 사이트의 작성법입니다. 여러분들도 습관을 들여 css를 사용하도록 합시다.

Web개발 – 처음하는CSS

프로그래밍 강좌 메인