본문 바로가기

개발88

스프링 구글 로그인 시큐리티 설정 계정 정보 확인 Spring boot reactive web에 구글 로그인을 붙이는 건 너무 간단하다. https://devkimchi.tistory.com/76 Sprng Boot 2.7.8 Reactive WebOAuth2 Google Login 적용해 보기 간단 해결기 Sprng Boot 2.7.8을 이용 Reactive Web에 OAuth2를 이용해 Google Login을 붙여 볼 예정이다. 이전 시도에서 스프링부트 3.0.0 이용하여 실패했는데 소스도 별로 없고 글도 없어서 아직 이른가 보다라는 판단에 devkimchi.tistory.com 글의 후반부에 보면 클라이언트 아이디 비번만 추가해 줌으로써 로그인 창을 띄우고 간단한 사용자 정보까지 리턴 받을 수 있었다. 위의 초기 세팅까지 하면 was가 가동 후 .. 2023. 2. 7.
CSS Flexbox, inline-block를 이용한 배치 설정 다시 Flexbox로 https://devkimchi.tistory.com/84 미디어 쿼리 적용 반응형 웹 사이트 만들기 와이드 모니터용 고해상도 와이드 모니터에 맞는 반응형 웹을 만들어 보려 합니다. 큰 와이드 모니터에선 네이버가 밑의 사진과 같이 나오는데 학습 겸 해서 반응형 웹으로 만들어 보려 합니다. 요즘 적응형 웹 devkimchi.tistory.com 이전글에서 div 안에 block과 inline-block를 이용해서 css를 설정했을 때 원하는 형상으로 위치가 된 듯 보였으나 프로필 쪽을 길게 주니 프로필이 폭에 따라 위로 갔나 아래로 갔다 하는 문제가 발생했다. 일단 링크는 아래로 가고 로고와 프로필은 상단의 좌, 우로 흩어지고 또 폭이 좁아 지면 로고, 프로파일, 링크 순으로 열이 되.. 2023. 2. 6.
포토샵 깨지지 않는 이미지 만들기(화질저화) 와 캔버스 크기 조절하기 포토샵 깨지지 않는 이미지 만들기 와 캔퍼스 크기 조절하기 연예인 문가영씨 사진을 가지고 포토샵으로 깨지지 않는 이미지를 만들어볼께요 예쁘게 나온 문가영씨 사진 이미지를 어떻게 조절하는지 적어봅니다 . 포토샵 깨지지 않는 이미지 설정 이미지의 크기를 줄이거나 늘릴경우 큰 사진을 줄이는 경우는 크게 문제가 되지 않으나 저해상도의 이미지를 크게 확대 할 경우 계단 처럼 층이 지며 화질이 저화 되는 경우가 생깁니다. 이를 방지 하기 위해 포토샵에 기능이 있는데요 이를 한번 알아 보겠습니다. 단축키 ctrl + O를 눌러서 파일을 가져옵니다. img(이미지) - img size(이미지 사이즈) 클릭 합니다. 이미지 사이즈 상태창이 뜨면 폭(Width), 높이(Helght)를 원하는 사이즈 설정과 픽셀로 설정합니.. 2023. 2. 5.
미디어 쿼리 적용 반응형 웹 사이트 만들기 와이드 모니터용 고해상도 와이드 모니터에 맞는 반응형 웹을 만들어 보려 합니다. 큰 와이드 모니터에선 네이버가 밑의 사진과 같이 나오는데 학습 겸 해서 반응형 웹으로 만들어 보려 합니다. 요즘 적응형 웹도 많은데 해상도에 맞춰 사진이나 내용 구성물이 달라지는 것이다 반응형 웹은 해상도에 맞춰 객체가 내려가거나 안 나오게 하는 등 미디어 쿼리를 이용하여 레이아웃의 위치를 바꿔 주는 식으로 진행할 예정입니다. 그리고 와이드 모니터에 맞게 나온 사이트도 찾아보지 못했고 넷플릭스 같은 경우 사진만 대빵 크게 나와서 좀 난감하긴 한대 그래도 영화 볼 땐 21:9 모니터 만한 게 없답니다. 미디어 쿼리 사용 일단 적응형웹은 만들어 본 적도 없고 미디어 쿼리를 예전에 조금 써보았기에 3840*1600 해상도에 맞는 반응형 웹을 만들.. 2023. 2. 5.

티스토리툴바