IT 썸네일형 리스트형 [java script] Vue.js 애니메이션 효과 적용(transition) 1. transition : 표시/비표시 애니메이션 효과를 나타냅니다. ▷ 나타날(혹은 사라질) HTML 태그를 transition 태그로 감쌉니다. ▷ 어떻게 변화할지를 CSS로 준비합니다. 바로 예제로 알아보도록 하습니다!! ◎ 체크박스를 누르면 애니메이션 효과가 나타나는 예제 체크박스로 표시/비표시 애니메이션 효과를 주는 예제 변경 표시/비표시의 애니메이션~ 애니메이션 효과를 사용할 때 효과를 주고싶은 문구에 으로 감쌉니다. 그리고 어떻게 변화할지 CSS로 준비합니다. 적용 가능한 CSS 스타일 (1) 태그가 나타날 때 ▷ .v-enter : 나타나기 전의 상태 ▷ .v-enter-active : 나타나고 있는 상태 ▷ .v-enter-to : 나타난 상태 (2) 태그가 사라질 때 ▷ .v-leav.. 더보기 [java script] Vue.js markdown 에디터 만들기 1. Markdown 에디터란? ▷ 문장/문서를 가볍게 작성할 수있는 '문장 작성법' 중 하나입니다. ▷ 간단한 기호를 사용해서 표제나 강조 등을 표시하고 이를 HTML로 변경하는 것도 가능합니다. Markdown을 사용할 때, 아래의 코드를 하나 추가해야 합니다. Markdown은 표준이 없다는 단점이 있고 모든 HTML을 대신하지 못합니다. NO 항목 Markdown HTML 1 표제1 # text text 2 표제2 ## text text 3 표제3 ### text text 4 표제4 #### text text 5 표제5 ##### text text 6 번호 없는 리스트 - text text 7 번호 없는 리스트 * text text 8 강조(기울임) *text* text 9 강한 강조(진하게) *.. 더보기 [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 2) ◎ 애니매이션 효과 적용 예제 TweenMax 테스트 이동 위와 같은 코드를 사용하면 애니매이션을 적용할 수 있습니다. 여기서는 따로 Vue를 사용하지 않고 그냥 method로만 결과를 출력했습니다. TweenMax.to( ' id명 ', 이동시간, { 이동축 : "이동 값"}) 과 같은 방법으로 사용하면 애니매이션 효과가 나타납니다. ◎ watch를 이용한 애니매이션 추가 예제 숫자가 빠르게 올라가는 애니메이션을 보여주며 값이 증가하는 input태그 예제 값은 {{ animeNumber }}입니다. 숫자를 입력하면 해당 값만큼 애니메이션 효과를 이용해 값을 증가시킵니다. this.$data는 data에 있는 모든 데이터 값을 다 가져오는 것입니다. 애니메이션 효과는 tweenedNumber를 myNum.. 더보기 [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 1) 1. watch란? 데이터의 수식이나 값이 변할 때 어떤 처리를 하고 싶을 때 사용합니다. 예제를 통해서 바로 알아보겠습니다. ◎ 입력문자를 감지하여 금지문자가 입력되면 alert를 띄우는 예제 입력문자를 감시하여 금지문자가 입력 되면 얼럿을 띄우는 예제 금지문자는、「{{ forbiddenText }}」 '안돼'라는 단어를 입력하면 경고창이 뜨는 예제입니다. 여기서 watch를 통해 입력된 글자가 변하는 것을 감지할 수 있고 substr(0, pos)를 사용해 inputText라는 변수에 금지 글자를 제외하고 남을 수 있도록 만듭니다. 여기서, substr의 특징은 str.substr(시작 인덱스, 추출 개수) : 시작 인덱스를 몇 개 추출할 것인지 입력을 받습니다. 유사한 것으로는 substring입니.. 더보기 [java script] Vue.js 데이터를 사용한 계산 2 (computed) 어제에 이어 computed를 이용한 추가 예제 하나만 더 보겠습니다!! ◎ 적,녹,청색의 슬라이더(range)를 움직이면 완성된 색을 표시하는 예제 적색, 녹색, 청색의 슬라이더를 움직이면 완성된 색을 표시하는 예제 {{ mixColor }} R : G : B : Range와 min, max 값을 이용해서 범위를 지정하고 슬라이더를 움직이면 값이 변경되면서 색이 변합니다. 다른 예제들과 다른 점은 기존의 RGB 값을 이용했다는 것입니다. 추가적으로 슬라이더바 옆에 입력 창을 넣어 직접 수치 입력가능하게 하고 새로운 슬라이더 바를 넣어서 글자색을 조절 가능하게 생성해보겠습니다! ◎ 추가 예제 적색, 녹색, 청색의 슬라이더를 움직이면 완성된 색을 표시하는 예제 {{ mixColor }} R : G : B .. 더보기 [tstory] 티스토리 본문 글자 높이 바꾸기 티스토리의 본문에 줄간 간격이 좁은 현상을 해결하기 위해서는 아래의 코드를 변경하면 됩니다. 1. 홈페이지 관리자 모드로 전환 2. 꾸미기 → 스킨 편집 3. html 편집 4. css부분으로 들어갑니다. 5. 아래의 코드부분 중 line-height를 원하는 사이즈만큼 수정하시면 됩니다. .entry-content p { margin-bottom: 22px; word-break: break-all; font-size: 1em; line-height: 2.0; color: #666; } 그러면 글 사이의 간격이 원하는 만큼 벌어져서 가독성이 좋아집니다!! 만약 다른 부분도 간격이 좁다고 생각하시면 css부분에서 line-height부분을 찾아서 수정하시면 됩니다!!! 다들 어렵지 않게 홈페이지 꾸며보세요.. 더보기 [백준 문제 1546번] 평균 문제 문제 1546) 평균 문제 문제) 세준이는 기말고사를 망쳤다. 세준이는 점수를 조작해서 집에 가져가기로 했다. 일단 세준이는 자기 점수 중에 최댓값을 골랐다. 이 값을 M이라고 한다. 그리고 나서 모든 점수를 점수/M*100으로 고쳤다. 예를 들어, 세준이의 최고점이 70이고, 수학점수가 50이었으면 수학점수는 50/70*100이 되어 71.43점이 된다. 세준이의 성적을 위의 방법대로 새로 계산했을 때, 새로운 평균을 구하는 프로그램을 작성하시오. 입력) 첫째 줄에 시험 본 과목의 개수 N이 주어진다. 이 값은 1000보다 작거나 같다. 둘째 줄에 세준이의 현재 성적이 주어진다. 이 값은 100보다 작거나 같은 음이 아닌 정수이고, 적어도 하나의 값은 0보다 크다. 출력) 첫째 줄에 새로운 평균을 출력.. 더보기 [java script] Vue.js의 구글 차트란? ◎ Vue.js에서 구글 차트 연동 아래의 문구를 작성하면 차트를 연동할 수 있습니다. google 차트는 움직이지 않는 그래프만 표시할 수 있습니다. 여기서 Vue.js를 연동하면 유저가 조작하면 움직이는 그래프를 만들 수 있습니다. ◎ google chart를 사용하는 예제 Google Charts로 원그래프를 그리는 예제 선호하는 점심 메뉴 투표 구글 차트를 연동하면 아래와 같은 차트가 나타나게 됩니다. 차트별로 적용가능한 배열이 있고 값이 맞지 않으면 출력이 되지 않습니다. 위의 자바스크립트 부분이 전부 chart의 코드고 google charts로 들어가면 확인하실 수 있습니다. Google 차트 사용 | Charts | Google Developers Google 차트 사용 | Charts |.. 더보기 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음
