분류 전체보기
-
정의 CSS Flexible Box Layout은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS 모듈이다. css 속성 1. flex - 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성 2. flex-direction - 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정 3. flex-shrink - flex-item 요소의 flex-shrink 값을 설정하는 속성, flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용, 설정된 숫자값에..
CSS - flex정의 CSS Flexible Box Layout은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS 모듈이다. css 속성 1. flex - 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성 2. flex-direction - 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정 3. flex-shrink - flex-item 요소의 flex-shrink 값을 설정하는 속성, flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용, 설정된 숫자값에..
2022.03.14 -
정의 media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능이다. 기본 문법 @media (조건) { 스타일 ~~~ } 예시 넓은 화면에서 배경을 red로 @media (min-width: 800px) { .wide-bg-red { /* 화면이 800px 이상이면 배경색이 red로 */ background-color: red; } } 적용 이미지
CSS - media query정의 media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능이다. 기본 문법 @media (조건) { 스타일 ~~~ } 예시 넓은 화면에서 배경을 red로 @media (min-width: 800px) { .wide-bg-red { /* 화면이 800px 이상이면 배경색이 red로 */ background-color: red; } } 적용 이미지
2022.03.14 -
UI란 사람(사용자)과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다. UI의 소통 수단 - 입력: 사용자가 시스템을 조작할 수 있게 한다. - 출력: 시스템이 사용자가 이용한 것에 대한 결과를 표시한다. - 삭제: 시스템이 사용자가 잘못한것을 삭제한다. UI 종류 - 그래픽 사용자 인터페이스(GUI): 체계의 요소에 해당하는 그래픽과 텍스트로 이루어져 있다. 여기에는 적어도 두 개의 서로 다른 정책, 곧 객체지향 인터페이스와 응용 프로그램 지향 인터페이스가 공존하고 있다. - 웹 기반 인터페이스(웹 사용자 인터페이스, WUI): 인터넷과 웹 브라우저를 통해 웹 페이지를 열람하고 조작하는..
UI - UI 용어들UI란 사람(사용자)과 사물 또는 시스템, 특히 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다. UI의 소통 수단 - 입력: 사용자가 시스템을 조작할 수 있게 한다. - 출력: 시스템이 사용자가 이용한 것에 대한 결과를 표시한다. - 삭제: 시스템이 사용자가 잘못한것을 삭제한다. UI 종류 - 그래픽 사용자 인터페이스(GUI): 체계의 요소에 해당하는 그래픽과 텍스트로 이루어져 있다. 여기에는 적어도 두 개의 서로 다른 정책, 곧 객체지향 인터페이스와 응용 프로그램 지향 인터페이스가 공존하고 있다. - 웹 기반 인터페이스(웹 사용자 인터페이스, WUI): 인터넷과 웹 브라우저를 통해 웹 페이지를 열람하고 조작하는..
2022.03.11 -
화면설계는 스토리보드 UI, Wire-Frame등 다양하게 불린다. 정의 - 사용자들을 위해 개발되는 응용 소프트웨어 엔지니어링의 한 요소 - 컴퓨터 프로그램과 사람과의 상호작용과 정보교환을 위한 사용자 인터페이스(User Inteface)를 사용자가 사용하기 쉽도록 사용자 경험(User Experience) 에 기반하여 설계하는 것이 좋은 설계방법 설계 원칙 직관성(Intuitiveness) - 화면의 버튼, 항목, 입력란 등이 직관적으로 기능이나 의미가 파악되어야함. 일관성(Consistency) - 여러 화면의 인터페이스에서 각 항목 배치는 일관성이 있어야 함. 효율성(Effectiveness) - 인터페이스 사용이 쉬어야하며 쉽게 익숙해질 수 있어야 함. 설계 순서 UI 업무사항 분석 -> UI ..
UI - 화면설계란화면설계는 스토리보드 UI, Wire-Frame등 다양하게 불린다. 정의 - 사용자들을 위해 개발되는 응용 소프트웨어 엔지니어링의 한 요소 - 컴퓨터 프로그램과 사람과의 상호작용과 정보교환을 위한 사용자 인터페이스(User Inteface)를 사용자가 사용하기 쉽도록 사용자 경험(User Experience) 에 기반하여 설계하는 것이 좋은 설계방법 설계 원칙 직관성(Intuitiveness) - 화면의 버튼, 항목, 입력란 등이 직관적으로 기능이나 의미가 파악되어야함. 일관성(Consistency) - 여러 화면의 인터페이스에서 각 항목 배치는 일관성이 있어야 함. 효율성(Effectiveness) - 인터페이스 사용이 쉬어야하며 쉽게 익숙해질 수 있어야 함. 설계 순서 UI 업무사항 분석 -> UI ..
2022.03.11 -
정의 position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. 값 static - 요소를 일반적인 문서 흐름에 따라 배치합니다. top (en-US), right (en-US), bottom (en-US), left (en-US), z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다. relative - 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다. - z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. table-*-group, tabl..
CSS - POSITION정의 position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. 값 static - 요소를 일반적인 문서 흐름에 따라 배치합니다. top (en-US), right (en-US), bottom (en-US), left (en-US), z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다. relative - 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다. - z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. table-*-group, tabl..
2022.03.11 -
비밀번호 input 설정 input type을 password로 지정 해준다. 전 후 전체 html 로그인 뒤로가기
HTML - 비밀번호 input 설정(가리기)비밀번호 input 설정 input type을 password로 지정 해준다. 전 후 전체 html 로그인 뒤로가기
2022.03.10 -
정의 DBMS가 Client로부터 요청받은 query를 수행할 때 일정 시간 이상 수행되지 못한 query - slow query 발생 시 로그를 통해 원인을 파악할 수 있다. slow query 잡는 법 어느정도 느려지면, 쿼리 실행문을 로그에 남길건지 postgresql.conf에 설정값을 추가해줘야한다. 1. 발생 로그 남기기 2. 모든 쿼리 실행계획 로그 남기기 3. 쿼리 실행 통계 보기 로그 쌓는 법 슬로우쿼리는 my.cnf 파일 내에서 설정. my.cnf의 경로는 주로 /etc/my.cnf를 사용합니다. 편집기를 통해 다음의 내용을 입력한다. my.cnf로 수정할 경우 mysql 서비스 재시작이 필요함. 항목 my.cnf 추가 내용 해당 값(초) 이상의 로그 기록 long_query_time ..
db - slow query정의 DBMS가 Client로부터 요청받은 query를 수행할 때 일정 시간 이상 수행되지 못한 query - slow query 발생 시 로그를 통해 원인을 파악할 수 있다. slow query 잡는 법 어느정도 느려지면, 쿼리 실행문을 로그에 남길건지 postgresql.conf에 설정값을 추가해줘야한다. 1. 발생 로그 남기기 2. 모든 쿼리 실행계획 로그 남기기 3. 쿼리 실행 통계 보기 로그 쌓는 법 슬로우쿼리는 my.cnf 파일 내에서 설정. my.cnf의 경로는 주로 /etc/my.cnf를 사용합니다. 편집기를 통해 다음의 내용을 입력한다. my.cnf로 수정할 경우 mysql 서비스 재시작이 필요함. 항목 my.cnf 추가 내용 해당 값(초) 이상의 로그 기록 long_query_time ..
2022.03.10 -
B- Tree 전산학에서 B-트리는 데이터베이스와 파일 시스템에서 널리 사용되는 트리 자료구조의 일종이다. - 자료를 정렬된 상태로 보관하고, 삽입 및 삭제를 대수 시간으로 할 수 있다. - 이진 트리는 항목이 삽입될 때 하향식으로 구성되는 데 반해, B-트리는 일반적으로 상향식으로 구성 B+ Tree (Quaternary Tree) 컴퓨터 과학용어로, 키에 의해서 각각 식별되는 레코드의 효율적인 삽입, 검색과 삭제를 통해 정렬된 데이터를 표현하기 위한 트리자료구조의 일종 - B트리와 대조적으로 B+트리는, 모든 레코드들이 트리의 가장 하위 레벨에 정렬되어있다. 오직 키들만이 내부 블록에 저장된다. - 동적이며, 각각의 인덱스 세그먼트(블록 또는 노드라고 불리는) 내에 최대와 최소범위의 키의 개수를 가지..
db - B Tree, B+ Tree, B- TreeB- Tree 전산학에서 B-트리는 데이터베이스와 파일 시스템에서 널리 사용되는 트리 자료구조의 일종이다. - 자료를 정렬된 상태로 보관하고, 삽입 및 삭제를 대수 시간으로 할 수 있다. - 이진 트리는 항목이 삽입될 때 하향식으로 구성되는 데 반해, B-트리는 일반적으로 상향식으로 구성 B+ Tree (Quaternary Tree) 컴퓨터 과학용어로, 키에 의해서 각각 식별되는 레코드의 효율적인 삽입, 검색과 삭제를 통해 정렬된 데이터를 표현하기 위한 트리자료구조의 일종 - B트리와 대조적으로 B+트리는, 모든 레코드들이 트리의 가장 하위 레벨에 정렬되어있다. 오직 키들만이 내부 블록에 저장된다. - 동적이며, 각각의 인덱스 세그먼트(블록 또는 노드라고 불리는) 내에 최대와 최소범위의 키의 개수를 가지..
2022.03.10