분류 전체보기
.gitIgnore 파일이란, 이름 그대로 git 이 ignore, 무시할 파일들을 저장해놓은 파일이다. 언뜻 보기에는 모두 다 저장해놓는데 편하지 않나? 싶겠지만, 우리가 git에 업로드를 할 때에는 나만 볼 수 있는 프라이빗 설정 뿐만 아니라 누구나 다 볼 수 있는 퍼블릭 설정도 있기 때문에 보안을 신경써야 할 부분도 있을 것이다. 뿐만 아니라 git으로 프로젝트를 관리할 때, 그 프로젝트 안의 특정파일들은 Git으로 관리할 필요가 없는 경우도 있을 것이다. 예를들면 Java 컴파일된(.class) 파일 Server 폴더 등 .gitignore 설정방법 설정방법은 간단하다. "현재" .gitingore 파일 경로를 기준으로 절대 경로를 입력해주면 된다. 따라서 하나의 .gitingore 파일에 모든 ..
1. Git Git 을 처음 접하는 경우, 팀 프로젝트 시에 사용하는 협업의 도구로 생각할 수 있지만 그건 Git 이라는 도구를 사용하는 한 가지 방법의 불가하다. Git 의 정확한 개념은 버전 관리를 위한 프로그램, 즉 형상관리를 위한 프로그램이다. 2. 용어 정리 1) 깃의 흐름도 - WorkSpace : 실제로 작업이 이루어지고 있는 공간. git과 연결된 프로젝트 상의 IDE 라고 볼 수도 있다. 해당 단계에서는 Git 내부적으로 삭제하거나 수정할 수는 없는 상태이다. - Staging Area(index) : Git으로 등록하기 위해 거쳐가는 통로, 이자 임시 저장소라고 볼 수 있다. -repositpory : 실질적으로 파일들이 저장될 저장소 --- local repository : 개인 PC..
1. React 서버 실행하기 1) 앞선 과정에서 생성한 react의 프로젝트 폴더를 폴더 채 열어줍니다. 그러면 아래와 같은 화면이 나옵니다 그러면 우선 메뉴바의 터미널을 클릭하고 새 터미널을 열어주세요. 2) 열린 터미널 창에서 npm start 를 입력 한 뒤 엔터 버튼을 눌러주세요. 3) 정상적으로 실행되었다면, 다음과 같은 화면이 열리게 됩니다. 리액트의 기본 포트번호는 3000 이기 때문에 주소창에는 localhost:3000 으로 입력된 것이 보입니다. 2. Hello world 출력해보기 1) 왼쪽 사이드바에서 src 폴더 안에 있는 App.js 를 열어주세요. 열어보면 이미 여러 값들이 있겠지만, 필요한 부분만 남긴 뒤에 우리가 출력하길 원하는 hello world 를 입력해봅시다. 2)..
우선 react 를 사용하기 위해서는 Node.js 의 설치가 필요하다. 1. Node.js 공식 홈페이지 접속 Node.js 공식 홈페이지 LTS 버전 다운로드 및 설치 2. Node.js 가 정상적으로 설치되었는지 확인해줍시다. cmd 창을 연 뒤 node -v 를 입력해주세요 3. react 프로젝트를 설치하는 방법에도 2가지 방법이 있다. 3-1-1. react 프로젝트 파일을 저장할 임의의 폴더를 생성. 3-1-2. Shift+마우스 오른쪽 클릭 후 여기에 powerShell 창 열기 클릭. 3-1-3. npx create-react-app 만들고자하는 프로젝트명을 입력해줍니다. create-react-app 이라는 명령어는 node.js 에서 제공하는 리액트 프로젝트를 생성하는 키워드입니다. ..
정규표현식 (REGEX/REGEXP : rugular expresstion) : 특정 패턴을 가진 문자열을 찾거나 또는 찾아서 변경(치환)할 때 사용되는 형식 언어. 정규표현식을 이용하면 문자열에 대해 특정 패턴 조건 검사 시 또는 치환 시 복잡한 조건을 제시할 필요 없이 간단하게 처리 가능해진다. 필요성 : 찾으려는 문자열 또는 바꾸려는 문자열의 규칙이 복잡하다면, 정규표현식을 사용하였을 때 코드가 매우 간결해진다. 정규표현식 작성 방법 종류 메소드명 (정규식:regExp /문자열:str) 반환형 결과 정규표현식에서 제공하는 메소드 (정규식.메소드명(문자열) 형태 regExp.test(str); boolean 문자열 안 정규식 값의 유무 regExp.exec(str); string 문자열에서 정규식 값..
1. 목록의 종류 ul > li 순서없는 목록 o 목록1 o 목록2 ol > li 순서 있는 목록 1. 목록1 2, 목록2 dl > dt / dd 들여쓰기를 사용하는 목록 목록1 목록1이란~ 목록2 목록2란~ 2. 목록 관련 스타일 스타일 이름 내용 표현자 종류 표현법 결과 list-style-type 불릿기호 변경 스타일 1) 순서 없는 목록(ul) list-style-type : disc 꽉 찬 원 모양 list-style-type : circle 빈 원 모양 list-style-type : square 사각 모양 none 없음 2) 순서 있는 목록(ol) list-style-type : decimal 1/2/3.... list-style-type : decimal-lending-zero 01/02/..
1. 목록의 종류 ul > li 순서없는 목록 o 목록1 o 목록2 ol > li 순서 있는 목록 1. 목록1 2, 목록2 dl > dt / dd 들여쓰기를 사용하는 목록 목록1 목록1이란~ 목록2 목록2란~ 2. 목록 관련 스타일 스타일 이름 내용 표현자 종류 표현법 결과 list-style-type 불릿기호 변경 스타일 1) 순서 없는 목록(ul) list-style-type : disc 꽉 찬 원 모양 list-style-type : circle 빈 원 모양 list-style-type : square 사각 모양 none 없음 2) 순서 있는 목록(ol) list-style-type : decimal 1/2/3.... list-style-type : decimal-lending-zero 01/02/..
color 텍스트의 색상을 지정 색상명/16진수/ rgb(x,x,x)/ rgba(x,x,x,x)/ hsl(x,x,x)/ hsla(x,x,x,x) text- decoration 텍스트에 줄을 긋거나 없앨 때 사용 none underline 텍스트 영역 아래에 줄 긋기 overline 텍스트 영역 위에 줄 긋기 line-through 텍스트 영역 중간에 줄 긋기 text-transform 영문 텍스트의 대소문자를 변환 시 사용 uppercase 전부 대문자 lowercase 전부 소문자 capitalize 영문자의 첫글자만 대문자 text-align 텍스트를 정렬할 때 사용 left 왼쪽정렬 justify 양쪽정렬 right 오른쪽 정렬 center 가운데정렬 text-shadow 텍스트에 그림자 효과를 줄..
1. font-family 글꼴을 지정할 때 사용 글꼴명; 2. font-size 글꼴의 크기를 변경할 때 사용 px 픽셀 고정 단위로 설정 em 배수. 기본 크기의 몇 배일지 % 기본 크기의 몇 %로 증가시킬지 3. font-weight 글꼴의 굵기를 표현할 때 사용 normal 원래 굵기 bold 굵은 굵기로 변경 bolder 더 굵은 굵기로 변경 lighter 가는 굵기로 변경 4. font-variant 텍스트문구를 작은 대문자로 변경할 때 사용 small-caps 5. font-style 텍스트문구를 기울이고자 할 때 사용 normal 기본 italic 기울임 글꼴 oblique 원래의 글자를 기울인 글꼴
1. 표현법 결과값에 대한 조건 비교할 범위 대상 선택자[속성=속성값] { } 일치 선택자[속성~=속성값] { } 포함 단어 기준 선택자[속성|=속성값] { } 시작 -로 구분된 단어기준 선택자[속성^=속성값] { } 시작 일반문자열기준 선택자[속성$=속성값] { } 끝 일반문자열기준 선택자[속성*=속성값] { } 포함 일반문자열기준 2. 자손 후손 바로 하위인 요소들 (시작태그와 종료태그 사이에 있는 것) 하위 요소들 전부 (자식 포함) ">" 로 구분 띄어쓰기로 구분 a>b { 스타일속성명 : 값; 스타일속성명 : 값; ... } a b { 스타일속성명 : 값; 스타일속성명 : 값; ... } ** div 태그 안에 div 태그 안에 ul 태그 안에 li 태그 안에 span 태그를 찾는다고 한다면, ..
