odada

#github #jekyll #깃헙 #깃허브 #지킬테마 안녕하세요. 오다다입니다. 이런 저런 사정으로 it에서 리뷰로 리뷰에서 it로 다시 돌아왔습니다. 블로거의 길도 쉽지 않네요. 오늘은 Jekyll을 사용하여 GitHub에서 포트폴리오 만들기에 대해 포스팅 해보겠습니다. 최근 대기업에서 채용시 GitHub 포트폴리오 제출이라는 문구가 많이 보입니다. GitHub은 버전관리 및 협업 툴로 사용하지 못하면 업무가 어렵기 때문입니다. ㅜㅜ 해서 포트폴리오 사이트도 GitHub에 만들면 프로젝트 업로드 및 관리가 쉽기 때문에 GitHub 블로그를 만들어 포트폴리오로 활용해봅시다. 그럼 간단하게 GitHub이 무엇인지 알아보고 포트폴리오 만드는 방법을 알아보겠습니다. GitHub 이란? 출처 입력 여러 개발자..

list https://eehd80.github.io/-setting/!list.html main https://eehd80.github.io/-setting/ Setting 프로젝트 시작시 사용할 수 있는 setting 파일입니다. main(master) 브랜치로 이동 signin 브랜치로 이동 list DEMO Naming Case (BEM) kebab-case(케밥 표기법) kebab-case, header-container, btn-list, menu-list ... (하이픈)으로 단어를 연결하는 표기법 HTML 태그의 class 속성으로 흔히 사용됨 camelCase(카멜 표기법) camelCase, typeName, lightBox, darkBox ... 기본적으로 변수명을 모두 소문자로 씀 ..

ScrollTrigger란? 동적인 사이트를 만들 때 빠지지 않고 사용하는 라이브러리 중 하나이다. 최소한의 코드로 스크롤 애니메이션을 구현할 수 있다. GSAP 공식사이트 https://greensock.com/docs/v3/Installation cdnjs https://cdnjs.com/libraries/gsap 1. setting //cdn //스크롤 트리거 불러오기(플러그인 안정화) 2. 기본 사용법 gsap.to(대상, { scrollTrigger:{ trigger:대상, 스크롤속성:값, 스크롤속성:값 }, 속성:값, duration:재생시간 }) 3. 샘플 https://greensock.com/scrollmagic/ See the Pen scrollTrigger by odada (@odad..

mdn 자바스크립트 기본 https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics JavaScript 는 뭔가요? JavaScript 는 웹 브라우저에서 사용하기 위하여 만들어진 HTML과 웹의 프로그래밍 언어입니다. 왜 JavaScript를 공부해야합니까? JavaScript는 모든 웹 개발자 가 배워야 하는 3 가지 언어 중 하나입니다 . 웹 페이지의 내용을 정의하는 HTML 웹 페이지의 레이아웃을 지정하는 CSS 웹 페이지의 동작을 프로그래밍하는 JavaScript 웹 개발 JavaScript는 웹 애플리케이션의 동적인 기능을 구현하기 위해 필수적입니다. 웹 페이지에서 사용자와의 상호작용, 데이..

버전 관리?? 기획서.pdf 기획서_수정본.pdf 기획서_수정.pdf 기획서_진짜_최종.pdf 기획서_진짜진짜_최종.pdf 기획서_20230801.pdf GitHub Tutorial 사용 문서 https://docs.github.com/ko 정보 https://docs.github.com/ko/get-started/using-git/about-git pull requests https://docs.github.com/pt/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches 간편안내서 https://rogerdudler.github.io/git-guide/in..

원본 : https://www.codestates.com/blog/content/%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%82%AC%EC%9A%A9%EB%B2%95 개요 피그마(Figma)는 현재 UX/UI 분야에서 가장 인기 있는 디자인 툴 중 하나로 2022 Design Tools Survey 결과, 현업에서 UI 디자인과 프로토타이핑에 가장 많이 사용하는 툴로 피그마가 선정됐습니다. 피그마란 피그마는 온라인에서 사용할 수 있는 디자인 툴로, UX/UI 디자인 및 프로토타입 제작을 위한 기능들을 제공합니다. 웹・앱・인터페이스 디자인 등 다양한 분야에서 사용되며, 디자인과 개발 과정에서 필요한 여러 협업 기능을 지원합니다. 피그마가 주목받는 이유 피그마의 장점은 다른 디자인 툴과 비교해..

개요 웹(Web)을 구성하는 HTML, CSS, JS의 이해와 학습은 단순히 기술을 배우는 것으로 그치지 않고 웹과 모바일 그리고 IT 전반의 과거, 현재, 미래를 이해하는 데 많은 도움을 줍니다. 그리고 실무적으로 Product를 보다 구조적인 관점에서 볼 수 있는 능력을 키울 수 있습니다. 특히 Product 개발과 관련해 밀접하게 협업하는 기획, 디자인, 기술 영업 등의 직군에서 많은 도움이 될 수 있습니다. 이런 이유로 여러 기업에서 비전공자에게 개발 경험을 요구하는 경우가 상당히 많아졌습니다. HTML, CSS를 학습하기 전에 필요한 지식을 최대한 정리했습니다. HTML, CSS, JavaScript HTML(Hyper Text Markup Language)은 페이지에 제목, 문단, 표, 이미지..

마크다운(Markdown)은 간단하고 가독성이 좋은 텍스트 기반의 마크업 언어입니다. 주로 웹에서 글을 작성하거나 서식을 지정하는 데 사용됩니다. 마크다운은 HTML보다 쉽게 작성할 수 있으며, 다양한 플랫폼에서 지원되어 널리 사용됩니다. 제목(Header) # 제목 1 (가장 큰 제목) ## 제목 2 ### 제목 3 #### 제목 4 ##### 제목 5 ###### 제목 6 (가장 작은 제목) 제목 1 (가장 큰 제목) 제목 2 제목 3 제목 4 제목 5 제목 6 (가장 작은 제목) 줄바꿈(Line Breaks) 줄바꿈하고 싶은 곳에 스페이스 2개 넣는다.동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 강조(Emphasis) *이탤릭체* 혹은 _이탤릭체_ **볼드체** 혹은 __볼드체_..

html에 다른 html Snippet 포함하기 header와 footer를 분리해 한 곳에서 관리하고 싶을 때 include를 사용한다. https://www.w3schools.com/howto/howto_html_include.asp html 분리하기 header와 footer 등 페이지의 공통 부분을 각각의 html 파일로 분리한다. outline 폴더 내 > header.html 파일 생성 header outline 폴더 내 footer.html 파일 생성 footer html 파일 내 include 포함 index.html 파일 내 include.js 파일 생성 js > include.js 파일 생성 후 연결 // include.js window.addEventListener('load&..

폴더 경로 css outline (전체 레이아웃) goods (상품) board (게시판) event (이벤트) member (회원) mypage (마이 페이지) order (주문) popup (팝업창 페이지) proc (기타 페이지) service (고객 서비스)