나를소개하는홈페이지만들기 8

[Vue.js] 나를 소개하는 홈페이지 만들기 (5) - 프로토타입

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com --- 홈페이지를 만들기 위해 간략하게나마 전체적인 그림을 머리 속에 정리하고 진행하려한다.개인 프로젝트로 진행되지만 컴포넌트를 나누거나 틀을 나눌 때도 머리속에 그려지기 쉽게 나눌 수 있다. 프로토타입(prototype)은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. 시제품이 나오기 전의..

[Vue.js] 나를 소개하는 홈페이지 만들기 (4) - SCSS 에러, SCSS 전역으로 설정하기

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com --- Module build failed (from ./node_modules/sass-loader/dist/cjs.js): scss로 변환하면서 @mixin 메서드를 사용하려 하니 오류가 생긴다. 변수 값도 읽어내지 못한다. 에러를 읽어보니 sass-loader의 문제인것 같은데 왜 그런지 찾아..

[Vue.js] 나를 소개하는 홈페이지 만들기 (3) - CSS, SASS, SCSS

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com --- css로 만들었던 파일을 scss로 바꾸어 정리해보려고 한다. 과연 css와 sass/scss의 차이는 무엇일까? CSS : Cascading Style Sheets - 종속형 시트SASS : Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트SCS..

[Vue.js] 나를 소개하는 홈페이지 만들기 (2) - Bootstrap

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com --- 이전에 만들어 뒀던 html을 vue로 변환하는 작업을 해보자.나는 HelloWorld를 Home이라고 바꾼후 이전에 html로 되어있던 부분을 template에 바꾸어 넣었다. 그리고 css는 bootstrap을 이용해서 변환할 예정이다. https://getbootstrap.kr/docs..

[Vue.js] 나를 소개하는 홈페이지 만들기 (1) - Vue.js, Vue-cli

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com --- 이전에 만들고 있었던 나를 소개하는 홈페이지를 Vue.js 를 이용해서 다시 만들어보려고 한다. 이전에 바닐라js로 끄적여보고 React로도 끄적여봤는데, 다양한 툴 중에서 많은 사람들이 왜 Vue를 쓰는 이유를 알고 싶었다. 카카오 직원들도 Vue, React 반반 정도라고 하는데 왜 나누..

나를 소개하는 홈페이지 만들기 (3)

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com ---이번에는 홈페이지에 처음 왔을때 애니메이션 효과를 줘보려고 한다.index.css 하나로 묶여 있던 css들을 여러개로 분리해서 관리하기 쉽게 정리했다.기본적인것은 index 안에 두고, mainNav와 mainFooter는 따로 관리 했다. 위 화면처럼 동적인 효과를 주기 위해서 setTim..

나를 소개하는 홈페이지 만들기 (2)

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com --- 우선 임의로 기본 페이지를 표현해 보았다. 천천히 코드를 뜯어보자. html을 기준으로 css과 배경이미지로 사용한 jpg 파일이 존재한다. 저 메인 페이지 내에 필요한 파일을 위의 이미지와 같다.html에서 css를 불러오기 위해서는 , ... 안에 stylesheet 형태로 cs..

나를 소개하는 홈페이지 만들기 (1)

Next14 + Netlify 로 새로 작성했습니다.https://whothatsme.tistory.com/42 [Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적whothatsme.tistory.com --- React에 의존하던 홈페이지 만들기는 잠시 멈춰두고, HTML/CSS/JavaScript 를 이용해서 홈페이지를 만들어 보려한다.개념을 정리해 보자면, HTML :  제공할 웹 컨텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동영상 등으로 정의하고 부여하는 마크업 언어CSS : 배..