🏷️ 주말특강

Naver 로그인 페이지 만들기 (반응형)

1. 지켜야할 규칙 정하기

논리적인 순서 정하기
Naver로고 - 아이디 입력 → 비밀번호 입력 → 로그인상태유지 체크 → IP보안 체크 → 로그인

시맨틱 마크업(요소)
어떤 요소를 선택할지 고민하기
Naver 로고 h1 > a > img
아이디, 패스워드 입력창 form > fieldset > legend + label + input + span
로그인 버튼, 로그인 유지 버튼, IP 보안 버튼 div > input + label

네이밍 규칙 정하기
규칙 종류 : PascalCase, camelCase, kebab-case. snake_case

• class -> kebab-case
• ID -> camelCase

네이밍

• Naver로고 -> h1.logo > a.naver-home-link > img.responsive-svg
• 아이디, 패스워드 입력창 -> form.login-form > fieldset > legend.a11y + label.a11y + input.user-email-input + span.error-message
• 로그인 버튼, 로그인 유지 버튼, IP 보안 버튼 -> div.login-state-ip-security-checkbox-wrapper > input.login-state-checkbox + label.login-stat-label

WAI-ARIA 코드 추가
아이디, 패스워드 input -> aria-invalid="false" aria-describedby="userPasswordError" aria-live="polite"

• aria-invalid 동적으로 변경되는 정보를 찾아내서 값이 유효한지 안한지를 알려준다.

• aria-describedby 연결된 값의 value를 읽어준다.

• aria-live 화면이 동적으로 변경되는 정보를 알려준다.

2. 회고

오늘의 주말 오후 특강은 거의 청강이였다. html 코드짜는 것까지는 따라 갔는데 css 부터는 처음 듣는 개념에 계산해야되는 부분까지 있어서 집중이 너무 안되고 외국어 듣는 기분이었다. 진짜 멘붕🤮🤮🤮 듣는 동안 내가 할 수 있을까라는 좌절감도 들고 라운지에는 질문도 거의 안올라와서 나만 못알아듣고있구나 싶었다. css에 대한 개념이 너무 없어서 못알아듣는건 당연하지만 강사님이 설명하는 개념에 대해서 전혀 이해못했다. css가 정말 어렵구나.. javascript만 어려운 줄 알았는데... 급 의지력 다운

게다가 이번주 동안 잠을 거의 못자서 그런지 오늘 피로가 몰려와서 하루종일 잠이 안깼다. 특강끝나자마자 3시간이나 더 잤는데도 잠도 안깨고 하루종일 축 쳐져서 공부를 못했다. 하루 날린 기분... 시간은 없는데 몸은 안따라주고 이래서 중간중간 운동하라고 하나보다. 다음주부터는 수업 끝나면 밖에 나가서 30분이라도 걷다 와야 될 것 같다. 체력도 없고 집중도 안되고 아직 2주밖에 안됐는데 이렇게 되니까 의지력이 급 다운 된다ㅠㅠㅠㅠㅠㅠ 정신차리자 제발 완주해야하는데ㅠㅠㅠ 다음주부터는 과제까지 있다 그래서 부담감😱😱😱