크롬 개발자 도구의 dimensions 와 html 실제 넓이 차이 해결 meta name="viewport" content="width=device-width, initial-scale=1.0"

크롬 개발자 도구의 dimensions 와 html 실제 넓이 차이 해결 meta name="viewport" content="width=device-width, initial-scale=1.0"

2024-01-12 1. 방법 위의 dimensions 와 실제 element 의 최대 넓이가 다른 경우, 기존의 코드의 html 코드는 아래와 같은 형식으로 되어 있을 것이다. 해당 코드에서는 디바이스의 넓이와 페이지 로드시에 초기 줌 레벨에 대한 설정값이 없다. 해당 코드를 추가해 준다. 이 메타 태그는 모바일 브라우저에서 웹 페이지를 올바르게 렌더링한다. width=device-width: 뷰포트의 너비를 디바이스의 실제 너비와 일치시키라는 의미이며, 모바일 기기의 화면 크기에 맞게 웹 페이지가 조절된다. initial-scale=1.0: 페이지가 로드될 때 초기 줌 레벨을 1.0으로 설정한다. 이는 사용자가 페이지를 처음 방문했을 때 기본 확대/축소 레벨을 의미한다. 메인 이미지 출처 : 사진: ..

  • format_list_bulleted WEB/HTML
  • · 2024. 1. 12.
  • textsms
[CSS] css 에서 overflow: scroll ui 지우는 방법

[CSS] css 에서 overflow: scroll ui 지우는 방법

2024-01-11 1. 방법 /* (Chrome, Safari) 에서 제거하기 */ .your_tag_class_name::-webkit-scrollbar { width: 0 !important; } /* Firefox 에서 제거하기 */ .your_tag_class_name { scrollbar-width: none; } 메인 이미지 출처 : 사진: Unsplash의Thomas de LUZE

  • format_list_bulleted WEB/CSS
  • · 2024. 1. 11.
  • textsms
[CSS] hover 시 뒷 배경만 흐리게 하는 방법

[CSS] hover 시 뒷 배경만 흐리게 하는 방법

2024-01-02 1. 방법 아래와 같이 div 안에 텍스트가 존재한다고 가정해 보자. 목표는 내부 텍스트는 그대로 유지하고 배경 또는이미지만 blur 처리를 해보는 것이다. html Hello world css .test_div { position: relative; width: 500px; /* 슬라이드를 100% 너비로 표시 */ height: 500px; } .test_div::before { content: ""; background-color: red; width: 375px; height: 500px; filter: blur(0px); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .test_div:hove..

  • format_list_bulleted WEB/CSS
  • · 2024. 1. 2.
  • textsms
[CSS] Flex 태그 자식별로 정렬 다르게 하는 방법

[CSS] Flex 태그 자식별로 정렬 다르게 하는 방법

2023-12-29 1. 예제 Flex를 선언한 부모 태그에서 아래와 같은 align-tems: center를 선언하게 되면 자식 태그들의 위치는 가운데로 정렬 되게 된다. 하지만 자식 태그들 중 어떤 태그는 좌측 어떤 태그는 우측에 위치시키여 하는 경우가 생기는데 이를 해결하는 방법을 알아보자. align-items: center; 아래의 코드는 세로 방향으로 flex 를 선언한 태그이다. HTML CSS .test_main_div{ border: 1px solid #C9CACA; display: flex; width: 1000px; flex-direction: column; align-items: center; } .test_div1{ width: 100px; height: 100px; margin:..

  • format_list_bulleted WEB/CSS
  • · 2023. 12. 29.
  • textsms
[Thymeleaf] 타임리프 lottie json 형식으로 불러오기

[Thymeleaf] 타임리프 lottie json 형식으로 불러오기

2023-12-18 1. 방법 CDN 으로 자바스크립트 코드 소스를 불러온다. lottie-player 태그를 이용해 자신의 json 파일을 불러오면 된다. 아래는 참고용 위치이다. 전체코드 template 메인 이미지 출처 : 사진: Unsplash의Austin Schmid

  • format_list_bulleted WEB/Thymeleaf
  • · 2023. 12. 18.
  • textsms
[Spring] spring.jpa.open-in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open-in-view to disable this warning 해결 방법

[Spring] spring.jpa.open-in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open-in-view to disable this warning 해결 방법

2023-11-18 1. 원인 Spring를 빌드하다 보면 아래와 같은 WARN 이 뜨는 경우가 있다. JpaBaseConfiguration$JpaWebConfiguration : spring.jpa.open-in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open-in-view to disable this warning 해당 부분을 살펴보자. OSIV(View의 Open Session)는 그림과 같이 View 계층이 프록시 초기화를 트리거할 수 있도록 지속성 콘텍스트를 열어두도록 강제한다. 쉽게 표현하자면 JPA의 영속..

  • format_list_bulleted WEB/Spring
  • · 2023. 11. 18.
  • textsms