전체 글
프론트엔드 개발자가 되고 싶은 20대 대학생의 이야기
Git 1. Git - 컴퓨터 파일 변경사항을 추적 또는 사용자들 간 파일 작업을 조율하기 위해 스냅샷 스트림 기반의 분산 버전 관리 시스템 2. Git의 기능 - 깃이 제공하는 핵심 기능은 크게 3가지로 나뉨 - 버전 관리(Version Control) - 백업(Backup) - 협업(Collaboration) 3. 버전 관리 - 1,000개가 넘는 파일을 수정할 때 마다 다른 이름으로 저장한다면, 기억하기 쉽지 않음 - 그렇기 때문에 깃은 문서를 수정할 때마다 언제 어떻게 변경했는지 기록되는 기능이 존재 4. 백업 - 문제가 발생하여 자료가 유실되지 않기 위해 현재 컴퓨터에 있는 자료들을 깃의 원격 저장소에 복제하는 기능이 존재 5. 협업 - 여러 사람이 함께 일할 경우, 원격 저장소를 이용해 원활하..
미디어 쿼리 1. 미디어 쿼리 - 웹 페이지가 표시되는 장치에 반응하도록 하여 반응형 웹을 구현할 수 있는데, 이때 사용하는 것이 미디어 쿼리임 - 미디어 쿼리는 두 가지 방법으로 사용 가능 - @media 규칙 - media 속성 2. @media 규칙을 이용해 미디어 쿼리 사용하기 Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit........... - max-width: 800px는 화면 너비가 800이 되기 전까지의 설정 (최대 너비) - min-width: 800px는 화면 너비가 800이 될 때부터의 설정 (최소 너비) 3. media 속성을 ..
● flex-direction 속성 - 아이템의 배치 방향을 결정 - flex-direction: row | row-reserve | column | column-reverse | initial | inherit - row : 가로로 정렬 (기본값) - row-reserve : 가로로 오른쪽에서 정렬 - column : 세로로 정렬 - column-reverse : 세로로 밑에서부터 정렬 - initial : 기본값으로 설정 - inherit : 부모 요소로부터 상속받음 ● flex-wrap 속성 - 아이템이 컨테이너의 공간을 넘칠 경우, 아이템의 줄바꿈을 어떻게 할 것이지 결정하는 속성 - flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit - n..
flex 관련 속성 정리 3 1. flex-basis 속성 - 아이템들의 기본 크기를 설정 (flex-direction이 row 일 경우 너비, column 일 경우 높이를 조절함) - 0, %, px, rem 등으로 설정 가능 ※ flex-basis에서 설정한 너비가 이미 넘은 아이템일 경우, 축소되지 않음 → 그럴 경우, word-wrap: break-word를 적용하여, 설정한 너비만큼 줄어들고 남은 텍스트는 줄바꿈됨 AAA BBB CCC .container { border: 1px solid black; width: 500px; height: 200px; display: flex; font-size: 2rem; font-weight: bold; } .container > div { margin: ..
flex 관련 속성 정리 2 1. justify-content 속성 - 메인축 방향으로 아이템들을 정렬 ※ justify와 align - justify : 메인축(가로 방향)으로 정렬 - align : 수직축(세로 방향)으로 정렬 - flex-start (기본값) : 아이템들을 시작점으로 정렬 (flex-direction이 column일 경우, 위로 정렬) A B C .container { border: 1px solid black; width: 400px; height: 100px; display: flex; font-size: 2rem; font-weight: bold; justify-content: flex-start; } .container > div { width: 50px; height: 50..
flex 관련 속성 정리 1 1. display: flex 속성 - 레이아웃을 배치하는데 사용 - 속성에 따라 각각의 아이템들이 어떠한 형태로 배치되는지 설정 - display: flex를 적용하면 블록 형태로 배치된 div가 가로 방향으로 배치 red blue green /* display: flex를 적용할 경우, 세로로 배치되었던 아이템들이 가로로 배치됨 */ .container {display: flex;} .box { width: 100px; margin: 10px; font-size: 2rem; font-weight: bold; } .red {background-color: red;} .blue {background-color: blue;} .green {background-color: gre..
Console 1. console.clear( ); - 출력창을 초기화함 2. console.log( ); - ( )안에 들어가는 값을 출력함
Ⅲ. 반복문 1. 반복문 - 자바스크립트에는 반복문이 존재 - for문, while문, do while문이 있음 2. for 문 - 범위의 횟수 동안 특정 문장을 여러 번 반복하여 실행하는 반복문 ※ 변수 선언 시, const를 쓰면 값 변경이 불가하여 에러 발생 console.clear(); // (시작; 조건; 증가) for (i = 0; i
Ⅰ. 조건문 1. 조건문 - 자바스크립트의 제어문에는 if 조건문과 switch 조건문이 있음 2. if 문의 구조 - if 문의 조건식 결과가 True라면 명령문을 실행 - 조건식의 결과가 False라면 명령문을 건너 뜀 console.clear(); var a = 10; // a가 5보다 크므로 조건문이 True임 if (a > 5) { console.log('참'); // 참 } 3. if ~ else 문의 구조 - if 문의 조건식 결과가 True라면 명령문을 실행 - if 문의 조건식 결과가 False라면 if문 안에 명령문을 실행하지 않고 else문 안에 명령문을 실행 console.clear(); var a = 3; // a가 5보다 작으므로 조건문이 False임 if (a > 5) { co..
연산자 1. 연산자 - 자바스크립트는 연산자를 활용할 수 있음 2. 연산자 종류 기호 설명 사 칙 연 산 + 더하기 - 빼기 * 곱하기 / 나누기 논 리 연 산 A == B A와 B가 같음 A != B A와 B가 다름 A > B A가 B보다 큼 (초과) A = B A가 B보다 크거나 같음 (이상) A
자료형 1. 자료형 - 자바스크립트에는 여러가지의 자료형이 존재 - Boolean 타입 - Number 타입 - String 타입 - Null 타입 - Undefined - Symbol 타입 - Object (객체) 2. Boolean 타입 - True(참) or False(거짓) 둘 중 하나의 값을 갖는 논리적인 요소 var a = true; 3. Number 타입 - -(253-1) ~ (253-1) 사이의 숫자값을 갖는 요소 (이 범위 밖은 안전하지 않은 숫자) var a = 10; 4. String 타입 - 텍스트 데이터를 나타낼 경우에 사용 - 작은 따옴표(' ')안에 입력함 var a = 'Hello World'; 5. Null 타입 - 빈 값을 뜻함 - 이 경우, 타입은 존재하지만 값은 없다..
Ⅱ. 스코프 (Scope) 1. 스코프 - 유효한 참조 범위 - 자바스크립트에는 함수 레벨 스코프(ex : var)와 블록 레벨 스코프(ex : let, const)가 존재 2. 함수 레벨 스코프 (Function-level scope) - var 문은 함수 내부에 선언된 변수만 지역변수로 한정함 ※ 지역변수 : 프로그램 내 변수가 선언된 영역만 접근 가능한 영역으로 취하는 변수 - 나머지 변수는 전부 전역변수로 간주 ※ 전역변수 : 프로그램 내 모든 모듈들을 변수 선언의 유효한 영역으로 취하는 변수 - 다음 예제를 보면 abc 함수 내부에서 선언된 a 변수는 함수 내부에서만 참조 가능 - 외부에서 참조할 경우, 오류가 발생 console.clear(); // 콘솔창 초기화 function abc() {..
Ⅰ. 변수 및 변수선언 1. 변수 - 하나의 값을 저장하기 위해 확보한 메모리 공간 2. 변수명명의 규칙 - 식별자는 알파벳 대소문자, 숫자, 달러기호($), 밑줄(_)을 사용 - 숫자를 첫 글자로 사용할 수 없음 - 변수 명은 첫 번째 글자는 소문자, 다음 단어의 첫 번째 글자는 대문자로 표기 (ex : randomDice) - 예약어(if, for, var 등)은 변수명으로 사용할 수 없음 - 들여쓰기는 스페이스 2번 - 문자열은 작은 따옴표로 통일 3. 변수 선언 - 변수 선언에는 크게 3가지 방법이 존재 - var - let - const 4. var - var 문에서 변수에 초기값을 지정함 - 변수는 값이 설정될 때 까지 undefined 값을 가짐 - 중복선언 가능 - 재할당 가능 (변수 선언..