게시판12 브라우저 스크롤바 디자인 CSS로 표현하기 오늘 회사에서 브라우저 스크롤바를 커스터마이징하는 작업을 했다 기존에 CSS가 어딘가에 있고(class가 많은 상태) 부트스트랩 등 UI 라이브러리도 적용되어있는 상태라 의도대로 잘 되지 않았다 스크롤바 CSS 할 때마다 따로 찾아보고 복붙하면서 작업을 했기에 이번 기회에 좀 정리를 하고자 한다 내일 이 포스팅 보면서 다시 해봐야겠다 그냥 회사에서 vue.js로 프로젝트 진행 중이라 vue 프로젝트 만들어서 테스트한다 아 그리고 저 코드에서 overflow-y: auto; 가 아닌 overflow: auto; 라고 해도 세로 스크롤로 결과가 같다 overflow: auto; 는 요소의 가로 및 세로 스크롤바의 표시 여부를 자동으로 결정하는거고 내용이 요소의 크기를 초과하면 해당 방향으로 스크롤바가 나타나.. 2024. 3. 18. (✧ ˆᴗˆ)o︻╤╦╾━ ･:*:･ﾟ=͟͟͞͞♡ Vue 3 공부하기 (ajax, slot, mitt, Vuex, PWA, Composition API) 레이아웃 제작 후 .. 데이터는 assets 안에 postdata.js 로 넣고 App.vue에선 그리고 props 보내는건 App.vue 에선 ConTainer.vue 에선 그리고 PosT에 보내기 위해 PosT.vue 에선 이미지 데이터 바인딩의 경우, background-image: url() 이렇게 넣는다 에러나서 '더보기' 게시물 가져오기 위해 ajax 사용 GET, POST 요청은 URL 잘 적어서 요청하는 것이며 GET은 데이터 서버에서 가져올 때 POST는 서버로 데이터를 보낼 때 씀 두 요청 모두 브라우저가 새로고침됨 ajax 쓰면 새로고침 없이 요청 가능 ajax 요청하려면 axios 라이브러리 사용 기본 fetch 함수 사용 npm install axios 또는 yarn add axi.. 2024. 3. 15. ♪ *҉＼( ˆᴗˆ )ﾉ✩ Vue 3 공부하기 (vue-router 뷰 라우터 공부) 뷰 기초를 공부했으니 이제는 블로그 프로젝트를 만들면서 복습하고 vue-router 써보자 vue create 플젝명 위 명령어로 뷰 프로젝트를 만들고 npm run serve 로 실행시키자 부트스트랩 사용하자 npm i bootstrap@5.3.3 (정확한 다운로드 명령어는 부트스트랩 홈페이지 참고) npm으로 설치했다면, main.js에 내비게이션바 등 넣어보기 다른 페이지를 만들어보자 글 목록 페이지 컴포넌트 만들자 그리고 App.vue에서 글 목록 페이지 컴포넌트 사용하기 위해 그리고 사용할 데이터 아래와 같이 data에 쓰면 되는데 너무 데이터가 길어서 src - assets 에 따로 데이터 빼냄 그럼 App.vue에 블로그글이라고 보관한 데이터를 LisT 컴포넌트로 보내야 하므로 먼저 prop.. 2024. 3. 13. (✿^‿^)━☆ Vue 3 공부하기 (개발환경 셋팅 ~ 뷰 기초) 먼저 개발환경을 셋팅해주자 Node.js랑 VSCode 설치 후 에디터(VSCode) 터미널에서 npm install -g @vue/cli yarn은 yarn global add @vue/cli Nodejs : npm(웹 개발 라이브러리(ex. vue 프로젝트 생성 도와주는 @vue/cli) 설치 도구) 사용 위해 Extensions는 vetur html css support vue 3 snippets 작업 폴더 만들고 에디터에서 오픈 프로젝트 생성하려면 vue create 프로젝트명 (선택하는거에서 Vue 3 선택) 프로젝트 에디터로 열기 App.vue(메인 페이지)에서 코드 짜기 : HTML : JS : CSS => App.vue 코드가 HTML로 바뀌어 index.html 페이지에 가는(main.j.. 2024. 3. 10. 이전 1 2 3 다음
