전체 글 155

[Vue.js] MVVM

Vue - MVVM Model-View-ViewModel 구성요소 Model 모델(Model)은 실제 상태 내용 (객체 지향 접근법)을 나타내는 도메인 모델 또는 내용 (데이터 중심 접근법)을 나타내는 데이터 액세스 계층 을 나타냅니다. View MVC 및 MVP 패턴의 뷰는 사용자가 화면에 무엇을보고의 구성, 레이아웃 및 모양이다. 모델의 표현을 표시하고 뷰 (클릭, 키보드, 제스처 등)와의 사용자 상호 작용을 수신하고, 데이터 바인딩 (속성, 이벤트 콜백, 이벤트 콜백 등을 통해 뷰 모델로 처리를 전달)을 정의 할 수 있습니다. ViewModel 뷰 모델(ViewModel)은 공용 속성과 명령을 보여주는 추상화입니다. MVC 패턴의 컨트롤러 또는 MVP 패턴의 표현 자 대신 MVVM에는 뷰 모델에서 ..

FrontEnd/Vue.js 2019.01.13

CSS Text 오버플로우

CSS Text 오버플로우 Overflow 할경우 대체할 텍스트 정하기 div.a { white-space: nowrap; width: 50px; overflow: hidden; text-overflow: clip; border: 1px solid #000000; } div.b { white-space: nowrap; width: 50px; overflow: hidden; text-overflow: ellipsis; border: 1px solid #000000; } div.c { white-space: nowrap; width: 50px; overflow: hidden; text-overflow: "----"; border: 1px solid #000000; } 한줄 혹은 여러줄을 남기고 자르는 경우 ..

FrontEnd/HTML & CSS 2019.01.13

CSS 7가지 단위

CSS 7가지 단위 rem 기존 em body태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받음 Test Test Test body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px } rem rem('root'em)을 사용하면 세 div의 폰트 사이즈가 같아짐 html { font-size: 14px; } div { font-size: 1.2rem; } vh와 vw CSS의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받음 vh 요소는 높이 값의 1/100 단위 (ex. 브라우저 높이 값이 900px 일때, 1vh는 9px) ex. 전체 높이의 ..

FrontEnd/HTML & CSS 2019.01.13

Tistory에 MarkDown으로 글쓰기

Tistory에 MarkDown으로 글쓰기 showdown CDN 가져오기 Google에 'showdown CDN'을 검색 Version을 1.6.0으로 바꾸고 'showdown.js' 혹은 'showdonw.min.js' 전체 소스를 복사해둡니다. 적용하기 TiStory 블로그관리 페이지로 이동 좌측 메뉴 [꾸미기] → [스킨 편집] 으로 이동 우측 상단의 [html 편집] 클릭! [HTML] 클릭 후, 태그 위에 아래의 코드 추가 [적용] 사용하기 첫 줄에 @markdown 혹은 @마크다운 을 입력 추가기능 _만 입력하고 줄을 넘기면 _는 빈줄로 렌더링

TiStory 2019.01.13

TiStory에서 MarkDown으로 만든 HTML 사용하기

TiStory에서 MarkDown으로 만든 HTML 사용하기 TiStory에서 MarkDown으로 만든 HTML 사용하기 MarkDown - CSS 다운로드 https://github.com/sindresorhus/github-markdown-css 페이지 우측 상단의 [Clone or Download] → [Download ZIP] 을 클릭하여 전체 소스를 다운로드 CSS 수정 다운로드한 'github-markdown-css-gh-pages.zip'파일의 압축을 해제 폴더 내의 'github-markdown.css' 파일을 편집기(ex. Notepadd++, VS Code)로 실행 'github-markdown.css'에 아래의 소스코드 추가 .markdown-body { box-sizing: bord..

TiStory 2019.01.13