🏃♀️ Do it !/TIL
HTML / CSS / JS 정리
2022 / 8 / 29 월 HTML CSS JS ✔️HTML 정보 = meta - data + real data => element = tag + contents 글자크기를 크게 출력하는것이 아님 ! "첫번째 헤드라인"이라는 "의미"를 가지고 있음 ✨ tag를 디자인요소로 바라보지 말자 ✔️CSS 디자인을 적용할 Element를 선택한다. 디자인을 적용한다 + 적용된 디자인은 상속된다. 알아야 하는것 1. tag selector 2. class selector 3. id selector 4. 자손, 후손 selector 5. 가상 selector box-model 1. 각 파트별로 설정하는 방법 - 개별설정 : padding - left - 복합설정 : margin : 0 auto 2. margin은 ..
video / 개인 프로젝트
2022 / 8 / 26 금 Video 개인 프로젝트 ✔️Video 이미지는 정보의 집합 픽셀정보의 집합 -> 점의 정보 색정보 -> Red , Green , Blue Video 영상은 픽셀, 플레임, 프레임의 집합 픽셀은 3byte에 따라서 프레임은 엄청 큰데이터 엄청 큰 데이터는 반드시 압축이 필요 압축은 손실, 무손실 압축 ( 영상을 둘다 사용) 인트라프레임, 인터프레임을 사용 즉 영상정보를 다루는것은 매우크고, 압축이 되어있는 데이터를 다루는 일이다. 스크롤에 따라 움직이는 애니메이션을 만들고 싶을 때 디코딩을 사용 key frame을 찾는다. key frame의 디코딩 key frame부터 이전 frame까지 디코딩 ✔️개인프로젝트 1. 일정부분 스크롤시 상단메뉴바 블러처리 2. 동영상 삽입, ..
Scroll / Opacity
2022 / 8 / 24 수 Scroll값으로 opacity값 구하기 RAP ✔️Scroll 값으로 Opacity값 구하기 목표 : Element의 css값(opacity)을 스크롤에 따라변경 1. 적용하고싶은 css값의 범위 ( 0.2~ 0.8 ) 2. 스크롤값의 범위 ( 0 ~ 3000 ) ↓1500 (sectionYOffset) 스크롤값 0 -------------------------> 3000 (height) ↓0.5 css값 0.2------------------------> 0.8 ↓ 은 같이 움직임. 스크롤값이 0이라면 css는 0.2 스크롤값이 3000이라면 css는 0.8 스크롤값이 1500이라면 css는 ??? 비율구하기 rate = sectionYOffset / 전체 height 스..
Opacity / Translate
2022 / 8 / 22 월 2022 / 8 / 23 화 Opacity Translate 개인 프로젝트 진행 ~ ✔️Opacity 요소의 불투명도를 조절 0 ~ 1 0 : 요소가 투명한 상태 1 : 요소가 뚜렷하여 내용을 확인할 수 있는 상태 ✔️Translate Transform - 좌표 공간을 변형 - 요소에 이동(translate), 회전(rotate), 확대 축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다 🔨 연습문제 1. Animate 버튼을 누르면 글자가 2. 흐려지면서 진하게 생기고 3. 아래에서 위로 올라오게 하시오. Hello World Animate const h1Elem = document.querySelector('h1'); const btnAni = do..
스택 / 환영큐
2022/08/19 금 Stack Queue ✔️Stack 선입후출 형태의 자료구조 더보기 const max = 5; //데이터 개수의 최대치 const stack =[]; //스택 자료구조 let sp = 0; // stack pointer let count = 0; // state === full, null const push = function(data) { if( count === max) { return false; } stack[sp] = data; count++; sp++; return true; }; //state === empty, nall const pop = function() { if( count === 0 ) { return null; } sp--; // 위에서 sp++을 했기때문..