로그인 페이지 구현하기

❓ 구현하면서 어려웠던 점

모달창 open이 생각한 것보다 잘되지 않아서 애를 먹었다.
여러 시도 끝에 해결한 방법!

일단 모달창을 숨겨두고 display:none (여기까진 진행)

function modalOpen() {
    document.querySelector('.modal-box').style.display = 'block';
}

로그인 버튼에 onclick="modalOpen()"을 지정한다.

구글링으로 코드를 참고해서 querySelector를 사용했는데 getElementById 와의 차이점이 궁금해졌다.
getElementById : id를 통해 element를 반환한다.
querySelector : Selector의 구체적인 그룹과 일치하는 document의 첫번째 element를 반환한다.
getElementById가 처리속도가 빠르고 브라우저 호환성이 좋다고 한다.
그래서 거의 getElementById를 사용하지만, 페이지가 복잡하고 모든 페이지에 ID를 추가하지 않으려면 querySelector를 사용하기도 한다.

open과 비슷한 원리로 close 버튼에도 적용했다. close에는 onclick="modalClose()" 주기

function modalClose() {
    document.querySelector('.modal-box').style.display = 'none';
    document.querySelector('body').style.display = 'block';
}

✏️ 코드 리뷰 시간에 수정한 내용

1. 로고 이미지 alt 값 수정 (alt="위니브로고" → “위니브”)

2. check-box 클릭 수정

p로 1차 작업을 했는데, input type="checkbox", label로 수정

<input type="checkbox" id="check-box" class="check-box-hide">
<label for="check-box" class="check-box-hold">로그인 상태 유지</label>

checkbox input을 숨긴다.

.check-box-hide {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

check-box-hold 클래스에 가상 요소 선택자(::before)로 이미지를 넣는다.

.check-box-hold::before {
    content: '';
    width: 22px;
    height: 22px;
    float: left;
    margin-right: 8px;
    background: url('image/check-box.png') -10px -10px;
}

빈 체크 → 체크 선택 시, 이미지 변경 (이미지 스프라이트기법 사용)

.check-box-hide:checked+.check-box-hold::before {
    background: url('image/check-box.png') -52px -10px;
}

2-1. check-box 클릭 시, outline 지정
→ 시각적 효과로 웹 접근성 고려

.check-box-hide:focus+.check-box-hold::before {
    outline: 2px solid #000;
    outline-offset: 3px;
}

3. html 마크업 구조에서 모달창의 close 버튼은 section의 제일 마지막에 배치
→ 웹 접근성 고려
스크린 리더로 페이지를 읽을 때 내용을 다 읽어주고 닫기 버튼이 나와야.
html 구조상 가장 아래 두는 것이 맞지만, position으로 사용자 눈에는 잘 보이도록 배치한다.

💡 참고할 내용

1. height는 최대한 지정하지 말자!!!!!!! → padding, margin을 사용할 것
2. 요소 사이에 간격을 줄 때는 부모끼리 간격을 주는 것이 좋다.
3. p 태그의 높이는 line-height로 주는게 좋다.
4. 회원가입 | 아이디/비밀번호 찾기 에서 "|" 를 가상 요소 선택자(::after)로 줄 때,
   1) content: ''; width, height 주는 방법
   2) content: '\007C'로 주는 방법 (html 특수기호 http://kor.pe.kr/util/4/charmap2.htm)
5. calc() 함수
6. 버튼 같은 코드들을 모듈화 해서 똑 떼어서 어디든 붙여 넣을 수 있도록

📌 멘토님께 받은 피드백

1. 마크업
1) Heading 태그는 h1부터 순차적으로 사용하자

<h2 class="weniv-logo">
  <img src="image/weniv-logo.png" alt="위니브">
</h2>

h1 없이 h2만 사용해버렸다. 일단 h1을 통해 해당 페이지가 어떤 페이지인지 작성하자.
텍스트를 디자인적으로 감추는 것은 css로 숨김처리하자.
h1 사용 → article 안에 h2 사용

2) weniv 로고
검색 최적화 측면에서는 img alt 속성을 사용하는 것보다 css에서 h2의 배경이미지로 넣어주는게 좋다. (span은 숨김처리)

<h2 class="weniv-logo"><span>위니브</span></h2>

3) input은 label과 함께 작성하자
사용자가 어떤 input인지 알 수 있도록 label과 함께 쓰는 것이 좋다.
아래 코드에서 아이디와 비밀번호를 입력받는 부분에 placeholder로 어떤 input인지 힌트를 제공하고 있지만, 스크린리더에 잘 읽힐 것이라는 보장이 없다. 때문에 label을 사용하는 것이 좋다. 디자인적으로는 보이지 않아도 되니 체크박스를 가린 것처럼 동일하게 처리해주자!

<input type="text" name="userID" class="userID" placeholder="아이디">
<input type="password" name="userPW" class="userPW" placeholder="비밀번호">

4) <p class="or">또는</p>
span으로 하는 것이 좋겠다!

5) 창닫기 버튼

a 태그는 새로운 페이지로 이동할 때 쓰이지만, 여기서 창닫기 버튼은 페이지 이동이 아닌 단순히 모달을 닫기 위한 버튼이기 때문에 버튼 태그를 사용하자!
button 태그의 배경이미지를 "image/close.png"로 설정하고, 어떤 버튼인지 명시하기 위해 span을 통해 "창닫기"를 작성한 후 숨김처리 해주기!

<button type="button" class="close" onclick="modalClose()">
    <span>창닫기</span>
</button>

2. CSS
1) 중복되는 속성
중복되는 부분은 .sns-btn::before를 선택해서 한번에 작성해주자

.sns-btn::before {
    content: '';
    width: 28px;
    height: 28px;
    float: left;
    position: absolute;
    top: 50%;
    left: 15px;
    margin-top: -14px;
}
.google-login::before {
    background: url(image/sns.png) -10px -10px;
}