Posis

이번 포스팅에서는 라이브러리 없이 JavaScript 코드만을 사용해서 이미지 슬라이드를 구현해 보겠습니다. 구현하는 방법은 무수히 많기 때문에 이 사람은 이런 식으로 구현했구나라고 참고하시면 될 것 같습니다. HTML Next Prev Bootstrap에 container만 이용했습니다. CSS .slide { overflow: hidden; position: relative; } .slide-container { width: 300vw; height: 400px; display: flex; transition: all 0.8s; } .slide-box { width: 100vw; } .slide-box:nth-of-type(1) { background: center/cover no-repeat url..

변수(variable)란? 변수는 간단하게 데이터를 저장하는 곳입니다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말합니다. 사용하는 이유 흔히 이름, 나이와 같은 데이터를 저장할 수도 있고 DOM의 셀렉터로 찾은 HTML 요소도 저장할 수 있습니다. document.querySelector와 같은 셀렉터를 탐색하는 명령어를 매번 사용하면 사용할 때마다 DOM을 탐색해야 하지만 여러 번 사용하게 될 때 변수에 저장해두면 한 번만 탐색하고 저장한 데이터를 바로바로 사용하니 JavaScript의 동작속도를 조금 더 빠르게 할 수 있습니다. var 함수(function) 레벨 스코프입니다. function test() { var age = 22..

JavaScript의 탄생 1995년 넷스케이프라는 브라우저에 웹페이지를 보조적인 기능을 수행하기 위해 개발한 언어이다. 처음에는 모카(Mocha)로 명명되었고 그 해 9월에 라이브스크립트(LiveScript)로 이름이 바뀌었다가 12월에 JavaScript로 최종 명명되었다. ECMAScript JavaScript의 초기는 크로스 브라우징 이슈가 계속 발생하게 되면서 웹개발을 하기가 무척 어려웠던 시기입니다. 이를 해결하기 위해 ECMA 인터내셔널에 JavaScript의 표준화를 요청하게 됩니다. 그 이후에 1997년에 ECMAScript v1이 완성되었고 정식 명칭을 JavaScript에서 ECMAScript로 명명하게 됩니다. ECMAScript는 매년 새로운 버전을 공개하였고 2009년에 HTML..

Fontawesome이란 많은 개발자들이 웹 개발을 할 때 사용하는 무료 폰트 아이콘을 제공해주는 사이트입니다. 무료 폰트 사이트이지만 유료버전을 결제해서 더 많은 아이콘들도 이용할 수 있는 유용한 사이트입니다. 이 fontawesome을 HTML, CSS, JS로 웹 개발할 때는 HTML head 태그 안에 link로 불러와서 i 태그를 이용해 매우 간단하게 사용할 수 있다. 이처럼 매우 간단하게 사용할 수 있다. 하지만 Vue.js에서 fontawesome을 사용하기 위해서는 npm을 이용해서 필요한 라이브러리들을 설치해 주어야 합니다. Vue.js 프로젝트에서 Fontawesome 사용하기 아마 이 글을 읽는다면 Vue.js는 이미 사용하고 있는 상황일 거라 생각하고 진행하겠습니다. NPM(노드 패..

SCSS는 프로그래밍 요소를 섞은 CSS이므로 다양한 문법이 존재합니다. 오늘은 그중 하나인 Mixin에 대해서 알아보겠습니다. 변수는 하나의 값만 넣어서 저장하지만 Mixin은 내가 원하는 스타일 여러 가지를 한 번에 저장할 수 있습니다. 기본 이처럼 mixin을 함수처럼 작성하고 스타일에 적용시킬 때는 @include 뒤에 작성한 mixin 이름을 쓰면 됩니다. /* CSS */ .box { position: absolute; left: 50%; top: 50%; translate: -50%, -50%; } 이를 활용해 자주 사용하는 설정들을 많이 작성해둔다면 웹 개발할 때 코드 작성 시간을 단축할 수 있습니다. 파라미터 추가하기 mixin은 프로그래밍 언어의 함수와 흡사하게 생겼습니다. 이말은 즉슨..

변수는 프로그래밍언어를 한번이라도 공부했다면 어떤것인지 아실겁니다. 간단하게 설명하자면 데이터를 저장해두는 메모리공간을 의미합니다. CSS에서 변수를 전역에서 사용하기 위해서는 :root라는 가상클래스안에서 --를 붙인 변수를 만들어 사용합니다. [예시] /* CSS */ :root { --fontColor: red; } p { color: var(--fontColor); } SCSS에서는 더욱 간단하게 사용할 수 있습니다. 변수명 앞에 $를 붙이고 데이터를 넣어주면 끝입니다. /* CSS */ p { color: red; } SCSS로 작성하고 컴파일하면 변수는 사라지고 color 속성에 변수에 저장한 데이터가 들어가게됩니다. 산술연산 CSS에서도 값을 계산해서 사이즈를 지정할 수 있습니다. calc를..