[CSS] 20230117 CSS INPUT 태그와 상위포지션

어제 휴가를 다녀와서 하루 수업을 빠졌더니 약간의 공백이 생겨버렸다.

아마도 가상요소..? 부분인거 같은데 책으로 공부해보고 내일 가서 물어봐야지 

 

 

오늘 처음 보는 것들 

1. label

레이블은 항목에 대한 캡션을 만든다 . 

2. input

<label>를 양식 컨트롤과 연결하면 다음 <input>과 <textarea>같은 몇 가지 주요 이점이 있습니다.

• 레이블 텍스트는 해당 텍스트 입력과 시각적으로만 연결되는 것이 아닙니다. 프로그래밍 방식으로 연결되어 있습니다. 즉, 예를 들어 사용자가 양식 입력에 집중하면 화면 판독기가 레이블을 읽어 보조 기술 사용자가 어떤 데이터를 입력해야 하는지 더 쉽게 이해할 수 있습니다.
• 사용자가 레이블을 클릭하거나 터치/탭하면 브라우저는 관련 입력에 포커스를 전달합니다(결과 이벤트도 입력에 대해 발생함). 입력에 집중하기 위한 증가된 히트 영역은 터치 스크린 장치를 사용하는 사람을 포함하여 입력을 활성화하려는 모든 사람에게 이점을 제공합니다.

<label>요소를 요소와 명시적으로 연결하려면 <input>먼저 id속성을 <input>요소에 추가해야 합니다. 다음으로 요소에 for특성을 추가합니다 <label>. 여기서 의 값은 요소 의 for와 동일합니다 .id<input>

<input>또는 를 내부에 직접 중첩할 수 있습니다. <label>이 경우 연관이 암시적이기 때문에 for및 속성이 필요하지 않습니다.

3. legend 그룹의 제목 태그

4. placeholder(가상요소) 사용자가 입력하기 전에 내용을 띄워 편의를 돕는다. 

5.fieldset 폼 요소의 그룹화를 하기위함.

6.button

7. input type="radio"  는 중복선택이 불가능함

 

 

 

7. Q. 상위포지션이 뭐임?

 

8. # b{position: fix} 은 화면상에 정해진 위치에 고정이 되어있어서 스크롤을 내리면 따라 내려온다. 

9.top과 bottom left right 값은 서로 충돌되어 한번에 정해주었을 때 모두 출력이 되지 않는 경우가 있다.

그럴때는 우선순위에 따라(top left 만 만족시켜서) 출력된다.

그런데 div의 width 와 height가 충분히 커서 모든 값을 만족시켜줄 수 있을때는 모든 값을 적용시켜 출력됨.

10. z-index: Z(음수도 가능); Z의 값이 클수록 화면상 맨 위에 올라온다 

11. 주로 absolute의 부모는 relative 으로 정해준다. 물론 absolute가 될수도 있다.

12. 만약  parent 의 position값을 정해주지 않으면 this의 부모는 grand로 인식하여 this의 위치가 달라진다.

 

 

 

 

 

 

 

 

 

 

 

 

 

오늘도 역시 개인과제가 있다.

아 그리고 드디어  USB를 갖고 다니기 시작해서 집에서 편하게 복습할 수 있게 되었다