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}
'먼지 낀 책장사이 > html' 카테고리의 다른 글
[CSS] font-style, text-style, box모델, background (0) | 2017.08.04 |
---|---|
멀티미디어, div와 span2, iframe, 입력form (0) | 2017.07.27 |
anchor태그, 절대/상대경로, 표만들기 (0) | 2017.07.26 |
특수문자, 리스트<ul,ol,dl> (0) | 2017.07.25 |
기본 요소 (0) | 2017.07.24 |