일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- apple
- 웹페이지
- acro i8
- 핸드폰 배경화면
- 에어팟 짝퉁
- 애플
- 자바스크립트
- hover
- keyframes
- java
- 갤러리
- html
- Tag
- Loading
- JavaScript
- 헤이 시리
- 에어팟
- 배경화면 모음
- 에어팟 2
- 노래 넣기
- 애니메이션
- 연산자
- css
- 백그라운드 재생
- 아이폰
- 기초
- 배경화면
- 로딩
- 짱구 배경화면 모음
- animation
- Today
- Total
IT 블로그
Javascript 조건문 (if / switch) 코드를 작성할때 가장 많이, 가장 자주 쓰이는 조건문에 대해 알아보자. 1. If문 if문은 괄호안의 조건이 참일경우 그 안의 코드를 실행시킨다. 사용방법은 간단하다, 아래 코드를 보자 123if (true) { alert('참')}cs 1-1. else 조건문 작성시 조건이 참이 아닐경우 실행되지 않게되는데 해당문이 끝난뒤 아래 코드와 같이 else문을 적어주면 조건이 참이 아닐경우 그 안의 코드가 실행되게된다. 12345if (false) { // 실행안됨 alert("호호");} else { // 실행됨 alert("하하");}cs 1-2. else if 앞서 나오는 조건문이 통과되지 않았을때 아래 코드와 같이 다른 조건문을 걸 수 있다. 1234..
Javascript 연산자 (논리/문자열) 이번 포스팅에서는 논리, 문자열 연산 연산자에 대해 알아보자. 1. 논리 연산자 해당 내용은 아래 코드를 보자 &&(and)는 모든 항이 참인 경우에만 true를 뱉는다. ||(or) 의경우 참이 하나라도 존재할 경우 참일경우 참을 뱉는다. 1234567var a = true && true; // a = truevar c = true && false // c = falsevar b = '글' == '글' && '포스트' == '포스트' // b = true var d = true || true; // d = truevar e = true || false; // e = truevar b = '글' == '글' && '포스트' != '포스트' // b = true ..
Javascript 연산자 (대입/비교/산술) 이번 포스팅에서는 연산자에 대해서 다뤄 볼 것 이다. 연산자 사용시 코드 작성이 더욱 편리해지고, 코드를 간결하게 줄일 수 있다. 1. 대입 연산자 대입 연산자는 우측 항의 값을 좌측 항에 대입하는 것이다. 아래 코드를 보자 -=, +=, *=, /= 라는 기호들이 사용 되었다. 뺄셈, 뎃셈, 곱셈, 나눗셈 대입을 하게된다. 123456var a = 10; a -= 5; // a = a - 5a += 5; // a = a + 5a *= 10; // a = a * 10a /= 10; // a = a / 10cs 2. 비교 연산자 비교 연산자는 좌항과 우항을 비교하여 조건에 따라 참(true)과 거짓(false)을 반환해 준다. 아래 코드를 보면 될 듯하다.. ..
Javascript 변수 javascript에서 변수는 var를 통해 선언이 가능하다. 물론 var생략이 가능하지만 사용 가능한 범위가 달라진다. 변수 선언에 대해 알아보자. javascript 변수는 아래와 같이 선언 가능하다. 숫자, 문자 모두 구분없이 할당이 가능하다. 또 2번째줄 코드처럼 선언도 가능하다. 12var a = 10;var c = 1, d = 2; 아래와 같은 경우는 10을 할당했지만 그 이후에 "한글" 이라는 단어를 a 변수에 재할당 하였기 때문에 alert는 한글이 뜨게된다. 1234var a = 10;a = "한글"; alert(a); 다음 포스팅은 연산자에 대한 내용이다. - 끝 -
CSS 로딩 애니메이션 예제 - 2~3 이번에 만들 로딩 애니메이션 예제는 위와 같이 2가지다. 로딩 애니메이션이 너무 간단해서 2가지를 가지고 왔다. 정말 간단하다.. 구현하기 - 1 html 부터 작성해보자 bounce는 배경을 위해 넣었다. 123 cs 대충 배경 css를 작성해 주고 원(?)을 을 만들어보자 원의 css도 간단하다 원은 border-radius 50%를 적용하면 된다. 그후 배경 중앙으로 옮겨 주었다. 커지는 애니메이션은 scale을 사용하면 로딩 애니메이션 구현이 끝난다 ㅋㅋ keyframes 또한 간단하다. 123456789101112131415161718192021222324.bounce { width: 50%; height: 300px; background: #141926;..
CSS 로딩 애니메이션 예제 - 1 이번만들 예제는 css의 @keyframes(키프레임)라는 애니메이션 요소를 활용해 위와 같이 로딩중에 사용 할 수 있는 로딩 애니메이션을 만들어 보자. css keyframes의 사용법만 알고 있다면 이전 포스팅에 비해 간단한 예제고 소스 코드도 몇줄 안나온다 ㅋㅋㅋ 구현하기 먼저 로딩을 위한 html을 작성해 주자 별거 없다 엄청 간단하다 3줄 이다.. 이전 포스팅에 만든 filp 애니메이션이랑 같은 원리로 원근감을 주어야 하기때문에 애니메이션시킬 요소를 한번더 감싸주었다. 123 이제 flip-box의 css를 작성해 보자. flip-box는 감싸는 요소로 원하는데로 지정해 주면된다. 나는 예제와 같게 아래와 같이 지정했다. 원근감을 줘야하기 때문에 perspec..
CSS Hover 애니메이션 - 1,2,3 코드 모음 전에 작성한 CSS Hover 애니메이션 1,2,3편의 소스 코드만 정리 해두었습니다. CSS Hover 애니메이션 - 1 결과물 Html 1234 Css 길어서 2개로 분리 하였다. 123456789101112131415161718192021222324252627282930313233343536373839404142.image-box { width: 200px; height: 200px; padding: 20px; background: skyblue; box-sizing: border-box; position: relative; cursor: pointer;}.image-box::after { content: ""; display: block; po..
CSS hover 애니메이션 - 3 아래와 같이 x 버튼에 마우스를 hover 했을때 close로 바뀌는 애니메이션을 css로 만들어 보자. CLOSE 구현하기 먼저 html을 작성해 줍시다. 12345 CLOSE 저 검정(?)상자의 스타일을 지정해주자 1234567.content { width: 150px; height: 150px; position: relative; box-sizing: border-box; background: #141926;} 다음으로 x를 감싸주는 상자의 css를 지정해 봅시다. 123456789.close { width: 80px; height: 50px; cursor: pointer; position: relative; left: 50%; top: 50%; transform..