Front-End/개념5 float flex gird 태그 float왼,오른쪽으로 지정해 div를 띄울 수 있다.float는 flex 보다 고전적인 방식이므로 모든 브라우저에서 float 방식으로 화면 구성 가능 flexfloat과 다르게 부모 - 자식 관계로 동작한다.반응형 디자인 gridflex 처럼 부모-자식 관계로 동작 flex와 grid의 차이flex는 1차원 정렬 (가로, 세로 만 정렬이 가능)grid는 2차원 레이아웃 만들기 가능, 컬럼과 로우 동시에 설정가능(가로한칸, 세로두칸) 우월한 것은 없다 만들고 싶은 페이지를 제일 잘 구현할수만 있으면 그걸로 OK 2024. 9. 25. [HTML] p 태그와 input 태그 시작하기Fetch API를 사용해서 프론트에 입력된 데이터를 서버에 보내서 데이터를 수정하게 하는 기능을 만드는 중이다. where절에 userCode가 들어가야지 데이터 조건을 통과해 수정이 되는 쿼리인데, 쿼리가 오류없이 잘 돌았는데도 데이터 수정이 안되는 상황이 생겼다. 그래서 일단 프론트의 값을 다 받아오는지 확이하려고 log.info 로 찍어봤더니 userCode 값을 가져오지 못하고 있었다... 알고보니 원래 나는 태그에 userCode를 value 속성에 정의해서 js에서 받아서 서버로 보내려고 했는데 p태그는 valuer 속성을 사용하는게 안됐던 것이었다... 그래서 input 태그로 바꾸고 value 에 정의를 하니 값이 바로 들어가졌다..! ( input, textarea 같은 폼.. 2024. 9. 21. [Node.js] 버전 중요성 내가 사용하고 싶은 Template 을 적용하던 중 템플릿에 적용된 모든 pakage.json 내용을 한줄 한줄 체크하면서 적용하고 npm install을 실행해 필요한 의존성을 모두 다운받으려 했는데 자꾸 충돌이 일어나는 것이었다..C:\Users\----\OneDrive\Desktop\ProjectCollection\src\main\frontwst>npm installnpm warn deprecated osenv@0.1.5: This package is no longer supported.npm warn deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecatednpm warn deprecated npm.. 2024. 6. 12. [Front-end] 모듈 번들 themewagon에서 템플릿을 찾아보다가 맘에드는 템플릿을 발견했다 tailwindcss 템플릿이었는데 마침 저번에 혼자 React,Tailwindcss 를 사용해서 쇼핑몰 메인 홈페이지 클론코딩을 해봤던 경험이 있기에 당당하게 다운로드했다.생각보다 템플릿을 적용하는게 쉽지가 않다... 정보도 몇개 없는거 같고.. 그리고 tailwindcss 만 받으면 될 줄 알았는데 gulpfile.js 라는 파일이 있어서 검색해봤더니 자동화를 도와주는 친구라는데... 사용해보려고 공부했다. 일단 gulp는 bundler의 일종이라 이것에 대해서 공부해야했다번들러는 여러개의 파일을 묶어주는 도구인데 Webpack의 기능은 하나의 자바스크립트 파일에 자바스크립트 뿐만 아니라 css, 이미지와 같은 여러가지 모듈들을 .. 2024. 6. 9. 이전 1 2 다음