분류 전체보기 (68) 썸네일형 리스트형 front-end 국비과정 일차 17일차 학습일지 생성자함수,클래스,this,내장객체,구조분해 할 --- 생성자 함수 --- 생성자 함수란? 1객체를 만드는 하나의 함수로써 반드시 new연산자와 같이 사용된다 2생성자 함수는 파스칼표기법(카멜표기법과 같지만 첫단어의 첫문자도 대문자를 붙이는 표기법)을 사용한다. 3객체에 this라는 키워드를 사용하여 재사용 가능하다는 장점이있다 객체를 key:value로 만든다면 정해진 하나의 값만 출력 할 수 있지만 생성자 함수를 이용하면 key에 해당하는 value의 값을 함수에 인자를 이용해 재사용 할 수 있다 4생성자 함수를 사용하여 만든 객체를 인스턴스 라고 한다. ex1 key:value로 만든 객체) const myInfo = { fitstName: "Kim", lastName: "JungHwan", age:26 } console.log(`나의 이름은${.. front-end 국비과정 일차 16일차 학습일지 node.js, npm, package node js란? javascript엔진으로 javascript 런타임(프로그램 언어가 동작하는 환경)을 만들어 주는 프로그램이다 ---nvm 사용법 ---- nvm이란?:node.js의 버전을 관리해주는 프로그램이다 1터미널에서 nvm을 이용해 여러개의 node version을 보존 할 수 있다 2터미널에서 을 입력하면 해당 version의 node.js를 설치한다 3터미널에서 을 입력하면 해당 version의 node.js를 삭제한다 4터미널에서 사용하고 싶은 node.js version은 을 입력하면 된다 5터미널에서 nvm ls를 입력하면 현재 설치된 node.js에 version을 확인 할 수있다. 6터미널에서 node --version이라 입력하면 현재 사용중인 node.js version을 .. front-end 국비과정 일차 14~15일차 학습일지 html css로 내가 원하는 Page 만들어 보기 최종 사이트를 만들게된 계기 본인의 실력이 미숙하다 판단하였기 때문에 쉬운 사이트를 코딩 해보자는 취지에서 google 다크모드를 선택하게 되었습니다 기능 브라우저 상단에 Gmail,bento-icon을 제외한 모든 부분은 클릭하면 내용에 해당하는 부분으로 이동합니다 JavaScript를 사용하여 만든 브라우저 상단 정환이라고 명시된 icon을 클릭하여 content를 on/off 할 수 있습니다 각 content마다 마우스 hover시 배경색,마우스 cursor가 변함니다 netlify를 이용해 사이트를 배포하였기에 코드와 사이트를 보며 비교분석 할 수 있습니다 느낀점 퍼블리싱을 쉽게 할 수 있을거라 생각했지만 html의 구도를 파악하고 css로 요소사이에 상호작용과 오류를 파악하여 적용하고 js로 동적기능.. front-end 국비과정 일차 13일차 학습일지 html css로 내가 원하는 Page 만들어 보기(1) 내가 원하는 페이지를 만들어 보는 과제 진행 느낀점 1 강사의 도움없이 혼자서 개발하는것은 절대 쉽지않다는 것을 느꼇다 더 열심히 해야겠다 2 html과 css가 쉽다고 하는 사람도 있지만 직접 html구조를 파악하고 css로 styling할때도 요소와 요소사이에 상호작용을 고려하면서 코딩 해야한다고 판단했다 책에서 개발 블로그가 정말 중요하다고 했을때 이해하지 못했는데 막상 혼자서 코딩해보니 나의 개발블로그가 정말 큰 도움이 됬다 다들 블로그 쓰셈! 3 그래도 해냈다 나 정말 기특하다 칭찬 4 내일이나 내일모래 페이지 완성될듯하다 5 오늘까지 진행한 과제 github 링크 https://github.com/Jung-Hwan-Kim-97/google-main-page/tree/feature GitHub .. front-end 국비과정 일차 12일차 학습일지 Starbucks Project (2) 1github에 저장소를 netlify라는 서비스를 이용해 배포할 수 있다는 점을 배웠다 2 project에 수정사항이 발생한 경우에도 git add , commit, push로 원격 저장소에 업데이트한다면 netlify로 배포된 사이트도 수정내용을 반영해 자동 업데이트해준다는 장점이 있다. 3 github 저장소에 main branch가 아닌 다른 branch에서 작업했을 때 main branch로 merge하지 않는다면 netlify로 배포된 사이트에 수정사항이 적용되지않는다 스타벅스 main-page-project를 netlify로 배포하여 만든 사이트 url https://relaxed-lollipop-97cdb1.netlify.app/ main-page-project github 저장소 url .. front-end 국비과정 일차 11일차 학습일지 Starbucks Project(1) 1 스타벅스 Project 진행 2 Project 진행하면서 유용한 팁 --- WEB Project 시작할 때 초기 설정에 유용한 내용 --- 오픈 그래프란? 1 웹페이지가 sns로 공유될 때 우선적으로 활용되는 정보를 지정한다 2 meta태그 안에 property로 속성을 명시하고 content로 해당 속성의 내용을 명시한다 ex) 오픈 그래프에 사용되는 속성들 og:type = 페이지의 유형을 명시한다 ex) website, video, movie 등등 og:site_name = 사이트의 이름을 명시한다 og:title = 페이지의 제목을 명시한다 og:description = 페이지의 간단한 설명을 명시한다 og:image = sns에 공유될 때 보이는 페이지의 대표 이미지의 주소(url)를 명시한.. front-end 국비과정 일차 10일차 학습일지 JS 선행학습 내용 정리 국비지원 10일 차 JS 표기법 1 dash표기법: 단어와 단어 사이에 -(하이픈)을 사용하여 표기하는 방법 주로 HTML CSS에서 사용한다 ex) test 2 snake표기법:단어와 단어사이에 _(언더바)을 사용하여 표기하는 방법 주로 HTML CSS에서 사용한다 ex) .snake_case{ background-color: orange } 3 camel표기법:첫단어는 소문자로 작성하고 두 번째 단어부터 첫 글자를 대문자로 표기하는 표기법 주로 JS에서 사용된다 ex) let camelCase = "hellow world" console.log(camelCase) 4 pascal표기법: 단어의 첫단어는 반드시 대문자로 표기한다 주로 JS에서 사용된다 4-1 pascal표기법과 camel표기법의 차이점.. front-end 국비과정 일차 9일차 학습일지 CSS에서 사용되는 핵심속성2 css 배치 position:요소의 위치를 설정하는 기준점을 잡는다 기본값: static 속성 값 static: 기준 없음 relative: 요소 자신을 기준으로 삼는다 absolute: 위치상 부모 요소(상위 요소 중 position속성이 명시된 가장 가까운 요소)를 기준으로 삼음 fixed: 뷰포트(브라우저 화면)을 기준으로 삼음 sticky: 스크롤 영역을 기준으로 삼음 position속성으로 기준점을 잡고 방향을 이동시키는 속성 top:기준점의 윗 부분으로 부터 값만큼 밀어낸다 bottom:기준점의 아랫 부분으로 부터 값만큼 밀어낸다 left: 기준점의 왼쪽 부분으로 부터 값만큼 밀어낸다 right: 기준점의 오른쪽 부분으로 부터 값만큼 밀어낸다 z-index:요소가 겹쳤을때 우선적으로 보일 요소.. 이전 1 2 3 4 5 6 7 ··· 9 다음
