목록웹 (10)
cyphen156
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/qqQzL/btstffomYx9/ZE0oc4UwynmcfbtfTby9BK/img.jpg)
Watch와 WatchEffect 데이터 변화를 감지하여 콜백함수(함수안의 함수호출)을 가능하게 해주는 기능 사용법 watch('감시 대상 변수', (콜백함수)) watch함수 속성 immediate: DOM객체가 렌더링 되는 즉시 상태 변경을 감지(초기화를 기록함) // defalut는 false deep: 감시 대상이 객체나 리스트 일때 그 안에 있는 내용까지 감시하기 위한 옵션(메모리 값을 감시하는것이기 때문에 객체나 리스트는 값이 변경되도 해당 변수의 위치 기록하고 있기 때문 ) // defalut는 false watchEffect함수 속성 flush: 콜백 함수의 호출 시점을 정할 수 있는 속성, pre(DOM업데이트 전 호출) / post(DOM업데이트 후 호출) 예시(WatchWatchEff..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bKzyRz/btss85Gxgo7/7GfKQys1DVuNS6HSkxqUx0/img.jpg)
Single File Component vue의 컴포넌트를 하나의 파일로 나타내는 것 독립된 하나의 틀을 만들어서 관리하는 것으로 컴포넌트 하나하나가 각각의 독립된 class파일(부품들)이라고 생각하면 편하다. 앞서 장에서 말했듯 컴포넌트 파일은 , VueBind.vue 줄임말과 원래말을 입력하세요. {{ abbr }} ※ 반응형 객체(Proxy Pattern Object) 생성을 위한 ref()함수 원래 변수를 const로 선언하면 상수 변수가 되어 할당된 값의 변경을 허용하지 않는다. 하지만 ref()함수를 통해 데이터에 간접적으로 접근하여 원본 데이터를 중간에서 참조를 통해 변경할 수 있도록 허용한다. 즉, C언어에서의 Pointer와 유사한 기능을 수행한다고 보면 적절하다. vue라이브러리 안에 ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/lLQCM/btssDQRkVlM/NtIrdz0x9bkIsMy7kyPAl1/img.jpg)
Index.html 프로젝트명/public폴더 내부에 존재하는 index.html 파일이다. 일반적으로 웹 애플리케이션이 브라우저에 로드될 때 가장 먼저 만나게 되는 파일이다. Header라고 보면 될 것 같다. 중간에 body를 보면 라는 코드가 존재하는데 이 코드는 나중에 불러올 vue 컴포넌트 들이 어디에 포함되야 하는지 알수 있게 해주는 이정표와 같은 역할을 하기 때문에 특별한 일이 없다면 건드리지 말자. 처음 만들어 졌을때 프로젝트 사용 lang이 비어있기 때문에 en또는 kr을 선택해서 넣어주면 된다. main.js Index.html파일이 로드된 후 두번째로 불러와지는 파일이다. 여기에는 생성될 웹 애플리케이션에 대한 것들을 실제로 불러오는 파일이다. vue라이브러리에서 createApp함수..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/lKieG/btssDJqVoM0/udjSjQM2FzD7f8O2OYXlAk/img.jpg)
Vue는 리액트와 마찬가지로 프론트엔드 라이브러리 겸 프레임워크다. 세세한 문법적인 차이점을 제외하면 거의 같다고 보면 된다. 컴포넌트 기반의 모듈형 방식으로 웹을 구조화 하는것도 비슷하다. 하지만 리액트가 계층형 구조를 갖는 단방향성의 일방적인 상태(State)의 관리를 통해 이벤트를 제어했다면 뷰는 템플릿 기반의 구조에 추가되는 적응형 구조에 가깝고, 상태의 관리가 양방향이다. 뷰의 홈페이지다. Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org) Vue.js - The Progressive JavaScript Framework | Vue.js 접근성 HTML,CSS, 자바스크립트 표준을 기반으로, 쓰기 편한 API와 최고 수준의 문서..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bm2ocX/btrLr3dubtl/SZIWxIDNqKtgYoTsjS0m11/img.jpg)
개인 문제풀이임으로 오답이 있을 수 있습니다. 옳은 것은 파란색, 옳지 않은 것은 빨간색입니다. 다음 괄호 안을 채우시오. h는 heading의 약자입니다. p는 paragraph의 약자입니다. br은 break의 약자입니다. hr은 horizontal rule의 약어입니다. a는 anchor의 약자입니다. href는 hyper reference의 약어입니다. b는 bold의 약자입니다. i는 italic의 약자입니다. sub는 subscript의 약자입니다. sup는 superscript의 약자입니다. ins는 insert의 약자입니다. del은 delete의 약자입니다. ul은 unordered list의 약어입니다. ol은 ordered list의 약어입니다. li는 list item의 약어입니다...
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cCf6Zb/btrKIxGdByF/3yByeHg9xCPOP1lfZnqkEK/img.jpg)
글자 태그 웹 페이지에서 가장 큰 비중을 차지하는 태그 h, p, br, hr, a, b, i, small, sub, sup, ins, del가 있다. 제목 글자 생성 태그 제목(heading) 제목을 뜻하는 태그 h1~h6까지 존재하며, h1이 가장 큰 제목을 생성하고 h6가 가장 작은 제목을 생성한다. ex) h1 태그 제목 HTML 삽입 미리보기할 수 없는 소스 h6 태그 제목 HTML 삽입 미리보기할 수 없는 소스 본문 생성 태그 본문(paragraph) 단락을 뜻하는 태그, 본문 내용을 생성해주는 태그 p 태그를 이용한 본문 내용 생성 HTML 삽입 미리보기할 수 없는 소스 (break) 줄을 바꿔주는 태그, p태그와 같은 글자 내부에 삽입할 수 있다. (horizontal rule) 수평 줄 ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/l4a04/btrJLRSD8vs/b1pBk7yHTfDPXCGg3DxNqk/img.jpg)
개인 문제풀이임으로 오답이 있을 수 있습니다. 옳은 것은 파란색, 옳지 않은 것은 빨간색입니다. 다음 괄호 안을 채우시오 요소 태그 주석 CSS 스크립트 다음 질문에 OX를 표시하시오 X html태그 대부에 반드시 무언가를 포함해야 할 필요는 없다. 하지만 lang속성을 포함시켜 언어정보를 알려주는 편이 좋다. X html 태그 내부에는 텍스트만 입력할 수 있는것이 아니라 이미지 등 여러가지를 입력할 수 있다. O 다음 HTML 요소의 속성 이름과 속성 값, 태그 이름을 모두 적으시오. 태그 이름 : img 속성이름 속성값 title 바다 alt sea scr sea.jpg 다음 중 head 태그 내부에 입력할 수 없는 태그는? ④ header 태그 만약 header태그를 head내부에 입력했을 경우 웹..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/O7HK5/btrJPmqGgLm/P67dIYc7zKROOlK9SeCL20/img.jpg)
HTML5 기본 용어 요소(Element)와 태그(Tag) HTML 페이지를 구성하는 각각의 부품들과 요소를 만들 때 사용하는 작성 방법, 보통 요소와 태그를 혼용해서 사용하며 객체(Object)라고도 한다. 요소의 구분 생성 방법에 따른 구분 요소 구분 형태 예시 내용을 가질 수 있는 요소 내용 Hello HTML5 즐거운 웹 프로그래밍 입문 내용을 가질 수 없는 요소 내용에 따른 구분 내용 구분 예시 텍스트 Hello HTML5 즐거운 웹 프로그래밍 입문 다른 태그 Hello HTML5 즐거운 웹 프로그래밍 입문 내용을 입력하지 않는 경우 속성(attribute) 태그에 추가적인 정보를 부여할 때 사용하는 것 속성 사용 예시 속성 블록 Hello HTML5 속성이름 속성값 내부 문자 주석 프로그램 실..