[HTML CSS JS] 네비게이션 바 만들기
·
Follow Work/SpringbootBoard
Navigation Bar - HTML CSS vanilla JS Navigation Bar (codepen.io) See the Pen Navigation Bar by rebornbb (@bongcasso01) on CodePen. html INTRODUCE NEWS SHOPPING BOARD css * { margin: 0; padding: 0; } #Nav-Logo { display: inline-flex; height: 40px; width: 140px; background-image: url("https://cdn.pixabay.com/photo/2013/02/12/09/07/microsoft-80658_1280.png"); background-repeat: no-repeat; backgroun..
[API] 카카오maps API 목록으로 표출하기 오류
·
Follow Work/SpringbootBoard
Kakao maps API 오류잡기 ↓ 카카오맵 API 사용 설명 링크 ↓ https://rebornbb.tistory.com/entry/API-%EC%B9%B4%EC%B9%B4%EC%98%A4maps-API-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 카카오maps API 샘플 사용 중 (https://apis.map.kakao.com/web/sample/keywordList/) 키워드로 장소검색하고 목록으로 표출하기 에서 지도는 출력이 되나, 목록만 출력되지않는 오류가 발생했다. 동일한 코드임에도데스크탑에서는 잘되는 API 라이브러리 서비스가 노트북에서만 출력이 되지않으니 이해가 되지않았다 우선 크롬 개발자도구에서 콘솔에러를 확인했다. 아래와 같은 에러가 떴다. Access to..
[API] 카카오maps API 사용하기
·
Follow Work/SpringbootBoard
Kakao maps API 카카오maps API는 간략하고 친절한 설명 문서로 접근하기 편했다. 해당 게시글은 웹으로 사용 시 카카오maps API 사용방법을 정리하였다. 1. 카카오maps API 홈페이지접속 https://apis.map.kakao.com/ 로그인 후 상단 오른쪽에 APP KEY 발급 클릭 2.애플리케이션 추가하기 앱이름, 사업자명을 입력해준 후 저장 애플리케이션 목록에 새롭게 생성된 것을 확인할수있다. 3.애플리케이션 플랫폼 설정하기 애플리케이션이 추가된 것을 클릭 > 플랫폼 > 플랫폼설정하기 웹 > 웹플랫폼등록 아직은 도메인이 없으니 http://localhost:8080/ 을 입력해주었다. 4.샘플 파일 사용하기 https://apis.map.kakao.com/web/sample..
[API] openweathermap API를 통해 현재 날씨 출력하기
·
Follow Work/SpringbootBoard
openweathermap API 참고 유튜브영상 : https://www.youtube.com/watch?v=QxEZCSfUrzs openweathermap API에서 Free로 사용할수있는 것은 한정되어있다. 아래는 사용가능한 것을 알려주는 표이다. 1.openweathermap API 사이트 접속 후 가입 API사이트 : https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and ..
[HTML CSS JS] 자동 카드 슬라이더 만들기
·
Follow Work/SpringbootBoard
Auto scroll Card Slider - HTML CSS vanilla JS codepen link: https://codepen.io/bongcasso01/pen/xxjbQJG See the Pen weather card slider by rebornbb (@bongcasso01) on CodePen. html ❮ 현재날씨 강원도 현재기온: 최저기온: 최대기온: 경기도 현재기온: 최저기온: 최대기온: 충청북도 현재기온: 최저기온: 최대기온: 충청남도 현재기온: 최저기온: 최대기온: 전라북도 현재기온: 최저기온: 최대기온: 전라남도 현재기온: 최저기온: 최대기온: 경상북도 현재기온: 최저기온: 최대기온: 경상남도 현재기온: 최저기온: 최대기온: 제주 현재기온: 최저기온: 최대기온: ❯ /*-----..
[HTML CSS JS] 자동 스크롤 카드 슬라이더 만들기
·
Follow Work/SpringbootBoard
Auto scroll Card Slider - HTML CSS vanilla JS codepen link: https://codepen.io/bongcasso01/pen/zYjxamJ See the Pen auto card slider vanilla js css by rebornbb (@bongcasso01) on CodePen. html number 1 number 2 number 3 number 4 number 5 number 6 css .TeamPic { border-radius: 50%; width: 60%; } .FlipCardcontainer { margin-top: 5%; width: 100%; height: 100%; display: flex; justify-content: center; ..
[HTML CSS JS] 자동 이미지 슬라이더 만들기
·
Follow Work/SpringbootBoard
Auto Image Carousel - HTML CSS vanilla JS codepen link: https://codepen.io/bongcasso01/pen/xxjbzXa See the Pen auto slider vanilla js css by rebornbb (@bongcasso01) on CodePen. html
[HTML CSS] 플립 카드 만들기
·
Follow Work/SpringbootBoard
Hover Flip Card - HTML CSS codepen link: https://codepen.io/bongcasso01/pen/MWGYXXr See the Pen hover flip card vanilla css by rebornbb (@bongcasso01) on CodePen. html Earth Keeper 지키는 사람들 우리는 자연을 지키는 모든 이들을 위한 사이트입니다. 개인의 이익만이 아닌 더 나아가 공공의 미래를 위한 아름다운 여러분들의 선행들을 우리는 도우며 함께합니다! css .flip-card { background-color: transparent; border: none; width: 300px; height: 220px; perspective: 1000px; /* pers..
[Springboot] 게시글 파일 업로드 -1 [37]
·
Follow Work/SpringbootBoard
SpringBoot · intelliJ · OracleDB · Thymeleaf 1. Question 엔티티에 column 추가하기 Question.java private String filepath;/*파일저장경로*/ private String filename;/*파일이름*/ 2.QuestionService에서 create 메서드 수정하기 public void create(String subject, String content, SiteUser user, String category, MultipartFile file) throws Exception{ String projectPath = System.getProperty("user.dir") + "\\\\src\\\\main\\\\resources\\..