인터페이스 (Interface)  - 구현된 것이 아무 것도 없는, 밑그림만 있는 기본 설계도  - 기능 중심 설계      : 클래스/프로그램이 제공하는 기능을 명시적으로 선언함  - 표준      : 기능을 정의해두면, 어떤 클래스든 가져와서 사용할 수 있음  - 클라이언트 코드와의 약속 (강제성이 있는 약속)  - 클래스/프로그램이 제공하는 명세  - 구현하는 클래스가 어떤 메서드를 반드시 구현해야 하는지를 지시함      → 모든 클래스는 인터페이스의 모든 메서드를 구현해야 함  - 추상 클래스보다 추상화 정도가 더 높음 → 더 유연하게 코드 설계 가능#  인터페이스 정의  - 인터페이스는 멤버 변수를 가질 수 없고, 상수만을 가질 수 있음  - 인터페이스는 일반 메서드를 가질 수 없고, 추상 메..

#  관련 포스팅   - 문자열 자료형 : https://young0105.tistory.com/44 #  문자열1.equals(문자열2)  - 문자열1과 문자열2의 내용이 같으면 true 반환  - "문자열".equals(변수) ← null 에러 방지#  문자열1.equalsIgnoreCase(문자열2)  - 문자열의 대소문자를 구분하지 않고, 문자열1과 문자열2의 내용이 같으면 true 반환 #  문자열.indexOf("문자")  - 문자열에서 해당 문자가 첫 번째로 등장하는 위치의 인덱스 반환  ex) 문자열 = "abc" → 문자열.indexOf("b") == 1#  문자열.lastIndexOf("문자")  - 문자열에서 해당 문자가 마지막으로 등장하는 위치의 인덱스 반환#  문자열.charAt(..

Flexbox (플렉스 박스)  - 웹 페이지의 레이아웃을 조정/배치하는 데 사용되는 CSS 속성  - 요소를 수평/수직으로 정렬하고 공간을 분배함 # 자식 요소의 배치/정렬은 항상 부모 요소를 기준으로 생각해야 함 구성요소   1) 플렉스 컨테이너 (Flex container)      - Flexbox를 사용하여 요소를 배치하는 부모 요소      - height를 지정해주지 않으면, 컨테이너 내 자식 요소의 높이만큼으로 자동 지정됨      - 플렉스 컨테이너는 바로 아래 자식 요소까지만 영향을 미침  2) 플렉스 아이템 (Flex items)      - 플렉스 컨테이너 내에서 배치되는 자식 요소  3) 주축 (Main axis) & 교차축 (Cross axis)      - 플렉스 컨테이너 내에..

미디어 쿼리 (Media Query)  - 웹 페이지를 출력하는 디바이스의 종류/크기에 따라 CSS 스타일을 변경할 수 있는 기능  - 디바이스의 특성에 맞게 화면을 보여주기 위해 사용함  - 브라우저 크기에 맞게 자동으로 스타일을 조정함 → 사용자 경험 개선에 큰 도움 @media [only | not] 미디어유형 [and 조건1] [and 조건2] ... { 스타일속성 : 속성값 ;}  - and      : 조건을 계속 추가할 수 있음  - 콤마(,)      : 동일한 스타일을 사용할 미디어 유형/조건이 있다면 콤마로 추가할 수 있음  - only      : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 함  - not 미디어 유형      : 해당 미디어를 제외하고 적용함  e..

가변 그리드 레이아웃  - 화면 크기에 따라 요소의 크기가 자동으로 변하도록 함      · 전체를 감싸는 요소의 너비를 %로 변환      · 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비 계산          → width : ( 요소의 너비 / 전체 요소 너비 ) * 100 가변 이미지#  부모 요소만큼만 크기가 변하도록 하기선택자 { max-width : 100% }#  너비에 따라 다른 이미지 출력하기    - 최소 너비 미만이 되면 다른 이미지로 전환됨  ...  가변 비디오/* 최대 너비는 원본과 같게, 브라우저 창을 작게 하면 고정 비율로 줄어듦 */비디오선택자 { max-width : 100% ; }/* 너비를 화면에 꽉 차게 */비디오선택자 { min-w..