CSS란
Cascading Style Sheets의 약자로 HTML문서의 스타일을 지정한다.
선택자 개념
css를 사용하려면 선택자를 작성한 후 중괄호를 열어 중괄호 안에 style 속성을 입력해야 한다.
p { background-color: yellow;}
여기서 각각에 대해서 설명하겠다.
- p : 선택자
- background-color : 속성
- yellow : 값
즉 간단히 정리하자면 아래 구조로 이루어진다.
선택자 { 속성 : 값; }
값 뒤에는 반드시 ;으로 마무리해야 한다.
선택자 종류
타입 선택자 : HTML 요소 이름을 사용 즉 태그를 통해 선택
h1 {color: green;}
p {color: red;}
전체 선택자 : 페이지(해당 코드) 안의 전체 요소 선택
* {color : green;}
아이디 선택자 : id로 지정된 요소를 선택
<p id="target"> Hello World!</p>#target { color: red; }
클래스 선택자 : 클래스가 부여된 요소를 선택
<p class="target">Hello World!</p>.target { color: red;}
선택자 그룹화 : 여러 개의 선택자를 콤마로 분리하여 그룹화할 수 있다.
h1, h2, h3{font-family: sans-serif;}
id1, id2, id3{font-family: sans-serif;}h1, h2, h3 3개의 타입 선택자를 그룹화하여 모두 CSS 적용
id 3개를 그룹화하여 모두 CSS 적용
자손, 자식, 형제 결합자
후손 관계
div span {color: red;}div요소 속의 모든 span에 color: red를 적용
자식 관계
div > span {color: red;}div요소의 직계 자식 요소인 span에 color: red를 적용
<style>
body em {color: red;}
body > h1 {color: blue;}
</style>
<body>
<h1>This headline is <em>very</em>important</h1>
</body>
속성 선택자 : 특정한 속성을 가지는 요소만 선택
h1[class="Title"]{color: blue;}
h1[id="mainTitle"]{color: blue;}
CSS 적용 방법
CSS 적용 방법은 총 3가지가 있다.
외부 스타일 시트 : 스타일 시트를 외부에 파일로 저장하는 방법 ( 보통 이 방법을 적용 )
외부에서 css파일을 작성하고 html문서에 적용시킨다.
<link type="text/css" rel="stylesheet" href="mystyle.css">1. 위 코드를 <head>태그 안에 작성한다.
2. href에 자신이 작성한 css 파일 이름과 확장자로 작성한다 만약 자신이 작성한 css파일이 wow.css라면?
<link type="text/css" rel="stylesheet" href="wow.css">
적용 예시
wow.css
h1 { color: red; }
p { color:#0026ff; }
test.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a headline.</h1>
<p>This is a paragraph.</p>
</body>
</html>
내부 스타일 시트 : HTML안에 CSS를 정의하는 것이다
외부 스타일 시트와 동일하게 <head>태그 안에 <style>태그를 작성한 후 그 안에 css요소를 작성한다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: red; }
p { color: #0026ff; }
</style>
</head>
<body>
<h1>This is a headline.</h1>
<p>This is a paragraph.</p>
</body>
</html>
인라인 스타일 시트 : 각각의 HTML 요소에 직접 스타일을 지정
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: red">This is a headline.</h1>
<p style="color: #0026ff">This is a paragraph.</p>
</body>
</html>위 코드와 같이 요소에 직접 style을 적용시킨다. 만약 2개 이상의 style이 있다면 반드시 끝에 ;을 적어 준다.
