CSS, DOM ✍🏻

로그인 페이지

• 로그인 페이지 이전 트위터 목업과 비슷하게 작성됨
• 오늘의 집 로고 svg 사용
• 각 링크 a 태그 이용하여 적정 위치로 이동하게 설정함
• 회원가입시 새롭게 만든 '회원가입' html로 이동하게 설정(아래 사진)
• 기존 오늘의 집 회원가입 페이지는 좀 작아 약간의 크기 조절
• 비회원 주문을 누를시 '주문번호', '이메일', '주문조회' 가 나오게 되는데 이 부분은 아직 DOM이 익숙하지 않아 추후에 개선 예정

회원가입 페이지

• 초기 유효성 검사를 위해 간단히 아이디, 비밀번호, 비밀번호 확인, 버튼 만 구현되어 있었음
• 아이디가 4글자 이상이 아닐 경우 빨간색으로 나타나며 4글자 이상이 되면 '사용할 수 있는 아이디입니다'라는 문구 나타나게 함
• 비밀번호 확인시 위 비밀번호와 동일하지 않을 경우 '비밀번호가 일치하지 않습니다' 라는 문구가 나오게 되며 일치하게 되면 사라지게 구현
• 약관의 동의
  • 전체동의를 누를 경우 아래 있는 4개의 체크박스 한번에 체크되며
  • 4개의 체크박스를 모두 누를 경우에도 자동으로 전체동의 체크되게 구현

 // 필수항목 및 선택 총 4개의 버튼을 누르게 되면 자동으로 전체동의 박스 체크
function checkSelectAll() {
  const checkboxes = document.querySelectorAll("input.tos");
  const checked = document.querySelectorAll("input.tos:checked");
  const selectAll = document.querySelector('input[name="selectall"');

  if (checked.length === checkboxes.length) {
    selectAll.checked = true;
  } else {
    selectAll.checked = false;
  

• 약관동의를 label태그로 만들었는데 class를 라벨에 넣어 css를 구현했었다.
• 그러나 js와의 연결에 문제가 생겨, input태그 자체에 새로운 class를 만들어 js와 연결시 정상적으로 작동됨
• 그런데... 생각해보니 저 내용을 왜 input으로 만들었는지...
• 추후 수정하여 다시 적용해 봐야겠다...