라쿤의 끄적끄적

CSS05 배치 position 속성 요소의 위치 지정 기준 기본값 : static (기준 없음) 가능한 값 relative (요소 자신이 있었던 위치를 기준) 주의) 배치전 자리는 시각적으로 비어 있음 (자리를 차지함) absolute (위치 상 부모 요소를 기준) 이전에 있던 자리를 차지 하지 않음 부모를 특정하게 지정하고 싶으면 position: relative를 통해 기준을 정해줘야 함 absolute를 사용한 요소 기준으로 position: relative를 사용한 조상요소를 처음으로 만날때 그 조상요소가 기준이 됨 (모두 찾지 못하면 최종적으론 뷰포트 기준이 됨) fixed (뷰포트를 기준으로 고정되어 있음) sticky (스크롤 영역 기준) 같이 사용하는 속성 (위치 값을 위한 속성) top..

CSS04 크기 계산(box-sizing) padding과 border의 값은 요소의 크기를 키우기 때문에 수정시 계산하기 어려운 문제가 발생함 box-sizing 요소의 크기 계산 기준을 지정 기본값 : content-box (요소의 내용으로 크기 계산) 지정할 수 있는 값 : border-box (요소의 내용 + padding + border로 크기 계산) 넘침 제어(overflow) 요소의 크기 이상으로 내용이 넘쳤을때(자식이 부모의 크기를 넘치는 경우), 보여짐을 제어하는 단축 속성 넘치는 주체가 아닌 부모 요소에 사용 기본값 : visible (넘친 내용을 삐져나오게 그대로 보여줌) 지정 가능한 값 hidden : 넘친 내용을 잘라냄 auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성..

CSS03 CSS 속성(Properties) HTML 속성 : Attributes CSS 속성 : Properties JS 속성 : Properties 박스 모델 width , height 요소의 가로/세로 너비 기본 값 (property가 선언되지 않은 경우) auto : 브라우저가 너비를 계산 인라인 요소(auto 값) 콘텐츠 크기 만큼 width, height가 맞춰짐 (예. span 태그, 인라인 요소에서 특정 너비 값은 무시됨) 블록 요소(auto 값) width는 부모 요소의 크기 만큼 자동으로 맞춰짐 height는 내부의 콘텐츠 크기만큼 자동으로 맞춰짐 (예. div 태그) 지정 할 수 있는 값 px, em, vw 등 단위로 지정 max-width, max-height 요소가 커질 수 있는 ..

CSS02 가상 요소 선택자 가상요소 선택자의 경우 내용을 삽입하기 때문에 무조건 가상요소를 사용할 때는 CSS content 속성을 최소한 '' 빈값으로 해야할 정도로 무조건 사용해야 한다. 이름 기호 설명 Before abc::before 선택자 abc요소의 내부 앞에 내용(content)을 삽입 (추가 되는 요소는 인라인 요소임) After abc::after 선택자 abc요소의 내부 뒤에 내용(content)을 삽입 (추가 되는 요소는 인라인 요소임) Tom&Jerry .box { width: 100px; height: 100px; background-color: orange; } .box::after, .box::before { content: ""; display: block; ..

CSS01 CSS syntax 선택자{속성: 값; 속성: 값} 선택자 : 스타일을 적용할 대상 속성 : 스타일의 종료 (예.color) 값 : 스타일의 값 (예.blue) 속성과 값은 한줄에 하나의 속성과 값만 들어가게 하고 indent를 사용해서 쓴다. CSS 선언 방식 내장 방식 : html내부에 style 태그 내부에 내용을 작성하는 방식 인라인 방식 : html의 요소에서 style의 전역속성을 통해 직접 스타일을 작성하는 방식 최우선 순위라서 나중에 덮어쓰며 수정이 불가능 하다. 수정 시 악영향을 미침 링크 방식 : 로 외부 CSS 문서를 가져와서 연결하는 방식 (보통 링크방식 사용) 병렬 방식, 한번에 가져와서 연결하고 빨리 해석되는 CSS를 먼저 연결 import 방식 : 최초 연결은 링크방..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

SCSS 02 Sass(SCSS) 완전 정복! by HEROPY blog SCSS 공식 사이트 mixin JS의 함수처럼 코드를 재활용 하고자 하는 경우, 변수와 다르게 여러개의 코드들을 @mixin 이름을 통해서 선언하고, @include 이름을 통해서 사용 가능함 또한 함수처럼 매개변수를 지정하여 인수도 넣을 수 있음 인수와 매개변수는 순서가 있음 (정확한 위치에 넣어야 정상적으로 인식함) 매개변수의 기본 값을 넣어주는 경우 매개변수명: 기본값으로 선언부에서 매개변수를 만들어 주면 기본값을 사용할 수 있음 기본값을 넣어주고 건너 띄어 순서를 맞추기 위해서는 키워드 인수 를 사용해야함 매개변수명: 값 을 인자로 넣으면 해당 매개변수로 정확하게 인수가 들어감 (순서 상관 없이) 주의) 함수 개념은 따로 ..

SCSS 01 Sass(SCSS) 완전 정복! by HEROPY blog SCSS 공식 사이트 CSS style 전처리 패키지로서 CSS에서 개발상 불편함을 해소시키고자 여러 기능들을 제공하는 패키지 SCSS vs Sass SCSS 와 Sass 형태의 두가지 문법이 존재함, SCSS는 기존의 CSS와 호환이 잘 되고 비슷함 둘의 문법 차이는 SCSS는 세미콜론, 중괄호를 사용하고 Sass는 인덴트로 범위를 인지하기 때문에 깔끔해 보이긴 하다. Sass의 문제점을 보완하기 위해서 만든 문법이 SCSS라서 SCSS의 문법을 익히는게 좋다. (기능은 똑같다.) 둘의 엄청큰 차이점은, Mixins에서 나타남 표기 SCSS Sass 범위 {} 인덴트 명령종료 ; 없음 mixin @mixin = include @i..

JavaScript06 JavaScript : 표기법 dash-case(kebab-case) 단어와 단어 사이를 대쉬를 사용(띄어쓰기를 대신해서) HTML , CSS에서 많이 사용 snake_case 단어와 단어 사이를 언더바를 사용 HTML, CSS에서 많이 사용 camelCase 첫글자를 소문자로 하고 그 다음 단어의 첫글자 마다 대문자로 표기 JS에서 많이 사용 PascalCase 첫글자도 대문자로 하고 그 다음 단어의 첫글자 마다 대문자로 표기 JS에서 많이 사용(JS에서도 특수한 경우) Zero-based Numbering 0 기반 번호 매기기 특수한 경우를 제외하고 0부터 숫자를 시작 요일의 경우 0을 일요일로 표시하여 커짐 JavaScript : 주석 ctrl + / // 한 줄 메모 /* ..

JavaScript05 Javascript : Storage key - value 형태의 데이터 저장소 Local Storage : Document 출처의 Storage객체에 접근, 도메인 주소(사이트)에 종속되어 저장 데이터 만료되지 않음, 반영구적 보존 Session Storage : 페이지 세션이 끝날 때(페이지를 닫을 때 사라 짐) localStorage 데이터 활용 setItem(key: string, value: string) 문자 데이터만 받기 때문에 문자데이터가 아닌 경우는 JSON을 통해 stringify를 통해서 문자로 저장하고 활용시에는 parse로 살려서 활용 getItem(key: string) removeItem(key: string) (이렇게 하지 않는 이상 지워지지 않음) c..

JavaScript04 Javascript : 데이터의 불변성, 가변성, 메모리 사용 데이터 불변성 (Immutability) 원시 데이터 (Primitive) : String, Number, Boolean, undefined, null 데이터 불변성 : 메모리에 쓰인 데이터가 변하지 않음, 수정되지 않음 데이터 모양이 다르면 다른 것이다. 새로운 모양의 데이터 일 경우 새로운 메모리를 사용하고 같은 모양의 경우에는 같은 메모리를 사용 (메모리 위치와 데이터 모양의 일치) 원시형 데이터의 메모리 사용 let a = 1; let b = 4; // -------------------- Memory -------------------------- // |1: 1 |2: 4 |3: |4: // ---------..

JavaScript03 Javascript : 데이터 String: "", '', `` Number Boolean: true, false undefined null Array: [] Object: {} String MDN : String String.prototype.method 들은 언제든지 사용 가능함 리터럴 형태에 바로 붙여 사용도 가능, 변수에 담아서도 가능하고 length String 객체가 가지고 있는 property로서 해당 instance의 string index의 개수를 표현 const str01 = "0123"; console.log(str01.length); // 4 console.log("01 23".length); // 5 (공백도 문자임)indexOf indexOf..

JavaScript02 Javascript : 함수 함수 선언 function sum(x, y) { console.log(`process : ${x + y}`); // 함수가 호출되면 항상 실행하는 부분 return x + y; // 함수 호출 결과로 변수에 담을 수 있는 곳 }매개 변수와 인수 인수 : 함수를 사용하면서 사용되어지는 진짜 값 sum(1, 3) -> 1, 3 매개변수 : 들어 오는 인수를 어떻게 사용할지 함수 로직을 표현함에 있어서 인수와 로직을 연결하는 변수 sum(x, y) -> x, y 함수의 사용 변수에 담아서 사용하는 경우 반복되는 값을 연산하는 경우 함수 실행 값을 담아서 사용하는 것이 효율적임 // 함수 호출 : process 실행 & 변수에 return 값 저장 const ..

JavaScript01 Node.js Node.js : Chrome V8 JS엔진으로 빌드된 JS 런타임 런타임 : 프로그래밍 언어가 동작하는 환경 환경종류 : 컴퓨터 or 브라우저 프론트 작업할 때 도와주는 것이 필요한데 이를 NodeJS를 통해서 가능 HTML, CSS, JS -> Browser에서만 동작 프론트 작업할 때 도와줄 수 있는 툴을 컴퓨터 환경에서 즉, NodeJS에서 활용할 수 있음 이를 browser에서 결과를 보여줄려면 HTML, CSS, JS로 변환 작업이 필요하고, 변환작업을 NodeJS(컴퓨터) 에서 가능 Node.js 환경설정 NVM (Node Version Manager) window는 NVM - Windows 설치 유의적 버전 : 3단계의 .을 통해 버전을 나타내는 표기법..

TypeScript07 Generic 어떤 함수에서 들어오는 매개변수에 대한 type과 return type에 대한 일정한 규칙 및 관계를 같게 하기 위해서 사용 계속 똑같은 로직이지만 들어오는 type이 변하는 경우 type에 따른 return type을 나타낼때, type에 따른 함수를 개별적으로 반복적으로 만드는 것은 비효율적이다. 그래서 type을 변수로 사용하여 들어오는 type에 따라 동적으로 사용하고 싶을 경우 문제의 시작 같은 로직이지만 들어오는 type 만 다른 경우 -> 중복의 증가 function helloString(message: string): string { return message; } function helloNumber(message: number): number { r..