(html, css) 로그인 모달 생성

HTML과 CSS를 사용하여 위의 로그인 모달을 구현했습니다.

가입하는 방법에는 두 가지가 있습니다.

하나는 아이디/비밀번호를 적어 로그인하는 방법이고, 다른 하나는 SNS 계정으로 로그인하는 방법입니다.

위의 코드를 작성한 순서는
큰 모달창을 중간에 정렬하고 나니 컬럼으로 나누어진 부분이 없어서 따로 레이아웃을 배치할 필요가 없을 것 같아서 위에서 아래로 차근차근 차근차근 html과 css를 만들었습니다.

1. 모달 창 중앙에 배치

처음에는 로그인 모달이 어디에서나 독립적으로 사용될 수 있다고 생각했기 때문에 기사 태그와 함께 묶었습니다.

width 값은 figma에서 width 값을 520px로 지정했는데, 추후 모바일 반응이 될 것을 고려하여 max-width를 지정했습니다.

그런 다음 수평 중앙 정렬에 일반적으로 사용되는 margin: 0 auto를 지정했습니다.

수직 정렬 문제였다.

.

총 3가지 방법을 시도하였다.

1. 몸 자체에 높이: 100%를 부여한 다음 기사에 가장자리: 자동을 부여(실패)

2. 항목을 div 태그로 래핑한 다음 항목을 조정하고 정렬합니다: cente(실패)

3. 위치 지정: 본문 기준, 삽입: 0; 여백으로 기사를 채운 후: auto; 주기(실패)

결국 모두 수직 정렬에 실패했습니다.

CSS에서 수직 정렬이 정말 어려운 것 같습니다

또 다른 어려움은 모달창이 떴을 때 배경색이 검은색이었는데, 보이는 모든 뷰를 채우는 요소이기 때문에 어쩔 수 없이 Position을 사용하는 느낌이 들었습니다.

가상요소로 삽입했는데 위치를 줬더니 모달창 상단에 뜨는 문제가 있었습니다.

이것은 항상 z-index:-999를 표시하지는 않았지만 이것이 올바른 사용 방법인지 확실하지 않습니다.

모달 전체를 포장할 때 아이템 태그를 사용하는 것이 적절한가요?
모달의 전체 너비는 최대 너비를 px 절대 단위로 줬는데 가능하면 상대적인 단위로 주는 게 좋지 않을까요?
가운데 세로 정렬 방법
배경화면으로 z-index: 999를 설정하는 더 좋은 방법이 있나요?

2. 헤더/메인

기사의 큰 섹션을 둘로 나누면 “로그인 또는 등록”이라는 텍스트가 있는 헤더와 콘텐츠가 있는 본문이 될 것이라고 생각했습니다.

이 두 개로 분할된 주된 이유는 CSS를 작성할 때 헤더 아래의 테두리 너비가 100%이고 콘텐츠가 일반적으로 26픽셀로 패딩되기 때문입니다.

구분이 모호한 림이 아닌 각 구간의 위와 아래에 패딩을 추가하여 둘 사이의 간격을 구분했습니다.

3. 모달 창 닫기 버튼

디자인적으로는 닫기 버튼이 헤더 안에 있어서 그렇게 마크업을 하고 싶었는데, 재재 강사님 말씀처럼 모달창의 닫기 버튼에 대한 마킹 순서가 하단에 있다고 들었습니다.

이는 키보드 사용자나 스크린리더 사용자가 내용을 확인하지 않고 모달창을 탐색하다가 화면 아래 내용을 읽기 전에 제목 옆에 있는 닫기 버튼에 손이 닿지 않도록 하기 위함입니다.

닫기 버튼을 찾으려면 위층에 있습니다.

모달 창을 닫는 버튼은 하단에 있는 것이 바람직합니다.

어차피 잊어버리지 않기 위해 헤더 생성 후 닫기 버튼에 대한 코드를 작성했는데 문제가 발생했습니다.

마크업 맨 끝에 별도의 닫기 버튼을 만들었는데, 버튼 자체의 테두리와 패딩이 없어졌음에도 불구하고 버튼 위에 큰 테두리가 있었습니다.

지면 검색하기 개별적으로 주석 처리하는 동안 나는 그것을 껐다 모달 창문 본인 센터 정렬을 시도 준 테두리: 100px 자동 0 자동 붓다 해냈다 버튼에 빈 공간 사라졌다.

. 정확히는 보더 업에게 100픽셀 주다 영향을 미치다 받은 메시지의 상단 여백만 빼면 상단 여백이 사라집니다.

버튼은 틀림없이 .로그인 모달 ~ 안에 어린 시절 공간이 어떻게 있는지 모르겠습니다.

마진값은 아이들에게 상속되나요? (의미없다.

.)
이 문제의 원인 해결: margin:0이 있습니다.

본문 자체에서 CSS를 재설정하는 데 사용됩니다.

주어졌어야 했지만, margin-top이 inherit를 지정하여 상속된 것으로 보입니다.

auto가 margin-left, right에서 먹히지 않는 이유는 버튼 태그의 기본 표시가 인라인 블록이기 때문인 것 같습니다.

4. 텍스트 숨기기

웹접근성을 고려할 때 시각장애인이 마크업 시 화면을 볼 수 없다는 점을 감안해야 한다고 들었습니다.

위의 로그인 창을 보면 두 가지 방법으로 로그인이 가능하다는 것을 바로 알 수 있는데, 시각 장애인이 이해하기 어려울 수도 있겠다는 생각이 들었습니다.

그래서 입력창 부분과 sns 로그인 부분을 h2 태그로 숨긴 후 추가 문구를 넣었습니다.

<h2 class="a11y-hidden">
    인풋창에서 아이디 비밀번호 직접입력해서 로그인/회원가입
</h2>
        .
        .
        .

<h2 class="a11y-hidden">
    sns 계정으로 로그인
</h2>

5.입력

사용자의 입력이 즉시 데이터로 전송되어야 하기 때문에 하단 부분은 폼 태그와 연결되어 있습니다.

또한 웹에서의 접근성을 높이기 위해 각각의 라벨을 함께 묶어서 더 자세한 설명을 하였고, 디자인상 보이지 않아야 할 부분이라 숨겨두었습니다.

일반적으로 작업 중 태그를 무조건 추가하면 태그의 기본 테두리와 여백이 뺍니다.

아래와 같이 레이블과 확인란 사이에 간격이 있는 이유는 무엇입니까?

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


<!
-- CSS -->
.hold-check {
    appearance: none;
    width: 1.2em;
    height: 1.2em;
    background: url(./images/check-box-off.svg) no-repeat 0 0 / cover;
    vertical-align: -0.2em;
    margin: 16px 4px 0 0;
}

.hold-check:checked {
    background: url(./images/check-box-on.svg) no-repeat 0 0 / cover;
}

.hold-check-label {
    color: #767676;
    cursor: pointer;
}

6. ‘혹은’은 굉장히 어려웠다.

이 코드를 작성하면서 가장 고민했던 ‘또는’…

먼저 마크업 자체에서 위치를 div로 설정하거나, p 태그를 자식으로 넣거나, text-align: center로 텍스트를 중앙에 배치한 다음 div에 가상 요소를 주어 선을 생성했는데 두 가지 큰 문제가 발생했습니다.

또는 흰색 상자를 뒤로 이동하는 방법. 두 번째 줄을 안쪽 또는 뒤로 넣는 방법. 두 번째 문제는 풀기 쉬웠다.

transform: translateY(-20px) 를 지정하여 배경에 넣거나 배경에 흰색 상자를 지정하면 선 자체가 가려지고 디스플레이를 변경하면 정렬 중심을 보기 어려워졌습니다.

재현은 원래 트레이너처럼 SNS 로그인을 하나로 묶기 위해 만든 상자 자체를 라인 전후로 가상 아이템으로 주려고 했다.

이 방법이 마크업 측면에서 가장 깔끔하다고 생각했는데, sns 로그인을 묶는 필드에 친족을 넣지 않으면 ‘혹은’ 날아가버리고, 주면 그 밑에 sns 로그인 버튼이 겹친다.

“또는”이 가상 요소로 제공됩니다.

결국 마크업이 좀 더러워도 다음과 같은 방법으로 갔습니다.

유연하게 만들어서 왼쪽 줄 – 또는 – 오른쪽 줄 순서로 정렬했는데 웹접근성을 잃기에는 좋은 방법이 없는 것 같습니다.

..

<!
-- HTML -->

<div class="or">
    <span></span>
    <p>또는</p>
    <span></span>
</div>



<!
-- CSS -->
.or {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

.or span {
    display: inline-block;
    width: 45%;
    height: 1px;
    background-color: #C4C4C4;
}

.or p {
    color: #767676;
    font-size: 14px;
}

7. SNS 로그인 버튼

sns 로그인 버튼은 동일한 요소가 2개 이상 반복되므로 ul, li 태그를 사용하고 li 태그의 자식으로 태그를 삽입하여 페이지 이동이 가능하도록 하였다.

클 필요가 없는 로고는 background 속성으로 종료됩니다.

일종의 완성된 로그인 모듈이지만 빠진 것이 더 많은 것 같습니다.

나중에 자바스크립트를 붙여넣고 다시 해보시면 좋을 것 같습니다.

아래는 로그인 모달을 생성한 모든 코드가 포함된 github 주소입니다!

https://github.com/dananote/frontend-developer/tree/main/practice/0322%20-%20login%20modal