My Tech Blog (프로그래밍언어)

⚠️ 문제스크롤을 내릴 때 헤더가 화면 위쪽에 나타나도록 css에 position: fixed; 속성을 주었는데 본문 컨텐츠가 헤더 밑으로 들어가서 잘리는 문제🧐 원인header가 position: fixed로 설정되어 있으면, section이 그 공간을 자동으로 인식하지 못하고 최상단에 붙어 있는 상태가 된다. 이 문제를 해결하려면, section.visual에 margin-top이 아닌 padding-top을 사용해야 한다.margin-top은 요소의 외부 마진을 설정하는 것이지만, padding-top은 요소 내에서 실제 콘텐츠의 위치를 조정하기 때문에, 고정된 header의 크기를 고려해서 요소를 자리에 배치한다. ⚡ 해결법header의 높이만큼 margin-top 속성 추가/* section...

⚠️ 헤더를 위에 고정하니까 섹션이 헤더 밑으로 들어가서 가려지는 문제⚠️ 햄버거 버튼이랑 로고 분리⚠️ 햄버거 버튼 아이콘 X자로 바꾸기⚠️ 햄버거 메뉴 margin-top⚠️ 헤더랑 햄버거 메뉴 안겹치게 어떻게 구성할지 - innerHeader이 오른쪽으로 햄버거 메뉴 넓이만큼 이동 - 사람 이미지 배경 제거해서 오른쪽으로 밀리도록 - 사람 실루엣 따서 동적으로 선이 생기게 하기⚠️ Nav 메뉴 hover 효과 수정⚠️ 향수 이미지에 케러셀 추가하기 다른 향수로 전환되게 일단 대충 적어놓고 나중에 짜집기 해서 깃 readMe에서 쓰자 오늘 한 부분프랑스어로 "꿈의 향수", "꿈의 물"을 따서  EAU DE REVE(오 드 레브)일단 뼈대만 만들고 페이지 5개 정도 추가하자 로고 Canva 폰트[구글 ..

🔥 문제자바 소켓 통신에서 Gson 라이브러리 + BufferedWriter 사용 중 host 관련 에러 발생함자바에서 데몬을 만들고, 자바스크립트로 데이터를 보내려 했는데 통신이 되지 않는 문제 🔍 원인결국 TCP/IP 문제였고, 서버는 IPv4, 클라이언트(나)는 IPv6로 설정되어 있어서 호환이 안 된 것이었다.네트워크 담당자가 서버의 TCP/IP 버전을 IPv4로 설정했는데 나는 그냥 Runnable JAR을 실행해서 IPv6로 동작한 것이 원인이다. ⭐ 해결법WSL에 nohup 명령어로 JVM 옵션 추가하면 해결 가능nohup java -Djava.net.preferIPv4Stack=true -Dpath="경로" -jar 이름.jar >> server.log 2>&1 &nohup → 터미..

내가 보려고 만든 이벤트 핸들러 🐦목표이벤트, 이벤트 핸들러, 이벤트 버스 및 addEventListener에 대해 알아보자.그리고 jQuery와 Vanilla JavaScript에서 이벤트를 다루는 법에 대해 알아보자. 다시 한 번 말하지만 jQuery는 한때 웹 개발에서 필수적인 라이브러리였지만, 이제는 Vanilla JavaScript(순수 JS)나 React, Vue, Svelte 같은 프레임워크가 대체하면서 사용이 줄어들고 있다. 그래서 addEventListener 위주로만 정리했고 순수하게 이벤트 종류만 궁금한 사람은 6번부터 읽으면 된다. 1. 자바스크립트 이벤트 (JavaScript Event)이벤트(Event)는 사용자나 시스템이 웹 페이지에서 일으키는 동작이다.예를 들어, 버튼 클..

탐색선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있다. 대표적인 예로 배열의 인덱스를 사용해서 선택하는 `위치탐색 선택자`와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 `속성 탐색 선택자`가 있다.  1. 위치 탐색 선택자 ▼기본 선택자로 선택한 요소는 배열에 담기게 된다.그래서 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있게 되는 것이다. 종류용법설명$("요소 선택:first")$("요소 선택").first()$("li:first")$("li").first()전체 요소 중 첫번째 요소만 선택$("요소 선택:last")$("요소 선택").last()$("li:last")$("li").last()전체 요소 ..

함께 보면 좋은 관련 포스팅 ▼ [JavaScript] jQuery를 사용할 때 유의해야 할 사항들⭐ 문서가 로드된 후 실행하자⭐ jQuery 라이브러리 먼저 로드하자⭐ $ 충돌 방지 필요 시 noConflict ⭐ 이벤트 중복 방지 off()⭐ AJAX 캐싱 방지 (cache: false) ⭐ 동적 요소에 이벤트 적용 on()⭐ 성능 최awesomepossum.tistory.com [JavaScript] Object(객체), DOM(문서객체모델), function() 함수 기초 실습1. Object (객체)  2. DOM (Document Object Model)2-1. DOM(문서객체모델) 문서객체모델(DOM) HTML CSS JS  2-2. innerHTML vs textContent 오늘은 문서객..

1. 자동 임포트 & 정리 관련 단축키Ctrl + Shift + O : 자동 임포트 (Organize Imports) → 필요한 import 추가 및 불필요한 import 정리Ctrl + Shift + F : 코드 자동 정렬 (Format Code) → 코드 스타일에 맞춰 정리Ctrl + Shift + S : 모든 파일 저장Ctrl + / : 한 줄 주석 추가 및 제거Ctrl + Shift + / : 여러 줄을 선택한 후 전체를 블록 주석(/* */)으로 감싸기Ctrl + Shift + \ : 블록 주석 해제 (/* */ 삭제)2. 코드 이동 관련 단축키Ctrl + Click : 변수, 메서드, 클래스 정의로 이동F3 : 선언된 곳으로 이동 (Open Declaration)Ctrl + O : 현재 클래..

⭐ 문서가 로드된 후 실행하자⭐ jQuery 라이브러리 먼저 로드하자⭐ $ 충돌 방지 필요 시 noConflict ⭐ 이벤트 중복 방지 off()⭐ AJAX 캐싱 방지 (cache: false) ⭐ 동적 요소에 이벤트 적용 on()⭐ 성능 최적화 (map(), .append() 최소화) 1. 문서가 완전히 로드된 후 실행하기선택자를 사용하기 위해서는 문서 객체를 먼저 불러와야 한다. 그래서 HTML이 로드되기 전에 jQuery 코드가 실행되면 요소를 찾을 수 없는 문제가 발생한다.📌 해결책: $(document).ready() 사용 또는 변경될 텍스트 ⭕ [방법 2] $(document).ready() 사용 변경될 텍스트$(document).ready()를 사용하면 문서가 완전히 ..