위코드 35기
-
나의 첫번째 웹사이트 수정편프론트엔드 개발자가 될거야./js 2022. 6. 13. 16:43
맨 처음에 만든 자기소개 웹사이트가 승에 차지 않아서 레이아웃을 대폭 수정했다. 웹사이트 구경가기 첫번째페이지 방명록도 작성할 수 있다. 저장이 되지는 않는다...ㅎㅎ 추후 구현해야지! 그리고 about me! 버튼을 누르면 메인페이지로 들어갈 수 있다. 메인페이지 쟈쟌.. 전에보다 훨씬 깔끔해졌다 :) 단, Develpert 스펠링 틀림.. 인생은 단 한 번뿐, 대충 살아서는 행복할 수 없어! 내가 진짜 좋아하는 문구...... 내 가치관이라서 이 문구를 보면 힘이난다. 그리고 position: fixed를 사용해 navbar도 고정시켰다. 자꾸 겹치는 버그가 발생해서 구글에게 물어보니 body에 padding-top을 해주라고 해서 해줬다 :) 푸터도 만들었다. 이렇게 보니 나름 갖추어진 홈페이지가 ..
-
자바스크립트 타이핑 효과프론트엔드 개발자가 될거야./js 2022. 6. 13. 16:35
html, css 자기소개 페이지 만들고나서 JS로 타이핑 효과를 주어서 더 동적으로 만들고 싶었다. 자바스크립트 타이핑 효과 이분의 벨로그를 활용하여 나의 자기소개 페이지에 타이핑 효과를 구현할 수 있었다 :) 코드해석은 해석이 필요한 부분만 정리했다. HTML코드 해석 | 깜빡깜빡하는 효과를 주기위해 | 를 사용했다. CSS코드 해석 .text_box .blink { animation: blink 0.5s infinite; font-size: 20px; } @keyframes blink { from { opacity: 1; } to { opacity: 0; } } animation과 @keyframe의 이름은 blink로 같다. 같은 걸 바라보고 있다는 것을 의미한다. animation의 이름은 @k..
-
[위코드 35기] 객체프론트엔드 개발자가 될거야./js 2022. 6. 13. 16:32
객체란 무엇일까? 자바스크립트 데이터 타입 중의 하나이다. key값과 value값을 쌍으로 이루고 있고 배열과는 다르게 순서가 중요하지 않다. Object Literal 객체를 만드는 방법은 여러가지이지만 그 중 중괄호를 이용해 만드는 방식이다. let person1 = { name: '곽철용', bloodType: 'AB형', mbti: 'ENFP', favoriteCoffee: '바닐라라떼' } 객체가 필요한 이유 배열은 index number를 기억해야하지만 객체는 원하는 정보의 key값만 알면 정보에 접근할 수 있다. 배열과 객체의 차이점 또한 배열은 순서가 중요하지만 객체는 객체에 넣은 순서대로 프로퍼티가 출력되지 않는다. 즉, index 순서가 없다. 객체 속성 접근 1. 점 표기법 👀 Dot..
-
[위코드 35기]배열과 반복문프론트엔드 개발자가 될거야./js 2022. 6. 13. 16:29
배열과 반복문은 함께 많이 쓰인다. 배열과 반복문 문제를 풀 때 어려웠던 부분을 정리해두고자 한다. 👀 07번 문제 👀 for문을 사용하여 getAllLetters 함수를 작성하세요. 단어(str 인자)가 주어졌을 때 함수의 리턴값은 주어진 단어를 구성하는 모든 문자를 담고 있는 배열입니다. 만약 빈 문자열이 주어졌다면, 빈 배열을 반환해야 합니다. let output = getAllLetters('Radagast'); console.log(output); // --> ['R', 'a', 'd', 'a', 'g', 'a', 's', 't'] ✍🏻 풀이 ✍🏻 function getAllLetters(str) { // 아래의 코드를 수정하지 마세요. let strArray = []; // 빈 문자열을 가진 ..
-
[위코드 35기]배열의 메서드프론트엔드 개발자가 될거야./js 2022. 6. 13. 16:26
위코드 배열 강의 다 듣고 배열문제를 푸는데 생각보다 문제들이 어려웠다😂 이곳에 어려웠던 개념과 문제를 정리해두려고 한다. (아이패드로 정리했던 거 옮기기..ㅎㅎ) 🌟 slice 🌟 splice 🌟 filter array함수의 3대장 중 하나인 filter! (나머지 두개는 map, reduce) filter문제 풀 때 두번째 문제가 참 어려웠다.... 1시간은 잡고 있던 것 같다.. 🌻 filter 두번째 문제 풀이 👀 문제 👀 courses 라는 배열이 있습니다. level이 'hard'인 과목들로만 이루어진 새로운 배열을 filter()를 이용하여 반환해주세요.결과는 아래와 같아야 합니다. [ { level: 'hard', subject: 'Mathmatic' }, { level: 'hard', s..
-
[위코드 35기]HTML, CSS로 자기소개 페이지 만들기프론트엔드 개발자가 될거야./htmlcss 2022. 6. 13. 16:17
위코드 사전스터디 첫번째 과제는 HTML,CSS로 자기소개 페이지 만들기! 되게 간단해보이지만 메뉴를 어떻게 구성하고 어떠한 내용을 넣고 어떻게 레이아웃을 할지 많은 고민 끝에 탄생했다. 회사를 다니면서 작업한 거라 시간은 많이 부족했다. 웹 페이지를 만들 때 신경쓴 부분은 정 가운데 정렬 메뉴에 hover하면 커지는 효과 메뉴 누르면 해당 부분으로 이동 마음에 드는 한글 폰트 찾기, 글자 밑줄 긋기 짤짤이 이정도.. 1. 정 가운데 배치 display: flex; flex-direction: column; (or row) justify-content: center; // 수직 가운데 정렬 align-items: center; // 수평 가운데 정렬 text-align: center; // 텍스트 가운데..