연산 연습하기 x : y : 덧셈 결과 : {{xNumb+yNumb}} 곱셈 결과 : {{xNumb*yNumb}} 구구단 {{first}}곱하기 {{second}}는? 확인 {{result[0]}} {{result[1]}} * 위 코드는 확인버튼을 누르지 않아도 정답유무 결과를 출력함...
입력폼을 데이터와 연결하기 : v-model ex) - 텍스트 입력받는 input 태그와 Vue의 데이터 연결 이름 : 입력한 이름 : {{myname}} - textarea 태그와 Vue의 데이터 연결 입력한 문장 : 문장 : {{mytext}}, {{mytext.length}}글자 입력됨 - checkbox 태그와 Vue의 데이터 연결 좋아하는 과일 선택 사과 키위 포도 오렌지 바나나 선택한 과일 {{fruits}} 선택된 개수 : {{fruits.length}}개 선택됨 - button 태그와 Vue의 데이터 연결 체크하면 비활성화 시키기 동의합니다. 동의함 동의하지 않음 {{myagree}} 동의함 동의하지 않음 {{myagree}} - radio 태그와 Vue의 데이터 연결 선택한 라디오 버튼을..
요소의 속성을 데이터로 지정하는 : v-bind v-bind:속성명 ex) :속성명 으로 사용 가능하다. - 이미지 지정하기 ex) - 링크 지정하기 ex) - 정렬 위치 지정하기 (우측정렬, 좌측정렬, 중앙정렬) ex) 인라인 스타일 지정 - 인라인 : 태그마다 지정 (태그부분의 전체를 지정하는 것은 태그에 스타일을 지정함) 일반 style 태그 : style="원하는 속성 : 프로퍼티명;" Vue데이터 사용 태그 : v-bind:style="{원하는 속성 : 프로퍼티명}" 으로 사용 ex) 일반 스타일에서 background-color ⇒ Vue 사용시 backgraoundColor #id명 id선택자 .class명 class선택자 : 반응선택자 (a:action, a:hover) * (전체선택) 글..
글자 잘라내기 : substr() 날짜 계산하기 : parseInt(toDay.getFullYear()) 이름 : {{myName}}, 주민번호 : {{myBirth}} {{myName}}님. 반갑습니다. 당신의 생일은 {{myBirth.substr(2,2)}}월 {{myBirth.substr(4,2)}}일. 나이는 {{(parseInt(toDay.getFullYear())) - (parseInt(myBirth.substr(0,2)) + 1900) +1 }}세 이군요.
Vue.js? : 웹 프론트엔드 프레임워크, 컴포넌트 기반의 SPA를 구축할 수 있게 해 주는 프레임 워크 컴포넌트 -> 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹페이지 내의 다양한 UI 요소 -> 재사용 가능하도록 구조화한 것 - Anfular JS, React 라이브러리는 SPA를 만드는 것이 가능(사이트 전체를 제대로 구성하고 만들 때, 환경설정과 상세내용을 만듦) = 가벼운 소규모 어플리케이션을 만드는 것을 목표로 만들어짐 = 데이터와 표시(View)를 연결해 주는 역할 뷰 연결 스크립트 Vue 인스턴스 만들기 : new Vue new Vue({ el : 어떤 HTML 요소를 연결할 것인지, data : 어떤 데이터인지, method : 어떤 기능을 하는지(함수처리), computed :..
CSS 박스 모델 height/ width(크기) width/height : HTML 요소의 너비/높이 설정 -기본값 auto max-width/height : HTML요소가 가질 수 있는 최대 너비/높이 설정 -기본값 none ㄴ줄어드는 웹브라우저의 크기에 맞춰 해당 HTML의 너비도 자동으로 줄어든다. min-width/height : HTML요소가 가질 수 있는 최대 너비/높이 설정 -기본값 0 ㄴ설정된 너비 이하로 줄어들면, HTML은 줄어들지 않고 수평 스크롤바를 생성한다. units(크기 단위) CSS에서 사용하는 크기 단위 : %, em, px, cm, mm, inch 등 1em = 100% box model content(내용) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 pa..
CSS 기본 속성 text color : 텍스트 색상 letter/word-spacing : 문자/단어 사이의 간격 설정 text-indent : 단락의 첫 줄을 들여쓰기 여부 설정 ex) :30px; text-align : 텍스트 정렬 설정 ex) :left/ right/ center; text-decoration : 텍스트에 여러가지 효과 설정 혹은 제거 ex) :overline/ line-through/ underline/ none; line-height : 텍스트의 줄 간격 설정 ex) :1.8; text-shadow : 그림자 효과 설정 ex) : 2px 1px #3399CC; font font-weight : 텍스트를 얼마나 두껍게 표현할지를 설정 font-size : 텍스트 크기 설정 lin..
CSS에 대한 기본내용 CSS(Cascading Style Sheets) : HTML을 보완하기 위해 만들어진 것으로 폰트, 색상, 공백 공간과 그 밖의 문서 표현 측면을 자유롭게 지정할 수 있는 기능을 제공하는 스타일 시트 언어. - HTML로 일일이 세부 스타일을 지정해주는 것에 대한 보안 - 완성 후 스타일 변경 및 유지보수의 간편화 - HTML의 표현 한계 보완 - 문서의 컨텐츠와 스타일을 분리함으로 작업의 효율성 향상 CSS의 문법 h1 { color: #FF0000; background: #00FF00 } h1 : 선택자 { } : 선언부 color, background, … : 속성명 #FF0000, #00FF00 : 속성값 : : 콜론 ; : 선언 구분자 CSS의 문법은 선택자와 선언부로 ..
