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

👨‍💻 문서 구조를 사용하는 가상 클래스여러 항목이 나열된 웹 문서에서 일부만 선택해 스타일을 적용하는 선택자이다.:nth-child 클래스는 자식 요소가 여러 개이고 그 중에서 특정한 위치의 요소를 선택할 때 사용한다.복잡한 패턴을 처리하기에도 좋아서 자주 사용된다. () 괄호 안에는 위칫값을 숫자로 지정하여 사용된다.   nth-child(2n) 은 짝수번째 자식 요소를 선택하겠다는 뜻이며, 2n 대신 even 키워드를 사용할 수도 있다. ex)nth-child(even) nth-child(2n+1) 은 홀수번째 자식 요소를 선택하겠다는 뜻이며, 2n+1 대신 odd 키워드를 사용할 수도 있다. ex)nth-child(odd) 아래 처럼 구간 요소를 선택할 수 있다.  :nth-of-type 클..

플렉스 컨테이너의 배치 관련 속성플렉스 컨테이너의 주축에서 또는 교차축에서 요소를 어떻게 정렬할 것인지 지정하는 속성이다.속성값설명justify-content주축의 정렬 방법align-items교차축의 정렬 방법align-content교차축에 여러 줄로 표시할 때 사용하는 정렬 방법flex-direction의 속성값flex-direction 속성은 플렉스 컨테이너의 주축과 방향을 지정하는 속성이다.속성값설명row주축을 가로로 지정하고 왼쪽에서 오른쪽으로 정렬. 기본값row-reverse주축을 가로로 지정하고 오른쪽에서 왼쪽으로 정렬column주축을 세로로 지정하고 위쪽에서 아래쪽으로 정렬column-reverse주축을 세로로 지정하고 아래쪽에서 위쪽으로 정렬 플레스 항목의 줄을 바꾸는 flex-wrap ..

👨‍💻 미디어 커리란?반응형 웹 디자인에서 가장 기본적인 개념으로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법이다.아래 예시 사진 처럼, 미디어 커리는 다양한 기기와 화면 크기에 대응하여 웹 사이트를 더 효과적으로 표현할 수 있게 한다.미디어 커리는 사이에 사용하며 기본적으로 미디어 유형을 지정하고 필요한 경우에는 and 연산자로 조건을 적용한다.1. 웹 페이지의 최대 가로 너비(max-width)가 980px 이하인 경우@media screen and (max-width:980px) {    #page { width: 94%;}    #main {width: 65%;}    #sidebar {width: 30%;}}2. 웹 페이지의 최대 가로 너비(max-width)가 70..