solsol

*플렉스 박스 레이아웃 1차원 방식으로 효과적인 레이아웃을 설계할 수 있도록 고안된 스타일 속성 가로(row)나 세로(column)중 한 방향으로만 레이아웃을 설계하는 방식 플렉서블은 ‘신축성 있는’, ‘유연한’이라는 뜻이므로 다양한 상황에서 유연하게 레이아웃을 구성할 수 있도록 제공한다는 의미 display 속성 display:flex; /* inline-flex */ 적용된 요소의 다음 요소가 항상 줄 바꿈되고, inline-flex는 다음 요소가 주변에 배치 display 속성이 지정된 요소는 플렉스 컨테이너, 자식 요소는 플렉스 아이템 flex-direction 속성 플렉스 박스 레이아웃의 주축 방향을 결정 flex-wrap 속성 플렉스 아이템이 컨테이너 영역을 벗어날 때 어떻게 처리 할지 결정 ..

*전환 요소에 적용된 스타일의 속성값이 다른 속성값으로 변하게 하는 것 트랜지션과 속성 -transition 속성으로 한 번에 지정하기 애니메이션 속성으로 전환 효과 제어하기 전환 효과 속성보다 더 정확하고 부드럽게 전환 효과를 제어 키 프레임 정의하기 애니메이션은 정지된 이미지를 연속적으로 보여줘서 움직이는 것처럼 보이게 한다. animation-name 속성 animation-name 속성은 특정 요소에서 적용할 키 프레임명을 지정 animation-duration 속성 애니메이션 지속 시간을 설정 animation-delay 속성 애니메이션 실행을 지연 animation-iterator-count 속성 애니메이션은 기본으로 1회 실행되고 종료 상황에 따라 애니메이션을 반복해서 보여 줘야 하는 경우 ..

*필수속성 단위 -절대단위 : px 한가지 -상대단위 vw, vh vw 단위는 뷰포트 너비를 기준으로 상대적인 크기를 진다. 1vw는 뷰포트 너비의 1/100 크기를 의미하며 뷰포트의 기본 너비는 900px를 의미 1vh는 뷰포트 높이의 1/100 크기를 의미하며 뷰포트의 기본 높이는 400px를 의미 색상 표기법 키워드 표기법 키워드 표기법은 색상의 영문명을 속성값으로 사용하는 방법 사용하기 쉽지만 의외로 실무에서는 자주 사용 되지 않는다. (150여개의 색상이름 제공) RGB 색상 표기법 RGB는 Red, Green, Blue를 의미 알파값은 투명도 HEX 표기법 Red, Green, Blue에 해당하는 값을 각각의 16진수로 표현 하는 방법 예) h1 { color: #f00 } h2 { color..

*CSS의 기본 CSS는 HTML과 함께 웹 표준의 기본 개념 HTML이 텍스트, 이미지, 표 같은 요소를 웹 문서에 넣어 뼈대를 만드는 역할을 한다면 CSS는 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당 CSS 문법 형식 선택자와 선언부로 구분 선택자는 CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역 선언부는 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역으로, 중괄호{} 넣는다. 전체 선택자 전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로 * 기호를 사용 태그 선택자 HTML 태그명으로 선택자를 지정하는 방법 태그 선택자는 선택자에 지정된 태그명과 일치하는 모든 요소를 한번에 선택 클래스 선택자 태그(타입..

*form 태그 폼(form)은 HTML에서 사용자와 상호작용해서 정보를 입력 받고 서버로 전송하기위한 양식을 의미 action과 method 속성을 함께 사용 action 속성 폼 요소에서 사용자와 상호작용으로 입력 받은 값들을 전송할 서버의 URL 주소를 적는다. method 속성 입력 받은 값을 서버에 전송 할 때 송신 방식을 적는다. 속성값으로 get 또는 post를 사용 GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식 데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용 POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식 데이터가 외부에 드러나지..

*HTML -HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소 -웹 콘텐츠의 의미와 구조를 정의할 때 사용 - HTML은 보통 시작 태그와 종료 태그로 구성 - 등과 같이 종료 태그 없이 시작 태그만 가지는 빈 태그도 존재하는데 리액트를 사용하는 경우 형태로 닫힘 태그로 표시 -태그는 소문자 권장 -시작 태그로 시작하면 종료 태그로 종료 -확장자는 html -문자의 공백은 몇개를 입력 하던 한개만 인식하므로 공백을 추가하기 위해서는 특수기호 이용 기본 구성 실제적으로 보여지는 부분 글자와 상자 -글자는 inline 특성 -상자는 block 특성을 가짐 -이미지를 제외하고는 대부분 글자와 상자로 구성되어 있음 -각 요소에 대한 화면에 출력되는 특성은 CSS에서..

*comparable인터페이스 -TreeSet과 TreeMap의 키는 저장과 동시에 자동으로 오름차순으로 정렬된다. -Comparable인터페이스는 객체를 정렬하는 데 사용되는 메소드인 compareTo()메소드를 정의 -자바에서 같은 타입의 인스턴스를 서로 비교해야만 하는 클래스들은 모두 Comparable 인터페이스를 구현 -Boolean을 제외한 래퍼 클래스나 String, Time, Date와 같은 클래스의 인스턴스는 모두 정렬 가능 -기본 정렬 순서는 작은 값에서 큰 값으로 정렬되는 오름차순 예제 *Comparator인터페이스 -Comparator 인터페이스는 Comparable 인터페이스와 같이 객체를 정렬하는 데 사용되는 인터페이스 -Comparable 인터페이스를 구현한 클래스는 기본적으로..

*Set 컬렉션 클래스 -요소의 순서를 유지 하지 않음 -요소의 중복 허용하지 않음 (hashCode() 리턴값을 사용하여 객체가 동일한지 판단) -수학의 집합과 유사한 개념 관련 메소드 add - 값 추가하기 addAll - 값 여러 개 추가하기 remove - 특정 값 제거하기( 기타 TreeSet - 오름차순으로 값을 정렬하여 저장하는 특징 LinkedHashSet - 입력한 순서대로 값을 정렬하여 저장하는 특징 HashSet 예제

*Hash -데이터에 대한 검색과 저장에서 아주 우수한 성능을 보인다. -Hash로 값을 생성하면 고유 주소 값이 생기는데 이것을 숫자로 변환한 것을 해시코드라고 한다. -자바에서 해시코드는 Heap 영역에 인스턴스에 대한 참조 값 Hash 함수란? 데이터의 효율적인 관리를 위해 임의의 길이를 가진 데이터를 고정된 길이를 가진 테이터로 매핑해주는 함수 Map 컬렉션 -Map은 리스트나 배열처럼 순차적으로(sequential) 해당 요소 값을 구하지 않고 key를 통해 value를 얻는다. -key로 value를 얻어냄 -순서가 보장 되지 않음-키와 값으로 구성되어 있으며 키는 중복 허용하지 않고 값은 중복 가능 -HashMap, HashTable, Properties -키의 동일 조건은 hashCode(..

*List 컬렉션 클래스 -리스트와 배열의 가장 큰 차이점은 크기가 정해져 있지 않고 동적으로 변한다는 점 -데이터를 크기를 알 수 없을 때 유용하게 사용 -요소의 저장 순서가 유지 -같은 요소의 중복 저장을 허용 -데이터 크기가 고정X(동적 할당) -데이터를 다루기 위한 여러 방법이 제공 List 컬렉션 클래스의 종류 -ArrayList -LinkedList -Vector -Stack add : 해당 컬렉션에 요소를 추가 하거나 해당 인덱스 위치에 값을 삽입 pitches.add(0, "130"); get : 특정 위치의 값을 가져 올 때 System.out.println(pitches.get(1)); size : ArrayList의 갯수를 리턴 System.out.println(pitches.size..