분류 전체보기 (106) 썸네일형 리스트형 [css] on/off 토글 스위치 간단히 만들기 1. HTML 2. CSS/* on/off토글 */label { display: block; position: relative; width: 100px; height: 45px; background: #d3d3d3; border-radius: 60px; transition: background 0.4s; } label::after { content: ""; position: absolute; left: 2.5px; top: 50%; width: 40px; height: 40px; border-radius: 100%; background-color: #fff; transform: translateY(-50%); .. [jquery] html 동적으로 삽입하기 - load() load() 메서드를 사용해서 버튼을 클릭하면 외부 페이지(header.html)를 로드$(선택자).load(URL, [데이터], [콜백 함수]);사용방법ㅇ 선택자 : 로드한 컨텐츠를 삽입할 요소를 선택합니다.ㅇ URL : 로드할 리소스(외부 페이지 또는 파일)의 URL을 지정합니다.ㅇ 데이터 (선택 사항) : 서버로 전송할 데이터를 지정합니다. 주로 POST 요청에 사용됩니다.ㅇ 콜백 함수 (선택 사항) : 로드가 완료된 후 실행할 함수를 정의합니다. 이 함수는 로드가 성공하거나 실패했을 때 호출됩니다. 특징ㅇ 비동기적 로드 : load() 메서드는 비동기 방식으로 동작하며, 페이지의 리로드 없이 외부 리소스를 로드합니다.ㅇ 로드된 컨텐츠 삽입 : 로드한 컨텐츠는 선택한 요소 내에 자동으로 삽입됩니다... [JAVA] 스프링 IP 주소 가져오기 import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;@RestController@RequestMapping("/api")public class IpController { @GetMapping("/client-ip") public String.. [JAVA] 자바 기초 - 의존성(Dependency), 생성자&수정자, 빌더패턴(Builder) 의존성과 의존성 관계 주입(Dependency Injection, DI)🦄 * 의존성- 한 객체가 다른 객체를 사용할 때- A클래스가 B클래스 또는 인터페이스를 사용하고 있는 경우→ A가 B를 의존한다는 것이 의미하는 것은 의존 대상 B가 변하면, 그것이 A에 영향을 미친다는 것. * 의존성 관계 주입(Dependency Injection, DI)- 의존성이 강할 때 나타나는 문제점을 해결하기 위해 사용- 의존성 주입 : 두 객체 간의 관계(의존성)를 맺어주는 것- 방법 : 생성자 주입, 필드 주입, 수정자 주입 → 객체를 주입받는다는 것은 외부에서 생성된 객체를 인터페이스를 통해 넘겨받는다는 것 = 결합도 낮춤(유연한 구조). Class Minicar { private Motor.. [데이터베이스]쿼리문 이해 - join/outer 쿼리 해석 순서 🐸 * 쿼리문 SELECT FROM WHERE GROUP BY HAVING ORDER BY LIMIT - 결과 중 몇개의 행을 보여줄 지 SQL 쿼리를 해석하는 순서 1. FROM ( + JOIN ) 2. WHERE 3. GROUP BY 4. HAVING 5. SELECT 6. ORDER BY 7. LIMIT JOIN 🐸 * JOIN - inner join = inner left join ;두 개의 테이블 간에 일치하는 행만 반환 - left join = left outer join ;왼쪽 테이블의 모든 행을 반환, 일치하는 행이 있는 경우 행을 함께 반환 만약 오른쪽 테이블에 일치하는 행이 없으면 NULL 값으로 채움 - right join = right outer join ;오른쪽 테.. [CSS] 글씨 강조 효과 형광펜 효과 background-color: yellow; 2. text-shadow: 0px 0px 20px yellow; 첫 번째 값: 그림자의 가로 위치를 지정(X offset) 두 번째 값: 그림자의 세로 위치를 지정(Y offset) 세 번째 값: 그림자의 흐림 정도를 지정(Blur) : 값이 클수록 더 흐릿한 그림자가 생성. 네 번째 값: 그림자의 색상 3. box-shadow: 0 0 10px yellow; - Type : Outset(box 외곽) / Inset(box 내부) 첫 번째 값: 그림자의 가로 위치를 지정(X offset) 두 번째 값: 그림자의 세로 위치를 지정(Y offset) 세 번째 값: 그림자의 흐림 정도를 지정(Blur) : 값이 클수록 더 흐릿한 그림자가 생성. 네 .. [날다프로젝트] Service, Controller 와 Repository / DAO와 DTO Service, Controller 와 Repository 🐸 계층형 아키텍처 @Controller(프레젠테이션 레이어) : 웹 요청과 응답을 처리함 @Service (서비스 레이어) : 내부에서 비즈니스 로직 처리 @Repository(퍼시스턴스 레이어) : DB나 파일같은 외부 I/O 작업을 처리 ⭐ Layered Architecture를 지킴으로써 각 계층 역할을 분리하여 유지보수가 쉽도록! Service 🐸 내용 1. UserService는 사용자와 관련된 비즈니스 로직을 처리하는 서비스 계층의 클래스 2. UserRepository는 데이터베이스와 직접적으로 소통하며 CRUD(Create, Read, Update, Delete) 작업을 수행하는 레포지토리 계층의 인터페이스 DAO와 DTO 🐸 내.. [VS Code] 프리티어(prettier) 설정하기 : 저장 시 자동 줄 바꿈 1. 일단 확장(extensions) 들어가서 prettier 치고 가장 처음 나오는 거 다운 받는다. 2. ctrl 과 , 키를 동시에 눌러서 설정 창을 연다. 3. 설정에서 Editor: Default Formatter 검색 → Prettier -Code Formatter 선택 4. 설정에서 editor format on save 검색 → 체크 박스 체크해주기 5. Prettier 검색 후 설정 값 조절하면 됨 - Print Width : 120 - Semi : 체크 - Single Quote : 체크 이전 1 2 3 4 ··· 14 다음
