fieldset, [CSS] 셀렉터 의사클래스

fieldset ==> 입력요소들을 그룹으로 묶어서 표현할 때 사용

legend ==> fieldset의 제목을 지정할 때 사용

입력요소의 새로운 속성

placeholder ==> 입력 힌트를 희미하게 표시

autofocus ==> 페이지가 로딩되면 자동으로 해당 입력폼을 활성화시킨다

checkbox나 radio객체와 '문자열'과 연결하려면 문자열을

label태그로 감싸고, checkbox나 radio객체에는 id속성을 설정한다.

그리고 label태그에 for속성과 연결하려는 id속성값을 대입한다.

내부 CSS의 기본 형식

셀렉터 { 스타일 속성:값; 스타일 속성2:값2;}

-셀렉터 ==> 문서에서 스타일을 적용할 대상을 선택하는 명령

셀렉터의 종류

1. * : 모든 엘리먼트에 스타일을 적용한다.

* { font-size:15pt; color:green;}

2. 태그명 { 스타일 정의 }

==>지정한 태그명이 해당되는 곳에 스타일을 적용한다.

p { font-size:18pt; color:green;}

div { color:red; font-size:12pt; font-family:궁서체;}

3. 태그명.class속성값 {스타일 정의}

==>지정한 태그명에 해당하는 것들 중 class속성값이 일치하는 곳에 스타일을 적용한다.

p.test { font-size:18pt; color:green; }

4. .class속성값 {스타일 정의}

==> 모든 태그들 중에서 class의 속성값이 일치하는 곳에 스타일을 적용한다.

.test { font-size:18pt; color:green; }

5.태그명#id속성값 {스타일정의}

==>지정한 태그명들 중에서 id속성값이 일치하는 곳에 스타일을 적용한다.

p#myid { font-size:18pt; color:green; text-decoration: underline;}

6.#id속성값{스타일 정의}

==>모든 태그들 중에서 id속성값이 일치하는 곳에 적용한다. 

#identify { color:red; font-size:12pt; font-family:궁서체; }

7.셀렉터1, 셀렉터2, 셀렉터3{스타일정의}

==> 각각의 셀렉터에 해당하는 모든 곳에 스타일을 적용한다.

8.셀렉터1 셀렉터2 {스타일정의}

==>셀렉터1의 자손 중에서 셀렉터2에 해당하는 모든 곳에 스타일을 적용한다.

div span { font-size:18pt; color:green; text-decoration: underline;}

9.셀렉터1>셀렉터 {스타일 정의}

==>셀렉터1의 자식들 중에서 셀렉터2에 해당하는 모든 곳에 스타일을 적용한다.

10.셀렉터1 + 셀렉터2 {스타일정의}

==>셀렉터1의 바로 다음에 오는 형제중 셀렉터2에 해당되는 곳에 스타일을 적용한다.

11.셀렉터1 ~ 셀렉터2{스타일정의}

==>셀렉터1의 뒤에 오는 형제들 중에서 셀렉터2에 해당되는 모든 곳에 스타일을 적용한다.    

-의사클래스 ==> 클래스 정의된 것처럼 간주되어 처리되는 것

형식) 셀렉터:의사클래스명{스타일 정의}

a:link

==>방문한 내역이 없는 링크걸린 글자에 스타일 적용

a:visited

==>방문한 내역이 있는 링크걸린 글자에 스타일 적용

셀렉터:hover

==>셀렉터에 해당하는 곳에 마우스 커서가 놓였을 때에 스타일을 적용한다

셀렉터:active

==>셀렉터에 해당하는 곳에서 클릭이 발생하는 순간에 스타일을 적용한다.

a { border:1px solid gray;}

a:link { font-size:20pt; color:red;}

a:visited { font-size:30pt; color:green;}

a:hover { background-color: cyan}

a:active { background-color: pink}