Login & Signup Page 클론코딩 리뷰

chaerin·2021년 1월 3일
0

HTML/CSS

목록 보기
6/10

1. HTML - form() 태그

form() 태그는 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용한다.

폼 태그 속성

폼 태그 속성에는 name, action, method, target 등이 있다. 폼 속성을 이용하여 전송할 때 어디로 보내야 하는지 그리고 어떤 방법으로 보낼지 정하게 된다. 폼 태그 속성은 다음과 같다.

  • action : 폼을 전송할 서버 쪽 스크립트 파일을 지정한다.
  • name : 폼을 식별하기 위한 이름을 지정한다.
  • accept-charset : 폼 전송에 사용할 문자 인코딩을 지정한다.
  • target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다.
  • method : 폼을 서버에 전송할 http 메소드를 정한다. (GET 또는 POST)

< GET 방식과 POST 방식 >
전송할 http 메소드 종류인 GET과 POST는 브라우저에서 폼 데이터를 가져와 서버로 보내는 똑같은 기능을 수행하지만, GET은 폼 데이터를 URL 끝에 붙여서 눈에 보이게 보내고 POST 방식은 내부적으로 보이지 않게 보낸다.

URL 끝에 데이터를 붙여 보내는 GET 방식은 데이터가 외부에 노출되어 보안에 취약하므로 보내려는 데이터가 개인정보나 보안을 해야 하는 경우는 POST 방식을 사용해야 한다.

또한, HTTP 메소드 정의에서 GET 방식은 지정된 리소스에서 데이터를 요청하는 경우인 읽을 때 사용하는 메소드인 반면 POST 방식은 지정된 리소스에서 데이터를 처리할 경우인 쓰고, 수정, 삭제할 때 사용한다. 따라서 보안이 필요하지 않으면서 지정된 리소스에서 자원을 읽을 경우에는 GET 방식을 사용하고, 그렇지 않다면 POST 방식을 사용하면 된다.

다양한 타입의 input 요소

HTML에서는 다양한 타입의 input 요소를 사용하여 사용자로부터 입력을 받을 수 있다.

HTML에서 사용할 수 있는 대표적인 input 요소의 타입은 다음과 같습니다.

  • 텍스트 입력(text)
    <input>태그의 type 속성값을 "text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있다.
<form action="/examples/media/request.php">
    검색할 내용을 입력하세요 :
    <input type="text" name="search">
</form>
  • 비밀번호 입력(password)
    <input>태그의 type 속성값을 "password"로 설정하면, 사용자로부터 비밀번호를 입력받을 수 있다. 비밀번호를 입력받기 때문에 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시e된다.
<form>
    사용자 : <br><input type="text" name="username"><br>
    비밀번호 : <br><input type="password" name="password">
</form>
  • 라디오 버튼(radio)
    <input>태그의 type 속성값을 "radio"로 설정하면, 사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있다.
    이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 한다.
<form>
    <input type="radio" name="lecture" value="html" checked> HTML <br>
    <input type="radio" name="lecture" value="css"> CSS <br>
    <input type="radio" name="lecture" value="java"> JAVA <br>
    <input type="radio" name="lecture" value="cpp"> C++
</form>

checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

  • 체크박스(checkbox)
    <input>태그의 type 속성값을 "checkbox"로 설정하면, 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있다. 체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있다. 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 한다.
<form>
    <input type="checkbox" name="lecture" value="html" checked> HTML <br>
    <input type="checkbox" name="lecture" value="css"> CSS <br>
    <input type="checkbox" name="lecture" value="java"> JAVA <br>
    <input type="checkbox" name="lecture" value="cpp" disabled> C++
</form>

checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.
또한, disabled 속성을 이용하여 해당 옵션을 선택할 수 없게 설정할 수도 있다.

  • 파일 선택(file)
    <input>태그의 type 속성값을 "file"로 설정하면, 사용자로부터 파일을 전송받을 수 있다.
<form>
    <input type="file" name="upload_file" accept="image/*">
</form>

accept 속성을 이용하여 입력받을 수 있는 파일의 확장자 및 종류를 명시할 수 있다.

  • 선택 입력(select)
    select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그중에서 단 하나의 옵션만을 입력받을 수 있다.
    option 요소는 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 명시한다.
<select name="fruit">
    <option value="apple"> 사과
    <option value="orange" selected><option value="strawberry"> 딸기
    <option value="peach"> 복숭아
</select>

selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

  • 문장 입력(textarea)
    textarea 요소는 사용자로부터 여러 줄의 텍스트를 입력받을 수 있다.
<textarea name="message" rows="5" cols="30">
    여기에 적으세요.
</textarea>

rows 속성과 cols 속성을 이용하여 textarea 요소의 크기를 자유롭게 지정할 수 있다.

  • 버튼 입력(button)
    button 요소는 사용자가 누를 수 있는 버튼을 나타낸다.
<button type="button" onclick="alert('버튼을 클릭하셨군요!')">
    버튼을 눌러주세요.
</button>
  • 전송 버튼(submit)
    <input>태그의 type 속성값을 "submit"으로 설정하면, 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼을 만들 수 있다.

    폼 핸들러(form-handler)란 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지를 의미한다.
    이러한 폼 핸들러의 주소는 form 요소의 action 속성을 이용하여 명시할 수 있다.
<form action="/examples/media/request.php">
    어릴 때 자신의 별명을 적어주세요 : <br>
    <input type="text" name="nickname" value="별명"><br><br>
    <input type="submit" value="전송">
</form> 
  • 필드셋(fieldset)
    fieldset 요소는 form 요소와 관련된 데이터들을 하나로 묶어주는 역할을 한다.
    legend 요소는 fieldset 요소 안에서만 사용할 수 있으며, fieldset 요소의 제목을 나타낸다.
<form action="/examples/media/request.php">
    <fieldset>
        <legend>입력 양식</legend>
        이름 : <br>
        <input type="text" name="username"><br>
        이메일 : <br>
        <input type="text" name="email"><br><br>
        <input type="submit" value="전송">
    </fieldset>
</form>

참고 사이트
http://www.tcpschool.com/html/html_input_forms
http://www.nextree.co.kr/p8428/

2. CSS - transition

CSS 트랜지션은 단축(shorthand) 속성 transition을 사용하여 제어한다. 애플사이트 클론코딩을 한 후 transition-timing-function 이라는 CSS transition에 대해 공부했는데 이번 클론코딩에서 transition-property를 사용하게 되어 정리해 보려 한다.

transition❓
transition CSS 속성은 transition-property, transition-duration, transition-timing-functiontransition-delay를 위한 단축 속성이다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있다. 엘리먼트의 각 상태는 가상 클래스 를 사용해 정의된 :hover 이나 :active 또는 자바스크립트를 사용해 동적으로 만들어진 것들이다. 아래와 같이 사용된다.

div {
    transition: <property> <duration> <timing-function> <delay>;
}
  • transition-property
    트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시한다. 여기에 나열한 속성만 트랜지션하는 동안 움직인다. 또한, 다른 모든 속성에 대한 변화는 보통 때와 같이 즉시 일어난다.

  • transition-duration
    트랜지션이 일어나는 지속 시간을 명시한다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있다.

  • transition-timing-function
    속성의 중간값을 계산하는 방법을 정의하는 함수를 명시한다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정한다. 대부분의 타이밍 함수는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있다. Easing Functions Cheat Sheet에서 이징(easing, 역자주: 시간에 따른 파라미터 값의 변화율을 명시하는 함수)을 선택할 수도 있다.

  • transition-delay
    속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의한다.


    🔍 트랜지션에 대한 자세한 내용은 아래 링크에서 참고하기!
    https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

0개의 댓글