온보딩커리큘럼 3주차(CSS 2일차)

시맨틱마크업

디스플레이 블럭

인라인 블럭

폼 태그 기본 개념

폼 태그는 사용자로부터 데이터를 입력할 수 있는 범위를 지정할때 사용되며 주로 내부 input 요소들이 배치되어 있습니다. 추가로 이러한 정보들을 입력받아 서버와 통신할수 있지만 이번 실습에서는 사용자로부터 값을 입력받을 수 있는 폼을 만드는것 까지 진행합니다.

 

fieldset태그

서로 관련이 있는것을 묶을때 사용한다

 

label태그

체크박스를 클릭할때 네모체크박스가외에도 레이블로 감싼 곳 어디를 눌러도 체크박스에 체크가 된다.

<label>
<input type="checkbox" id="checkbox" /> 아이디 패스워드 저장
</label>

type=”submit”

form안에서 모든내용을 제출한다는 의미

<button type="submit">제출</button>

아이디 :

비밀번호 :

아이디 패스워드 저장

      $("#login").submit(function (event) {
        event.preventDefault(); // submit(화면을 새로고침)되는걸 막는다.
        var username = $("#username").val();
        var password = $("#password").val();
        var isChecked = !!$("#checkbox:checked").val();//id가 checkbox이면서 checked가 된걸 가져온다는 의미 
        //!! -> 불리언형식으로 값을 가져온다.
        alert(username + " / " + password + " / " + isChecked);
      });
    

tabindex=”3”

엘리먼트 안에서 클릭할 수 있는 버튼이 어떤 번호를 가지고 있는지 표현 할 수 있다.

 

autocomplete

네이버 검색창과 버튼 사이에 있는 아래화살표 버튼같은거

자동완성, 최근 검색어를 볼 수 있게 한다.

css에서 top과 bottom을 0으로 주면 100%센트로 위아래로 잡아 당겨서 사이즈를 맞춰준다.