본문 바로가기

부트캠프교육중301

UI 디자인 패턴 UI 디자인 패턴: 화면에 배치할수있는 자주 쓰이는 컴포넌트 #모달(Modal) -기존에 이용하던 화면 위에 오버레이 되는 창 (새로운 브라우저창을 띄우는것 아니다) -모달을 닫기 전에는 기존 화면과 상호작용할수없다. -닫기버튼, 혹은 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적이다. -팝업은 브라우저에 의해 강제로 막힐수있지만, 모달은 브라우저 설정에 영향을 받지 않아 꼭 보여주고싶은 내용은 모달을 사용하는게 좋다. #토글(Toggle) -on/off시 사용하는 스위치버튼 -시각적효과로 사용자가 토글의 상태를 직관적으로 알수있게 만들어야한다. -on/off처럼 옵션이 두개인경우 말고 여러개의 옵션으로도 가능하다. 단, 옵션의 개수가 너무 많다면 탭을 사용하는것을 고려해라. #탭(tab) -콘텐츠.. 2023. 2. 15.
UI/UX 개념 # UI -user interface, 사용자 인터페이스 -사람들이 컴퓨터와 상호작용하는 시스템 -화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호작용하기 위한 시스템이므로 ui라고 볼수있다. # GUI -graphical user interface, 그래픽 사용자 인터페이스 -사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경 -예시: 운영체제(window, mac os)의 화면, 혹은 애플리케이션 화면 -프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미한다. # UX -User Experience, 사용자 경험 -사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험 - 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접.. 2023. 2. 15.
JSON # JSON - JavaScript Object Notation의 줄임말 -서로 다른 프로그램 사이에서 데이터 교환을 위해 만들어진 객체 형태의 포맷 -객체는 string으로 변환할경우 객체 내용을 포함하지 않는다. 자바스크립트에서 객체를 문자열로 변환하기 위해 message.toString()이나 String(message)를 시도하면 [object Object]라는 결과를 리턴한다. -이문제를 해결하는 방법은 객체를 JSON의 형태로 변환하거나 JSON을 객체의 형태로 변환하는 방법이다. -JSON으로 변환된 객체의 타입은 문자열이다. JSON.stringify : 객체를 JSON으로 변환합니다.(문자열로 변환됨) => 직렬화(serialize) JSON.parse : JSON을 객체로 변환합니다. .. 2023. 2. 15.
기억안난거 다시 공부한것 #getElementById() element = document.getElementById(id); -id를 통해 엘리먼트를 반환한다. -만약 document에 구체적인 id의 엘리먼트가 없다면 null을 반환한다. #setAttribute() -선택한 요소(element)의 속성(attribute)값을 정한다. -element.setAttribute(attributename, attributevalue) -attributename에는 속성이름, attributevalue에는 속성값 # createElement -요소노드생성 #append 1.여러개의 요소를 추가 2. text로 추가가능 3.return 값이 존재하지않는다. (undefined) 4.prepend -그냥 append는 부모요소의 맨 하.. 2023. 2. 14.

티스토리툴바