전체 글

1. window.location.hrefURL을 변경하여 새로운 페이지로 이동할 수 있습니다.특징: 현재 페이지를 새로운 URL로 변경하며, 뒤로 가기 버튼을 사용하면 이전 페이지로 돌아갈 수 있음window.location.href = '이동할 URL';  2. window.location.replace기존 페이지를 새로운 페이지로 대체합니다.특징: 기록을 남가지 않기 떄문에 뒤로 가기 버튼을 사용할 수 없음window.location.replace('대체할 URL');  3. window.location.assignhref와 유사하지만 명확하게 새로운 페이지를 로드하는 기능을 수행합니다.특징: href와 비슷하게 작동window.location.assign('로드할 URL');  4. window...

1. ArrayList 는?ArrayList 는 배열 기반의 동적 리스트로, 크기를 동적으로 조정할 수 있습니다.배열 기반: 내부적으로 동적 배열을 사용하여 요소를 저장빠른 조회: get(index) 연산이 매우 빠름느린 삽입 및 삭제: 중간에 요소를 추가하거나 삭제할 경우, 요소 이동이 발생 시간 소요 2. ArrayList 객체 생성, 데이터추가, 조회, 수정, 삭제, 포함 여부List list = new ArrayList(); // ArrayList 생성 // 요소 추가list.add("Apple");list.add("Banana");list.add("Cherry"); // 요소 조회System.out.println("첫 번째 요소: " + list.get(0)); // A..

1. 사용하기 전에 컬렉션 프레임워크는?데이터를 저장, 수정, 삭제, 검색하는 표준화된 방법을 제공하는 클래스 및 인터페이스의 모음입니다. Java의 java.util 패키지에 포함되어 있으며, 대표적인 인터페이스로 List, Set, Map 등이 있습니다.  2. List 인터페이스 - 순서가 있는 데이터 저장!List 는 요소가 순서대로 저장되며 중복을 허용하는 자료구조입니다.주요 구현 클래스: ArrayList, LinkedList, Vector(1) List 생성List list = new ArrayList(); (2) List 데이터 저장list.add("Apple");list.add("Banana");list.add("Apple"); // 중복 허용 (3) List 데이터 수정list.set(..

1. display grid 기본 사용법 See the Pen grid 기본 사용법 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen grid 기본 사용법 by 김근열 (@raxuybol-the-decoder) on CodePen.  2. 주요 속성grid-gap: row-gap과 column-gap 을 동시에 설정row-gap: 행(Row) 간의 간격을 설정column-gap: 열(Column) 간의 간격을 설정grid-area: 값 순서대로 [시작 행] [시작 열] [끝 행] [끝 열] 값을 나태냄, 즉 코드의 item1 요소는 첫 번째 행의 첫 번째 열부터 시작하여 두 번째 행까지 확장되고, 세 번째 열의 직전까지 차지함 See the P..

1. position sticky 란?sticky는 요소가 기본적으로 relative처럼 동작하다가, 특정 조건을 만족하면 fixed처럼 동작하는 속성입니다. 즉, 지정된 임계점(threshold)에 도달할 때까지는 문서의 흐름을 따르지만, 그 이후에는 고정된 위치를 유지합니다. 예를 들어 아래 코드에서 .element는 상단에서 10px 이상 스크롤되면 고정됩니다..element { position: sticky; top: 10px; /* 뷰포트 상단에서 10px 떨어진 곳에서 고정 */}  2. sticky vs 다른 position 속성 정리static: 기본값으로 문서의 흐름을 따름relative: 기본 배치는 static 과 동일하지만 top, left 등을 이용해 위치 조정 가능ab..

1. 텍스트 색상 및 배경 색상 천천히 변경 transition 활용 See the Pen 텍스트 색상 천천히 변경 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen 텍스트 색상 천천히 변경 by 김근열 (@raxuybol-the-decoder) on CodePen.  2. 텍스트 색상 및 배경 천천히 변경 @keyframes 활용 See the Pen animation 색상 천천히 변경 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen animation 색상 천천히 변경 by 김근열 (@raxuybol-the-decoder) on CodePen.

1. 마우스 커서를 올렸을 때 색상 변경a, label, span 등 다양한 태그에 :hover 가상클래스를 붙이게 되면 마우스를 올렸을 때 CSS가 적용됩니다. See the Pen a, label, span hover 마우스를 올렸을 때 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen a, label, span hover 마우스를 올렸을 때 by 김근열 (@raxuybol-the-decoder) on CodePen.  2. 마우스 커서를 올렸을 때 배경 변경 See the Pen a, label, span hover 마우스를 올렸을 때 - 배경 by 김근열 (@raxuybol-the-decoder) on CodePen.">See th..

1. div display flex를 사용한 중앙 정렬 See the Pen div flex 중앙 정렬 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen div flex 중앙 정렬 by 김근열 (@raxuybol-the-decoder) on CodePen.  2. div display grid를 사용한 중앙 정렬 See the Pen div grid 중앙 정렬 by 김근열 (@raxuybol-the-decoder) on CodePen.">See the Pen div grid 중앙 정렬 by 김근열 (@raxuybol-the-decoder) on CodePen.  3. position을 사용한 중앙 정렬 See the Pen div ..