CSS란
Cascading Style Sheets의 약자로 HTML, XHTML, XML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다.
HTML로 문서의 뼈대를 만들면 CSS는 이 문서의 화장을 맡고 있는 셈이다.
글꼴이나 크기, 배경색과 위치 등을 지정하거나 웹 브라우저, 스크린 크기, 장치에 따라 화면이 다르게 표시될 수 있도록 지정할 수도 있다.
HTML 문서에서 style 태그를 이용해 내부 스타일 시트로 꾸며줄 수 있지만 수정할 때 번거로움이 생긴다는 단점이 있다.
반대로 CSS 파일을 외부에 따로 만들어주는 외부 스타일 시트를 이용해서 분리하면 수정이 용이하다는 장점이 있다.
HTML 문서에 CSS 링크하는 방법은 다음과 같다.
HTML 문서에 CSS 링크하기
우선 HTML 문서와 CSS 파일을 따로 작성해줘야한다.
<html_t0paz.html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>t0paz</title> <link rel="stylesheet" type="text/css" href="180914_css.css"> </head> <body> <h1>회색 배경 넣기</h1> <h2>글씨 초록색으로 만들기</h2> <div>border 만들기</div> <p>글씨 크게 만들기</p> </body> </html> | cs |
<css_t0paz.css>
1 2 3 4 5 6 7 8 9 10 11 12 | h1{ background-color:gray; } h2{ color:green; } div{ border:4px solid black; } p{ font-size:50px; } | cs |
그리고 html 파일에 다음 줄을 넣어주면 된다.
<link rel="stylesheet" type="text/css" href="css_t0paz.css">
<html_t0paz.html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>t0paz</title> <link rel="stylesheet" type="text/css" href="css_t0paz.css"> </head> <body> <h1>회색 배경 넣기</h1> <h2>글씨 초록색으로 만들기</h2> <div>border 만들기</div> <p>글씨 크게 만들기</p> </body> </html> | cs |
실행화면
<CSS 링크 전>
<CSS 링크 후>
이렇게 CSS 파일을 외부에서 만들어주어 HTML 문서에 링크해주면 HTML 문서를 꾸밀 수 있다.
'프로그래밍 언어 > HTML' 카테고리의 다른 글
| [HTML] ul, ol, li 태그 (리스트 태그) (0) | 2018.09.22 |
|---|---|
| [HTML] 리눅스에서 html 파일 여는 법 (5) | 2017.07.03 |
| [HTML] HTML 문단, 목록, 링크, 이미지, 표 태그 (0) | 2017.07.02 |
| [HTML] HTML 기본 태그 (0) | 2017.07.02 |
| [HTML] HTML 구조 (0) | 2017.07.01 |
