거북이개발자

1. Spread Syntax (1)객체, 배열등을 복사 const obj1={key : 'key1'}; const obj2={key : 'key2'}; const array=[obj1, obj2]; const arrayCopy=[...array]; console.log(array, arrayCopy); 위와같이 array를 복사할시 const arrayCopy=[...array]; 이렇게 사용가능하다. - ...은 배열, 객체 등의 안의 속성들의 각각을 의마한다. (2)객체, 배열등을 복사2 const obj1={key : 'key1'}; const obj2={key : 'key2'}; const array=[obj1, obj2]; const arrayCopy2=[...array, {key:'key3'..

1. Destructuring Assignment (1)일반적 객체내 값 접근시 const student1={ name : 'Ryu', age : 18, }; { const name=student1.name; const age=student1.age; }; 이런식으로 각각의 요소를 객체.요소와 같은 식으로 접근해줬다. (2) Destructuring Assignment-객체 const student1={ name : 'Ryu', age : 18, }; { const{name, age}=student1; console.log(name, age); }; const{name, age}=student1;을 통해서 name, age로 바로 접근이 가능하다. (3) Destructuring Assignment-배열..

1. Shorthand property names (1)일반적 객체생성시 const name='Ryu'; const age=18; const student1={ name : name, age : age, }; 이런식으로 name : name처럼 작성해준다. (2) shorthand prorperty names const name='Ryu'; const age=18; const student2={ name, age, }; 간편하게 name, age로 작성이 가능하다. 결과값이 같은걸 볼 수 있다.

1. 목표 목표는 다음 창들을 HTML과 CSS를 이용하여 웹페이지로 만드는게 목표이다. 뿐만아니라 아래의 내비게이션바를 통해서 원하는 창으로 가게 하느것도 목표이다. 2. 결과 3. 소스코드 github.com/RyuJungSik/kokoa-clone-2021 RyuJungSik/kokoa-clone-2021 Kokoa clone 2021. Contribute to RyuJungSik/kokoa-clone-2021 development by creating an account on GitHub. github.com 깃허브에 올려서 확인가능하다. 4. 깨달은 점 자주쓰이는 부분은 하나의 components로 저장해서 이용하면 편하다. position : fixed을 이용하여 위치를 고정시킨후 여러 위치를..

1. 목표 오늘은 로그인 창을 만들어 볼것이다. 목표는 밑의 사진이다. 2. HTML No Service 18:43 100% Welcome to KoKoa Clone if you have a KaKao Account, log in with your email or phone number, Find Kokoa Account or Password 위의 코드가 총 HTML의 코드이다. 자세히보면 크게 3구간으로 나뉜다고 볼 수 있다. 상태바부분, 환영하는 글 부분, 정보입력 및 링크부분 HTML만 적용했을시의 결과물이다. (1) 상태바부분 No Service 18:43 100% 이부분이다. 아이콘이 새로운 부분인데 fontawesome.com/ Font Awesome The world’s most popula..

1. 공부 목표 위와같은 카카오톡의 화면을 HTML과 CSS를 이용하여 웹에다가 똑같이 구현하려고 한다. 물론 데이터베이스와 서버 등을 하지 않기 때문에 실제처럼 작동하지 않겠지만 HTML과 CSS를 이용하여 프론트부분을 만들어 보겠다.

1. transition transition : CSS를 통해 애니매이션의 기능을 제공하고, 시간, 원하는 속도 등을 정할 수 있다. Go to home 코드를 보면 transition:background-color 10s ease-in-out; 이부분을 통해서 백그라운드컬러를 10초동안 ease-in-out가속도로 애니메이션을 만든다는것이다. 속성으로 : background-color 뿐만아니라 border-radius, all(전부) 도 가능하다. 가속도로 : ease-in-out 뿐만아니라 linear, ease-in, ease-in-out, ease-out 등등이 사용가능하다. 2. transfrom transform은 해당 태그를 회전시키거나 돌리거나 위치를 옮기는 등의 행위를 하게한다. 또한 ..

1. pseudo selectors (1) pseudo selector을 사용하면 기존의 id, class보다 좀더 정밀하게 CSS를 적용할 수 있다. 여러 코드들이 있고 대표적인것 예시 들을 보자. (1) first-child div:first-child{ background-color:tomato; } 위의 코드를 통해서 맨처음 div에만 적용이가능하다. (2) last-child div:last-child{ background-color: seagreen; } 아까와 비슷하게 마지막 div에 적용가능하게 해준다. (3) nth-child span:nth-child(even){ background-color: yellowgreen; } 이런식으로 원하는 규칙의 태그에만 적용도 가능하다. even, o..