괴발개발

🔎 branch: 기존 master의 내용을 유지하면서 새로운 작업영역을 여는 방법 branch를 파서 작업하면 master에 영향을 끼치지 않기 때문에, branch에서 원하는 기능을 개발하다가 완성이 되면 추후에 merge 기능을 통해 master로 합침 확인: git branch 추가: git branch 브랜치이름 이동: git switch 브랜치이름 / git checkout 브랜치이름 이름변경: git branch -m 기존브랜치이름 새로운브랜치이름 삭제: git branch -d 브랜치이름 합치기: git merge 합칠브랜치이름 pull: git pull --all 🔎 git 협업 merge rule 설정(branch 보호) reviewers: 해당 코드를 리뷰해야할 사람 assignees..

뮤직 플레이어 제작 📌 코드: https://github.com/ebulsok/KDT-801-musicplayer.git 📌 결과물: https://kdt-801-musicplayer.netlify.app/ prev, next 버튼: transform-rotate 재생 버튼: .play(); 정지 버튼: pause(); reload 버튼: .load(); .play(); 재생 시 앨범 회전: keyframes, animation

파노라마 UI 제작 📌 코드: https://github.com/ebulsok/KDT-729-panorama.git 📌 결과물: https://kdt-729-panorama.netlify.app/ perspective preserve-3d transform: rotateY +=45deg씩, translateZ(764px); backface-visibility @keyframes 설정: rotateY(0deg) ~ rotateY(360deg)

CSS 애니메이션 기반 페이지 📌 코드: https://github.com/ebulsok/KDT-727-animation.git 📌 결과물: https://kdt-727-animation.netlify.app/ 애니메이션 기준점 속성: transform-origin @keyframes 애니메이션이름 { } animation: 애니메이션이름 진행형태 진행시간 진행횟수 🔎 Sass(Syntactically Awesome Style Sheets) 설치 Node.js 설치(https://nodejs.org/ko/) [터미널] node --version 정상적으로 설치되었는지 확인 [터미널] npm install sass -g NPM을 통해 Sass 설치 [터미널] sass --version 정상적으로 설치되었는..

🔎 JSON(JavaScript Object Notation) 자바 스크립트의 객체 표기법 문자열 표기는 반드시 쌍따옴표(")만을 사용 JS 내부에서는 요소명을 그대로 사용해도 되지만, 외부로 나갈 때는 요소 명도 반드시 ""로 표기 JSON.stringify( ): JSON 형태의 데이터를 문자열로 변환 JSON 불변성으로 인해서 data 값을 비교할 때 메모리 주소의 차이로 false가 반환됨=> JSON.stringify( );를 사용하면 JSON이 문자열로 변경되어 비교할 수 있음 JSON.parse( ): JSON 문자열을 JavaScript 객체로 변환 const user = { id: 1, name: "ebulsok", email: ["ebulsok@tistory.com", "leebulso..

문자열 함수 문자열.length(); 문자열.indexOf("찾을 문자열"); 문자열.slice(시작 위치, 종료 위치); 문자열.replace("찾을 문자", "바꿀 문자"); 문자열.repeat(반복 횟수); 문자열.trim(); let str = "Hello, world"; let str_trim = " Hello, world " console.log(str.length); // 12 console.log(str.indexOf("world")); // 7 console.log(str.slice(0, 5)); // Hello console.log(str.replace("world", "뽀로로")); // Hello, 뽀로로 console.log(str.repeat(2)); // Hello, world..

submenu - search 기존: CSS의 :focus 변경: 돋보기를 클릭하면 focus가 가도록 설정, placeholder 추가 notice 변경: Swiper 라이브러리 사용 promotion 변경: Swiper 라이브러리 사용(slide, pagination, autoplay) 스크롤에 따른 애니메이션 처리(visual, peru, indonesia, favorite, magazine, store) window.addEventListener("scroll", function() { }); scrollYpos window.onload = () => { }; 수정필요함

Javascript 내장 방식: ... 링크 방식: script src. js 파일을 따로 만들어서 링크하는 방식 표기법 dash-case(kebab-case) snake_case camelCase PascalCase 변수: 데이터를 저장하고 참조(사용)하는 데이터의 이름(let, const, var) var의 문제점: 중간에 같은 이름의 변수를 다시 선언할 수 있음, 변수가 블록 단위에서 끝나는 것이 아니라 전역에서 영향력을 행사함 규칙 - 변수 이름으로는 문자, 숫자, $, _ 만 사용 가능 - 첫 글자는 숫자가 될 수 없음 - 예약어 사용할 수 없음 - 상수는 대문자로 선언하는 것을 추천 데이터 종류(자료형) string number boolean undefined null object array ..

저번주에 포스코 다녀오고 글이 싹 밀렸다. TIL이라고는 쓰지만..😓 ㅎㅎ 7/4 BEM(block element modifier) Block - 가장 바깥쪽 상위 요소인 독립적 블록 - 재사용 가능: 따라서 보통 m, p 적용하지 않음 - 블록을 하위 요소로 가질 수 있음 - ex. header { } Element - 블록에 종속되는 하위요소 - 소속된 블록에 의존적 - 연결 방식: __ 이용 - ex. .header__logo { } Modifier - 블록에 종속되는 하위요소 - 엘리먼트의 모양 또는 속성이 변형된 경우 사용 - 기능은 같지만 모양이 다른 경우, 모양은 같지만 기능이 다른 경우 등 - 연결 방식: -- 이용 ex. .btn--primary { } git git clone 주소 gi..

Bootstrap (https://getbootstrap.com/) Breakpoints Containers Grid 기본구조는 부트스트랩의 container > row > col row는 행-가로줄, col은 열-세로줄 (여태까지 이거 못 외워서 자격증 시험에서 쩔쩔맸는데 이제는 외움) row의 직계로 row가 있는 건 타당하지 않고 col의 직계로로 row가 있는 것은 타당함 breakpoints는 6개 기본적으로 한 줄에 12칸으로 구성된다. col-6 이라고 하면 12칸 중 6칸을 차지하게 되고 나머지 2개의 col은 그냥 col이므로 6칸을 둘이서 균등분배(3칸씩)하게 된다. col col-6 col 이면 3:6:3 col col col 이면 4:4:4 row는 d-flex 속성을 가지고 있기 ..