1. getElementById() 입력창, 입력창값(value) 가져오기2. createTextNode() 입력한 내용을 텍스트 노드로 변환하기3. createElement() HTML 요소 생성하기4. appendChild() 부모 요소에 생성된 자식 요소 추가하기5. addEventListener() 클릭 이벤트 함수 (추가 / 삭제)6. remove() HTML 요소 제거하기  간단한 메모장을 만들기 위해 입력 영역, 추가 영역, 리스트 영역을 간단한 HTML 코드로 작성하고자바스크립트(Javascript) 로 추가, 삭제 기능을 구현하였다. 1. HTML 코드 작성(위 사진은 CSS 따로 적용) 자바스크립트 메모장 추가/삭제 메모 추가  2. Java..

메뉴를 주문내역에 추가하는 것을 구현하는 도중가격이 6,200원 6,000원과 같이 타입이 문자열이기 때문에어떻게 하면 정수로 변환하여 더할 것이며 천자리 바다 콤마(,) 가 찍힐 수 있도록 하는 것에 대해 고민했다. 해결 순서 1. 6,200원(문자열 string) 을 정수로 변환 / 6,200원(string)->6,200(number)2. 6200 (number) + 6000 (number)... + 총 금액(number) 계산3. 총 금액 12200 (number)  을 12,200 원 (string) 으로 변환 1. 문자열을 정수로 변환- 정수로 변환하기 전에는 price, price2 는 string 타입인 것을 확인 할 수 있다.  - 정수로 변환해서 출력해보니 6200 이 아닌 6 만 나오..

break 문은 특정 조건에서 반복문을 멈추거나, 반복문 중간에서 앞으로 되돌아가야 할 경우에 사용한다.단독으로 사용할 수도 있고 반복문을 끝낼 조건과 함께 사용할 수도 있다.예제 1 (자리배치도)1-1 break 문을 사용하지 않았을 때아래는 총 입장객 수에 맞게 번호가 있는 좌석을 배치했다.for문을 사용해 총 56명의 입장객을 한 줄에 5 좌석으로 자리를 배치하였는데,좌석은 56개가 아닌 60개까지 만들어지는 것을 확인할 수 있었다.document.write(``); // 행 (11줄) for(let i = 0; i`); // 열 (5줄) for(let j = 1; j 좌석 ${seatNo} `); } document.write(``); } document.wri..

👨‍💻 float:left 속성으로 아무리 가운데 정렬을 하려고 노력해봤지만, 카드 요소들의 가로 정렬을 위해 float:left 속성을 사용했다. 가로 정렬은 성공(?) 했지만 가운데 정렬을 하지 못했다.text-align: center; / margin:0 auto; 를 사용해도 도저히 안되는 가운데 정렬 원인은 바로 float:left 속성 때문이었다. .travel-card { float: left;} 카드 요소 class 선택자("travel-card") 로 묶어 float: left; 사용 시 결과 화면이다.요소들이 브라우저의 왼쪽부터 가로 정렬로 나열된다.하지만 내가 원하는 것은 가운데 정렬을 같이 하는 것이었다. 👨‍💻 display: inline-block; 을 사용한 가운데..

👨‍💻특정 부분에 스타일을 적용하는 class / id 선택자 특정 요소에 스타일을 적용하는 타입 선택자 특정 태그를 사용하면 모든 요소에 스타일을 적용할 수 있다.같은 태그라도 일부는 다른 스타일을 사용할 때 class 선택자와 id 선택자를 사용한다.1. 태그 모든 요소에 스타일 적용 HTML CSS JavaScriptp { color: red;} 2. 태그 요소에 class(.) / id(#) 선택자 특정 부분 스타일 적용 HTML CSS JavaScript p { color: red;}/* class 선택자 */.css { text-decoration: underline; color:blue;}/* id 선택자 */#js { te..