본문 바로가기

프로젝트/회원가입 웹페이지 만들기3

3. 이용약관에 대한 회원가입 페이지 만들기 - 다음 사진과 같이 이용약관에 대하여 페이지를 구성함- 이용약관의 내용 부분의 경우 생략하여 일부 내용만 추가하였기에 추후 사용시에는 변경해야 함 >> form 태그 내의 input 태그의 checkbox 타입 이용- 이용약관 동의를 받기 위해 checkbox를 이용했다.- 이는 활성화시 체크되어있는 박스로 렌더링 하는 기능을 가진다.- 를 작성하여 쓸 수 있다. >> overflow:scroll 이용- overflow를 통해 자식요소의 크기가 부모 요소의 크기를 초과했을 때 스크롤바 생성을 제어할 수 있다.- 이용약관의 세부적인 내용의 길이가 너무 길다보니 div 내에 scroll을 달아서 이를 조절했다.- 또한 이용약관 뿐만 아니라 전체적인 폼 태그에 대해서도 height를 정해두고 이를 넘어가면 .. 2024. 10. 20.
2. CSS로 개인정보 입력 회원가입 페이지 화면 디자인하기 - 다음 사진과 같이 css를 추가함- 이전에는 페이지 마지막에 있는 버튼의 값을 가입하기로 했었는데 생각해보니 개인정보입력을 한 후에 약관동의 내용이 필요하다고 생각하여 다음 버튼으로 수정함- 다음을 눌렀을 때 나올 페이지에 대해 만들어야 함 >> felxbox 이용- 뷰 포트나 요소의 크기가 불명확하거나 동적으로 변화할때 효율적으로 요소를 배치시킬 수 있다.- flexbox는 display:flex 속성을 줌으로써 만들 수 있다.- 나는 form 태그 내에 작성한 모든 글들에 대해서 컬럼을 기준으로 가운데 정렬을 하도록 했다.- 다음과 같이 작성하면 가운데 정렬이 된다.display: flex;flex-direction: column;justify-content: center;align-items: .. 2024. 10. 20.
1. HTML로 회원가입 페이지 구성하기 >> 우선은 따라할 페이지를 찾기- 그 페이지에서 우클릭 후 검사를 띄울 수 있음- 그 페이지를 이루고 있는 html 확인 가능 -> 이를 참고해서 회원가입 페이지를 만들 수 있다ex) 네이버 회원가입 페이지 - 다음 사진과 같이 html으로 구성을 해둠- css를 통해서 좀 더 보기 좋게 만들어야 함 >> form 태그- 전체를 form 태그로 감싸서 submit 버튼을 사용하도록 했다.(submit은 form 태그 내애서만 유효함)- 처음에 form 태그 없이 submit 버튼을 사용해서 제출이 안되는 일이 있었는데 form 태그가 없음을 파악하고 넣어주었다. >> div 태그- 각각의 요소들 사이에 줄바꿈이 일어나도록 하기 위해 div로 나누어 작성했다. >> label 태그- input 태그에 대.. 2024. 9. 26.