{{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란? - 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 이상을 호환하는 설정하는 태그(권장) - ..

- 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요소로 ..

- overflow 속성 - 지정된 요소를 크기를 벗어났을 때 처리하는 방법 - overflow 속성 값 - visible : 지정된 요소를 벗어나도 출력 - hidden : 지정된 요소를 벗어난 부분은 출력을 하지 않게 처리 - scroll : 지정된 요소에 대한 크기를 벗어나지 않아도 스크롤이 출력 - scroll-y : 세로 축 스크롤 - scroll-x : 가로 축 스크롤 - auto : 지정된 요소를 벗어나면 스크롤이 나오고 넘지 않으면 스크롤이 출력이 되지 않음 - overflow : visible -> width는 200px, height는 50px로 설정이 되어도 visible 속성에 따라 텍스트가 벗어남 - overflow : hidden -> width와 height의 따라서 나머지 부..

- position 속성 - 웹 페이지 상에 어떤 위치에 배치할지 설정하는 요소 - position 속성 값 - static : position의 초기값으로 자동으로 배치 top, right, bottom, left가 설정이 되지 않으며 즉, position에서 생략이 가능 - relative : 부모 요소에 의해서 이동 되는 속성 값 이 속성 부터 top, right, bottom, left를 사용을 할 수 있음 - absolute : 부모 요소에 대한 지장을 받지 않으며 자신의 단독으로 위치를 설정이 가능 - fixed : 어떠한 요소에도 지장을 받지 않으며 사용자가 설정한 위치에 따라서 고정으로 배치 - sticky : 사용자 스크롤 위치에 따라서 설정이 됨 해당 위치 부터 top: 0이 되면 fi..