<!--
css : cascade style sheet
1. 웹 페이지에 스타일(서식)을 적용하는 기능
2. 기본 형식
1) inline-style : 가장 높은 우선순위를 가진다.
<h1 style="color:red"></h1>
2) internal-style : <style> 태그에 작성
<style>
h1{ color:red }
</style>
3) external-style : 외부에 *.css파일을 만들어서 작성
<style>
<link rel="stylesheet" text="text/css" href="./css/mystyle.css" />
==> WebContent 아래에 css 폴더를 만들고 mystyle.css 파일을 저장
</style>
* CSS 적용 순서
- <head> 안에 넣는 순서에 따라 적용 순서가 바뀜(가장 마지막에 선언한 값이 적용됨)
- 일반적으로 link를 먼저 선언
3. 선택자 (selector)
1) 전체 선택자 : 초기화 용도로 사용한다.
* {속성:값}
2) 태그 선택자
태그명 {속성:값}
3) 클래스 선택자 : 같은 종류의 스타일을 사용할 서로 다른 태그에 공통적인 클래스를 지정 후 사용
.클래스 {속성:값}
4) 아이디 선택자 : 같은 페이지내에서 중복된 아이디는 있을 수 없다.
#아이디 {속성:값}
5) 자식 선택자 : A 바로 아래 B 만 적용 (A엔 적용안됨)
A > B {속성:값}
6) 자손 선택자 : A 아래 모든 B 에 적용
A B {속성:값}
7) 인접형제선택자 : A의 첫번째 동생 B 에게 적용
A + B {속성:값}
8) 일반형제선택자 : A의 모든 동생 B에 적용
A ~ B {속성:값}
9) 속성선택자
(1) E[attribute] : attribute 속성이 포함된 E
(2) E[attribute="value"] : attribute 속성 값이 value인 E 요소
(3) E[attribute^="value"] : attribute 속성 값이 value로 시작하는 E 요소
(4) E[attribute$="value"] : attribute 속성 값이 value로 끝나는 E 요소
(5) E[attribute*="value"] : attribute 속성 값이 value를 포함하는 E 요소
10) 가상클래스선택자
(1) E:link : 방문한 적이 없는 링크 E 요소
(2) E:visited : 방문한 적이 있는 링크 E 요소
(3) E:active : 마우스가 클릭되는 동안 또는 키보드의 엔터를 누르는 동안 E 요소
(4) E:hover : 마우스가 올라가 있는 동안 E 요소
(5) E:focus : E 요소에 포커스가 머무는 동안
(6) E:first-child : E 요소의 첫번째 요소
(7) E:last-child : E 요소의 마지막 요소
(8) E:nth-child(n) : E 요소의 n번째 요소
(9) E:first-of-type : E 요소의 첫번째 타입 요소
(10) E:last-of-type : E 요소의 마지막 타입 요소
(11) E:nth-of-type(n) : E 요소의 n번째 타입 요소
4. css 주석 사용방법
/* 주석 */ : single line, multi line 모두 같은 방법 ( //사용불가! )
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> css </title>
</head>
<body>
</body>
</html>
