Happy coding

이번 시간은 Ionic으로 앱을 만들 때 발생하는 에러를 살펴보자. 어느정도 나이가 있으신 어르신 들은 보통 핸드폰에 글자 크기를 높여서 사용하신다. (물론 우리 부모님도 확대해서 쓰신다) 앱을 만드는 사람들은 기존의 글자 크기 보통에 맞춰 작업을 한다. 그러다 보면 일부 확대해서 사용하시는 사용자들에게 레이아웃이 깨지는 현상을 볼 수 있다. 이것을 해결하려면 setTextZoom(textZoom) => 글자 줌 설정 (int) usePreferredTextZoom(value) => 시스템 글자 여부 설정 (true or false) 이 두가지를 이용해서 해결을 해야하는데 아이오닉에서는 찾아보면 아시겠지만 적용하기가 힘들다 그래서 지금부터는 아이오닉에서 이것을 해결하는 방법을 알아보자 Ionic 3 ht..

1. 터미널 설치 (shell)1 2 3 sudo add-apt-repository ppa:gnome-terminator sudo apt-get update sudo apt-get install terminator 현재 터미널은 기본값으로 설정 되어야 하기 때문에 터미널을 재시작 (단축키: “Ctrl+Alt+T”). 2. ZSH 설치1 sudo apt-get install zsh 설치 후 터미널 재시작 (단축키: “Ctrl+Alt+T”) 3. Oh My ZSH 설치1 2 cd sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" 4. Powerline 폰트 설치 4-1. Powerline 폰트 ..

웹 접근성 - 한국형 웹 콘텐츠 접근성 지침 1. 인식의 용이성대체 텍스트텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.적절한 대체 텍스트 제공멀티미디어 대체 수단멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다.자막 제공명료성콘텐츠는 색에 관계없이 인식될 수 있어야 한다.색에 무관한 콘텐츠 인식지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.명확한 지시 사항 제공텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.텍스트 콘텐츠의 명도 대비자동으로 소리가 재생되지 않아야 한다.자동 재생 금지이웃한 콘텐츠는 구별될 수 있어야 한다.콘텐츠 간의 구분 2. 운용의 용이성입력장치 접근성모든 기능은 키보드..

웹페이지 효율적인 작업방법 1. 모바일에서 사용할 목적을 명확히 하여 필요한 내용 위주로 반응형 웹을 효율적으로 사용한다.사용자가 어떤 목적을 갖고 웹사이트를 방문하는지에 대해 생각해보고 모바일에서 필요한 내용 위주로 보여주기방문자들의 생각이나 의견을 변화시키는 것이 중요! 2. 데스크탑 -> 태블릿 -> 모바일작업이 아닌 모바일 -> 태블릿 -> 데스크탑 작업모바일 디자인은 최대한 단순하며 초점이 있게 디자인을 해야한다.작업을 간소화하는 장점이 있음로딩하는 데 시간이 걸리는 모든 것들(소스, 이미지, 동영상 등)을 과감히 버려야한다.McKnight Kurland사의 Frank Kurland에 따르면, 모바일 사용 인구가 세계 인구의 87%에 달함 3. 소스코드(CSS, Javascript)를 모두 압축..

Flexboxflex의 유연성을 뜻하며 요소들을 자유자제로 위치시키는 뜻입니다.새롭게 CSS3 명세에 반영된 레이아웃 모듈이며, 요소들이 수용된 공간을 어떻게 효과적으로 채워나갈지에 대해 고민하다가 만들어진 새로운 레이아웃 방식 Flex Container - 부모 display그릇에 해당하는 부모 요소 (display: flex 혹은 display: inline-flex로 선언).flex-container { display: flex } flex-direction컨테이너 안에 위치하는 자식 요소에 어떤 방향성을 줄 것인지 결정.flex-container { display: flex; flex-direction: row; }row : 기본 값. 아이템이 수평방향(행)으로 흐르며, 방향성은 좌에서 우row-..

HTML 태그 정리 Documnet Wrapper(문서 바깥)(X)HTML 버전을 나타냄HTML 문서페이지 정보페이지 컨텐츠 Comment (주석) HTML안에 주석을 나타냄 Page Information (페이지 정보)태그정의사용기본 URL- 문서에 포함된 모든 상대 URL들의 기준 URL을 나타냄META 정보- META 관련 요소들로 나타내어질 수 없는 메타데이터를 나타냄페이지 제목- 브라우저의 타이틀 바나 페이지의 탭에 보여지는 문서의 제목을 정의함관련 자원- 현재 문서와 외부 리소스와의 관계를 명시스타일 자원- HTML의 일부에 대한 스타일 정보를 포함스크립트 자원- (x)HTML 문서내에 실행 가능한 스크립트를 포함하거나 참조 Document Structure (문서 구조)태그정의사용Displa..

HTML 태그 정리 Text Markup (텍스트 마크업)태그정의사용Display해당 내용의 중요함을 나타냄- strong을 중첩하면 중첩할 수록 중요하다고 할 수 있음 - 브라우저에서 자동 font-weight가 bold처리 됨Inline-Block텍스트를 굵게 장식하는 스타일 요소- 키워드를 부각하기 위해 사용 - 의미가 크게 없으므로 강조를 하기위한 목적으면 em, 중요성을 목적으로 하면 strong, 텍스트를 부각하려면 mark를 사용Inline-Block하나의 문서 내에 다른 문맥과의 관련성을 나타내기위해 마킹되거나 하이라이트 텍스트 표현- 검색어와 매칭되는 부분을 하이라이팅 하기 위해 사용 - 특정 부분의 주의를 끌기 위해 사용 - 브라우저에서 자동 Background 효과가 처리 됨Inlin..

HTML 태그 정리 List Markup (리스트 마크업)태그정의사용Display순서가 있는 목록을 나타냄- 보통 요소를 포함하고 있고 의 value 속성 값을 통해 목록 아이템의 순번을 지정 - reversed, start, type의 속성들이 있음 - 브라우저에서 자동으로 아라비아 숫자로 표현Inline-Block순서가 중요하지 않은 목록을 나타냄- 보통 요소를 포함하고 있음 - 브라우저에서 자동으로 블릿으로 표현Block목록을 나타냄- 부모가 이면 순서가 있는 값을 가지고, 부모가 이면 순서가 없는 값을 가짐lnline-Block용어, 설명 그룹에서 설명, 정의, 값을 나타냄- 용어를 정의 하는 요소와 용어를 설명하는 요소를 포함Block요소의 용어, 설명 그룹에서 용어나 이름을 나타냄- 의 하부 ..