[포스코X코딩온] 웹개발 풀스택 과정 | CSS(4), javascript

Asong Ma·2023년 7월 11일

[포스코x코딩온]

목록 보기

3/37

Review

position과 flex속성으로 container 안에 items를 배치하는 방법을 배웠다.

부모요소를 position:relative, 자식요소를 absolute로 설정해야 부모요소 기준으로 아이템을 배치할 수 있다.

flex를 사용하면 block display였던 아이템들이 inline속성으로 바뀌면서 수평으로 나란히 배치된다. 이렇게 배치한 아이템들을 어떻게 정렬해줄 것인지 결정하는 속성인 justify-content(수평 정렬, 시작점과 간격), align-items(수직정렬, 아이템 뭉치들의 시작점을 어디로 할것인가), align-content(수직 정렬, 아이템들 사이의 간격)이 있었다.

마지막으로 transform으로 요소를 변형하고 transition으로 변형 함수를 어떤방식(시간, 딜레이 등)을 결정할 수 있다.

Preview

이번 시간은 animation으로 CSS수업을 마치고 Javascript로 들어간다.
@keyframes와 animation-속성들을 배우고
JS의 기초 개념들과 자료형, 연산자에 대해 배울 것이다.

1.Animation

어제 배운것은 정적인 상태에서의 효과였다면 움직이는 효과인 animation을 만들어 볼것이다.

① @keyframes animation 정의하기

먼저 @keyframes으로 애니메이션 효과를 정의해야한다. 예를들어 오른쪽으로 움직이고 싶은 애니메이션을 만들고싶다면 아래와 같이 만들면 된다.
💡주의할점은 position을 꼭 지정해줘야 한다는것이다. 실습때 position을 지정해주지 않았더니 작동하지 않아서 한참 고민했다...ㅎㅎ

from과to로 시작과 끝을 지정해주거나 00%로 중간중간 원하는 지점을 여러개 설정해서 효과를 지정해준다.

@keyframes 애니메이션이름{
	from{ }
    to{ }
}

@keyframes 애니메이션이름{
	0%{}
    10%{}
    100%{}
}

②animation 사용하기

animation-name:이름
animation-duration:지속시간
animation-delay:지연시간
animation-iteration-count:반복횟수
animation-timing-function:반복형태 ease,ease-in,ease-out,ease-in-out,linear등
animation-direction:애니메이션 방향

animation을 사용할때는 각각 속성을 지정해서 사용할 수도 있지만 단축속성을 사용할 수도 있다.

❔원을 뷰포트오른쪽과 바닥에 붙여서 움직이고싶다면 값을 몇으로 지정해야할까? calc(100vw-100px)로 지정하면 동작하지 않는다ㅠ

2. JavaScript

HTML로 웹의 내용을 작성하고, CSS로 디자인하고, 자바스크립트로 동작을 구현할 수 있다. 이제 더 화려하게 웹을 만들 수 있게 된것이다..! 자바스크립트는 웹브라우저에서 사용하는 스크립트 언어이다. 웹브라우저를 벗어나면 사용할 수 없다.

① 사용법

기본적으로 <script>태그 안에 코드를 작성한다.
그리고 JS는 위에서부터 차례로 읽힌다 그래서 유용한 기능이 있는데,
console.log()이다.
브라우저의 개발자 도구 > 콘솔 에서 확인할 수 있고 코드의 중간중간 입력해놓아서 오류가 작동하면 console.log로 어느정도 지점에서 발생했는지 찾을 수 있다.

② 내장&링크방식

CSS처럼 내장방식, 링크방식을 모두 사용할 수 있고 각각 장단점이 존재한다.

내장방식
CSS는 Head태그 내부에 넣었다면 JS는 head, body, head와 바다사이, body아래 등 어느 위치에나 사용이 가능하다. 웹브라우저가 로딩될때 head를 먼저 읽고 body의 내용을 출력하기때문에 head에 너무 내용이 많으면 사용자가 빈 화면을 보는 시간이 길어진다. 그러므로 적절한 위치에 사용하자!

링크방식에 비해 간단하게 만들수 있고 특정페이지에서만 작동하는 기능일 경우 내장방식을 사용한다.

링크방식
JS파일을 따로 만들어서 링크하는 방식이다. JS코드의 양이 많아지면 파일로 관리하는것이 편하고 같은 기능을 다른 페이지에서 사용하고 싶을 때 JS링크만 걸어서 사용이 가능하다.

③ 표기법

프로그래밍 언어에서 식별자를 표기할때 사용하는 방법 4가지가 있다.

dash-case(kebab-case) html,css에서 사용한다
ex) this-is-example

snake_case html,css JS에서 사용한다
ex) this_is_example

camelCase JS에서 사용한다
ex) thisIsExample

PascalCase JS에서 사용한다
ex) ThisIsExample

camelcase를 사용하는것이 관례이다.

④ numbering

css에서는 nth-child(n)을 사용할때 n이 1부터 시작했지만 대부분의 경우 컴퓨터는 0,1,2,3... 으로 0부터 시작한다. JS또한 n이 0부터 시작하는 zero-based numbering이다.

⑤ 변수 var, let, const

변수는 특정 값을 저장하는 공간이다.

키워드 변수이름 = 값
'값'을 '변수이름'이라는 저장공간에 저장하겠다는 뜻.

변수 선언은 var,let,const키워드를 사용하여 변수의 이름을 생성하는 것이고 변수에 초기값을 대입해주는 것을 할당이라고 한다. 그리고 각각의 변수는 변수가 영향을 미치는 범위(scope)가 있다.

변수에 따라 재선언,재할당 가능여부, scope 등이 다르다.

var (function scope)

재선언, 재할당 가능
```
var i; //선언, "undefined" 자동으로 할당
i = 0; //할당

var name = "파송송"; //선언과 동시에 할당 가능
var name = "홍길동"; //재선언 가능
name = "성춘향"; //재할당 가능 
```
var는 재선언, 재할당이 가능하기 때문에 같은 이름의 변수를 다시 선언하면 기존의 변수에 덮어씌우게 되고 이렇게 되면 문제가 발생하기 쉽다. 또한 변수의 영향력이 {블록단위}가 아니라 전역이라 의도치 않은 문제가 발생한다!
✨따라서 var대신 let사용을 권장한다.
let (block scope)
재선언 불가, 재할당 가능
```
let age;//선언, "undefined" 자동으로 할당
age = 10; //재할당 가능

let age = 22; //재선언 불가
```
let은 재선언이 불가, 재할당은 가능하다. let으로 선언된 변수는 선언된 블록, 구문 내에서만 유효하다.
cont (block scope)
재선언 불가, 재할당 불가

const WIDTH = 100;//선언, 할당 따로하면 안됨

const는 말그대로 상수(constant)이다. 재할당도, 다시선언도 불가능하다. 선언시 반드시 할당도 함께 해야한다.

### 변수 기본 규칙 - 변수이름은 문자/숫자/$/_ 만 사용이 가능하다. - 변수의 이름 첫글자는 숫자가 될 수 없다. - 예약어를 사용할 수 없다. - 변수 이름은 읽기 쉽도록 쓰자! ex) a,b (x) userName, userNumber (ㅇ) - 상수는 대문자로 선언하는 것이 관례

⑥ 자료형(data type)

데이터들의 type이 있는데 이것을 자료형이라 하고 각각 자료형을 사용하는 방식이 있다.

string 문자형 데이터 '',""로 묶어서 사용한다.
Number 숫자형 데이터.
boolean 참, 거짓 데이터. true,false
undefine 미할당 데이터
null의도된 빈 데이터

array 배열데이터

[배열에서 사용 가능한 함수들]

console.log(names.length)//배열의 길이

names.push('짱아')//배열의 마지막에 값을 추가
console.log("push", names)

names.pop()//배열의 마지막 값을 삭제
console.log("pop",names)

names.unshift("짱구")//배열 가장 앞의 값을 추가
console.log("unshift",names)

names.shift()//배열 가자 앞의 값을 삭제
console.log("shift",names)

//값을 찾는 두가지 방법
let index=names.indexOf("짱아")//값이 몇번 인덱스에 위치해 있는지
console.log(index)//만약 값이 없으면 -1출력

names.includes("짱아")//값이 포함되어 있는지 판별
let isIncludes=names.includes("짱아")
console.log(isIncludes)

배열에서 사용가능한 함수

문자와 변수를 동시에 쓰고싶을때
1) console.log("문자",변수,"문자"); //문자 변수 문자로 출력
2) +연산자를 사용해서 변수를 문자로 변환후 더하여 사용
console.log("문자"+변수+"문자"); //문자변수문자로 출력(띄어쓰기x)
3) 백틱문자 사용
(백틱기호)문자를쓰다가 변수를 쓰고싶으면 ${variable}으로 쓴다(백틱기호)