20210903 html - label ~ 선택자 활용

label, for 

 

---

type -> password

 

- 입력한 내용이 * 처리 된다.

---

placeholder

---

 

type - hidden

 

---

type - radio

 

 

---

checkbox

---

type - number

IE에서는 호환이 안되니 사용시 주의

 

---

type - date

IE에서는 호환이 안되니 사용시 주의

---

seleted

 

 

 

---

textarea

te -> ctrl space bar

괄호 사이에 문자열을 입력하면 박스안에 표시된다.

 

---

form

- method 속성을 입력하지 않으면 기본적으로 get 방식으로 설정된다.

---

 

 

css

- html 이나 xml 로 작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어

- html의 외형을 결정

- 정렬,색상, 폰트크기 등을 지정

 

 

구분 : 스타일속성, 스타일 값

- 각 태그들의 style속성에 적용

 ex > <div style = ""></div>

 

- 스타일 태그 안에 선택자 활용

<style>

 

---

 

1. 스타일속성 : 적용대상 태그의 하위 영역은 영향을 받는다.

- 간단하게 적용하거나 java script 로 적용할때 쓰인다.

 

 

 

2. 선택자활용 : style 태그안에 선택자를 활용

- 스타일 속성보다 많이 쓰인다.

section 영역은 전부 적용되었다

 

 

---

선택자 활용

1. 속성명

 

 

2. 속성명과 속성값

 

3. id

 

4. class

 

---

<외부의 css 파일 불러와서 적용시키기>

1. resource 파일을 만들어서 img, css 등 파일을 따로 정리

 

2. html 

<link href = "경로" rel="sytlesheet">를 head 에 입력

html

3. css 파일에는 sytle 태그를 제외한 내부의 텍스트만 입력한다.

css

---

1. 상하관계표현

- ul >li >span 의 색상 : 레드

- ul > li01 클래스의 span 폰트사이즈 : 50px

 

2. and

공백은 없다!

div 와 domain 이 일치하는 태그를선택하여 폰트색상을 변경

 

 

3. or

 

- domain2 클래스와 my-section id를 선택하여 변경

 

4. 복합예제 활용

- 여러개 적용할 경우 아래 css가 적용된다.

 

ul과 li01 을 만족 / li02 클래스의 div / my brother 네임을 보더로 변경

 

 

---

<실습예제>