📒솜이노트

전체 글 검색 결과

해당 글 150건

# 티스토리 블로그에 다크모드 적용하기 (Magazine 테마, 자동 감지)

최근 웹사이트들은 사용자 편의를 위해 다크모드를 기본 제공하는 경우가 많습니다.다크모드는 눈부심을 줄이고, OLED 화면에서는 전력 소모를 줄이는 장점이 있습니다.티스토리에서도 직접 CSS를 수정하면 다크모드를 쉽게 구현할 수 있습니다.제 블로그에서도 달이나 해 버튼을 누르면 구현되도록 만들어보았습니다. (1) 관리자 페이지 이동티스토리 관리자 → 스킨 편집 메뉴로 들어갑니다.HTML/CSS 편집이 가능한 스킨 편집기를 엽니다.(2) CSS 변수 추가하기/* 기본(라이트) 모드 */body { background-color: #ffffff; color: #000000;}/* 다크모드 */body.dark-mode { background-color: #121212; color: #e0e0e0;}/*..

🖥️ 프론트엔드/❤️ 티스토리꾸미기 2025. 9. 4. 11:12

# jQuery로 만드는 커스텀 다중 선택 select 박스! (라이브러리 X)

일반 태그는 브라우저마다 디자인이 달라서 커스터마이징이 어렵다.이번 글에서는 커스텀 드롭다운 박스를 만들어서 체크박스로 여러 개를 선택할 수 있고,선택한 값이 상단에 표시되며, 길어지면 ... 으로 잘리고 hover 시 툴팁으로 전체 값을 보여주는 기능까지 구현한다. See the Pen Untitled by note (@somieee) on CodePen.">See the Pen Untitled by note (@somieee) on CodePen.1.HTML 구조 과일 선택 사과 바나나 포도 딸기 수박 2.CSS 스타일.custom-select { width: 200px; border: ..

🖥️ 프론트엔드/🎨퍼블리싱 2025. 9. 1. 10:28

# CSS - placeholder 색상 변경하는 방법

placeholder 자체는 색상을 바꿀수 없고, CSS 가상 선택자를 선택해야 한다. 예를들어 input박스일 경우input::placeholder { color: #c8c8c8; /* 원하는 색상 */ opacity: 1; /* 브라우저 기본 투명도 제거 */}이런식으로 색상변경이 가능하다. textarea일 때textarea::placeholder { color: red;} 브라우저 호환성 때문에 아래처럼 벤더 프리픽스도 같이 쓰는 경우가 있다.input::-webkit-input-placeholder { color: #999; }input:-moz-placeholder { color: #999; }input::-moz-placeholder { color: #999; }input:-m..

🖥️ 프론트엔드/🎨퍼블리싱 2025. 9. 1. 09:11

# 가장 깔끔한 한국어 웹폰트 Pretendard, 프로젝트에 적용하기(CDN)

Pretendard 소개웹에서 한글을 깔끔하게 보여주고 싶을 때 가장 많이 쓰이는 오픈소스 폰트 중 하나가 Pretendard예요.산돌 × OrionCactus에서 만든 무료 공개 폰트구글 Noto Sans를 기반으로 한국어 가독성을 개선웹폰트, 데스크탑용, 모바일까지 다양한 환경에서 사용 가능가변 폰트(Variable Font) 지원 → 브라우저에서 더 최적화된 렌더링공식 저장소: GitHub - orioncactus/pretendard GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternativ어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternati..

🖥️ 프론트엔드/🎨퍼블리싱 2025. 8. 28. 12:00

# GitHub API로 커밋 히스토리 불러오기 (Spring Boot REST API 연동)

이런 커밋 히스토리를 가져와서 포트폴리오 사이트에 뿌려주고 싶었다. 완성 화면 해당 기능은 GitHub API로 히스토리를 불러올 수 있다.필요한 기능 : GitHub API 엔드포인트, Access Token 발급1. GitHub API 소개GitHub은 REST API를 제공하고, repos 엔드포인트를 이용하면 커밋 히스토리를 조회할 수 있다.기본 주소:https://api.github.com/repos/{owner}/{repo}/commits2. Personal Access Token 발급GitHub 로그인 → Settings → Developer settings → Personal access tokensFine-grained token 또는 Classic token 발급최소 권한은 repo →..

🗄️ 백엔드/🍃Spring 2025. 8. 27. 14:45

# 413 Content Too Large 에러

해당 에러는 파일첨부 등록시에 나타났는데코드상의 문제가 아니라 서버가 허용하는 업로드 파일 크기 제한에 걸려버린 탓이었다. 1. Spring Boot에서 파일 업로드 크기 설정# 파일 하나당 최대 크기spring.servlet.multipart.max-file-size=50MB# 요청 전체 최대 크기spring.servlet.multipart.max-request-size=50MB2. 톰캣 레벨 설정(52428800 = 50MB) 확인할 점이미지 같은 큰 파일 올릴 때도 제한을 넘어가면 413 터짐.개발 단계라면 100MB 정도로 여유 있게 주고, 운영에서는 정책에 맞춰 제한 두는 게 좋다.결론application.properties 이나 톰캣에 위 설정 추가하고 서버 재시작하면 해결되는 오류이다.

❗에러해결모음 2025. 8. 25. 16:52

# Spring Security + Thymeleaf: 로그인 사용자 활용하기

Spring Security를 프로젝트에 적용하면, 로그인한 사용자 정보를 뷰(Thymeleaf)와컨트롤러에서 쉽게 가져와서 활용할 수 있다.이번 글에서는 대표적으로 많이 쓰이는 3가지 패턴을 정리하려고 한다.1. 로그인 사용자만 메뉴 보이게 하기Thymeleaf에서 thymeleaf-extras-springsecurity6 의존성을 추가하면,sec:authorize 속성을 사용할 수 있다.템플릿 상단에 네임스페이스를 선언해야 한다: 그 다음 원하는 영역에 조건을 걸면 된다 : 등록 isAuthenticated()로그인된 사용자만isAnonymous()로그인 안한 사용자만hasRole('ADMIN')특정 권한을 가진 사용자만 2. 로그인 사용자 정보를 화면에 출력하기Spring..

🗄️ 백엔드/🍃Spring 2025. 8. 25. 10:16

# JEUS - spring war파일 배포해보기

서버 켜는 방법일단 서버부터 켜야하는데 해당 게시글 아랫부분 보면 켜는 방법이 나와있다. # WAS Jeus(7버전) 설치해보기최종목표내 PC (Windows or Linux)에 JEUS 7 설치 → 웹앱 배포 → 브라우저에서 실행전체 순서 JEUS 7 설치 파일 다운로드JEUS 설치기본 도메인(domain) 생성관리 도구로 서버 실행 (관리콘솔 or CLI)WAR 파일somnote.tistory.com JEUS 관리자 페이지 로그인키고나서 http://127.0.0.1:9736/webadmin/login 로 접속을 하여 로그인한다.applications 메뉴로 들어가면 deploy 버튼이 있다. 눌러주도록 하자war파일 준비jeus에 올릴 war파일을 준비해야 한다. 빌드를 통해 만들자. 배포id, ..

🗄️ 백엔드/🗃️ Server 2025. 8. 18. 10:48

# intellij(인텔리제이) - svn 주소(url) 변경하는 방법

SVN url이 변경되어 바꿀 일이 있다면 바꾸는 방법은 간단하다.루트 폴더에서 오른쪽 마우스를 통해 Subversion메뉴에 진입한다.Relocate를 선택한 후 ToURL: 에 변경된 url 주소를 적는다.

🔍IDE/intelliJ 2025. 8. 14. 15:03

# SVN - VisualSVN 서버 이관하기 (windows -> windows)

기존에 쓰던 서버를 없앨 예정이여서 새 서버에 SVN을 이관하는 퀘스트를 받게되었다.요약방법을 한마디로 요약하자면 기존에 설치되어 있는 Repositories를 통째로 복사해서 옮기면 된다. 그럼 계정이고 파일이고 모두 다 동일하게 옮겨진다. 아래부터 차근차근 설명하겠다. 다운로드사용하는 SVN은 VisualSVN인데 구버전이여서https://www.visualsvn.com/server/changes/ Version History | VisualSVN ServerVersion History Get information about released versions of VisualSVN Server.www.visualsvn.com해당 링크에서 동일한 버전으로 다운받았다. 기존 서버에서 할 일내껀 구버전이라 ..

🗓️형상관리 2025. 8. 14. 10:09