A Joyful AI Research Journey🌳😊

230423 Sun 배경에 전체 이미지가 적용되게 만들기 우선 부딪힌 문제는 배경 이미지가 전체적으로 적용되긴 했는데 배경 이미지의 가로 일부가 잘려서 배경으로 적용되는 것이었다. 해결책은 아래 코드인 background-position: center center; 을 사용하면 된다. 전체 코드) 제일 하단에 추가했다. .BgImage { background-image: url("../images/mainBlur.png"); background-size: cover; background-attachment: fixed; background-position: center center; } 결과) 현재 만들고 있는 팀 프로젝트의 main 화면인데, 오른쪽에 잘렸던 건물 이미지가 나오게 됐다.

폼 태그에서 입력한 값을 전송할 때는 GET방식과 POST방식으로 나뉘는데 POST방식으로 보내는 값이 '한글'일 경우 깨지지 않게 전달하기 위해 사용하는 것이 request.setCharacterEncoding("UTF-8")이다. jsp파일은 MS949로 작성되었으며 브라우저는 UTF-8로 받게될 것이다. 내가 사용한 코드) 참고: https://jong99.tistory.com/92 참고: https://powersmile-it.tistory.com/56

a 태그 페이지의 이동, 페이지 내의 다른 영역으로의 이동 등 상호작용이 필요할 경우 사용된다. button 태그 단순 클릭 이벤트, form요소에 입력된 내용을 서버로 전송할 때 사용된다. A button is meant to submit information and will not necessarily redirect the user to an entirely new web page. A button tag can have a variety of behaviors, such as submitting a form, opening a link, or performing a JavaScript function when clicked. A regular tag does not have this built-i..

HTML 파일에 태그가 끝나기 전에 아래 JS 코드를 추가한다. 아래 CSS 코드를 추가한다. 애니메이션 효과가 있을 내용에 아래 코드로 묶는다. 나는 오른쪽에서 나오는 애니메이션(fade-right)을 골랐다. 아래 예시 링크에서 압축 파일을 다운 받아서 aos.css와 aos.js를 쓰면 된다. 그리고 aos.js에 경로 수정을 한다. import '../css/aos.css'; 예시 링크) https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 원작자 깃허브 링크) 사용 설명을 볼 수 있다. https://github.com/..

Mysql 8.0 버전부터는 보안적인 이슈로 useSSL 옵션에 대한 추가적인 설정이 필요해졌다고 한다. applications.properties에 아래 코드처럼 allowPublicKeyRetrieval=true 를 추가한다. spring.datasource.url=jdbc:mysql://localhost:3306/mydatabase?useUnicode=true&characterEncoding=utf8&allowPublicKeyRetrieval=true&useSSL=false 참고: https://joont92.github.io/java/java-mysql-%EC%97%B0%EB%8F%99%EC%8B%9C-%EC%98%A4%EB%A5%98/ [java] java mysql 연동시 오류 The serv..

230430 우선 아래 그림은 어제 내가 팀프로젝트 때 만든 메인 화면인데, 네비게이션 아래에 있는 그라이데션 효과가 있는 부분은 header 부분으로 html에서 아예 TEXT가 없다. 배경 효과를 주려면 아래 코드처럼 height와 width를 지정하면 된다. (header든, 어떤 div든 아무 클래스여도 된다.) header{ height: 80px; width: 100%; background: linear-gradient(180deg,#EBF3FE, white); } 결과) 네비게이션 바 밑에 구름 효과 같은 그라데이션 효과가 나타난다.

230420 아래는 부트스트랩을 쓸 때 나오는 다운로드 아이콘 모양이다. bi bi-download me-2 아래와 신청 옆의 아이콘과 같다.

230419 부트스트랩 템플릿을 사용하면서 화면을 만들고 있고 공통 css 파일을 쓰고 있다. 특정 파일에만 배경이 들어가길 바랐다. 다른 css 파일 안 만들고 단순하게 특정 파일에만 배경이 들어가게 하려면 아래 코드처럼 배경 화면을 특정 class로 만들고 .mainBg { background-image:url("../assets/main.jpg"); /* #경로 수정 필요함 # */ background-size:cover; background-attachment: fixed; position:fixed-bottom; } 만약 body에 배경화면이 들어간다면 아래처럼 클래스를 써서 사용하면 된다.

230416 항상 화면 정중앙에 section이 위치하게 만들 수 있다. 코드) .section { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 결과) 화면 정중앙에 위치한다.

230416 스프링 시큐리티를 이용해서 회원가입 후 로그인 하는 데 계속 아래 오류가 떴었다. No default constructor for entity: : com.example.demo.model.User 해결책은 내가 만든 User.java에 //adding a default constructor with no arguments to the User class //will allow Hibernate to instantiate objects of the class during database queries public User() { } 이 코드를 적어서 default를 지정해주는 것이다. User 클래스에 arguments가 없는 기본 생성자를 추가하면 Hibernate가 클래스의 객체를 인스턴..

출처: https://product.kyobobook.co.kr/detail/S000200456452 스프링 코딩 공작소 | 송미영 - 교보문고 스프링 코딩 공작소 | 처음부터 끝까지 직접 만들어 보며 익히는 스프링 MVC!스프링 MVC는 웹 애플리케이션 개발 전용 프레임워크로, 스프링에서 제공하는 많은 기능을 자유롭게 확장해 사용할 수 product.kyobobook.co.kr p. 198 뷰 리다이렉션 (View redirection) : 사용자 웹 요청에 따라 현재 뷰 페이지에서 다른 뷰 페이지로 이동하는 것. 컨트롤러의 요청 처리 메서드는 기본적으로 GET 방식을 사용하므로 뷰 페이지 이동 방식은 forward 방식을 따른다. @RequestMapping(...) public String 함수 이..

출처: https://product.kyobobook.co.kr/detail/S000201237157 실전! 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발 | 주하 힌쿨라 - 교보문고 실전! 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발 | 스프링 부트와 리액트의 풍부하고 다양한 도구들을 활용해 최신 풀스택 애플리케이션을 개발하는 비법을 배워보자!풀스택 product.kyobobook.co.kr p. 23~ 의존성 주입(Dependency Injection) : 다른 객체에 의존하는 객체를 만들 수 있는 소프트웨어 개발 기법디다. 클래스를 독립적으로 유지하면서 동시에 클래스 간의 상호 작용을 도와준다. 의존성 주입에는 3가지 유형이 있다. - 서비스는 이용될 수 있는 클래스(의존..

230414 하이버네이트는 가장 있기 있는 구현체이고 스프링 부트에서 기본 구현체로 활용된다. 하이버네이트는 검증된 기술로서 대규모 애플리케이션에 널리 사용되고 있다. 아래 코드를 사용하면 MySQL의 결과를 이클립스 콘솔에서 바로 볼 수 있어서 편하다. application.properties나 application.yml에 넣는다. # your database schema is properly generated or updated by Hibernate. logging.level.org.hibernate.SQL=DEBUG logging.level.org.hibernate.type.descriptor.sql.BasicBinder=TRACE #Hibernate to automatically generat..

230414 배경 이미지 크기 상관없이 정중앙에 배치하게 하려면 아래 코드를 쓴다. body { background-image: url("이미지 주소.jpg"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; } 결과) 현재 진행중인 포트폴리오인데, 배경 크기가 상당히 크다보니 중앙 배치가 안 됐었다. 위 코드를 쓰면 웹브라우저의 크기와 상관없이 배경이 정중앙에 배치된다.