Ju

자바스크립트 없이 scroll 이벤트와 같은 효과를 나타내는 scoll-snap css 예제.html scroll-snap-type - 부모 요소에 적용 - 축 설정과 스크롤 넘어가는 스타일 지정 - mandatory = 스크롤을 조금만 내려도 다음 자식요소로 넘어감. - proximity = 스크롤을 조금씩 넘겨도 그대로 유지되지만, 스크롤이 다음 요소에 근접하면 다음 자식요소로 넘어감. - both = 가로 세로 축 모두 /* 부모 요소에 적용 */ .scroll-snap-box { scroll-snap-type: y mandatory; /* [축] [넘어가는방식] */ scroll-snap-type: y proximity; scroll-snap-type: x mandatory; scroll-snap..

메소드, 변수 접근 제어자 같은 클래스 같은 패키지 (다른 클래스) 다른 패키지 다른 패키지 상속 관계 O 다른 패키지 상속관계 X public O O O O O protected O O X O X default (또는 명시 X) O O X X X private O X X X X protected 예제 package1 package package1; class ExamplePackage1 { protected void methodProtected() { System.out.println("methodProtected"); } } package2 - ExamplePackage1을 상속받지 않았기 때문에 사용 불가능 package package2; import package1.ExamplePackage1; ..

기본 생성자 (코드를 입력하지 않아도 자동으로 생성됨) class Person { public Person() {} } 만든 생성자 (매개변수를 명시한 만든 생성자만 있을 경우 기본 생성자를 사용할 수 없음) public class Person { String name; int age; public Person(String name, int age) { this.name = name; this.age = age; } public static void main(String[] ages) { // Person person = new Person(); // 기본 생성자를 따로 명시하지 않았으므로 오류 Person person2 = new Person("이름", 25); // 인스턴스 생성시 인자가 있어야 함 ..

객체 : 객체 지향 프로그램의 대상, 생성된 인스턴스 클래스 : 객체를 프로그래밍 하기위해 코드로 정의해 놓은 상태 (설계도 역할) 인스턴스 : new 키워드를 사용하여 클래스를 메모리에 생성한 상태 (설계도를 실제 사용) - 클래스 기반으로 여러개의 인스턴스 생성이 가능 - new 키워드로 인스턴스를 생성할때 메모리 할당을 함 = 동적 메모리(heep memory) 멤버 변수 : 클래스의 속성, 특성 메서드 : 멤버 변수를 이용하여 클래스의 기능을 구현한 함수 (객체의 기능) 참조 변수 : 메모리에 생성된 인스턴스를 가리키는 변수 참조 값 : 생성된 인스턴스의 메모리 주소 값 Student.java public class Student { // 멤버 변수 int studentID; String stud..

javascript 없이 css로만 커스텀 라디오 버튼 만들기 custom radio html custom radio css (효과 O) [type="radio"]:checked, [type="radio"]:not(:checked) { /* input 태그 숨기기 */ position: absolute; left: -9999px; } [type="radio"]:checked + label, [type="radio"]:not(:checked) + label { position: relative; padding-left: 28px; /* padding은 label 영역 */ cursor: pointer; line-height: 20px; } [type="radio"]:checked + label:before..

javascript 없이 css로만 커스텀 체크박스 custom checkbox html custom checkbox css [type="checkbox"], [type="checkbox"]:not(:checked) { /* input 태그 none 처리 */ display: none; } [type="checkbox"] + label { position: relative; display: inline-block; width: 24px; height: 24px; margin: 0 2px; background-color: #fff; border: 2px solid steelblue; border-radius: 4px; box-sizing: border-box; vertical-align: middle; }..

웹 스토리지 객체(localStorage, sessionStorage) 브라우저에서 쿠키를 사용하는 것보다 직관적으로 key, value 데이터를 안전하게 저장할 수 있음 두 객체의 다른점 localStorage는 브라우저를 다시 실행해도 저장되어 있다 sessionStorage는 브라우저를 다시 실행하면 저장되어 있지 않다 (세션이 유지되는 동안만 데이터 저장) 특징 (참고문서) - 쿠키보다 더 많은 자료 보관 가능 - http 헤더를 통해 스토리지 객체를 조작할 수 없음 (모두 자바스크립트 내에서 수행) - 도메인·프로토콜포트로 정의되는 오리진에 묶여있어서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없음 - Map과 유사. 스토리지는 인덱스를 사용해 키에 접근할 수 있다는 점이 다름 - ke..

1. 체크 html css .check-icon { display: inline-block; width: 20px; height: 34px; border-bottom: 10px solid rgb(65, 100, 255); border-right: 10px solid rgb(65, 100, 255); transform: rotate(45deg); } 결과 2. 삼각형 html css .arrow-icon { display: inline-block; border-top: 20px solid transparent; border-left: 40px solid gray; border-bottom: 20px solid transparent; } 결과 3. 사다리꼴 html css .trapezoid-icon { d..