반응형

자바스크립트 ES6 문법 - 가변변수(let), 불변변수(const)

 

가변번수 사용법(let)

let 숫자 = 1;
숫자 = 숫자 + 4;

let 문자 = '가나다';
문자 = 'ABC';

let 배열 = [];
배열 = [1, 2, 3];

let 객체 = {};
객체 = { 이름: '전산이'};

 

불변변수 사용법(const)

const 숫자 = 1;
숫자 = 숫자 + 4;	// 에러남

const 문자 = '가나다';
문자 = 'ABC';	// 에러남

const 배열 = [];
배열 = [1, 2, 3];	// 에러남

const 객체 = {};
객체 = { 이름: '전산이'};	// 에러남

 

불변변수 값 변경 방법(무결성을 해치는 방법으로 추천하지 않음)

const 배열2 = [];
배열2.push(1); 
배열2.splice(0, 0, 0); // 배열2 = [0,1]
배열2.pop(); 

const 객체2 = {};
객체2['이름'] = '전산이';   // 객체2.이름 = 전산이
Object.assign(객체2, { 이름: '새이름' }); 
delete 객체2.이름;	// 객체2.이름 = 새이름

 

불변변수를 다른 불변변수에 할당하는 방법 (무결성을 지킴)

const 숫자1 = 1;
const 숫자2 = 숫자1 * 3; 

const 문자1 = '가나다';
const 문자2 = 문자1 + 'ABC'; 

const 배열3 = [];
const 배열4 = 배열3.concat(1);
const 배열5 = [...배열4, 2, 3]; 
const 배열6 = 배열5.slice(0, 1); 
const [first, ...배열7] = 배열5; 

const 객체3 = { 이름: '전산이', 나이: 20 };
const 객체4 = { ...객체3, 이름: '새이름' }; 
const { 이름, ...객체5 } = 객체4;

 

반응형
저작자표시 비영리 변경금지

'HTML5 CSS JavaScript' 카테고리의 다른 글

자바스크립트 ES6 문법 - 전개 연산자  (0) 2022.02.21
자바스크립트 ES6 문법 - 템플릿 문자열  (0) 2022.02.21
Animate.css를 이용한 이미지, 문자 애니메이션 효과 주기  (0) 2020.07.26
반응형

자바스크립트 ES6 문법 - 전개 연산자

 

ES6 전개연산자 사용방법

var 배열1 = ['하나', '둘'];
var 배열2 = ['셋', '넷'];

// 기존 JS
var 합치기 = [배열1[0], 배열1[1], 배열2[0], 배열2[1]];
var 합치기 = 배열1.concat(배열2);
var 합치기 = [].concat(배열1, 배열2);
var 영번 = 배열1[0];
var 일번 = 배열1[1];
var 이번 = 배열1[2] || 'empty';

// ES6 문법
var 합치기 = [...배열1, ...배열2];
var [영번, 일번, 이번 = 'empty', ...others] = 배열1;

 

ES6 객체 전개 연산자 사용방법

var 객체1 = { one: 1, two: 2, other: 0 };
var 객체2 = { three: 3, four: 4, other: -1 };

// 기존 JS
var 합치기 = {
  one: 객체1.one,
  two: 객체1.two,
  three: 객체2.three,
  four: 객체2.four,
};
var 합치기 = Object.assign({}, 객체1, 객체2);
var 합치기 = Object.assign({}, 객체2, 객체1);
var 아더들1 = Object.assign({}, 합치기);
delete 아더들1.other;

// ES6 문법
var 합치기 = {
  ...객체1,
  ...객체2,
};
var 합치기 = {
  ...객체2,
  ...객체1,
};
var { other, ...아더들2 } = 합치기;

 

반응형
저작자표시 비영리 변경금지

'HTML5 CSS JavaScript' 카테고리의 다른 글

자바스크립트 ES6 문법 - 가변변수(let), 불변변수(const)  (0) 2022.02.22
자바스크립트 ES6 문법 - 템플릿 문자열  (0) 2022.02.21
Animate.css를 이용한 이미지, 문자 애니메이션 효과 주기  (0) 2020.07.26
반응형

자바스크립트 ES6 문법 - 템플릿 문자열

 

문자열 합치기

var string1 = '스트링1';
var string2 = '스트링2';

// 기존 JS
var greeting = string 1 + ' ' + string2;

// ES6 문법
var greeting = `${string1} ${string2}`;

 

객체 자료형 사용

var data = { name : '전산이' , age : 19 };

// 기존 JS
var string = data.name + '의 나이는' + data.age + '입니다';

// ES6 문법
var string = `${data.name}의 나이는 ${data.age}입니다`;

 

줄바꿈

// 기존 JS
var multiline = '1열\n2열';

// ES6 문법
var multiline = `1열
2열`;

 

문자열 안에 연산결과

var data1 = 1;
var data2 = 2;
var boolval = false;

// 기존 JS
var oper1 = '곱한값은 ' + (data1 * data2) + '입니다';
var oper2 = 'bool값은 ' + (boolval ? '참' : '거짓') + '입니다';

// ES6 문법
var oper1 = `곱한값은 ${data1 * data2}입니다`;
var oper2 = `bool값은 ${boolval ? '참' : '거짓'}입니다`;

 

반응형
저작자표시 비영리 변경금지

'HTML5 CSS JavaScript' 카테고리의 다른 글

자바스크립트 ES6 문법 - 전개 연산자  (0) 2022.02.21
Animate.css를 이용한 이미지, 문자 애니메이션 효과 주기  (0) 2020.07.26
티스토리 사이드바 시계 추가하기  (0) 2020.07.17
반응형

Animate.CSS를 이용한 이미지, 문자 애니메이션 효과 주기

 

먼저 어떤 효과가 가능한지 예시를 보여 드리겠습니다.

(모바일 화면에서는 애니메이션이 정상 작동하지 않을 수 있습니다)

 

 

 

물론 텍스트도 애니메이션이 가능합니다.

전산직의 삶

 

사용 방법은 먼저 HTML 소스 수정에서 <HEAD>와 </HEAD> 사이에 아래 내용을(CSS) 추가해줘야 합니다.

<head>

<link rel="stylesheet" hrep="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />

</head>

 

 

 

다음은 적용할 이미지나 텍스트 앞에 class를 넣어 줍니다.

<img class="animate__animated animate__bounce" href="이미지주소">

<h1 class="animate__animated animate__jackInTheBox">전산직의 삶</h1>

 

적용 가능한 애니메이션의 종류가 다양합니다.

Animate.css 홈페이지에 가시면 종류를 확인 및 테스트 해보실 수 있습니다.

 

또한 애니메이션이 이뤄지기 전에 딜레이를 줄 수도 있습니다.

애니메이션이 몇 회 반복할지를 정할 수도 있고, 위에 예시처럼 무한 반복도 가능합니다.

 

세밀한 조정을 위해서는 해당 animate.css 파일을 설치 또는 다운받아 직접 값을 수정해서 사용 하시면 됩니다. CSS에 대해 잘 아신다면 직접 티스토리에 수정 후 올리신 후 그 주소를 링크해서 사용하시면 됩니다.

 

홈페이지에 가보시면 HTML태그뿐 아니라 JavaScript에도 이용가능한 것으로 나옵니다.

사용법 또한 설명되어 있습니다.

 

Animate.css

 

Animate.css

Animate.css v4 brought some breaking changes, please refer to the migration guide before updating from v3.x and under. Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders,

animate.style

 

 

HTML5 CSS JavaScript 전체보기

 

'HTML5 CSS JavaScript' 카테고리의 글 목록

전산 관련 경험을 기록 하는 곳

reddb.tistory.com

읽어주셔서 감사드리며, 블로그를 액티브하게 꾸미시는데 도움이 됐기를 빌겠습니다.

 

 

반응형
저작자표시 비영리 변경금지

'HTML5 CSS JavaScript' 카테고리의 다른 글

자바스크립트 ES6 문법 - 전개 연산자  (0) 2022.02.21
자바스크립트 ES6 문법 - 템플릿 문자열  (0) 2022.02.21
티스토리 사이드바 시계 추가하기  (0) 2020.07.17
반응형

티스토리 사이드바 시계 추가하기

 

티스토리에서는 스킨편집기능과 배너출력 플러그인을 통해 특정영역에 HTML 소스 입력이 가능합니다.

스킨편집에서는 자신이 원하는 위치에 입력이 가능하지만 초보자에게는 입력의 어려움이 있다는 단점이 있습니다.

반면에, 배너출력 플러그인을 통하여 소스 입력을 하면 사이드바 특정 구간에만 입력이 가능하지만 간단히 소스를 입력하고 위치를 위, 아래로만 이동시키는 작업만 필요해 작업이 쉽게 가능합니다.

 

이번 포스팅에서는 프로그래밍 초보분들이 JavaScript 소스를 업로딩 하지 않고 기존에 제 티스토리에 올라와있는 JavaScript를 이용하여 쉽게 HTML 태그와 script 주소만으로 시계를 추가하는 방법을 적겠습니다.

 

1. 티스토리 설정화면에서 플러그인에 배너출력으로 들어가 사이드바를 사용하도록 설정합니다.

 

티스토리 설정화면 플러그인 배너출력

 

배너 출력 적용

 

 

2-1.  티스토리 설정화면의 꾸미기 메뉴에 사이드바가 생긴것을 확인하고 클릭합니다.

꾸미기 사이드바

 

 

2-2. 기본모듈에 HTML 배너출력을 +버튼을 클릭해서 추가해줍니다.

사이드바 HTML 배너출력

 

 

3-1. 사이드바1에 추가된 HTML 배너출력의 편집 버튼을 클릭합니다.

      (편집버튼은 마우스를 - 왼쪽 위치에 올리면 생깁니다)

HTML 배너출력 편집

 

 

3-2. 이름란에 원하시는 이름을 넣으시고, HTML소스란에 아래 HTML 소스를 복사해서 붙여 넣고 확인을 누릅니다. 마지막으로 변경사항 저장을 클릭합니다.

HTML 배너출려 소스 입력

<div class="js-clock">
<h1>
<hour>00</hour>:<min>00</min>:<seconds>00</seconds>
</h1>
</div>
<script src="https://tistory3.daumcdn.net/tistory/4023133/skin/images/clock.js"></script>

사이드바 변경사항 저장

 

4. 티스토리 첫화면에 접속해서 시계가 잘 뜨는지 확인합니다.

티스토리 메인화면

 

 

PS.

HTML 소스에 있는 script파일이 올라가 있는 저장주소는 제 티스토리 저장공간입니다.

티스토리 서버 점검 시, 또는 티스토리 서비스 종료시 해당 script 파일에 접근이 불가능해 진다면 정상작동이 안될 수 있음을 알려드립니다.

 

 

HTML5 CSS JavaScript 전체보기

 

'HTML5 CSS JavaScript' 카테고리의 글 목록

전산 관련 경험을 기록 하는 곳

reddb.tistory.com

 

반응형
저작자표시 비영리 변경금지

'HTML5 CSS JavaScript' 카테고리의 다른 글

자바스크립트 ES6 문법 - 전개 연산자  (0) 2022.02.21
자바스크립트 ES6 문법 - 템플릿 문자열  (0) 2022.02.21
Animate.css를 이용한 이미지, 문자 애니메이션 효과 주기  (0) 2020.07.26

티스토리툴바