2023.03.21_웹 퍼블리싱

TIL

2023.03.21_웹 퍼블리싱

minnjeong 2023. 3. 21. 18:51

스파르타코딩클럽 웹 퍼블리싱_2주차

폼 태그 : 사용자로부터 데이터를 입력할 수 있는 범위를 지정할 때 사용된다. input요소를 감쌀 때 쓰기도 한다.

fieldset : <fieldset></fieldset>은 관련있는 것을 묶을 때 많이 사용한다.

legend : 'form > fieldset > 제목은 legend도 한다'가 폼 태그의 사용법 정석

<body>
    <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>

input type = "password"

password 필드의 문자는 별표나 동그라 미로 가려집니다.

label

label로 감쌀 때 효과는?

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

체크박스를 클릭해야지 체크가 활성화되는데, label로 감싸게 될 경우 감싼 것을 클릭해도 활성화가 된다.

button type ="submit"

form 안에서 이 모든 내용을 제출한다. 라는 의미의 타입

해당 버튼이 폼 데이터(form data)를 제출하는 제출 버튼(submit button)임을 명시함.

button type ="button"

jQuery 구조

$('#login').submit(function () {
  //원하는 이벤트 동작을 입력
  //#은 id, <form id="login"> 이므로 이 form이 submit 되었을 때를 의미
});

event.preventDefault();

Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다.

예를 들어,

<a> 태그는 href에 연결된 링크를 통해, 해당 페이지로 이동하는 기능을 가지고 있다.

<submit> 태그는 그 태그의 값을 전송하면서 해당 페이지를 새로고침 하는 기능을 가지고 있다.

위 기능을 실행하지 않도록 해준다.

예

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

checkbox

var isChecked = !!$('#checkbox:checked').val();

checkbox:checked

: 를 쓰게 되면, id가 checkbox이면서, 체크가 된 블록의 값을 가져오라는 의미이다.

!!$('checkbox:checked')

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

원래 <input type="checkbox" id="checkbox" value="1"/> 을 하면 1이라는 값이 isChecked에 들어온다.

체크된 경우 1, 그렇지 않은 경우는 undefined가 나온다. 이를 true와 false로 나오기 위해서 !!를 만들었고, value=1는 필요가 없어진다.

위처럼 true와 false로 받는 것을 불린(boolean) 형태라고 한다. !!를 사용할 것

reset 코드

기존 속성 스타일을 reset

position ★

.search_area {
  position: absolute;
}

position : absolute 또는 relative 을 해야지만, top과 bottom의 위치를 잡을 때 기준을 잡을 수 있다.

하위에 있는 엘리먼트 값을 내 마음대로 지정하고 싶다면, 버튼을 감싸는 메인 박스에서 position : absolute 또는 relative를 준다.

relative는 현재 자신의 위치에서 찾게 됨. absolute를 더 많이 씀.

absolute는 퍼센트로도 위치 지정이 가능함.

정리

https://minnjeong.tistory.com/31

background-position

border

border : 2px(border 두께) solid(스타일) 색상

margin과 padding

tabindex : 엘리먼트 안에서 클릭할 수 있는 요소가 어떤 번호를 가지고 있는지