{{message}} 1. 템플릿 표현식(콧수염 표현식 : Mustache Expression) - HTML DOM에 데이터를 렌더링 - 콧수염 표현식이라 부르며 또는 보간법이라고 불림 2. v-bind 디렉티브 - innerText 속성에 연결 - HTML을 인코딩하여 화면에는 태그 문자열이 그대로 출력 3. v-html 디렉티브 - innerText가 아닌 innerHTML 속성에 연결 - HTML을 파싱하여 화면에 출력 * v-html 단점 : XSS(Cross Site Scripting) 공격 등에 취약함 XSS 공격 : input 등을 이용하여 스크립트 코드를 그대로 바인딩하여 실행하는 공격

Vue.js 공식 사이트 : https://kr.vuejs.org/v2/guide/index.html 시작하기 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org - CDN 스크립트 해당 스크립트는 상용 버전이며, 속도와 용량이 최적화됨 - MVVM 패턴 예제 {{message}} - model 변수 : MVVM 패턴 중에서 Model 객체의 역할 전달할 데이터를 객체의 형태로 저장하고 있음 - simple 변수 : MVVM 패턴 중에서 View Model 객체의 역할 Vue 객체의 el 속성은 HTML 요소를 나타냄 data속성은 Model 객체를 참조 - HTML 요소 : 템플릿 표현식 == {{}} 템플릿 표현식을 이용해 HTML DOM에 데이터를 렌더링

Vue.js란? - Vue.js는 Google Creative Lab에서 일하던 Evan You가 UI를 빠르게 개발하기 위해서 개발 - JavaScript 프레임워크 - 다른 프레임워크 보다 유연하고 가벼움 - SPA(Single Page Application) 아키텍처 수정을 위해 필수적으로 필요한 Router 기능도 에코 시스템을 통해 효과적으로 지원 * SPA(Single Page Application)란 - 전체를 렌더링하는 방식이 아닌, 필요한 부분만 서버 API 호출을 하에 데이터를 불러주는 앱 - Vue.js는 MVVM패턴을 따르고 있음 - MVVM패턴 = Model - View - View Model - Model : 데이터를 가지고 있음 - View : HTML과 CSS로 작성 - Vi..

- Meta태그란 - 문서의 정보를 설명하는 HTML head 태그 사이에 위치하는 태그 - 언어셋 설정, 렌더링, 뷰포트, SEO 최적화 등을 설정할 수 있는 태그 - Meta 태그 기본 구조 - - Meta 태그의 속성 - http-equiv : 웹 브라우저가 서버에 명령을 내리는 속성이며 name을 대신해서 사용이 가능 웹 서버에 전송 시에 의미를 가짐 - content : meta 정보의 내용을 가짐 - name : meta 정보의 이름을 지정을 할 수 있으며, 설정하지 않을 시에 http-equiv와 같은 기능 - 주로 쓰이는 Meta 속성 - -> 문자 인코딩을 설정하는 태그 - -> 웹 브라우저의 호환성을 설정하는 태그 - IE=edge : IE 8 이상을 호환하는 설정하는 태그(권장) - ..

- URL(Uniform Resource Locator) - 프로토콜(PROTOCOL) : 웹 프로토콜(규약), 데이터를 교환하거나 전송하기 위한 방법 ex) http, https - 도메인(DOMAIN) : 서버 주소 및 서버 IP로 표현 가능 - 경로(PATH) : 웹 서버 자원 접근 폴더 경로, 파일도 가능 - 쿼리스트링(QUERY STRING) : 웹 서버에서 추가로 제공하는 파라미터, 시작은 ? 기호이며 & 으로 키와 값으로 이룬 리스트 - 프래그먼트(FRAGMENT) : id값으로 사용이 가능하며 해당 내용은 웹 서버에서 전달이 되지 않음, 북마크처럼 사용이 가능 - GET 방식 - 입력한 URL에 경로 및 쿼리스트링 노출이 되며, 해당 내용이 노출이 상관이 없을 때 사용 - 헤더에 내용이 포..

- float(띄우다) 속성 - 객체를 어느 위치에 띄울지 설정하는 속성 - clear(해제하다) 속성 - float 속성 값을 해제하는 속성 - float 속성 값 - none : float를 설정을 하지 않음 - left: 왼쪽에 배치 - right : 오른쪽에 배치 - clear 속성 값 - none : 속성을 해제하지 않음 - left: float에 left 속성을 해제 - right : float에 right 속성을 해제 - both : float에 right 또는 left를 해제 - flaot : none -> float 속성이 되지 않음 - float : left -> 왼쪽으로 배치 - float : right -> 오른쪽으로 배치 - clear test 텍스트 부분은 현재 float요소로 ..