비전공 썸네일형 리스트형 [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 데이터 변화(computed, watch)를 이용한 마무리 예 ◎ 이번에 배운 computed, watch를 이용한 예제 조건) ▷ 입력 금지 문자열을 ,(콤마) 기준으로 입력할 수 있다. ▷ 제한 시간을 넣고 시작 버튼을 누르면 텍스트를 넣을 수 있다. ▷ 제한 시간이 실시간으로 표시된다. ▷ 입력 중 금지 문자열이 나올 경우 경고를 띄우고 확인 버튼을 누르면 해당 문자열은 삭제되며 시간이 +10초 추가된다. ▷ 제한 시간이 완료되면 텍스트 입력창은 비활성화되고 입력 창 아래 입력한 문자의 개수가 표시되며 금지어를 사용한 횟수 * 12 한 벌점을 출력한다. 결과 화면) 제한 시간내에 문자 입력하기 금지문자 (,로 나누어 복수입력가능) 제한시간을 입력하세요 (초) 시작 남은 시간 {{ restTime }}초 {{ inputText.length }} 개의 문자를 입력.. 더보기 [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 데이터를 사용한 계산(computed) 1. computed : 데이터의 값을 계산하여 쓸 때 사용하는 산출 프로퍼티 예시로 바로 확인해 보겠습니다. 금액을 입력하면 소비세가 포함된 금액을 계산하는 예제 원 소비세 포함 금액 {{ taxIncluded }} 원 taxIncluded라는 프로퍼티에 계산하는 function을 넣어 반환하는 예시입니다. 아래와 같은 출력 값을 확인할 수 있습니다. ◎ 단가와 개수를 입력해 세금 포함 금액을 계산하는 예제 단가와 개수를 입력하면 세금포함 금액을 계산하는 예제 원 x 개 합계 {{ sum }} 원 세금포함 {{ taxIncluded }} 원 sum 함수를 따로 지정하고 그 함수는 다른 함수에서 사용할 수 있습니다. alt + 255 하면 ' ' 값이 들어가는 빈 공간을 하나 생성할 수 있습니다. ◎ 국.. 더보기 이전 1 ··· 27 28 29 30 31 32 33 ··· 36 다음
