form 태그
<select>: select 폼 생성, name
<option>: select 폼의 옵션 값 생성, value, selected, disabled
<optgroup>: option을 그룹화, label
<input>
type="button", name
type="text", name
type="password", name
type="checkbox", name, value, checked
type="radio", name, value, checked
type="date", name
type="datetime-local", name
type="color", name
CSS
인라인 방식: 태그마다 스타일을 선언, 재사용 불가
내장 style: <head> 내부에 미리 선언하여 사용
링크 방식: <link />로 외부 CSS 문서를 가져와서 연결하는 방식
@import 방식: CSS 문서 안에서 또 다른 문서를 가져와 연결하는 방식
- 가장 늦게 읽히는 것이 우선 적용 => 인라인 방식이 무조건 우선
선택자: 스타일을 적용하고자 하는 HTML 요소를 선택하는 수단
속성: { } 내에 다양한 스타일의 정의, 세미콜론으로 구분
값: 해당 속성에 사용할 수 있는 값을 특정 단위로 지정
기본 선택자
- 전체 선택자: * { }
- 태그 선택자: ABC { }
- 클래스 선택자: .ABC { }
- 아이디 선택자: #ABC { }
- 아이디는 유일해야 하며, 클래스에 우선함
복합 선택자
- 일치 선택자: ABCXYZ { }
- 자식 선택자: ABC > XYZ { }
- 하위(후손) 선택자: ABC XYZ { }
- 인접 형제 선택자: ABC + XYZ { }
- 일반 형제 선택자: ABC ~ XYZ { }
가상 클래스 선택자
- hover: 마우스 커서가 올라가 있는 동안 선택, ABC:hover { }
- active: 마우스를 클릭하고 있는 동안 선택, ABC:active { }
- focus: 요소가 포커스되면 선택, ABC:focus { }
- focus가 안되는 요소에 강제로 추가하기: 속성으로 tabindex="-1"
- ABC:first-child { }
- ABC:last-child { }
- ABC:nth-child(n) { }, 짝수 2n 홀수 2n+1
- ABC:not(XYZ){ }
가상 요소 선택자: 선택된 요소의 앞 뒤에 별도의 content를 삽입하는 선택자
- 반드시 content 속성 사용, 빈 값이라도 넣어야 함
- css로 html 문서의 내용을 변경할 수 있는 유일한 방법
- ABC::before { }
- ABC::after { }
속성 선택자: 특정 속성을 가지고 있는 태그를 선택하는 선택자
- [ABC] { }
- [ABC="XYZ"] { }
'KDT > TIL' 카테고리의 다른 글
| 6/27-7/1 TIL : Bootstrap (0) | 2022.07.07 |
|---|---|
| 6/24 TIL : CSS 전환, 반응형, 실습(오버워치 캐릭터 선택창) (0) | 2022.06.24 |
| 6/22 TIL : CSS 속성, 배치 (0) | 2022.06.23 |
| 6/20 TIL : Git 기초, CSS 속성 (0) | 2022.06.21 |
| 6/15 TIL : HTML 기초 (0) | 2022.06.15 |