CSS(Cascading Style Sheets)
화면에 표시되는 HTML 요소의 색상, 글꼴, 크기와 같은 스타일을 지정한다.
HTML 태그만을 사용해 웹 문서를 제작할 때 글꼴, 배경, 색상, 테두리, 레이아웃 등의 한계점을 보완해 웹 문서를 보기 좋게 꾸미는 것이 가능해진다.
웹 문서의 일관성을 유지할 수 있고 작업 시간이 단축된다는 점과 유지, 보수가 간편해진다는 장점이 있다.
HTML5에서는 문서의 스타일을 반드시 CSS에서 설정할 것을 권장하고 있다.
문법
CSS의 문법은 선택자와 선언 블록으로 이루어진다.
선택자(Selector)는 스타일을 변경할 요소 이름, id, class, 속성 등과 같은 HTML 요소를 가리킨다.
선택자 뒤에 중괄호를 붙이고, 중괄호 안에 요소의 스타일을 지정한다. 이 부분을 선언(Declaration)이라 부른다.
각 선언은 속성 이름과 값이 포함되며, 선언은 항상 세미콜론(;)으로 끝난다.
예를 들어 위와 같은 경우는 <p>요소 내의 텍스트들의 크기를 15pt, 색상을 red로 설정하게 된다.
삽입 방법
1. 외부 스타일 시트(External Style Sheet)
특정한 스타일시트 문서를 만들어 외부에 파일로 저장해 웹 문서에 연결하여 사용하는 방법이다.
전체 웹 문서의 스타일을 하나의 스타일 파일로 변경할 수 있기 때문에 많은 웹 문서에 동일한 스타일을 적용할 때 사용하면 좋다.
<head>요소 내부에 <link>태그를 이용해 연결한다.
HTML 파일 (파일명:016.html)
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/016.css"> </head> <body> <p>CSS 연습하기</p> </body> </html> | cs |
* 설명
<p>태그 안의 텍스트가 지정한 스타일로 바뀐 것을 확인할 수 있다.
2. 내부 스타일 시트(Internal Style Sheet)
HTML 파일 안에서 CSS를 정의하는 방법이다. <head>요소 내부에서 <style>태그를 이용한다.
HTML 파일
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p {font-size:15pt; color:red} </style> </head> <body> <p>CSS 연습하기</p> </body> </html> | cs |
3. 인라인 스타일 시트(Inline Style Sheet)
각각의 단일 요소마다 스타일을 지정해 주는 방법이다.
스타일시트의 장점을 잃는 것이나 마찬가지기 때문에 자주 사용하지 않는다.
HTML 파일
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p {font-size:15pt; color:red} </style> </head> <body> <p>CSS 연습하기</p> </body> </html> | cs |
우선순위(Cascading Order)
HTML 한 요소에 대해 여러 가지 방식으로 서로 다른 스타일을 지정했다면, 규칙에 따라 가장 우선순위가 높은 스타일이 적용된다.
1위 - 인라인 스타일시트
2위 - 헤드 부분에 저장된 내부 스타일시트
3위 - 외부 스타일시트
4위 - 웹 브라우저 디폴트 값
'프로그래밍 > 웹표준' 카테고리의 다른 글
| [CSS] 3. 배경 설정하기 (0) | 2017.06.27 |
|---|---|
| [CSS] 2.CSS에서 색상 표현하기 (0) | 2017.06.24 |
| 14. 글자 서식 지정과 특수 문자 표현 (0) | 2017.05.14 |
| 13. 양식 만들기 <form> (0) | 2017.02.27 |
| 12. <table>태그로 표 만들기 (0) | 2017.02.03 |
댓글,
