HTML
- a태그 : 다른 문서로의 이동, 또는 같은 문서내의 이동을 위해 사용한다.
- href "#" : 클릭 이벤트 발생시 페이지 전환을 하지 않도록 하기 위해서 쓰인다. -> #으로 의미없는 링크를 주어 페이징이 안되도록 -> 클릭시 화면 최상단으로 이동
onclick="window.scrollTo(0,0);" : 화면 최상단으로 이동 - href="#;" 으로 하면 최상단으로의 이동없이 이벤트가 수행된다.
-
입력 칸을 밑줄로 표시하도록 만들고 있습니다. input 태그의 border 속성을 none으로 설정하고, border-bottom 속성을 2px의 실선으로 설정하여 밑줄 효과를 만들고 있습니다. 이때, box-sizing 속성을 border-box로 설정하여 padding 값이 border값을 포함하도록 만들어주어 입력 칸의 크기가 일정하게 유지되도록 하고 있습니다.
-
email input 태그는 type 속성을 email로 설정하여, 이메일 형식으로만 입력할 수 있도록 제한하고 있습니다. 비밀번호 input 태그는 type 속성을 password로 설정하여, 입력한 문자열이 모두 가려지도록 만들고 있습니다.
-
전화번호 input 태그는 type 속성을 tel로 설정하고, pattern 속성을 이용하여 3-4-4 형식으로만 입력할 수 있도록 제한하고 있습니다.
-
마지막으로, submit input 태그를 사용하여 회원가입 버튼을 만들고 있습니다. 위 코드에서는 form 태그의 action 속성을 submit_form.php로 설정하였는데, 이는 사용자가 회원가입 폼을 제출할 때 해당 php 파일에 입력 데이터가 전송되도록 하는 역할을 합니다. 이를 위해서는 해당 php 파일이 서버에 존재해야하며, 데이터를 저장하거나 처리할 수 있도록 구성되어야 합니다.
-
4개의 margin 속성값을 가질 때는 top, right, bottom, left 순으로 설정합니다.
ex) margin: 10px 20px 30px 40px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
- 3개의 margin 속성값을 가질 때는 top, right와 left, bottom 순으로 설정합니다.
ex) margin: 10px 20px 30px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
- 2개의 margin 속성값을 가질 때는 top과 bottom, right와 left 순으로 설정합니다.
ex) margin: 10px 20px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
1개의 margin 속성값을 가질 때는 모든 마진값을 같게 설정합니다.
ex) margin: 10px;
(위의 예제는 아래 4줄의 코드와 같은 의미를 가지고 있습니다.)
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
불투명도: opacity:0.2; / 20% 불투명도 /
