어제 오늘 내일

와 의 차이  div와 span은 HTML에서 내용을 묶거나 스타일을 적용하기 위해 사용하는 태그입니다.하지만 두 태그의 역할과 사용 방법이 다릅니다. 1. 기본 차이점  역할블록 요소 (Block-level Element)인라인 요소 (Inline Element)사용 용도주로 레이아웃 구성 및 큰 덩어리 묶음텍스트 내부 또는 작은 부분 스타일 적용디스플레이 특성한 줄 전체를 차지하며 줄 바꿈 발생줄 바꿈 없이 콘텐츠 주변에만 적용CSS 적용width, height, margin, padding 등 적용 가능width, height 적용 불가, margin, padding 일부 제한 2. div 태그블록(Block-level) 요소로 한 줄 전체를 차지합니다.자동으로 줄 바꿈이 되어 다음 요소는 아래쪽에..

CSS로 와 사이 간격 조정하기  div와 div 사이의 간격을 조정하는 방법은 여러 가지가 있습니다.주로 CSS의 margin, gap(flexbox, grid) 속성을 사용합니다.  1. margin 사용하기가장 일반적인 방법으로, margin을 사용하여 두 div 사이의 간격을 조정할 수 있습니다. 첫 번째 박스두 번째 박스.box { background-color: lightblue; padding: 20px; margin-bottom: 20px; /* 아래쪽에 20px 간격 */}   margin-bottom: 20px;  아래쪽 간격을 조정합니다.margin-top, margin-left, margin-right 등을 사용해 각각의 방향에 간격을 줄 수 있습니다. 2. fl..

HTML에 외부 CSS 파일 불러와서 적용하기 HTML에서 외부 CSS 파일을 불러오려면 태그를 사용합니다.이 태그는 보통 외부 CSS 불러오기 예제   href 속성에 외부 CSS 파일의 경로를 작성합니다.여기서는 style.css가 HTML 파일과 같은 디렉토리에 있다고 가정합니다.rel="stylesheet"이 속성은 링크된 파일이 스타일시트임을 나타냅니다. 3. 결과 브라우저에서 index.html을 열면,가운데 정렬되고, 글자색이 빨간색인 글자가 표시됩니다.

HTML에서 외부 JS 파일의 함수 호출하기 1. JavaScript 파일 생성먼저, 외부 JavaScript 파일을 생성합니다.예를 들어, script.js 파일을 다음과 같이 만듭니다.// script.jsfunction sayHello() { alert("Hello, World!");}  2. HTML 파일에 외부 JS 파일 연결HTML 파일에서 외부 JS 호출 예제 Say Hello    src="script.js"  외부 JavaScript 파일의 경로를 지정합니다.이 예제에서는, script.js가 HTML 파일과 같은 디렉토리에 있다고 가정합니다.경로 설정같은 폴더에 있을 경우: 다른 폴더에 있을 경우 :   defer  HTML 문서가 완전히 파싱된 후에 JavaScript가..

Javascript  삼항연산자 사용법 및 활용 예제 1. 문법condition ? expressionIfTrue : expressionIfFalse;condition: 평가할 조건 (참 또는 거짓이 될 수 있음)expressionIfTrue: 조건이 참일 때 실행될 표현식expressionIfFalse: 조건이 거짓일 때 실행될 표현식 2. 기본 예제const age = 20;const canVote = age >= 18 ? '투표 가능' : '투표 불가';console.log(canVote); // '투표 가능'age >= 18이 참이므로 '투표 가능'이 출력됩니다. 3. 중첩 삼항 연산자삼항 연산자를 중첩해서 사용할 수 있지만, 가독성이 떨어질 수 있으므로 주의해야 합니다.const score = ..

Javascript attribute(속성) 다루기추가 및 변경 (setAttribute() 또는 점 표기법 사용)읽기 (getAttribute 또는 점 표기법 사용)삭제 (removeAttribute)찾기 (hasAttribute)속성 목록 가져오기 (attributes) 1. 추가 및 변경 (setAttribute 또는 점 표기법 사용)setAttribute(name, value) : 속성을 추가하거나 기존 속성의 값을 변경합니다.점 표기법 (element.attribute = value) : 동일한 속성을 추가하거나 변경합니다.// HTML 예시// // JavaScriptconst element = document.getElementById('example');// 방법 1: setAttribut..

정규식으로 핸드폰 번호 체크하기하이픈(-) 포함하이픈(-) 및 공백 미포함 (숫자만 포함)  1. 하이픈 포함허용하는 형식010-1234-5678011-234-5678016-789-1234017-456-7890019-9876-5432 정규식/^01[016789]-\d{3,4}-\d{4}$/ ^: 문자열 시작01: 핸드폰 번호는 01로 시작[016789]: 두 번째 자리는 0, 1, 6, 7, 8, 9 중 하나010, 011, 016, 017, 018, 019만 유효-: 하이픈이 반드시 포함되어야 함\d{3,4}: 중간 번호는 3자리 또는 4자리\d{4}: 마지막 번호는 4자리$: 문자열 끝 예제 코드function isHyphenMobileNumber(phone) { const regex = /^01[..

정규식으로 전화번호 체크하기 1. 하이픈 포함 전화번호 검사형식 예시010-1234-567802-123-4567031-123-4567정규식/^0\d{1,2}-\d{3,4}-\d{4}$/ ^: 문자열 시작0: 전화번호는 0으로 시작\d{1,2}: 지역번호는 1~2자리 (02, 031 등)-: 하이픈이 반드시 포함되어야 함\d{3,4}: 중간 번호는 3~4자리\d{4}: 마지막 번호는 4자리$: 문자열 끝예제 코드function isHyphenPhoneNumber(phone) { const regex = /^0\d{1,2}-\d{3,4}-\d{4}$/; return regex.test(phone);}console.log(isHyphenPhoneNumber("010-1234-5678")); // truec..

정규식으로 문자열이 숫자인지 체크하기JavaScript에서 문자열이 숫자만으로 이루어졌는지 확인하기 위해 다양한 정규표현식을 사용할 수 있습니다.방법 1: 기본 정규표현식가장 기본적인 형태로, 문자열이 0에서 9까지의 숫자로만 이루어졌는지 검사합니다.function isNumeric(str) { return /^[0-9]+$/.test(str);}console.log(isNumeric("12345")); // trueconsole.log(isNumeric("123a5")); // falseconsole.log(isNumeric("00123")); // trueconsole.log(isNumeric("")); // false (빈 문자열도 false 처리)console.log(isNume..

switch 조건문 사용법 및 활용 예제JavaScript에서 switch문은 주어진 표현식의 값에 따라 여러 경우(case) 중 하나를 선택하여 실행할 때 사용합니다.if-else 문보다 가독성이 좋고, 여러 조건을 처리할 때 유용합니다.  기본 문법switch (표현식) { case 값1: // 값1일 때 실행할 코드 break; case 값2: // 값2일 때 실행할 코드 break; default: // 모든 case가 해당하지 않을 때 실행할 코드} 표현식의 결과와 case에 나열된 값들을 일치시켜 해당 블록을 실행합니다.break는 해당 블록을 실행한 후 switch문을 빠져나가도록 합니다.default는 모든 case가 일치하지 않을 때 실행됩니다. (else..