기록 :-)

Bootstrap이란 ? 트위터에서 시작된 프론트엔드 개발을 위한 프레임워크다. 트위터에서 사용되는 각종 레이아웃, 버튼, 입력창 등의 디자인과 기능을 css와 javascript로 만들어놓은 것이다. 글자 , 인용문, 목록 , 표 , 입력폼 , 버튼 , 이미지, 아이콘 등의 요소들을 모두 내장하고 있다. pc용만 아니라 태블릿이나 스마트폰 같은 모바일용 디자인도 반응형으로 지원한다. 버전 차이가 있는데 버전 4는 제이쿼리를 사용하지만 버전5부터는 바닐라 자바스크립트만을 사용한다고 한다. 사용법 1. bootstrap 다운로드 다운로드 후 사용할 수 있다. 2. CDN을 통해 불러오기 별도의 다운로드없이 코드 몇줄로 불러올 수 있다. 사이에 코드를 적고 예시로 밑에 있는 코드를 붙여넣기 해보겠다. htt..

6.0강은 명언파트다 ! 홈페이지를 새로고침할때마다 다양한 명언들이 랜덤으로 뜨는 걸 구현해볼거다. 우선 html에 명언과 작가의 이름을 넣게끔 , 태그를 생성해준다. const quotes = [ { quotes: "이 세상에 위대한 사람은 없다. 단지 평범한 사람들이 일어나 맞서는 위대한 도전들이 있을 뿐이다.", author:"윌리엄 프레데릭 홀시", }, { quotes:"해보지 않고는 당신이 무엇을 해낼 수 있는지 알 수 없다.", author: "프랭클린 아담", }, { quotes:"위대한 업적은 대개 커다란 위험을 감수한 결과이다", author:"헤로도토스", }, ]; // 명언 준비 실제로는 명언을 한 10개 정도 준비했는데 다 적기에는 많아서 세개만 적어줬다 ! const quot..

5.0 setInterval과 setTimeout 에 대해서 본격적으로 배운다. const clock = document.querySelector("#clock"); function sayHello(){ console.log("Hello"); } setInterval(sayHello, 1000); // 1초마다 sayHello가 반복 setInterval : 원하는 코드를 바로 실행하지 않고 지정한 시간마다 반복적으로 실행하는 함수 시간은 밀리초 (ms) 단위를 사용한다. const clock = document.querySelector("#clock"); function sayHello(){ console.log("Hello"); } setTimeout(sayHello, 1000); // 1초마다 sa..

3.0 document console에 document를 입력하면 작성한 html을 확인할 수 있다. document는 쉽게 설정하자면 브라우저에 존재하는 object ! 콘솔에 document.body 입력시 body 호출 가능 --> js를 통해서 html, css에 접근가능하다. 3.1 - 3.2 document라는 함수 중에는 getElementById라는 함수가 존재하는데 이 함수는 html에서 id를 통해서 element를 찾아주는 함수다. 이 element를 찾으면 id, className, innetText등 의 값들을 변경하거나 가져올 수 있다. getElementById : html에서 id를 통해서 element를 찾아주는 함수 getElementByClassName : classNa..

6월 6일부터 시작한 바닐라js 2주 챌린지 ! 더 원활한 공부를 위해 기록 시작 :) function : 함수 계속 반복해서 사용할 수 있는 코드 조각이라 생각하면 이해하기 쉽다. function 함수명 (argument){ 실행코드 } argument(인수)는 소괄호안에 위치하며 함수를 호출할 때 전달되는 값이다. const player = { age: 20, sayHello: function(myName){ console.log("Hello " + myName); } }; player.sayHello("seYeon"); //Hello seyeon argument는 myName이고 seYeon을 넣어줬다 결과는 Hello seYeon object안에 function을 넣어서 가벼운 계산기도 만들 수 ..

객체(object)란 ? 생활 속에서 우리가 인식 가능한 사물을 뜻한다. object는 property를 가진 데이터를 저장해주는데 여기서 property는 값이라고 생각하면 된다. const myProfile = { name: "yeon", color: "blue", food: "sushi" }; 한마디로 객체는 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합 !! console.log(myProfile); //{ name:'yeon', color: 'blue', food: 'sushi'} 원하는 부분만 출력을 원할 시에는 밑의 코드와 같이 적으면 된다. console.log(myProfile.name); // yeon console.log(myProfile..

배열 선언하는 방법 cosnt number = ["one","two", "three"]; 배열 출력하기 console.log(number); // ["one", "two", "three"] 배열에 요소 추가하기 number.push("four"); push로 요소를 추가하고 나서 다시 출력하면 four까지 추가된걸 확인할 수 있다. console.log(number); // ["one", "two", "three","four"] 원하는 요소만 출력하고싶을때는 대괄호안에 순서를 넣은 후 출력하면 된다 console.log(number[0]); // "one"출력 console.log(number[3]); // "four" 출력 이러한 방식으로 요소를 수정할 수도 있다 number[0] ="원"; conso..

$ pwd /c/Users/SY git bash에 들어가서 pwd를 입력하면 현재 파일 위치를 파악가능하다. cd /n/nn/nnn cd를 통해서 원하는 위치로 이동해준다. n은 파일명 ! $ git config --global user.name [github 이름 ] $ git config --global user.email [github 이메일] 이름과 이메일을 입력하고 $ git init git init을 입력하면 폴더안에 .git이라는 폴더가 생성된걸 확인 할 수 있다 $ git add . $ git commit -m "커밋메시지입력" 들어갈 메세지를 입력해준다. $ git push -u origin master origin은 Repository로 이동 후 , HTTPS의 url의 값을 복사해서 ..

어떤것부터 다시 공부를 할지, 뭘 만들지 고민하던 와중에 노마드 코더의 클론코딩으로 크롬 만들기를 발견하였다. 근데 더 자세히보니 2주 완성 챌린지가 있길래 얼른 신청하였다. 다시 시작한거 처음부터 빡세게하는게 나을거같다는 내 판단이다 졸업하는게 은근 어렵다는데,,, 졸작까지 잘 만들어서 무사히 수료 후에 티스토리에 후기써야지 ! 일주일뒤인 6월 6일부터 시작하니까 그전에 예습많이 해둬야지 ✨

다시 공부하려고 정리하는 뒤죽박죽 css 기초 개념 text-decoration-line none : 꾸밈 없음 underline : 텍스트 아래 밑줄 overline : 텍스트 위에 줄 line-through : 텍스트 중간 선 text-decoration-color 라인의 색 text-decoration-style 선의 모양 solid: 굵은 선 wavy : 물결모양 dotted : 점선 dashed: 짧은 막대선 double: 이중선 font 크기 font-weight: normal; 과 font-weight: 400; 과 같고 font-weight: bold; 과 font-weight: 700;은 같음 굵기는 100 ~ 900 까지 있음 ( 100 단위 ) 폰트에 따라 지원되는 크기는 다름 div..