- 사용자에게 문서를 표시라는 방법을 지정하는 언어 -스타일, 레이아웃
- 웹 사이트에서 화면에 표시되는 정보들을 꾸며주는 역할
CSS 사용 방법
- HTML 안에서 Style 속성을 이용하는 방법(인라인 스타일)
<style>태그를 통해 HTML 문서 내부에서 이용하는 방법(내부 스타일 시트)- 별도로 CSS 파일을 분리하여 HTML의 문서에 연결하는 방법(외부 스타일 시트)
-
인라인 스타일
<p style="font-size:20px;">안녕하세요</p> -
내부 스타일 시트
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> h1 { color: red; } </style> </head> <body> <h1>h1</h1> </body> </html> -
외부 스타일 시트
<head>
<title>Document</title>
<link rel="stylesheet" href="index.css" />
</head>index.html
h1 {
color: red;
}index.css
스타일 적용의 우선 순위
- 인라인 스타일
- 내부 스타일 시트, 외부 스타일 시트
- 웹 브라우저 기본 스타일
CSS 기본 구조
h1(selector: 선택자): CSS를 적용할 위치의 HTML 요소를 가르킴
color(프로퍼티: 속성): 셀렉터가 지정한 위치의 무엇을 바꿀 것인지 결정
red (값): 프로퍼티로 지정한 것을 얼마나 바뀌게 할지 결정
