CSS란 웹 문서에 사용하는 태그에 스타일을 적용하기 위해 W3C에서 고안한 언어
-> 기존 html 처럼 태그와 스타일을 함께 사용하던 기존 방식은 지양하고, 태그와 스타일을 분리하는 방법으로 발전
문법 형식
크게 선택자와 선언부로 구분
선택자는 CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역
선언부는 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역으로, 중괄호 안({})에 넣음
-> 여기 작성하는 스타일은 반드시 속성과 값을 한쌍으로 작성
-> 값 뒤에 세미콜론을 넣으면 여러 스타일 연속해서 작성 가능
ex)
h1{
font-size:24px;
color:red;
}주석
/* 주석 내용 */CSS 적용하기
CSS를 HTML 문서에 적용하는 방법에는 대표적으로 3가지
- 내부 스타일 시트 사용하기
내부 스타일 시트는 HTML 파일 내부에 CSS 코드를 작성하는 방법
-> HTML에서 제공하는 style 태그 내에 CSS 코드 작성
<style>
/* CSS code */
</style>ex)
<head>
<title>내부 스타일 시트(Internal Style Sheet)</title>
<style>
h1{
color:blue;
}
</style>
</head>
<body>
<h1> 내부 스타일 시트</h1>
</body>style 태그를 사용하는 위치에 정해진 기준은 없지만, 보통 앞에 코드처럼 head 태그 안에 사용
-> HTML은 문서에 작성된 코드를 처음부터 순차적으로 해석하기 때문에, head 태그에 css를 작성하면 body 태그에 작성된 내용이 사용자에게 노출되기 전에 CSS를 불러와 빠르게 디자인 적용할 수 있다는 장점
-> 반면 웹 브라우저에서 HTML 문서를 해석할 때마다 CSS 코드를 매번 다시 읽기 때문에 성능상으로는 좋지 못함
- 외부 스타일 시트 사용하기
외부 스타일 시트는 CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 CSS 연결
-> 연결 시 link 태그 사용
<link rel="stylesheet" href="css 파일 경로">style.css
h1{
color:red;
}index.html
<head>
<title> 외부 스타일 시트</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> 외부 스타일 시트</h1>
</body>- 인라인 스타일 사용하기
HTML 태그에서 사용할 수 있는 style 속성에 CSS 코드를 작성하는 방법
-> 선택자 필요 X
<태그 style = "CSS 코드"></태그>ex)
<body>
<h1 style = "color:red; font-size:24px"> 인라인 스타일</h1>
</body>실무에서는 주로 외부 스타일 시트 방법 사용
-> 코드 유지보수 편하고 성능적으로 뒤어남
