All50 [Hello WM] Section About Responsive web page : Hello WM 2021.07.19 ~ HTML, Sass, JavaScript section about을 마크업하고 스타일링까지 했다. 처음에 구상할 단계에서 'About' 부분을 넣을 생각을 하지 않아서 어떻게 구현할까 고민하다가 헤더에서 썼던 이미지를 잘 보이도록 배치하고 그에 걸맞는 문장들을 배치했다. 섹션 타이틀 'About' 밑에 파란색으로 포인트를 줬고, 이것은 각 섹션마다 통일감있게 적용할 예정. 일단은 헤더에 있는 'about more' 버튼을 눌렀을 때 해당 섹션으로 이동하도록 했다. 조금 더 스무스하게 이동하는 건 HTML, CSS 작업을 하고 난 다음에 JavaScript에서 마무리 해야지. 오늘 한 것 : Section About 마크업 및 .. 2021. 7. 20. [Hello WM] Header Responsive web page : Hello WM 2021.07.19 ~ HTML, Sass, JavaScript 자고로 공부란 것은 덕질과 일치 했을 때 재미가 있지 않을까 라는 생각에서 출발했다. 반응형 웹사이트를 만들 생각을 가지고 있다가 드디어 프로젝트로 시작한다-! 처음엔 온앤오프와 관련된 사이트만 만들려고 하다가 그것을 넘어선 WM 엔터테인먼트 웹사이트를 반응형으로 방향을 틀었다. 김버그님 강의를 배울 때 모바일부터 먼저 마크업, 스타일링까지 하는 방법으로 했는데 이번에 Jonas 강의 들으면서 데스크탑 먼저인 웹사이트를 만들어본다. 약 한 달전 쯤... 피그마로 전반적인 디자인을 구성하고 이를 참고해서(디자인을 바꾸고 싶기 때문에) 시작하는 'Hello WM'. 여태껏 배운 것들을 접목.. 2021. 7. 19. [HTML/CSS] CSS Architecture udemy : Advanced CSS and Sass: Flexbox, Grid, Animations and More! / Jonas Schmedtmann HTML을 마크업을 하며 당연히 CSS를 생각 해야하는데 이 CSS를 설계할 때 어떻게 하면 더 효율적으로 할 수 있는가에 대해 THINK - BUILD - ARICHITECT 1. THINK (Component -Driven Design) - Modular building blocks - Re-usable - Independent CSS를 생각할 때 블럭 단위로 구상할 것, 같은 속성을 가지고 있는 것들은 재사용할 것, 그리고 독립적이어야 할 것. 2. BUILD (with meaningful class names) BEM : Block Elemen.. 2021. 7. 9. [JS] Operations with Dates udemy, The Complete JavaScript Course 2021: From Zero to Expert! JavaScript에서 제공하는 Date objects 활용하기 const formatMovementDate = function (date) { const calcDayPassed = (date1, date2) => (date2 - date1) / (1000 * 60 * 60 * 24); const dayPassed = Math.round(Math.abs(calcDayPassed(date, new Date()))); if (dayPassed === 0) return 'Today'; if (dayPassed === 1) return 'Yesterday'; if (dayPassed (date2.. 2021. 6. 30. [JS] Array Methods Practice udemy, The Complete JavaScript Course 2021: From Zero to Expert! string을 Title case capitalization 하는 함수 만들기 // this is a nice title -> This Is a Nice Title const convertTitleCase = function (title) { const capitalized = str => str.replace(str[0], str[0].toUpperCase()); const exceptions = ['a', 'an', 'the', 'and', 'but', 'with', 'on', 'in']; const titleCase = title .toLowerCase() .split(' ') .ma.. 2021. 6. 30. 이전 1 ··· 4 5 6 7 8 9 10 다음
