My Tech Blog (분류 전체보기)

자바스크립트 이벤트 리스너 간단히 포스팅하려고 심플한 To Do List를 만들어 보았다!    1. 구글폰트, 스타일시트, 자바스크립트 연결- `style.css`와 `script.js` 연결- 구글 폰트 `Poppins`  사용하기 위해서 Embed Code를 2.  전체  적용될 css 설정 & container에 배경 추가⚡  폰트는 구글 폰트 `Poppins` 로 설정 ⚡ `box-sizing: border-box;`요소의 크기를 계산할 때 `패딩(padding)`과 `테두리(border)`까지 포함하도록 설정하는 속성. 기본적으로 CSS에서 box-sizing의 기본값은 `content-box`이다. `content-box`는 요소의 `width`와 `height`가 콘텐츠 영역..

블로그 꾸미기 하면서 간단한 뮤직 플레이어를 만들었다. 음악이 재생 중일 때만 현재 플레이중인 음악 정보를 표시하는 코드 어떻게 짰는지 간단히 올려 본다. 플레이 버튼을 누르기 전까지는 `Title` 과 `Progress Bar` 이 숨겨져 있다가 곡이 재생되면 제목과 프로그레스바가 플레이어 위로 부드럽게 나타나는 코드이다. ⚡ music-info 클래스 CSS 코드음악 재생 전(기본상태).music-body .music-container .music-info { opacity: 0; /* 투명도 100%로 화면에서숨겨짐 */ transform: translateY(100%); /* (수직 방향) 자기 자신 높이만큼 아래로 이동 */ transition: transform 0.3s ease-in..

📑 1. 문제설명💡 2. 접근방식문제에서 주어진 것n : 전체 학생의 수lost : 체육복 도난당한 학생들의 번호들  (배열) reserve : 여벌 가져온 학생 번호들 (배열)체육복은 앞,뒤 번호 학생 에만 빌려줄 수 있음.도난 당한 학생들은 여분이 없어서 체육복 빌려줄 수 없음.1. `lost`와 `reserve` 배열 정렬 2. 체육수업에 참여할 수 있는 학생의 수 = 체육복이 있거나 빌릴 수 있는 학생들의 수 `체육복을 도난 당하지 않은 학생의 수` + `도난당했지만 예비로 들고 온 학생의 수` + `도난당했지만 체육복을 빌릴 수 있는 학생의 수`이 모든 학생들의 수를 누적해서 answer 변수에 담아 준다.  ✅ 체육복을 도난 당하지 않은 학생의 수= 전체 학생의 수 - 체육복을 도난당한 학..

✅ 문제프로그래머스 문제를 이클립스에서 풀던 중 배열명을 잘못봐서 reserve를 reverse라고 입력해 버림이클립스에서 문자열 일괄 한번에 치환하는 법 (스코프 중요함)✅ 해결법1. `Ctrl` + `H`로 `Search` 창 띄우기 > `File Search` > `Containing text`에 찾을 문자열 입력 > `Scope` (범위 설정) 에서 현재파일만 변경할 것인지, 열린 파일 모두 변경할 것인지, 연결된 전체 파일에서 해당 문자열을 모두 치환할 것인지 선택 해 준다 > `Replace` 여기서 주의할 점은 `Scope` 설정을 잘 해야 한다는 것!`Workspace`로 체크하면 현재 이클립스에 연결된 모든 파일에서 같은 문자를 다 치환해 버린다. `Files opened in edito..

⚠️문제Eclipse 바로가기 버튼 클릭시 Launcher 실행이 되지 않음. 에러 메세지 The Eclipse executable launcher was unable to locate i ts companion shared liabray. 필자는 해당 문제를 두 번 겪었는데, 첫 번째 해결 방법대로 해보았으나 이번에는 해결이 되지 않아서 다른 방법으로 해결해 주었습니다. 저번에는 `eclipse.ini` 파일의 `-vm` 경로 (jvm경로) 가 잘못 지정되어 해당 부분만을 수정해 주니 단순히 해결이 되었습니다. 이 문제가 일어나는 이유는 크게 두 가지 입니다. 1. 단순히 eclipse.ini 에서 경로가 잘못되었음. (필자의 경우 첫번째 에러는 이게 원인) 2. 실행파일 자체가 삭제되거나 손상..

⚠️문제 오랜만에 VSCode를 들어왔더니 Git 확장 탭에 아래와 같은 오류가 발생Too many changes were detected.Only the first 10000 changeds will be shown below. 해석너무 많은 변경이 있습니다.첫번째 10000개의 변화만 아래 보여드립니다.  이건 오류라고 하기도 그렇고 코드를 짜는데 지장은 없지만, 신경 쓰여서 빨리 해결하고 싶은 분들이 계실 거라고 생각합니다. 이걸 잘못 손대면 컴퓨터의 파일이나 폴더 등을 날려 멘붕에 빠지게 됩니다. git clean 함부로 하시면 안돼요. 특히 저같은 경우에는 VSCode에서 해당 경고를 처리하려고 할 때마다 이클립스 경로가 틀어져서 Eclipse Launcher에 접속할 수 없는 문제가 뒤따라 옵..

✅ session 관리✅ logout.jsp✅ main.jsp 만들기 지금까지 회원가입, 로그인 기능까지 구현해보았다.이제 세션 관리를 해 보자. `session` 이란 현재 접속한 회원에게 할당해주는 고유한 아이디이다.로그인에 성공한 회원에게 각각 `session`을 부여해주는 과정을 구현해보자. `loginAction.jsp`에 `session`을 설정해주는 `session.setAttribute()` 코드 한 줄 타이핑!`joinAction.jsp`에도 코드 복붙해서 넣어 준다.로그인 성공한 회원에게 세션 부여하고 메인 페이지로 넘어가게끔 해 준다. 이렇게 세션을 설정해 주었다. 세션은 해제 하기 전까지는 유효하기 때문에 할당한 세션을 해제할 수 있는 로그아웃 페이지도 만들어 주자. `joinAc..

⚡1. Main 영역 원래 티스토리 기존 스킨 현재 커스텀 상황 전체 뷰 Dark 모드  Light 모드 ✅ 오늘의 명언(랜덤명언) 삽입명언은 퍼왔으나 HTML/CSS는 직접 커스텀함✅ Header 이미지 변경변경전기존에는 프로필 사진이 반투명 효과 적용되어 메인 헤더 부분에 띄워짐. 변경후고양이 이미지로 변경 해 주고 border-radius  ✅ 상단에 Navigation Bar 삽입 헤더 커스텀이 끝나고 나니 모바일 화면에서는 Side바에 hidden이라 카테고리명이 안 뜬다.그래서 상단에 네비게이션 바를 달아주기로 했다.   변경 후 - `Home`, `Algorithm`, `Coding`, `ETC.`, `Visitor` 탭 Navigation Bar 달아줌- hover 하면 그림자 생기고, 폰..