리액트 [ 프론트엔드 : JS 라이브러리 ] SPA : 싱글 페이지 애플리케이션 - 싱글 페이지[HTML 1개] MPA : 멀티 페이지 애플리케이션 - 멀티 페이지[HTML 여러개] index.js import 컴포넌트명 from ' 컴포넌트 경로 ' index.html index.html에 dom 객체 호출 index.js className O */} ); }

- HTTP 매핑시 HTML 반환 Resource 클래스 사용 반환예시 : return new ClassPathResource("templates/todo.html"); * 경로는 resources 이하부터 넣어주시면 됩니다. 프론트엔드[정적파일(html,css,js,img 등등)] - static css/js/img 등등 - templates html

position 속성 CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다. position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다. 이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다. 예를 들어, 다음과 같이 요소 아래..

CSS 중앙정렬 하는 방법 1. text-align : center 정렬대상: 하위아이템 보통 텍스트 정렬할때 사용 2. margin : 0 auto 정렬대상: 본인 단, 사이즈가 지정되지않으면 상위사이즈인 100%로 인식되어서 적용되지 않는다 적용이 되지 않을 때 1. 가로 사이즈를 지정해줬는지 확인해본다. 2. 대상이 inline 속성일 때는 적용되지 않는다. inline 속성은 자기 자신의 컨텐츠만큼의 사이즈를 갖기 때문이다. 이럴경우 display : block; 속성을 주거나 block 요소의 태그를 사용한다. 3. display: flex; justify-content : center; 정렬대상: 하위아이템 이 방법은 내가 정렬시키고자 하는 태그들의 부모태그에 display: flex;를 적용..

CSS 레이아웃의 끝판왕이라고 할 수 있는 Grid(그리드) 튜토리얼에 잘 오셨습니다! 앞서 공부한 Flex와 지금 공부할 Grid의 큰 차이점은 Flex는 한 방향 레이아웃 시스템이고 (1차원) Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원) 이라는 점입니다. 따라서 Flex보다 더 복합적인 레이아웃 표현이 가능하지요. Grid 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같습니다. Flex와 마찬가지로, 컨테이너와 아이템이 있으면 됩니다. A B C D E F G H I 부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고, 자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부릅니다. “컨테이너가 Grid의 영향을 받..

1. Local Storage 문자, 숫자만 key : value 형태로 저장가능 5MB까지만 저장가능 브라우저 재접속해도 정보가 영구적으로 남아있음 유저가 브라우저 청소하면 삭제가능 2. Session Storage 로컬스토리지와 마찬가지로 문자, 숫자만 key : value 형태로 저장가능 5MB까지만 저장가능 브라우저 끄면 사라짐 3. IndexedDB 구조화된 대용량데이터 저장시 사용 4. Cookies 보통 유저의 로그인 인증정보를 저장 5. Cache Storage html css js 파일 저장 로컬스토리지 사용법 localStorage.setItem('이름', 'kim') //자료저장하는법 localStorage.getItem('이름') //자료꺼내는법 localStorage.removeI..