기분좋음

ColorSpace (색상 팔레트) https://mycolor.space/ ColorSpace - Color Palettes Generator and Color Gradient Tool Just Enter a Color! And Generate nice Color Palettes mycolor.space 색상 팔레트 -웹사이트에서 주로 사용할 색상 하나를 골라서 헥스 색상값을 입력하면 어울리는 색상 팔레트들을 알려준다. ex) FF6863 알려준 값을 root로 설정해 사용할 수있다. (포인트 줄 때 사용) :root { --color-white: #ffffff; --color-black: #000000; --color-primary: #ff6863; --color-pink: #DD5A87; } CSS..

JAVA기반 웹개발자 양성훈련과정 취업분야/ 취업 전망 프론트엔드 개발자 사용자에게 보여지는 시각적인 부분을 다룸. 백엔드 개발자 서버구축, DB등에 대한 부분을 다룸. 서버관리자 서버관리업무로 보안과 서버안정에 대한 부분 담당 풀스택 개발자 프론트엔드+백엔드 SI(시스템 통합)system integrator 70프로차지 파견직 프로젝트를 수주받아 다양한 프로그램을 개발하는 업종 -처음 입사시에는 능력을 키우기에는 좋으나 연차가 쌓일수록 비슷한 프로그래밍을 할 경우 복사하는 경우가 잇어 나태해질수 잇다 SM(시스템 통합관리)system management 솔루션 및 소프트웨어를 유지보수 및 업데이트 하는 업종 -유지보수 업무위주, 다만 기존의 프로그래밍이 엉망인 경우, 일이 힘들어짐 웹솔루션 업체 SI+..

자바스크립트 공식사이트 가장 많이 사용 (MDN중요)- 예제도 많고 최신정보 업데이트 빠름 https://developer.mozilla.org/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org https://www.ecma-international.org/ Home - Ecma International Ecma International is an industry association dedicated to the standardiz..

순수 CSS사용 flexbox- 71% grid -8% CSS전처리기 -Post processors (간편하고 빠르게 스타일링 가능) Sass (사용유저 多) - 반복문 가능(if, for, each) - 중첩기능 (Total, &:pseudo-class, &:class) PostCSS 만족도 多 Less 개발하기 편한 문법으로 작성하다가 사용자에게 배포 전 순수CSS로 변환해준다 CSS Frameworks bootstrap 사용유저 多 (절대 다수) Tailwind CSS 만족도 多 CSS-in-JS (자바스크립트에서 CSS 적용하는 것) -빈도↓(많이 사용 안함) Style Components 사용유저 多 vanila-extract 만족도 多 출처 -https://www.youtube.com/watc..

REST API 기계와 기계가 규격화된 방식으로 인터넷, 웹을 이용해서 통신할수 있도록 돕는 통신규칙 API - 컴퓨터의 기능을 실행시키는 방법 ex) 자바스크립트의 document.write()도 하나의 api REST API - 다른사람의 컴퓨터의 기능을 실행시키는 방법 RESOURCE id title body 1 rest ＊＊＊ 2 ajax ＊＊＊ 3 json ＊＊＊ topic(하나의 글) Collection (http://example.com/topics)-복수형 여러개의 데이터 Element (http://example.com/topics/1) or (http://example.com/topics/rest) 하나 하나의 데이터 RESOURCE 정보 가공방법 http를 이용하기 때문에 http메소..

MS사에서 만든 Text Editor (간단한 텍스트 에디터) visual studio 단축키보기(왼쪽아래 설정에 바로가기키) command + shift + p, ctrl + shift + p (명령 팔레트 실행) 1. Material Theme 비쥬얼 스튜디오 테마 색상 설정 2.Material Icon Theme icon 모양이 바뀜(가시성이 좋아짐) 3.Prettier 코드 포맷팅 해줌 설치후 → (cmd 에서 settings)설정 → save 검색후 format On Save(자동으로 포맷 가능하게 체크) prettier: tabwidth 2로 설정(현업에서) 가독성 좋게 하기 위해 prettier quote 에서 javascript Quote Style 을 single로 바꿔준다. Type S..

웹브라우저의 렌더링 과정 웹페이지에 접속시 웹사이트가 그려지는 과정 웹브라우저에는 두개의 엔진이 존재 렌더링 엔진 -RENDERING ENGINE (HTML로 입력받아 해석한 후 표준 출력 장치(모니터)로 출력해준다. 자바스크립트 엔진 -JavaScript engine(자바스크립트 코드를 해석한 후 기능을 작동시켜준다) 일반적으로 사용하는 크롬(Chrome)은 크롬의 블링크(Blink) 렌더링 엔진을 사용한다. 렌더링 엔진은 HTML (문서의 텍스트 내용, 이미지, 파일) CSS (문서의 디자인이나 그림, 파일 배치 내용) JavaScript (HTML의 구조변형, 기능) 를 읽어준다

TypeIt 웹사이트 포인트 문구 애니메이션 효과(타이핑효과) https://www.typeitjs.com/ TypeIt The most versatile JavaScript typewriter effect library on the planet. www.typeitjs.com 특징: 용량 4kb도 안됨 의존성 필요x TypeIt → Demos메뉴 see it 에서 활용 방법 확인 사용방법 TypeIt → Documentation메뉴 → Vanilla Javascript(외부 라이브러리나 프레임워크를 사용하지 않은 순수 자바스크립트) 사용방법 html파일에 위에 스크립트 주소를 복사해서 head태그 안에 붙여주고 ScrollOut 스크롤링시 애니메이션 효과 https://scroll-out.github...

프로젝트 과정 깃허브 협업 -브랜치 생성 master (최종 프로젝트 완성본) development ( 프론트엔드와 백엔드 병합용) frontend backend (소스트리 사용)

Git git의 장점 전 세계 가장 많은 사용자 보유 Git을 사용한 소스 공유 사이트 github존재 엄청난 숫자의 튜토리얼과 오픈소스들 git 공식 문서 • Http://git-scm.com/book/ko/v2 • Git 공식 배포 사이트 http://git-scm.com/ 에서서 git 최신 버전 다운로드 cmd 기본 명령어 • cls : 화면을 깨끗하게 하기 위한 명령 • c:, d:, … : 드라이브를 이동하기 위한 명령 • dir : 현재 디렉토리의 파일을 보기 위한 명령 • /p : 페이지 단위로 보기 • /w : 가로 보기 • md : 디렉토리 생성 명령(mkdir) • rd : 디렉토리 삭제 명령(rmdir) • del : 파일 삭제 명령 • rem: 파일 이름 변경 명령(rename) ..