[ 스파르타 / Web ] 웹 퍼블리싱 정복 2주차

HTML 태그

---

<fieldset>

---

서로 관련이 있는 것들을 묶을 때 사용된다. 

 

 

<legend>

---

관련된 사항들이 어떤 것이지 나타낸다. 보통 메인 제목들은 <h1>, <h2>, 등을 사용하지만 정석적으로는 form안에 fieldset을 만들고 filedset의 타이틀은 legend로 한다.

 

 

filedset과 legend 사용해보기

---

<form action="#" accept-charset="utf-8" name="information" method="get">
      <fieldset >
        <legend>개인정보</legend>
        <div>이름 : <input type="text" name="name" /></div>
        <div>나이 : <input type="text" name="age" /></div>
      </fieldset>
      <br />
      <fieldset >
        <legend>기타정보</legend>
        <div>취미 : <input type="text" name="hobby" /></div>
        <div>특기 : <input type="text" name="specialty" /></div>
      </fieldset>
</form>

 

 

<label>

---

label을 사용하지 않을 경우 아래와 같이 체크 박스를 클릭해야 박스에 체크가 된다.

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

 

반면 label로 input과 text를 감싸줄 경우 box와 text를 클릭해도 체크박스에 체크가 된다.

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

 

 

<dl> 태그 (Definition List)

---

목록을 나타내는 태그이다. 

 

 

 <dt> 태그 (Definition Term)

---

정의되는 용어에 대한 제목을 나타낸다.

 

 

 <dd> 태그 (Definition Description)

---

정의된 제목에 대한 설명을 나타낸다.

 

<dl>
   <dt>정의 제목</dt>
   <dd>정의 설명</dd>
</dl>

 

 

preventDefault()

---

로그인을 제출(submit)하게 되면 화면을 한번 새로고침 한다. 하지만 아래와 같은 코드를 적어줄 경우 화면의 새로고침하는 동작을 막는다.  새로고침을 막는 이유는 입력했던 정보가 날아가기 때문이다. 그래서 preventDefault를 해줌으로써 원래 값을 유지하고 jquery로 id가 username인 것과 password인 것을 선택해서 .val()을 하면 입력된 값을 usernamer과 password 변수에 담아준다. 

 

• checkbox:checked 체크박스에 체크가 될 경우 .val()로 인해 check가 된 블록의 값을 가져온다. 
• !!는 boolean형태로 구현이 가능하게 해 준다. 

$('#login').submit(function (event) {
        event.preventDefault();
        var username = $('#username').val();
        var password = $('#password').val();
        var isChecked = !!$('#checkbox:checked').val();
        alert(username + ' / ' + password + ' / ' + isChecked);
});