예방이의 개발일기

웹페이지가 구축되기 위한 과정 1. 기획 2. 시안작업 : 시각적인 웹페이지를 구현하기 위한 용어 3. 개발작업(코딩) : 웹페이지 구현과 관련된 용어 4. 서버구축(완료) : 웹페이지 연결 및 구축과 관련된 용어 1. 시각적인 웹페이지를 구현하기 위한 용어 - 랜딩페이지 : 광고에 쓰이는 개념, 서비스 및 광고 등을 목적으로 특별 제작된 웹페이지 단일 웹페이지인 경우가 큼 - 반응형 웹 : 하나의 웹페이지로 모든 기기에 호환되는 웹디자인 형태 - 원페이지 : 광고에 쓰이는 개념, 서비스 및 광고 등을 목적으로 특별 제작된 페이지 웹페이지의 메인화면에서 브라우저에 꽉차게 레이아웃을 보여주는 형태로 스크롤링을 통해 컨텐츠를 배치하는 스타일 - 그리드 : 웹페이지 레아아웃 형성을 위한 셀의 분배, 가이드 라..

인텔리제이에 접속하니까 위와 같은 에러가 뜰 때 해결방법 일단 터미널에 들어가서 git의 위치를 알아본다 where git 그리고 경고에 적힌 명령어 그대로 실행 ㄱㄱ sudo xcodebuild - license 마지막 설명대로 agree라고 타이핑치고 엔터!!! 그리고 인텔리 제이 설정 들어가서 "git"으로 검색해서 /usr/bin/git 이라고 입력 후 Test 버튼 클릭하면 된다. 만약 위에 설정이 제대로 이뤄지지 않았으면 이미지처럼 빨간색 경고글이 뜬다. 제대로 설치됐으면 Test버튼 클릭시 git 버전이 잘뜬다.

SCSS 공식 사이트 Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com 1. Extensions > Live Sass Compiler 설치 2. vscode -> setting.json 3. 설정값 입력 "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "/css/", "savePathReplacementPairs": null } ], - format ..

Netlify 배포시 Fail 해결방법 일단 잘 build 되고 배포될 줄 알았다... Deploy Settings 클릭 Build Command 부분을 수정해줄 것이다. CI= yarn build

작성시 높은 순서대로 작성 낮은 해상도의 PC, 태블릿 가로 : ~1024px 테블릿 가로 : 768px ~ 1023px 모바일 가로, 태블릿 : 480px ~ 767px 모바일 : ~ 480px /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { ... } /* 테블릿 세로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { ... } /* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/ @media all and (min-width:480px) and (max-width:7..

Media Query : 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 미디어 쿼리 사용법 /* 미디어쿼리 구문은 대소문자 구별 X */ @media [only 또는 not] [meida type] [and 또는 콤마(,)] (미디어 특성 = 조건문) { CSS 작성... } 논리연산자 and : 모든 쿼리가 참이여야 적용 not : 모든 쿼리가 거짓이여야 적용 not tv : tv를 제외한 모든 미디어 유형에만 적용 only : 미디어쿼리를 지원하는 브라우저에서만 적용 IE 6,7,8 버전에 미디어쿼리 미지원 -> 그래서 only 키워드 작성안함 [media type] screen (화면대상) tv (티비) print (인쇄물) all (모든 디바이스 대상) projection, handheld..

코드를 이쁘게 꾸며서 이미지로 저장할 수 있는 사이트들 모음 블로그 쓸 때 은근 유용했다. 1. SNIPPET SHOT Snippet Shot: Beautiful code screenshots www.snippetshot.com 2. CodeZen 3. Ray.so 4. Carbon 5. 그 외 추천 사이트들 https://ourcodeworld.com/articles/read/1451/top-7-best-online-tools-to-create-elegant-code-screenshots Top 7: Best Online Tools To Create Elegant Code Screenshots See our review of 7 of the Best Online Tools To Create Elegan..

yarn berry를 쓰면서 아래와 같은 에러가 났을 때 해결방법 1. 터미널에 아래 명령어 입력한다. yarn add -D eslint-config-react-app 2. 젤 상위 폴더에 .yarnrc.yml 파일을 생성한다. 3. 해당 파일에 아래 내용을 띄어쓰기 주의해서 작성해준다. (파일명만 바꾸면 됨 맨앞에 점 붙이기) packageExtensions: react-scripts@*: peerDependencies: eslint-config-react-app: '*' 4. 위에 과정 후 계속 에러가 난다면 터미널에 아래 명령어를 차례대로 입력해준다. yarn cache clean yarn install yarn start

react-range-slider-input 라이브러리를 사용해서 range bar를 만들어 봤다. (툴팁이 있는 버전으로) react-range-slider-input는 별도로 툴팁나오는 옵션이 없어서 ul태그를 이용해서 만들어줬다. https://www.npmjs.com/package/react-range-slider-input react-range-slider-input React component wrapper for range-slider-input. Latest version: 3.0.7, last published: 4 months ago. Start using react-range-slider-input in your project by running `npm i react-range-sl..