본문 바로가기

분류 전체보기97

[서버 기초] 환경변수(.env)는 왜 쓰는 거야? 💡 “코드에 DB 비밀번호 적으면 안 되는 이유?”Node.js나 Python 코드를 보면환경설정 정보를 이렇게 적는 경우가 많아요.process.env.DB_PASSWORD"왜 그냥 코드에 직접 쓰지 않고,process.env 같은 걸로 불러오는 걸까?" 🤔오늘은 환경변수(.env)의 개념과 쓰는 이유,그리고 실무에서 꼭 지켜야 할 보안 팁까지 정리해드릴게요! 😊🗂️ 환경변수(Environment Variable)란?환경변수는운영체제나 애플리케이션 실행 시외부에서 주입되는 설정값입니다. 📌 예시:DB 비밀번호API 키포트 번호배포 환경(dev, prod 등)👉 코드에 직접 쓰지 않고,환경에 따라 다르게 설정 가능!📁 .env 파일이란?.env 파일은환경변수를 파일로 따로 저장해두는 방식이에.. 2025. 5. 12.
[HTML] 이미지에 마우스 올리면 설명 텍스트 나타내는 법 (hover + title 활용) 💡 이미지 위에 마우스를 올렸을 때 설명(툴팁) 텍스트가 나오게 하고 싶다면?웹페이지를 만들 때 이미지에 마우스를 올리면 설명 문구(툴팁)가 뜨도록 하고 싶을 때가 많아요.가장 기본적인 방법은 HTML의 title 속성을 사용하는 것이고,CSS의 :hover를 이용해 직접 스타일링된 툴팁을 만들 수도 있습니다.이 글에서는 title 속성 활용법 + CSS로 툴팁 만들기 두 가지 방법을 알려드립니다.🛠️ 방법 1. title 속성 사용하기 (가장 간단한 방법)✅ 장점:HTML만으로 간단하게 적용 가능자동으로 브라우저 기본 스타일의 툴팁이 뜸사용법이 매우 직관적🛠️ 방법 2. CSS로 직접 툴팁 만들기 (커스텀 스타일 적용) 이 이미지는 예시입니다.🎯 포인트 설명position: relative.. 2025. 5. 12.
[앱테크] 내가 직접 써본 만보기 앱테크 TOP5 솔직 후기 하루 만보 걷기, 그냥 걷기만 하지 마세요!걷기만 해도 포인트가 쌓이고,그 포인트가 돈이 되고, 금이 되고, 책이 되고, 비트코인이 된다면?하지만, 잊지말아야 할것은 포인트가 엄청난 큰 돈을 가져다 주는것은 아니라는것을 명심해야한다.(내 수입에 보조역할) 요즘 저는 걷기 운동하면서 소소하게 돈도 모으는 앱테크를 실천 중인데요.직접 사용해본 만보기 기반 앱테크 TOP5 솔직 후기를 정리해봤어요. (추천인 코드 포함)🥇 1. 토스 만보기 (Toss)✅ 장점❌ 단점걷기 포인트 + 다양한 미션으로 수익화 가능만보기만으로는 포인트가 크지 않음금융 미션, 퀴즈, 추천 이벤트 등 다양한 적립 루트포인트 현금화까지 다소 시간이 걸림사용처가 확실 (현금으로 전환 가능)광고는 없지만 금융 콘텐츠는 많음만보기 + 미션형 .. 2025. 5. 10.
[HTML] 버튼 클릭 시 팝업창 띄우는 법 (window.open 활용) 💡 버튼을 눌렀을 때 새 창(팝업창)을 띄우고 싶다면?웹페이지에서 버튼을 클릭했을 때 새로운 작은 창(팝업)을 열고 싶을 때가 있어요.예를 들어:이용약관 보기미리보기 창작은 알림창 등이럴 때는 JavaScript의 window.open() 함수를 사용하면 쉽게 팝업창을 띄울 수 있습니다.🛠️ 버튼 클릭 시 팝업창 띄우기: 코드 예제와 설명✅ 기본 예제 (새 창 열기)팝업 열기🎯 포인트 설명첫 번째 인자: 열고 싶은 URL두 번째 인자: 창 이름 ('_blank'도 가능)세 번째 인자: 옵션 (width, height, top, left 등 크기와 위치 설정)⚡ 다양한 옵션 설정 예시'width=600,height=500,top=100,left=200,resizable=yes,scrollbars=ye.. 2025. 5. 9.
세대별 피드 필터형 리뷰 "한줄로그" 보호되어 있는 글 입니다. 2025. 5. 8.
[HTML] 버튼 클릭 시 페이지 맨 위로 부드럽게 올라가는 법 (scroll behavior 활용) 💡 "맨 위로" 버튼을 눌렀을 때 부드럽게 스크롤되게 하고 싶다면?블로그, 쇼핑몰, 랜딩 페이지를 보면 하단에 "맨 위로 올라가기" 버튼이 자주 있죠.이때 페이지가 갑자기 위로 확 이동하지 않고,부드럽게 올라가는 스크롤 효과를 주면 사용자 경험(UX)이 더 좋아집니다.이 글에서는 scroll behavior와 window.scrollTo()를 활용한 구현 방법을 알려드립니다.🛠️ 부드럽게 맨 위로 올라가기: 코드 예제와 설명✅ 기본 예제 (scroll behavior: smooth)맨 위로 가기🎯 포인트 설명window.scrollTo({ top: 0 }); 👉 위쪽 0 위치로 이동behavior: 'smooth' 👉 부드러운 스크롤 효과 적용behavior: 'auto' 👉 부드럽지 않고 즉.. 2025. 5. 8.
반응형

티스토리툴바