잇!(IT) 블로그

- Javascript 코드 function changePhone1(){ const phone1 = document.getElementById("phone1").value if(phone1.length === 3) { document.getElementById("phone2").focus() } } function changePhone2(){ const phone2 = document.getElementById("phone2").value if(phone2.length === 4) { document.getElementById("phone3").focus() } } function changePhone3(){ const phone1 = document.getElementById("phone1").valu..

onchange 이벤트: 사용자가 입력 필드나 선택 옵션 등의 값을 변경하고 포커스를 다른 요소로 옮겼을 때 발생합니다. 사용자가 입력을 마치고 해당 입력 요소에서 포커스를 다른 곳으로 이동하면 이벤트가 발생합니다. 보통 입력 값의 최종적인 변경을 감지하고 처리할 때 사용됩니다. 예를 들어, 사용자가 입력 필드에 값을 입력하고 나서 다른 곳을 클릭하거나 탭을 누를 때 변경된 값에 대한 처리를 수행할 수 있습니다. onkeyup 이벤트: 사용자가 키보드의 키를 누르다가 뗄 때 발생합니다. 사용자의 키 입력 동작을 실시간으로 감지하고 처리하는 데 사용됩니다. 보통 입력 필드에 글자 수 제한이나 검색 기능과 같이 사용자의 입력에 따라 즉시 동작하는 상황에서 활용됩니다. 간단히 말해서, onchange 이벤트는..

- html 코드 회원가입 - - 000000 인증번호 전송 3:00 인증 완료 지역을 선택하세요. 서울 경기 인천 여성 남성 가입하기 - - onchange는 사용자가 입력 필드나 선택 옵션 등의 값을 변경하고 포커스를 다른 요소로 옮겼을 때 발생한다. - onkeyup은 사용자가 키보드의 키를 누르다가 뗄 때 발생한다. 인증번호 전송 - button 속성에 disabled 코드를 추가하면, 버튼이 비활성화 된다. - select 태그를 사용하면 위와같은 선택지를 만들 수 있다. 지역을 선택하세요. - select 태그의 하위 옵션인 option에서 disabled를 입력하게 되면 선택할 수 없는 상태로 변하고, selected가 되면 최초에 해당 option이 선택된다. - css 코드 * { box..

- 최종 완성본 - index.html (메인 페이지) TODAY 0 | TOTAL 12345 이름 Phone E-mail 인스타그램 오늘의 기분 기쁨 😊 슬픔 😢 화남 😡 분노 👺 사이좋은 사람들, 싸이월드 사생활보호설정 홈 쥬크박스 게임 홈 쥬크박스 게임 - 홈, 쥬크박스, 게임 버튼 3개 각각 클릭되게 되면 menuHome(), menuJukebox(), menuGame() 함수가 실행되게 된다. const menuHome = () => { document.getElementById("contentFrame").setAttribute("src","home.html") // 매개변수가 2개 들어간다. "src", "값" document.getElementById("menuHome").style = "..

document.getElementById("number").innerText = String(Math.floor(Math.random() * 1000000)).padStart(6,"0") 1. document.getElementById("number"): 이 부분은 문서 내에서 id가 "number"인 요소를 선택합니다. 즉, HTML에서 ...와 같이 해당 id를 가진 요소를 선택하게 됩니다. 2. .innerText = ...: 이 부분은 선택된 요소의 내부 텍스트를 변경합니다. 즉, 선택된 요소의 내부 텍스트를 다음에 나오는 값으로 설정하게 됩니다. 3. String(Math.floor(Math.random() * 1000000)): 이 부분은 0부터 999999 사이의 임의의 정수를 생성합니다...

- index.html TODAY 0 | TOTAL 12345 이름 Phone E-mail 인스타그램 오늘의 기분 기쁨 😊 슬픔 😢 화남 😡 분노 👺 - class명을 지정할 때, 보통 최대 4개까지 작성하도록 한다. 종속 클래스 명을 지을 때 제일 대표가 되는 맨 앞의 단어 하나정도는 생략해도 된다. (class는 어차피 구분하기 위해 작성하는 것이기 때문에 이름이 꼭 종속 될 필요는 없지만, 구분하기 편하게 하기 위해 작성한다.) - index.css * { box-sizing: border-box; /*border-box로 설정하면, 요소의 크기를 width와 height 값에 padding과 border를 포함한 총 크기로 설정 */ margin: 0px; } .background { width:..

- CSS란? - CSS란 cascading style sheet의 약자이다. - CSS는 HTML의 색, 크기, 정렬 등을 변경하여 꾸며주는 언어다. - 특성 - 특성(property)에는 색, 크기, 정렬 등이 존재한다. div { color: red; color: rgb(255,0,0); /* RGB */ color: #FF0000; /* HEX 값 */ font-size: 20px; /* 글자크기 */ font-weight: 300; /* 글자두께 */ text-align: center; /* 가운데 정렬 */ font-family: arial; /* 글꼴 */ width: 300px; /* 넓이 */ height: 300px; /* 높이 */ background-color: red; /* 배경색..

- 웹 페이지는 HTML, CSS, Javascript로 구성 되어있으며, 브라우저는 세 언어 이외의 언어는 인식하지 못한다. 1. HTML 2. CSS 3. Javascript - HTML - HTML 이란? - HTML은 HyperText Markup Language로, 네트워크가 연결된 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해서 만들어진 체계다. - HTML 언어의 본질은, 사용자간에 소통하기 위해 정해진 약속이다. - '태그'를 통해 웹페이지에서 보여질 내용을 나타낸다. - 태그란? - 하나의 약속된 명령어이며 고유한 기능을 가지고 있다. - 시작태그 + 내용 + 종료태그로 구성된 한줄을 HTML Element(요소)라고 부른다. - 안에 들어간 문법에 따라 고유의 기능을 가지고..

- 장바구니 목록 중 체크박스가 선택된 상품을 주문하는 로직을 작성한다. - 장바구니에서 주문을 하면 기존 주문 로직과의 차이점은 여러 개의 상품을 하나의 주문에 담을 수 있다는 점과 주문한 상품은 장바구니에서 삭제해야 한다는 점이다. - 장바구니 페이지에서 주문할 상품 데이터를 전달할 DTO를 생성한다. - CartOrderDto.java @Getter @Setter public class CartOrderDto { private Long cartItemId; private List cartOrderDtoList; // 1. 장바구니에서 여러 개의 상품을 주문하므로 CartOrderDto 클래스가 자기 자신을 List로 가지고 있도록 만든다. } - 장바구니 주문은 cartItem의 Id와 장바구니에서..