frontend development4 JSX? 그게 뭔데? 1. JSX의 정의JSX는 JavaScript XML의 줄임말로, JavaScript 안에서 HTML 같은 문법을 사용할 수 있게 해주는 문법 확장입니다. JSX는 React 컴포넌트에서 UI를 정의하는데 매우 유용하며, 보다 직관적으로 UI 구조를 작성할 수 있습니다.쉽게 말해, JSX는 JavaScript 코드를 작성하면서 HTML 태그를 넣을 수 있도록 도와주는 도구입니다. 이를 통해 HTML 요소들을 함수형 컴포넌트 내부에서 정의하고 조작할 수 있습니다. JSX의 기본 문법:const element = Hello, world!;위 코드는 JavaScript로 작성되어 있지만, HTML 요소를 포함하고 있는 것을 볼 수 있습니다. JSX를 사용하지 않으면 UI를 JavaScript 코드로 아래와 같.. 2024. 9. 10. [REGEX] 저장해두고 사용하세요 자바스크립트 정규식 실속있게 내용만 접수 1. 생년월일/^[0-9]{2}\.(0[1-9]|1[0-2])\.(0[1-9]|[12][0-9]|3[01])$/2. 이메일/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/3. 전화번호/^01([016789])-?([0-9]{3,4})-?([0-9]{4})$/4. 아이디/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/5. 카드번호/^(?:4\d{3}[- ]?\d{4}[- ]?\d{4}[- ]?\d{4}|5[1-5]\d{2}[- ]?\d{4}[- ]?\d{4}[- ]?\d{4}|2(?:2[2-9]\d|[3-6]\d{2}|7(?:[01]\d|20))[- ]?\d{3}[- ]?\d{3}[- ]?\d{4}|3[47]\d{2}[- ]?\d{6}[- ]?\d{5.. 2024. 9. 6. HTML의 a 태그 가이드 a 태그란?a 태그는 앵커(anchor) 태그라고도 불리며, 주로 하이퍼링크를 생성하는 데 사용됩니다.이 태그를 사용하면 사용자가 한 웹 페이지에서 다른 웹 페이지로, 또는 같은 페이지 내의 다른 위치로 쉽게 이동할 수 있습니다.기본 문법a 태그의 기본 문법은 다음과 같습니다:링크 텍스트 여기서 href 속성은 하이퍼링크의 목적지 URL을 지정하고, "링크 텍스트"는 사용자가 클릭할 수 있는 텍스트입니다.예제1. 외부 웹사이트로 링크:Example 사이트로 이동2. 같은 사이트 내의 다른 페이지로 링크:About 페이지로 이동 3. 같은 페이지 내의 다른 위치로 링크섹션 1섹션 1으로 이동 속성a 태그에는 href 외에도 여러 가지 유용한 속성이 있습니다:target: 링크를 열 때 브라우저의 동작을 지.. 2024. 8. 6. flexbox vs inline block Flexbox를 사용하여 inline 요소를 표현하는 것과 display: inline-block을 사용하여 inline 요소를 표현하는 것의 성능 차이점을 알아보자특성Flexbox (display: inline-flex)Inline-Block (display: inline-block)목적컨테이너 내의 항목 배치 및 정렬자체 크기 조정 및 다른 요소와 나란히 배치레이아웃 가능 범위강력한 정렬, 정당화, 순서 변경 등제한적 (기본적인 정렬 및 마진만 가능)부모 요소의 속성 상속부모 요소의 속성을 상속받으며, 개별 설정이 가능함각 요소는 독립적으로 설정됨정렬 기능 지원수평 및 수직 정렬 지원수평 정렬만 가능속성 설정 유연성flex-grow, flex-shrink, flex-basis등 각 요소별 속성을 지.. 2024. 7. 18. 이전 1 다음 반응형
