2023/09 28

node.js, package.json, npm swiper, npm parcel 설치 및 설정

node.jsnode.js 란?Chrome V8 Javascript 엔진으로 빌드된 JavaScript 런타임으로자바스크립트를 브라우저 밖에서도 사용할 수 있게 해주는 런타임 환경이다.Chrome V8 Javascript 엔진 : 자바스크립트의 문법을 해석하고 동작시켜줄 수 있는 엔진JavaScript 런타임 : 자바스크립트 언어가 동작하는 환경쉽게 말해 node.js를 사용해 브라우저 및 컴퓨터를 제어할 수 있다.- 프론트앤드가 node.js를 알아야 하는 이유컴퓨터에서 제어하기 위한 용도는 아니지만 웹페이지를 개발하기 위한 도움을 받는 용도로 사용한다.html, css, js 만으로 웹사이트 개발을 할 순 있지만 그 과정이 약간 비효율적이다.개발을 도와주는 여러가지 모듈들을 도움을 받으면 효율적으로 ..

Front/Node.js 2023.09.27

swiper 슬라이드 사용법, 반응형 option, loop 정리

#swiper #slide ​홈페이지에 빠지지 않는 슬라이드의 대모, 모든 이들이 사용하는 슬라이드인 swiper 슬라이드 에 대해 알아보자 ​ 아래 사이즈에 가면 사용방법과 데모를 볼 수 있다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com ​ 1. Getting Started With Swiper ​ CDN HTML Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide ..

카테고리 없음 2023.09.23

README Header, Badge 활용 GitHub Landing Page 꾸미기

#github #readme #깃포트폴리오 #깃포폴 GitHub에 프로젝트를 올리고 README.md에 프로젝트에 대한 내용을 정리해둔다. 정리할 때 예쁘게 정리하면 더 좋을거 같은데... README도 예쁘게 꾸미는 것이 가능하다. 1. 리포지토리 만들기 리포지토리 이름은 본인의 아이디와 동일하게 만들면 ✨special✨ repository를 만들 수 있다. Repository name : 본인 아이디 Public 체크 Add a README file 체크 대표사진 삭제 사진 설명을 입력하세요. README 꾸미기 위해 방금 만든 리포지토리의 README 파일을 수정한다. 사진 삭제 사진 설명을 입력하세요. 1. README Header https://github.com/kyechan99/capsule..

TOOL/Github 2023.09.20

웹디자인기능사 실기 - 기본 셋팅, 와이어프레임 제작

웹디자인기능사 샘플소스 https://github.com/oodada/exam-webdesign 0. HTML 코딩 시 중요(★★★★★) 체크포인트 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 하며, HTML 유효성검사 (W3C validator)에서 오류(‘ERROR’)가 없도록 코딩하여야 한다. ※ HTML 유효성검사 서비스는 시험시 제공하지 않는다.(인터넷 사용불가) 주어진 자료(수험자 제공파일)를 활용하여 HTML 페이지를 제작한다. 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 한다. (시작시 html:5 emmet 사용) CSS, JS는 별도의 파일로 제작하여 링크로 연결한다. 상호작용이 필요한 모든 콘텐츠(로고, 메뉴, Slide, 공지사항, 갤러리 등)는 임시링크 (예:#)..

웹디자인기능사 실기 - 이미지 생성, vscode 설치, chrome 설치, 파일 생성

웹디자인기능사 실기&필기 샘플파일 https://github.com/oodada/exam-webdesign 웹디자인기능사 실기 소스 다운받기 1. VScode 설치하기 html, css, js를 메모장에서 작업해도 되지만 더 쉽게 작업할 수 있도록 도와주는 프로그램을 이용하는 것이 좋습니다. 큐넷 공개문제 자료실 을 확인해보면 Visual Studio Code를 사용한다고 적혀 있으니 VScode를 설치해 작업합니다. VScode 다운로드 VScode 설치 가이드 2. Chrome 설치하기 실무에선 Internet Explorer 대신 Chrome을 사용합니다. Chrome을 설치해 테스트 합니다. Chrome 다운로드 3. 폴더 만들기 A-1 예제를 실습해볼 예정입니다. 윈도우 탐색기를 열어 "A-1-..

웹디자인기능사 실기문제 - 공개문제 분석(요구사항, 와이어프레임, 준수사항)

실기자료 https://github.com/oodada/exam-webdesign 웹디자인기능사 공개문제 바로가기 위 링크 웹디자인기능사 공개문제를 다운 받으신 후 공개문제 위주로 실기연습하시면 됩니다. 20개 유형 중 한 개의 문제가 출제되니 모든 문제를 풀어보시고 시험보시면 됩니다. 실기 A-1 요구사항 1. 시험시간 내에 웹페이지를 제작 후 5MB 용량이 초과되지 않게 저장 후 제출한다. 작업 완료 후 폴더를 오른쪽 클릭 후 속성을 확인하시면 작업 폴더의 용량을 확인할 수 있습니다. 2. 웹페이지 코딩은 HTML5 기준 웹 표준을 준수한다. html 기본 셋팅시 html5를 기준으로 합니다. w3schools html 가이드 This is a Heading This is a paragraph. 3...

웹디자인기능사 필기&실기자료

웹디자인기능사 필기, 실기 자료 github https://github.com/oodada/exam-webdesign 필기자료 아래 링크의 웹디자인기능사 기출문제 위주로 문제를 외워가시면 충분히 합격 가능합니다. 기능사 문제이기에 문제를 많이 변형하지도 않습니다. 기출문제에서 순서만 바꿔서 나옵니다. 달달 외워가세요~ 웹디자인기능사 기출문제 바로가기 실기자료 큐넷에 가면 출제기준, 공개문제 등의 자료를 얻을 수 있고 공개자료 20개를 연습해간다면 충분히 합격가능하다. https://www.q-net.or.kr/crf005.do?id=crf00505&jmCd=7798 출제기준 웹디자인기능사 출제기준(2022.1.1.~2024.12.31.).hwp 출제기준 다운로드 [공개]23년_웹디자인기능사.zip 공개문..

웹디자인기능사 시험정보

웹디자인기능사 시험정보 큐넷 시험정보 바로가기 취득방법 시 행 처 : 한국산업인력공단 시험과목 필기 : 1.디자인일반 2.인터넷일반 3. 웹그래픽디자인 실기 : 웹디자인 실무작업 검정방법 필기 : 객관식 4지 택일형 60문항(60분) 실기 : 작업형(4시간 정도) 활용소프트웨어 합격기준 : 100점 만점에 60점 이상 득점자. 시험일정 시험 일정 확인 후 필기 합격 후 실기 접수가 가능합니다. 2022년 일정은 아직 나오지 않았습니다. 시험정보 웹디자인기능사 출제기준(2022.1.1.~2024.12.31.) 2022년부터 웹디자인기능사의 출제기준이 변경되었습니다. 위 파일을 다운 받아 변경된 출제기준 확인 바랍니다. 공개문제 [공개문제]웹디자인기능사 ※ 실제 출제 되는 문제는 공개한 문제에서 일부 변경될..

github, tistory 도메인 연결하기

GitHub github의 블로그에 나의 https://oddodd.io/ 도메인을 연결하려고 한다. 도메인 연결 전 가비아 등 도메인 구매 업체에서 DNS 설정 변경 - DNS 관리 https://dns.gabia.com/ [홈 > DNS 관리 > DNS 설정 > 레코드 수정 > 레코드 추가] CNAME의 값/위치를 입력할 때는 마직막에 .(점)을 입력한다. 타입 호스트 값/위 TTL CNAME @ 깃헙아이디.github.io. 600 CNAME www 깃헙아이디.github.io. 600 A @ 185.199.108.153 1800 A @ 185.199.109.153 1800 A @ 185.199.110.153 1800 A @ 185.199.111.153 1800 - 도메인 연결 아이디.github...

TOOL/Github 2023.09.12

함수(Function) - javascript 기본

함수(Function)1. 함수 선언하기함수 선언문과 표현식의 차이점함수 선언문은 호이스팅이 일어나지만, 함수 표현식은 호이스팅이 일어나지 않는다.// 함수 선언문 (Declaration)function helloA() {}// 함수 표현식 (Expression)const helloB = function () {};helloA(); // 함수 호출helloB(); // 함수 호출2. 호이스팅이란?함수 선언문이 코드의 최상단으로 끌어올려지는 것을 말한다.함수 선언문은 선언하기 전에 호출해도 정상적으로 실행된다.hello1();function hello1() { console.log('hello1'); // hello1}하지만, 함수 표현식은 호이스팅이 일어나지 않기 때문에, 함수 표현식을 선언하기 전..

Front/JavaScript 2023.09.11
티스토리 친구하기