개인적인 공부시간에 한 것들
+ vscdoe 패키지 중에서 live share를 쓰면 깃헙을 이용해서 라이브 코딩 가능
+ vscode 패키지에서 theme 다운로드해서 테마 변경가능
+ vscode 글씨체
https://lifelong-education-dr-kim.tistory.com/24
CSS 복잡한 속성
1. display
1) inline
- inline - 원래 크기만큼 차지 (div에 주면, div도 인라인처럼 된다.)
- block - 블록은 크기가 기본적으로 100 지정
- inline-block 은 인라인인데, 블록처럼 크기 조정이 가능
<style>
.d-inline1 {
display: inline;
background-color: blueviolet;
}
/* 본래 인라인 요소가 이닌 것에 인라인을 주면 inline으로 된다. */
/* 인라인 요소는 블록 요소와 달리 크기 조절이 안된다 */
/* 만약 인라인인데 블록처럼 크기를 조절하고 싶다면 inline-block 속성을 이용한다 */
/* .d-inline2 {
background-color: aqua;
display: block;
width: 50%;
height: 300px;
} */
/* div는 본래 block요소이므로 줘도 차이가 없어진다 */
/* 이때 블록 요소는 임의로 크기 조정을 할 수 있다 */
.d-inline2 {
background-color: aqua;
display: inline-block;
width: 100px;
}
/* display:flex를 주면 바로 아래 자식이 inline-block으로 지정되며 크기 조정이 가능하게 된다. */
/* flex의 장점은 정렬이 가능하다는 것이다. */
/* justify-content는 inline이나 inline-block만 적용이 된다. 가로정렬 */
/* 세로 정렬은 align-items, 이때 높이가 있어야 보인다.*/
.d-flex {
display: flex;
align-items: center;
height: 100px;
}
</style>
2) flex
-장점 : 정렬 및 레이아웃이 쉬워짐
justify-content:space-between;
공간을 주면서 배치
.d-flex {
display: flex;
align-items: center;
height: 100px;
}
3) none
- none : 화면에서 사라지게 함 (크기도 없음)
/* display: none; 의 특징은 크기를 차지하지 않고 보이지 않게 된다 */
.d-flex {
display: none;
align-items: center;
height: 100px;
}
2. animation
(js가 아닌 css로 animation)
애니메이션 나타내는 CSS 스타일 + 중간 상태를 나타내는 키 프레임 (@keyframe)
<style>
div {
width: 200px;
height: 200px;
background-color: aquamarine;
position: relative;
animation-name: anime;
animation-delay: 2s;
animation-duration: 2s;
animation-timing-function: ease;
animation-iteration-count: 3;
}
/* 애니메이션 속성들 */
/* animation-name: anime; 설정한 애니메이션 이름
animation-duration: 2s; 애니메이션의 시간
animation-iteration-count: 3; 애니메이션 반복 횟수 */
/* animation-delay: 1s; 애니메이션 시작전에 잠깐 멈췄다 시작하게 함 */
/* animation-timing-function: ease-in-out; 애니메이션이 움직이는 속도 조절 */
@keyframes anime {
/* from {left: 0px;}
to {left: 100px;} */
0% {left: 0px;}
50% {left: 500px;}
100% {left: 100px;}
}
/* 현재 position: relative; 로 지정했으므로 left 지정이 가능하다. (중요!)
@keyframes + 설정한 이름 (anime) */
keyframes 쓰는 방법
1. from to 2. %퍼센트
/* 1. from {left: 0px;}
to {left: 100px;} 이렇게 하면 0에서 100px로 간다 */
/* 2. 퍼센트 (세부적으로 애니메이션 상태 나누기. 0, 25, 50, 100)
0% {left: 0px;}
50% {left: 200px;}
100% {left: 100px;} */
.div1 {
border-radius: 50%;
background-color: rgb(192, 114, 150);
animation-name: ball;
animation-delay: 2s;
animation-duration: 5s;
animation-iteration-count: 10;
}
@keyframes ball {
to { top : 100px; opacity: 0.5;}
from { top : 300px; opacity: 1;}
}
</style>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
java script (동사) 의 역할
복잡한 기능을 구현할 수 있도록 하는 스크립팅(프로그래밍) 언어 = 동적, 생동감
사용법
<script>안에 js 코드 작성</script>
이때, <head> 태그와 <body> 태그에 둘다 사용이 가능하다
BUT, 전부 다 head에 넣어두면 읽어오는데 로딩 시간이 더 걸리므로 판단하여 나눠서 넣는다.
(보는 입장에서는 하얀 화면만 오래 뜨게 된다)
java script 사용해보기
.console.log()
- 브라우저의 개발자 도구 > 콘솔에서 확인 가능
중요! 앞으로 개발을 할때, 중간 사항을 체크할 때 사용한다.
.alert()
- 기본적인 알림창 태그 (브라우저가 열렸을 때 작동)
<script>
alert('hello');
console.log('hello world!');
</script>
java scripts 변수
변수는 바로 그 값을 가지고 있는 게 아니라, 주소에 한번 담겼다가 찾아가는 구조
address value
주소 / 내가 넣은 값
1) 선언
let 변수이름;
var 변수이름;
2) 할당 (선언하면서 값을 바로 넣는 것)
const 변수이름 = 값;
let 변수이름 = 값;
var 변수이름 = 값;
var 변수이름 ;
1) 선언 단계와 초기화 동시에 하며, 아무것도 할당하지 않으면 자동으로 undefined 할당
2) 중복 선언, 재할당 가능
<script>
alert('hello');
console.log('hello world!');
var a;
console.log(a);
var a = 1;
console.log(a);
// 이미 선언된 변수 a에 값을 바꿈
a= 2;
console.log(a);
</script>
let 변수이름 ;
1) (임시변수)
2) 변수 중복선언이 불가능하나, 재할당 가능
3) 아무것도 할당하지 않으면 자동으로 undefined 할당 (var와 동일)
let b;
console.log(b);
b=2;
const 변수이름 = 값;
1) 변수보다는 상수 (선언과 동시에 할당해야 하며 바꿀수 없기 때문)
2) 초반에 선언할 때부터 반드시 초기화를 동시에 진행해야 한다.
3) 재선언 불가능 , 재할당 불가능
실습
<script>
var no_1 =12 ;
var no_2 =2 ;
var no_3 =3 ;
console.log(no_1);
// 위의 변수와 새로만드는 함수는 서로 변수이름이 달라야 한다
function add(n1, n2, n3) {
alert(no_1 + no_2 + no_3);
alert(n1 + n2 + n3);
};
add(5,6,7);
function sub(a, v, c) {
alert(no_1 - no_2) ;};
sub(1,2,3);
function divide(d, e) {
alert(no_1 / no_2) ;
};
divide(no_1, no_2);
function mul(a1, b1) {
alert(no_1 * no_2) ;
};
mul(no_1, no_2);
</script>
프로그래밍 언어타입
- 강한 타입 : 타입 검사를 통과하지 않으면 실행할 수 xx , string int 등 타입을 1종류로 명확히 지정한다.
- 약한 타입 : 런타임에서 타입 오류를 만나도 실행을 막지 않음, 타입이 여러 종류여도 상관 없다.
(문자 숫자 같이 쓰는 등)
Java Script 자료형
- 기본형 (primitive) : Boolean, str, int, null, undefined
- 객체 (object)
자료형 확인하기
typeof() 함수 사용
typeof('문자')
typeof(245)
typeof(function() {};)
typeof(true)
typeof({})
typeof([])
typeof(NaN)
typeof(null)
보고싶다면 출력하기!!
console.log(typeof('문자'));
console.log(typeof(245));
console.log(typeof(function() {}));
console.log(typeof(true));
console.log(typeof({}));
console.log(typeof([]));
console.log(typeof(NaN));
console.log(typeof(null));
형 변환하기
문자열로 변환
1. string
ex string(true);
2. toString
정수로 변환
1. number()
ex number(true);
2. parseInt()
ex number('10');
연산자
출처 https://dasima.xyz/javascript-operator-priority/
- 대입 연산자 : =
- 비교 연산자 : == != === !=== > >= < <=
== 값이 같다
!= 값이 다르다
=== 값과 타입까지 같다 (엄격)
!=== 값과 타입 둘다 다르다
- 산술 연산자 : + - * /
- 논리 연산자 : ! && ||
&& and
|| or
자바스크립트 연산자 우선순위 표 및 쉬운 예제 3가지 - dasima
자바스크립트 연산자 우선순위 어떤 순서로 되어있을까요? 괄호가 가장 먼저 오고, 증감 연산자나 논리 not 연산자와 같은 단항 연산자가 2순위 입니다. 이후 산술연산자, 비교 연산자, 논리 연산
dasima.xyz
