CSS란?
- CSS(Cascading Style Sheets)는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소이다.
- HTML이 텍스트나 이미지, 표 같은 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면 CSS는 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당한다.
CSS 적용 방법
- 내부 스타일 시트(Internal style sheet)
- 외부 스타일 시트(External style sheet)
- 인라인 스타일(Inline style)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body { background-color: lightyellow; }
h2 { color: red; text-decoration: underline; }
</style>
<link rel="stylesheet" href="style.css">
<body>
<h2 style="color:green; text-decoration:underline">
인라인 스타일을 이용하여 스타일을 적용하였습니다.
</h2>
</body>
</html>
CSS 선택자
- HTML 요소 선택자: CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택
- 아이디(id) 선택자: 아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용
- 클래스(class) 선택자: 클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용
- 그룹(group) 선택자: 여러 선택자를 같이 사용하고자 할 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
h2 { color: teal; text-decoration: underline; }
#heading { color: teal; text-decoration: line-through; }
.headings{
color: teal; text-decoration: line-through;
}
h1,h2 {
font-size: 30px;
}
</style>
<body>
<h2>HTML요소 선택자</h2>
<h2 id="heading">ID선택자</h2>
<h2 class="headings">클래스 선택자</h2>
<h3 class="headings">클래스 선택자</h3>
<h1>그룹 선택자 설명</h1>
<h2>여러 선택자를 같이 사용하고자 할때 사용 ,(쉼표)로 구분하여 연결 </h2>
</body>
</html>
