프론트단에서 유효성 검증을 할 때에는 정규식 만큼 편한 것이 없다. 하지만 비교적 자주 쓰이지 않으니 그때마다 새로 짜려면 헷갈리기 마련이다. 자주 쓰일만한 패턴들을 정리해보았다. 필수 입력 정규식 let reg_required = /.{1,}/; 이름 관련 정규식 let reg_name1 = /^[가-힣]+$/; // 한글만 let reg_name2 = /^[a-zA-z]+$/; // 영문만 let reg_name3 = /^[a-z]+$/; // 영문 소문자만 let reg_name4 = /^[A-Z]+$/; // 영문 대문자만 let reg_name5 = /^[가-힣a-zA-Z]+$/; // 한글 + 영문만 아이디 관련 정규식 let reg_id1 = /^[a-z0-9_-]{4,20}$/; // 소문..

보호되어 있는 글입니다.

Clear = x^y

querySelector와 getElementById 모두 엘리먼트를 반환하는 메서드입니다. 하지만 각각은 사용 방법, 반환 객체, 성능 등에서 차이가 납니다. 이 글을 통해 querySelector와 getElementById를 자세히 비교해보겠습니다. 🎯 getElementById vs querySelector 다음은 id="username"인 input 엘리먼트를 반환하는 예제입니다. // getElemenyById const username = document.getElementById("username"); // querySelector const username = document.querySelector("#userForm #username"); getElementById element = ..

보호되어 있는 글입니다.

| 블록 레벨 요소 및 인라인 레벨 요소(Block Level Element) 블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다. 이 한 줄을 차지한다는 의미는 너비가 100%라는 것을 뜻합니다. 따라서 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스럽게 줄넘김이 됩니다. 블록 레벨은 다음과 같은 특징이 있습니다. margin, width, height 속성을 정의하면 모두 적용됩니다. 이런 특성 때문에 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 사용할 수 있습니다. | 인라인 레벨 요소(Inline Level Element) 인라인 레벨(inline-level) : 줄을 차지하지 않는 요소입니다. 브라우저같은 화면에 표시되는 컨텐츠만큼 영..