본문 바로가기
반응형

분류 전체보기706

[SCSS] 7-1 Architecture (7-1 패턴 / 폴더 구조) sass 프로젝트를 구성하는 인기가 많고 효과적인 모듈식 방법 중 하나가 7-1 패턴이다. 실제로 sass 가이드라인에서도 이 7-1 패턴을 다루고 있다. 7-1이 의미하는 게 뭐냐면 7개의 폴더와 하나의 파일을 의미한다. 즉, 7개의 폴더에 속한 파일들을 단 하나의 파일을 통해서 사용한다고 생각하면 된다. 그래도 역시 무슨 말인지 모르겠으니, 7-1 패턴의 구조를 알아보자. Project Structured in 7-1 Architecture pattern sass/ | |– abstracts/ | |– _variables.scss # Sass Variables | |– _mixins.scss # Sass Mixins | |– vendors/ | |– _bootstrap.scss # Bootstrap .. 2022. 6. 13.
[CSS] 사용자 지정 변수(Variable) 사용하기 CSS에서도 사용자 지정 변수를 사용할 수 있는데, 이는 JS 같은 곳과 마찬가지로 문서 전반적으로 재사용할 임의의 값을 변수에 담아 사용하는 것과 동일하다. CSS에서 변수를 사용하는것도 처음부터 가능했던 건 아니라, CSS preprocessor(전처리기)의 등장으로 변수를 많이들 사용하다 보니까 이게 CSS 표준으로 들어오게 된 것이다. 아마 추후에는 전처리기에서 사용하는 기능들이 하나씩 표준으로 들어오지 않을까 생각된다. 이제 예제를 통해 사용법을 하나씩 알아보자. 1. 기본 사용법 사용자 지정 변수는 두 개의 붙임표(--)로 시작하는 속성의 이름과 함께, 유효한 CSS 값이라면 아무거나 그 값으로 지정해 선언한다. Here is id div-01 Here is class div-03 Here i.. 2022. 6. 11.
[TypeScript] Type VS Interface TypeScript에서 Type Alias와 Interface의 각각의 특징을 통해 공통점과 차이점에 대해 알아보자. 1. 선언 type PositionType = { x: number; y: number; }; interface PositionInterface { x: number; y: number; } // object const obj1: PositionType = { x: 10, y: 1, }; const obj2: PositionInterface = { x: 20, y: 2, }; 일반적으로 객체 타입을 선언하는 거에 있어서 둘이 동일한 방법으로 사용할 수 있다. 선언 부분에서의 둘의 차이점은 인터페이스는 당연하겠지만 객체에서만 사용이 가능하다는 점과, Index Signature의 사용 유무.. 2022. 6. 8.
[TypeScript] 인터페이스(interface) (ft. Intersection) javascript에는 지원하지 않던 인터페이스에 대해 알아보자. Typescript에서 인터페이스는 타입 체크를 한다거나, 클래스에 사용한다거나 등의 역할을 가지고 있다. 몇 가지 특징과 사용법에 대해 알아보자. 1. 타입 체크용 인터페이스 여기서의 인터페이스는 typescipt에서 제공하는 type 이랑 동일한 역할을 한다. interface Point { x: number; y: number; } function printCoord(pt: Point) { console.log("The coordinate's x value is " + pt.x); console.log("The coordinate's y value is " + pt.y); } let point: Point = { x: 100, y: .. 2022. 6. 8.
[TypeScript] 클래스(Class) 기존에 모던 javascript에서도 클래스가 있다는 것을 알고 있을 것이다. (모른다면 아래 게시글을 보고 어느 정도 익혀 오자) [ES6+] 클래스(Class)문법에 대하여 [ES6+] 클래스(Class)문법에 대하여 ES6부터는 자바스크립트 또한 Class문법을 사용할 수 있게 되었다. 자바스크립트에서의 Class는 함수라는 것을 알아두고 클래스(Class)문법에 대해 하나씩 알아가보자. 1. 클래스(Class) 정의 1-1. 클래 mine-it-record.tistory.com 이번 게시글에서는 Typescript가 지원하는 클래스는 역시 기반이 Javascript이기 때문에 Typescript에서 만의 고유한 확장 기능에 대해서만 정리하고자 한다. 1. 클래스 정의와 접근제한자 우선 접근 제한자.. 2022. 6. 8.
[CSS] 스크롤바 스타일 커스텀하기 CSS를 통해 스크롤바 스타일을 커스텀하는 방법에 대해 알아보자. 스크롤바 스타일에 대한 웹표준은 존재하지 않으며 webkit 브라우저에 한해서 커스텀이 가능하며, 스크롤을 커스텀하는데 주로 아래 3가지를 사용한다. ::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 그 외에도 몇가지가 존재하는데 자세한것은 본문 하단에 참고 사이트를 확인해보고, 이제 저 3가지를 활용한 예제 코드를 살펴보자. /* 스크롤바 설정*/ .box2::-webkit-scrollbar{ width: 6px; } /* 스크롤바 막대 설정*/ .box2::-.. 2022. 6. 8.
[JavaScript] element.(after/before) - 특정 element 앞뒤로 요소 추가 및 이동하기 after(), before() 메서드는 말 그대로 특정 element의 앞뒤로 요소를 추가하거나 이동시켜주는 메서드이다. 이전 게시글에서 element.insertAdjacentElement() 메서드에 대해 정리했었는데, [JavaScript] element.insertAdjacentElement() - 특정 element를 기준으로 노드 삽입하기 및 이동하기 (ft. insertAd insertAdjacentElement() 메서드는 특정 element를 기준으로 앞뒤, 자식으로의 처음, 마지막 위치로 노드 삽입을 하게 도와주는 메서드이다. ▷ 구문 targetElement.insertAdjacentElement(position, element) po.. mine-it-record.tistory.c.. 2022. 6. 7.
[JavaScript] element.insertAdjacentElement() - 특정 element를 기준으로 노드 삽입하기 및 이동하기 (ft. insertAdjacentHTML, insertAdjacentText) insertAdjacentElement() 메서드는 특정 element를 기준으로 앞뒤, 자식으로의 처음, 마지막 위치로 노드 삽입 또는 이동을 하게 도와주는 메서드이다. ▷ 구문 targetElement.insertAdjacentElement(position, element) position: 상대적인 위치를 나타내는 문자열로, 다음 문자열 중 하나만 사용 가능하다.(대소문자 구분을 하지 않는다.) beforebegin: targetElement의 앞 afterbegin: targetElement 자식 요소의 첫 번째 위치 beforeend: targetElement 자식요소의 마지막 위치 afterend: targetElement의 뒤 element: 특정 elemet를 기준으로 poisiton에 알.. 2022. 6. 7.
[TypeScript] 타입추론(Type Inference)과 타입표명(Type Assertion) 타입 추론과 타입 표명에 대해 알아보자. (영어의 뜻을 해석하다보니 타입 표명, 타입 단언 등 뭐 어쨌든 다 동일한 뜻이다.) Type Inference 타입 추론이란 TypeScript에서 명시적인 타입 표기가 없을 때 타입 정보를 제공하기 위해 사용되는 것이다. 그냥 쉽게 말하면 자동으로 타입을 결정해주는 것이라고 보면 된다. let x = 3; // let x: number let y = "4"; // let y: string 이런 식으로 javascript처럼 사용하면 typescript는 자동적으로 타입을 추론하여 알맞은 타입을 결정한다. 그리고 여러 타입을 동시에 사용할 경우 최적 공통 타입을 알아서 계산해준다. let x = [0, 1, null]; // let x: (number | nul.. 2022. 6. 2.
반응형
TOP

티스토리툴바