본문 바로가기

전체 글

 (166)
VS Code 단축키 & 공백 변경 단축키 Windows Mac 사이드 바 Ctrl + B Cmd + B 빠른 열기 Ctrl + P Cmd + P 모든 명령 표시 Ctrl + Shift + P Cmd + Shift + P 편집기 닫기 Ctrl + W Cmd + W 찾기(검색) Ctrl + F Cmd + F 바꾸기(대체) Ctrl + H Cmd + Alt(Opt) + F 줄 위로 이동 Alt + Up Alt(Opt) + Up 줄 아래로 이동 Alt + Down Alt(Opt) + Down 아래에 줄 복사 Alt + Shift + Down Alt(Opt) + Shift + Down 위에 줄 복사 Alt + Shift + Up Alt(Opt) + Shift + Up 들여쓰기 Tab Tab 내어쓰기 Shift + Tab Shift + Tab 이전..
Visual Studio Code html 작업 시 필수 확장기능 1. Beautify Extension 코드들이 들쑥날쑥할 때 Beautify 확장기능을 통해 한꺼번에 깔끔하게 정리할 수 있음 2. Auto Rename Tag Extension 태그 변경시 자동으로 뒷부분 태그까지 변경해주는 확장기능 3. Live Server Extension 작업한 html파일을 브라우저에 출력하는 확장기능
오픈 소스 라이선스 오픈 소스 라이선스 오픈소스란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를, 누구나 접근해서 열람할 수 있도록 공개하는 것. OpenSource.org 무료로 사용할 수 있는 라이선스들 1. Apache License 아파치 소프트웨어 재단에서 자체 소프트웨어에 적요앟기 위해 만든 라이선스, 개인적/상업적 이용, 배포, 수정, 특허 신청이 가능. 2. MIT License 매사추세츠공과대학(MIT)에서 소프트웨어 학생들을 위해 개발한 라이선스, 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없음. 3. BSD License BSD(Berkeley Software Distribution)는 버클리 캘리포니아대학에서 개발한 라이선스, MIT와 동일 ..
특수 문자 `: 백틱(Backtick), 그레이브(Grave) ~: 틸드(Tilde), 물결 표시 !: 엑스클러메이션(Exclamation mark), 느낌표 @: 앳(At sign), 골뱅이 #: 샵(Sharp), 넘버(Number sign), 우물 정 $: 달러(Dollar sign) %: 퍼센트(Percent sign) ^: 캐럿(Caret) &: 엠퍼센드(Ampersand) *: 에스터리스크(Asterisk), 별표 -: 하이폰(Hyphen), 대시(Dash), 마이너스 _: 언더스코어(Underscore), 로대시(Low dash), 밑줄 =: 이퀄(Equals sign), 동등 ": 쿼테이션(Quotation mark), 큰 따옴표 ': 아포스트로피(Apostrophe), 작은 따옴표 :: 콜론(Colo..
웹에서 사용하는 이미지 웹에서 사용할 수 있는 이미지들을 소개합니다. 비트맵(Bitmap)은 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지라고도 부름. 벡터(Vector)은 점, 선 면의 위치(좌표), 색상등 수학적 정보의 형태(Shape)로 이루어진 이미지입니다. 장점 단점 예시 비트맵 정교하고 다양한 색상을 자연스럽게 표현 확대/축소 시 계단 현상, 품질 저하 jpg, png 파일 벡터 확대/축소에서 자유로움, 용량 변화가 없음 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움 svg파일 아이콘, 로고 같은 단순구조인 이미지들을 Material Design이라고도 부릅니다. Material Design(머터리얼 디자인)은 고품질 디지털 경험을 구축할 수 있도록 Google에서 만든 디자인 시스템(방..
프론트엔드의 시작 사용자가 링크를 타고 들어와서 첫눈에 보이는 화면에 담긴 것을 프론트엔드 개발의 영역입니다. 데이터보호등 보안상 복잡한 것들, 사용자가 눈으로 확인 안 되는 것이 흔히 백엔드 개발 영역입니다. 둘 다 같이 작업할 수 있으신 분은 풀스택 개발자라고 불리죠. 프론트엔드에서 사용한 3가지 큰 줄기부터 소개합니다. 1. HTML(Hyper Text Markup Language) 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당. Hyper Text는 참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근(이동)할 수 있는 텍스트를 말합니다. 일반적으로 알고 있을 링크 버튼(텍스트)을 의미합니다. 2. CSS(Cascading Style Sheets) 실제 화면에 표시되는 방법(색상, 크기, ..

티스토리툴바