본문 바로가기

분류 전체보기97

[HTML] input 클릭 시 테두리 색상 바꾸는 법 (focus 속성 활용) 💡 input 박스를 클릭했을 때 테두리 색을 바꾸고 싶다면?웹페이지에서 input 박스를 클릭하거나 포커스될 때 테두리(border) 색상이 자동으로 바뀌지 않아서직접 스타일을 지정해야 하는 경우가 많아요.이 글에서는 CSS의 :focus 선택자를 활용해 클릭 시 테두리 색상 변경 방법을 알려드립니다.🛠️ input 클릭 시 테두리 색상 변경: 코드 예제와 설명✅ 기본 예제🧩 포인트 설명input:focus 👉 클릭하거나 키보드로 선택됐을 때 적용outline: none; 👉 기본 포커스 효과(파란 테두리)를 제거border-color: 원하는 색; 👉 원하는 색상으로 변경 가능색상 추천:파란색: blue연두색: limegreen빨간색(경고): red⚡ 함께 알아두면 좋은 속성속성역할bord.. 2025. 4. 28.
[서버 기초] 포트(Port)란? IP랑 뭐가 다른데? 포트랑 IP의 차이점 💡 “IP 주소만 알면 끝 아니야?”서버 공부하다 보면 이렇게 생각하기 쉽죠?"서버 주소 = IP니까 IP만 알면 접속 가능한 거 아냐?"근데 실제론 이렇게 되어 있어요:192.168.0.1:80 192.168.0.1:3000 192.168.0.1:8080"어? 콜론(:) 뒤에 있는 숫자 뭐야?""이게 바로 포트(Port)입니다!" 오늘은 IP와 포트의 차이, 그리고포트가 왜 필요한지 쉽게 알려드릴게요. 😊🌍 IP 주소란?IP 주소(Internet Protocol Address)는"서버나 컴퓨터가 네트워크상에서 가지는 주소"예요. 📦 예시:192.168.0.1 → 내부 네트워크 주소172.217.175.110 → 구글 서버 중 하나📫 "아파트 단지 주소"라고 생각하면 돼요!(그 아파트에 누가 사.. 2025. 4. 25.
[HTML] input placeholder 색상 바꾸는 법 (::placeholder 활용) 💡 placeholder 색이 너무 연해서 안 보인다면?input 박스에서 placeholder(힌트 텍스트)가 너무 흐릿해서 사용자들이 잘 못 보는 경우가 많아요.이럴 땐 CSS의 ::placeholder 선택자를 이용해 placeholder 색상을 직접 설정할 수 있습니다.이 글에서는 placeholder 색상 변경 방법과 실무에서 자주 쓰는 예제를 알려드립니다.🛠️ placeholder 색상 바꾸기: 코드 예제와 설명✅ 기본 예제 (인라인 스타일) ❌ 위 코드는 placeholder 색상이 아니라 입력된 글자 색상을 바꾸는 방법이에요!placeholder 색상을 바꾸려면 아래처럼 CSS의 ::placeholder 사용해야 합니다.🎯 placeholder 색상 변경 (정석 방법)🧩 다양한 pl.. 2025. 4. 25.
[서버 기초] 웹 개발자가 꼭 알아야 할 서버 개념 총정리 & 정리 노트 💡 “서버 기초, 어디까지 알면 충분할까?”서버 공부 처음 시작하면 이렇게 생각하죠.“도대체 뭐부터 알아야 돼?”“이 개념들 다 어디에 쓰이는 거지?”그래서 준비했습니다.웹 개발자 & 실무 백엔드 개발자라면이 정도 개념만 제대로 알면 진짜 충분합니다! 🚀🗂️ 서버 기초 핵심 키워드 한눈에 보기개념핵심 의미대표 기술/도구서버란클라이언트 요청 처리 컴퓨터Node.js, SpringHTTP요청 → 응답 통신 규칙GET, POST, PUT, DELETEHTTPS암호화된 HTTPSSL 인증서 필요도메인 & DNS주소 → IP 변환 시스템Route53, CloudflareAPI서버와 데이터 통신 약속REST API, GraphQLDB 연결데이터 저장소와 통신MySQL, MongoDB, ORM리버스 프록시서버 .. 2025. 4. 24.
[HTML] a 태그 커서 모양 변경 방법 (pointer 속성 활용) 💡 HTML에서 a 태그 커서가 손가락(포인터) 모양으로 안 바뀐다면?웹페이지에서 태그(링크)를 만들었는데, 마우스를 올려도 커서가 손가락 모양(포인터)으로 바뀌지 않아 당황한 적 있나요?이럴 때는 CSS의 cursor 속성을 사용하면 쉽게 해결할 수 있습니다.이 글에서는 a 태그 커서 변경 방법과 실무에서 자주 쓰는 커서 속성을 정리해드립니다.🛠️ 커서 모양 변경: 코드 예제와 설명✅ 기본 예제 (인라인 스타일 사용)Click me위 코드처럼 style="cursor: pointer;" 속성을 넣으면마우스를 올렸을 때 커서가 손가락 모양으로 바뀝니다.🎯 커서 스타일을 CSS 클래스로 설정하기 (추천 방식)Click here✔️ 코드 분리로 유지보수에 더 유리합니다.✔️ 여러 링크에 반복 사용 가.. 2025. 4. 24.
[서버 기초] 서버 장애 원인과 실무에서 꼭 알아야 할 장애 대응 전략 💡 “서버는 언제 터질까?”서비스가 잘 굴러가는 것 같다가도…갑자기 이런 상황이 옵니다.“서버 다운!”“DB 연결 실패!”“트래픽 폭주!”“배포 후 에러 발생!”그런데 실무에서는 서버가 터지는 것보다→ 터지고 나서 어떻게 대처하는지가 더 중요해요.🚨 서버 운영 중 자주 발생하는 장애 원인 TOP 5장애 원인설명1. 트래픽 폭주이벤트, 뉴스 노출 등으로 접속 급증2. DB 연결 장애DB 서버 다운 or 연결 수 제한 초과3. 서버 프로세스 에러코드 에러, 메모리 누수 등4. 배포 실수새 코드 배포 후 문제 발생5. 외부 API 장애결제 시스템, 로그인 연동 문제 등🛠️ 장애 발생 시 실무 대응 전략1단계. 모니터링 → 빠른 감지CloudWatch, Datadog, Grafana, Sentry에러 발생.. 2025. 4. 23.
반응형

티스토리툴바