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 만 나오..

👨‍💻 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..

👨‍💻사용자 input 박스 안에 원하는 문구를 미리 적어 두는 value=".." placeholder=".."  💡 두 속성의 input 박스 안에 문구를 미리 적어 두는 공통점이 있지만, 몇 가지 차이점이 있다. 💡 - value 속성은 설정된 값을 서버 쪽으로 정보를 전송할 수 있다. 사용자가 input 박스 안에 새로운 값을 입력할 때미리 적어 둔 문구를 직접 지워야 한다.- placeholder 속성은 value와 달리, 서버 쪽으로 정보가 전송되지 않는다. 또한 사용자가 input 박스 안에 글자를 입력할 때,자동으로 입력된 문구가 사라진다.- value 속성을 적용할 경우 placeholder 보다 문구의 글자 색이 더 짙다.value, placeholder 속성 사용 예시DOCTY..