본문 바로가기
728x90
반응형
SMALL

분류 전체보기135

navigator 사용법(2)_위도와 경도를 사용해 내 위치정보 찾기 https://whaledowny.tistory.com/70 navigator를 사용해 내 위치 확인하기 내 위치의 날씨 정보를 얻고 싶어 찾고 찾다가 날씨정보는 openweather API를 사용해 얻어 냈으나. . 도시를 입력해야 한다는거 때문에 다른 방법이 있을거 같은데. . . 싶어 navigator를 찾아내게 됬다 whaledowny.tistory.com 위도와 경도는 여기서 했고 이제 저 두가지를 가지고 내 위치를 찾을거다 도시명을 출력 받을거다 geocoding 이라나... Google Maps API 쓸거다 https://developers.google.com/maps?hl=ko Google Maps Platform | Google for Developers Google Maps Platf.. 2023. 8. 24.
navigator를 사용해 내 위치 확인하기(위도, 경도 확인) 내 위치의 날씨 정보를 얻고 싶어 찾고 찾다가 날씨정보는 openweather API를 사용해 얻어 냈으나. . 도시를 입력해야 한다는거 때문에 다른 방법이 있을거 같은데. . . 싶어 navigator를 찾아내게 됬다 저기에 내 위치 함 넣어 보자고~ 스크립트에 log()말고 dir() 해서 navigator을 해보면 별별게 다 있다 여기기서 카메라 켜는거, 뭐 블루투스연결 하는거, 지금 하려는 위치정보 등등 정보를 가져올수있다 그중 볼거는 이거 geolocation 이다 열어 보면 여러 함수들을 불러다 쓸수있다 말하고 있다 그럼 함수 하나 만들어보다 getCurrentPostion()불러와 보면.. 콜백 함수를 불러오게 되있다 success 콜백함수과 error 콜백함수를 불러와야 한단다 그럼 콜백 .. 2023. 8. 24.
모달(Modal) 창 만들기 예전엔 div 박스 만들고 JS를 이용해서 display: none을 버튼 누르면 display: block 으로 바꿔 보여주곤 햇음 근데 이제 그렇게 복잡할 필요 없이 html 태그 dialog 하나 있으면 끝 JS도 showModal() 이거만 있으면 끝! 모달 기본 구조는 저거면 되고.. 필요한 나머진 CSS로 꾸미면 됨. 2023. 8. 21.
기본 layout 1 Layout 1 아 근데 저 높이 맘에 안드네 일단 Layout 1 전체 태그 margin 0, padding 0 로 리셋함과 box-sizing을 border-box로 함으로 창 큭에 컨텐츠를 맞춤 전체 너비 100% 최대 높이 태그기준 50px 배경색 밝은 회색 자식태그(or 컨텐츠)를 왼쪽에서 2% 글 줄 높이 = 최대 높이 본 태그 기준 하단에 간격 10px 전체 너비 100% 최대 높이 30px 배경색 밝은 회색 글위치 중앙 글 줄 높이 = 최대 높이 본 태그 기준 하단에 간격 10px 전체 너비 100% 최대 높이 100px 배경색 밝은 회색 글위치 중앙 글 줄 높이 = 최대 높이 본 태그 기준 하단에 간격 10px 전체 너비 100% 최대 높이 400px 배경색 회색 본 태그 기준 하단에 간.. 2023. 8. 9.
이거 해줘야 하는 이유 => box-sizing: border-box; 자 이렇게 CSS를 짜서 이렇게 만들엇다 치자 이때 만약 저걸 감싸는 부모 태그가 되것지? 이렇게 안썻다면 이렇게 100%를 넘어 104%인 Div1박스같은경우는 넘어가버려서 스크롤리 생겨버린다 ?? 왜 104%임? width: 100% + padding-left: 2% + padding-rigth: 2% = 총 104%임... 2023. 8. 9.
CSS 초기화 모든 HTML 페이지의 첫 번째 스타일시트는 초기화 코드로 시작한다 이 초기화 코드는 모든 웹 브라우저에서 동일한 출력 결과를 만들기위해 사용된다 https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're i.. 2023. 7. 27.
텍스트 관련 스타일 @font-face 속성 사용하기 https://fonts.google.com/ Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 내 로컬컴 안에 없는 글꼴을 갖다 쓰고 싶을때 이 웹 폰트를 씀 사용할 글꼴을 저기 들어가 검색한 다음 원하는 사이즈 클릭 후 @import 에서 style 부분 복사 후 CSS 파일에 붙여 넣는것으로 사용할 준비를 끝낼수 있음 그럼 사용방법은 이렇게 쓰면 된다 font-size 속성 font-size: [절대 크기] | [상대 크기] | [크기] | [백분률] 등을 사용할 수 있음 속성값 설명 절대 크기 브라우저에서 지.. 2023. 7. 27.
< SNS 만들기 실습 최종 정리 > [ 기본 셋팅 ] npm init 으로 package.json 파일을 만든 뒤 scripts 속성의 기본 명령어를 start: nodemon app으로 바꿔 놓는다. 필요 패키지들을 설치 할건데 npm i express, express-session, cookie-parser, morgan, multer, dotenv, nunjucks 설치 npm i -D nodemon 으로 코드 수정시 자동으로 서버 제가동 하게 만들고 npm i sequelize, sequelize-cli, mysql2, bcrypt, passport, passport-local 그리고 카톡로그인 할거면 passport-kakao 까지 해서 설치 npx sequelize init 으로 로컬 전역설치 하지 않고 본 폴더에 config,.. 2023. 7. 26.
21)Nodejs_간이 SNS 서비스 만들기_(5) multer 패키지 사용기, 마무리까지. . .(에러 드릅게 많군 ㅋ) 이미지 업로드 기능을 구현하고싶을때 이 모듈을 사용하면 된다 이 이미지 저장 할건지 서비스 특징에 따라 다르다 input 태그 통해 이미지 선택 시 바로 업로드 진행 할거고 업로드 된걸 다시 클라이언트에게 알릴거다 게시글 저장때는 DB에 이미지 데이터를 직접 넣는 대신 이미지 경로만 저장할거고 이미지는 서버 디스크에 저장 될거다 라우트.. 전에 컨트롤러 부터 만들자 controllers/post.js 이거는 얘랑 얘 불러옴 afterUploadImage 에선 요청한 파일이 뭔지 콘솔창에 띄우고 json형식으로 url에 /img/요청한파일.파일명 해서 담는것 까지 딱 컨트롤러가 하는 역활만 함. uploadPost 에선 쿼리를 실행해 post에 담잖아 요청한 유저의 내용, 사진, 유저아이디 를 그리고 ha.. 2023. 7. 26.
728x90

티스토리툴바