HTML 문서에서 외부 스타일 사용하기
안녕하세요 이번시간에는 HTML 문서에서 외부 스타일 사용하는 방법에 대해서 알아보도록 하겠습니다.
외부 파일로 스타일을 만들어서 불러오는 경우는 여러 문서에 가져다 쓸 수 있기 때문에 확장성에 용이합니다.
실습 영상을 먼저 보도록 하겠습니다.
일단 html 문서와 같은 폴더내에 style.css 파일을 만들어 둡니다. 같은 폴더가 아니더라도 href 속성값에 경로를 잘 지정해 줄 수 있다면 다른 경로에 파일을 만드셔도 됩니다.
파일을 만들고 나서 <head> ... </head> 사이에 아래와 같이 소스 코드를 삽입합니다. 그리고 style.css 에서 태그에 대한 속성들을 지정해 주면 됩니다.
css 에서의 주석은 /* ~ */ ( 슬래시 별표 ~ 별표 슬래시 ) 입니다.
<link rel="stylesheet" href="style.css">
소스 코드를 삽입하고 나면 문서 파일과 스타일 파일이 연결이 됩니다.
스타일 파일에서 태그에 대한 속성과 값을 지정해 주면 문서내의 글자 폰트, 색상, 배경색등...디자인이 변경됩니다.
/* css 에서의 주석입니다. */
body { background-color: powderblue }
h1 { color:blue }
p {color:red}
스타일 태그에 대해서 3회에 걸쳐 알아보았습니다.
다음 시간은 테이블 태그에 대해서 알아보도록 하겠습니다.
'Program > HTML' 카테고리의 다른 글
| 따라하며 배우는 HTML - #10 ( Table - border collapse ) (0) | 2018.10.09 |
|---|---|
| 따라하며 배우는 HTML - #9 ( TABLE ) (0) | 2018.10.09 |
| 따라하며 배우는 HTML - #7 ( Internal CSS ) (0) | 2018.10.08 |
| 따라하며 배우는 HTML - #6 ( HTML Style) (0) | 2018.10.07 |
| 따라하며 배우는 HTML - #5 ( a 태그 ) (0) | 2018.10.06 |