💥  CSS 경로 문제 해결어제까지만 해도 적용이 잘 되었던 css / js 파일이 적용이 안되기 시작했다.(아래와 같이 되어버림)  ☑️  원인 파악현재 실행 중인 프로젝트만 문제인지 확인하기 위해 기존에 백업해 두었던 프로젝트를 실행시켜 봤지만똑같은 상황이 발생했다. 설정된 css 경로 문제라고 판단했고 구글링을 시작했다 1. CND 링크 확인2. Thymeleaf의 정적 리소스 적용 문제3. 부트스트랩 JS 파일과 CSS 파일 충돌 문제4. 캐시 문제 해결 나보다 먼저 이 문제를 겪은 많은 분들의 방법을 위와 같은 순서로 총 동원해봤지만 ... 해결이 되지 않았다 ✅ 문제 해결css 파일을 새로 만들어서 경로 파일 명을 변경해주었더니 정상적으로 돌아왔다..^^  기존 styles.css 파일을 그..

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 ..