220416
🌽KEEP
-
console.log를 이용한 Todo List 만들기
-
설명을 듣기 전에 강의 예제를 미리 혼자 만들어 보았다. 조건문과 반복문에 익숙해지는 좋은 기회인 듯.
-
나는 배열 안의 데이터를 인덱스와 함께 출력할 때
for (const [key, value] of Object.entries(todoArr)) { console.log(`${key}: ${value}`); }단순한 for문은 이전에도 써봐서 새롭게 for ... of문과 Object.entries()를 썼는데,
for (let i = 0; i < todoArr.length; i++) { console.log(`${i}: ${todoArr[i]}`; }그냥 for문을 쓰면 이렇게 된다. 한눈에 이해하기에는 for문이 단순해서 더 나은 것 같다.
-
deleteNum 부분이 숫자가 아니면 delete가 되지 않는 코드를 짜지 않았다!
deleteNum = parseInt(prompt("Enter index of todo to remove")); if (!isNaN(deleteNum)) { todoArr.splice(deleteNum, 1); console.log("Todo removed"); } else { console.log("That's not an Index!"); }parseInt를 써서 숫자인지 판별한 뒤, NaN이 아닐 때만 delete를 진행하려면 이렇게 짜면 될 듯.
-
-
Landing page 만들기
- 처음으로 CSS에 전역 변수를 선언해서 만들었다. 항상 콘솔창을 볼 때마다 이게 뭐지 싶었던
:root에 속성을 지정한 다음,font-family: var(--body-font);같은 형태로 적용하면 된다. 한 번 저장해 놓고 템플릿처럼 쓰면 좋을 것 같다. - VSCode Emmet으로 class를 여러 개 넣고 싶을 때는 온점으로 구분한다.
div.red.yellow라고 입력하면<div class="red yellow"></div>가 자동 생성된다. - font awesome 아이콘이 자꾸 깨져서 참고 영상에 나온대로 Remix icon을 써보았다. 세상에는 정말 좋은 라이브러리들이 많다는 걸 느꼈다.
- CSS 작성할 때 부분별로 주석처리해서 구분하면 한결 보기 편할 듯.
- Flex box에 row-gap이라는 속성이 있었다! 말 그대로 row끼리의 간격을 조절할 수 있다. 요소에 margin이나 padding 부여할 필요가 없겠군.
- 영상에 텍스트에 그래디언트를 넣는 방법이 나오는데, 구글링을 해보니
background-clip: text를 지정해서 배경을 텍스트에만 적용시킨 후 텍스트 색상을 투명으로 바꿔서 배경만 보이도록 만드는 원리였다. 그런데 왜-webkit-background-clip속성이 없으면 제대로 적용이 안 되는지는 좀 더 찾아봐야할 듯하다. 이게 없으면 크롬, 사파리, 삼성 인터넷 등에서는 적용이 안 되는 건가?
- 처음으로 CSS에 전역 변수를 선언해서 만들었다. 항상 콘솔창을 볼 때마다 이게 뭐지 싶었던
🌽TRY
- 내비게이션 바가 있는 상태에서
postion: sticky를 쓸 때는top잘 확인하기- 내비게이션 바에 가려져서 sticky가 적용 안 된 것처럼 보이는 바람에 한 시간 동안 헤매지 말기...^^
Author And Source
이 문제에 관하여(220416), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yujinoneill/220416저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
