HTML문서에 .CSS Link하기(외부 스타일시트)

Posted by ITPangPang
2016. 10. 3. 22:23 웹(Web)/CSS


HTML문서에 .CSS Link하기

(외부 스타일시트)


ㆍ 음 제목이 참.. 이상하네요


ㆍ 이번에는 HTML문서에 CSS 파일을 연결하는 방법을

    알아보도록 하겠습니다


ㆍ 지금까지는 .HTML 파일에 CSS코드까지 한번에 써서

    사용했었는데 이번글에서 HTML 따로 CSS 따로 해서

    코드를 작성하는 방법에 대해 알아보겠습니다.



일단 HTML파일 따로 CSS 파일 따로 만들자


일단 저는 서브라임이므로

서브라임에서


html_ex.html

css_ex.css


이렇게 파일

2개를 만들도록

하겠습니다


아 

혹시 모르니

두 파일은 같은 경로에

만들어 주세요

폴더를 만드는게

가장 좋긴 하겠죠?


이렇게 만든후에

이제 각각 작업을

해주면 됩니다.


HTML, CSS 각각 작업 시작


먼저

html_ex.html에서

Text 3줄을 넣어보겠습니다

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
</head>
<body>
    <h1>배경을 넣어주세요</h1>
    <h2>글씨를 초록색을 바꿔주세요</h2>
    <div>border를 넣어주세요</div>
</body>
</html>
cs


그 다음에

Text들을 꾸며주기 위해서


css_ex.css에서

각 태그들에 css 스타일을

입혀줍니다

1
2
3
4
5
6
7
8
9
h1{
    background-color: #BDBDBD;
}
h2{
    color:green;
}
div{
     border:4px solid black;
}
cs


자 이제

.css <-> HTML


CSS와 HTML을 연결시키면

끝나겠죠?


<link rel= "stylesheet" type="text/css" href="xxx.css"> 추가


CSS를 연결시키기 위해서

HTML 파일 <head>와 </head>에

위 코드를 추가시키겠습니다

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
    <link rel= "stylesheet" type="text/css" href="css_ex.css">
</head>
<body>
    <h1>배경을 넣어주세요</h1>
    <h2>글씨를 초록색을 바꿔주세요</h2>
    <div>border를 넣어주세요</div>
</body>
</html>
cs


자 이렇게 써주면

간단하게 연결이 완료됩니다


결과를 볼까요?

결과가 잘 나온것 같죠?

(border 오타 흑.ㅠ)



이번에는 ID를 부여해서

CSS 디자인을 입혀보도록

하겠습니다.


html_ex.html

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
    <meta charset = "utf-8">
    <title>ITPANGPANG</title>
    <link rel= "stylesheet" type="text/css" href="css_ex.css">
</head>
<body>
    <h1 id="plz_bg">배경을 넣어주세요</h1>
    <h1 id="plz_color">글씨를 초록색을 바꿔주세요</h1>
    <h1 id="plz_border">border를 넣어주세요</h1>
</body>
</html>
cs


css_ex.css

1
2
3
4
5
6
7
8
9
#plz_bg{
    background-color: #BDBDBD;
}
#plz_color{
    color:green;
}
#plz_border{
     border:4px solid black;
}
cs


자 이렇게 ID를

찾기 위해서

#아이디

를 한 후에

스타일을 적용해주면 됩니다


결과를 보면서

마무리 하도록 하겠습니다




저작자표시 비영리 변경금지

'웹(Web) > CSS' 카테고리의 다른 글

inline, block 요소  (0) 2016.12.11
CSS 기본(font-size, color, background, border)  (0) 2016.11.12
CSS로 표를 꾸며보자  (0) 2016.07.03
CSS 하이퍼링크 꾸미기  (0) 2016.06.20
CSS로 Hello World 꾸미기(Internal Style tag)  (0) 2016.06.19
Trackback: Comment:

티스토리툴바