위에 debug.addIndicators.min.js 파일은 스크롤매직을 구현한 화면에 인디케이터를 표시하여,
스크롤매직 라이브러리 웹퍼블리싱 마크업을 좀 더 편안하게 할 수 있도록 도와줍니다.
ScrollMagic 동작 원리 문법
ScrollMagic 동작 원리를 이해할 수 있다면, 문법 작성 또한 어렵지 않을 것입니다.
코드를 설명하기 전에, 동작원리를 쉽게 풀어서 설명하자면 다음과 같습니다.
1. ScrollMagic 애니메이션을 실행하기 위한 Controller 를 생성합니다.
2.GSAP(TweenMax) 애니메이션 오브젝트를 생성합니다.
3.ScrollMagic 상세 옵션 설정을 위한 Scene 오브젝트를 생성합니다.
4.GSAP(TweenMax) 애니메이션 오브젝트(2번)를 Scene 오브젝트(3번)에 추가 설정합니다.
5.Controller(1번)을 Scene 오브젝트(3번)에 추가 설정합니다.
ScrollMagic 동작 원리 맛보기 예제
다음 포스팅에 ScrollMagic 본격적인 옵션 설명과 예제를 다루기에 앞서서, 위에서 설명한 동작 원리로 간단하게 만든 ScrollMagic 예제는 아래와 같습니다.
ScrollMagic Script
$(function(){
var controller = new ScrollMagic.Controller(); // 1. ScrollMagic 컨트롤러 생성
var tween = TweenMax.to('#animate', 0.5, { //2. animation object 생성
backgroundColor: "#6431ff",
scale: 2.5,
rotation: 360,
x: 600,
y: 500
});
var scene = new ScrollMagic.Scene({ //3. Scene object 생성
triggerElement: '#trigger1', //스크롤 애니메이션 시작 지점 설정
duration: '100%', //애니메이션 재생 시간 '100%'지정하면 화면 높이에 따라 유동적으로 end위치가 정해짐
})
.setTween(tween) //4. 2번을 3번에 추가
.addTo(controller) //5. 1번(controller)을 3번에 추가
.addIndicators();
});
ScrollMagic Result + HTML + CSS + ScrollMagic Script
var galleryTop = new Swiper('.gallery-top', {
pagination: { //페이징 사용자 설정
el: ".pagination_bullet", //페이징 태그 클래스 설정
type : 'bullets',
// Bullet Numbering 설정
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
}
});
Swiper 슬라이더를 동작시키기 위해서는 JavaScript에서 Swiper를 초기화하고 필요한 기능에 대해서는 Swiper 메서드 옵션을 사용해야 합니다.
여기까지 작업을 완료하면 Main Swiper 와 Thumbnail Swiper 연동되지 않고 각각 동작하는 것을 확인할 수 있습니다.
사용해야 할 Swiper 옵션설명 및 사용방법은 아래와 같습니다.
✔spaceBetween:슬라이드 간격 설정
✔pagination: 페이징 사용자 설정(type : bullets, fraction, progressbar)
✔loop:슬라이드 반복 여부 설정
✔loopedSlides: loop 값이 true 일 경우 파라미터 duplicate 개수 설정
✔navigation:네비게이션 사용자 설정(이전, 다음 버튼 설정)
✔slidesPerView:한번에 보여지는 슬라이드 개수 설정
✔centeredSlides:슬라이드 중앙 배치 여부 설정
✔touchRatio:드래그 비율 설정(기본값: 1, 값을 0으로 변경할 경우 드래그 불가능)
✔slideToClickedSlide: 슬라이드가 여러개 나열되어 있을 경우, 클릭시 해당 슬라이드 위치로 이동 여부 설정
<script>
var swiperTopNum = $('.gallery-top').find('.swiper-slide');
var swiperSubNum = $('.gallery-thumbs').find('.gallery-thumbs');
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10, //슬라이드 간격
pagination: { //페이징 사용자 설정
el: ".swiper-pagination", //페이징 태그 클래스 설정
clickable: true, //버튼 클릭 여부
type : 'bullets', //페이징 타입 설정(종류: bullets, fraction, progressbar)
// Bullet Numbering 설정
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
loop: true, //슬라이드 반복
loopedSlides: swiperTopNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 0, //슬라이드 간격
navigation: { //네비게이션 사용자 설정
nextEl: '.swiper-button-next', //다음 버튼 클래스 설정
prevEl: '.swiper-button-prev', //이전 버튼 클래스 설정
},
centeredSlides: true, //슬라이드 중앙 배치
slidesPerView: 'auto', //한번에 보여지는 슬라이드 개수(auto 가능)
touchRatio: 0.2, //드래그 비율 설정(기본값: 1, 기본값을 0으로 설정할 경우 드래그 불가능)
slideToClickedSlide: true, //슬라이드가 여러개 나열되어 있을 경우, 클릭 시 해당 슬라이드 위치로 이동
loop: true, //슬라이드 반복
loopedSlides: swiperSubNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
});
</script>
Swiper API - controller
각각 동작하는 Main Swiper 와 Thumbnail Swiper를 서로 연동하여 제어하려면, 어떻게 해야 할까요?
Main Swiper는 Thumbnail Swiper에 연결하고, Thumbnail Swiper는 Main Swiper에 연결하고 제어해야 합니다.
이를 위해서 Swiper의 controller 모듈의 control의 파라미터 옵션을 사용한다면 Main Swiper 와 Thumbnail Swiper를 연결하여 제어할 수 있습니다.
JavaScript와 Swiper API의 controller를 결합한 스크립트 전체 코드는 아래와 같습니다.
var swiperTopNum = $('.gallery-top').find('.swiper-slide');
var swiperSubNum = $('.gallery-thumbs').find('.gallery-thumbs');
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10, //슬라이드 간격
pagination: { //페이징 사용자 설정
el: ".swiper-pagination", //페이징 태그 클래스 설정
clickable: true, //버튼 클릭 여부
type : 'bullets', //페이징 타입 설정(종류: bullets, fraction, progressbar)
// Bullet Numbering 설정
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
loop: true, //슬라이드 반복
loopedSlides: swiperTopNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 0, //슬라이드 간격
navigation: { //네비게이션 사용자 설정
nextEl: '.swiper-button-next', //다음 버튼 클래스 설정
prevEl: '.swiper-button-prev', //이전 버튼 클래스 설정
},
centeredSlides: true, //슬라이드 중앙 배치
slidesPerView: 'auto', //한번에 보여지는 슬라이드 개수(auto 가능)
touchRatio: 0.2, //드래그 비율 설정(기본값: 1, 기본값을 0으로 설정할 경우 드래그 불가능)
slideToClickedSlide: true, //슬라이드가 여러개 나열되어 있을 경우, 클릭 시 해당 슬라이드 위치로 이동
loop: true, //슬라이드 반복
loopedSlides: swiperSubNum.length //loop 시 파라미터 duplicate 개수 - 정적으로 숫자 4 표현 가능
});
//Main Swiper와 Thumbnail Swiper가 연동제어 서로를 제어
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
Swiper 구현 화면 및 예제 다운로드
위에 'Swiper 슬라이더를 2개로 연동 및 제어하기' 설명에 대한 실제 구현한 화면과 포스팅한 예제를 만들어 다운로드 받아서 공부하실 수 있도록 하였습니다.
다운로드 예제는 구현된 화면은 같으나 Swiper 옵션인 loopedslides 적용한 방법과 적용하지 않은 방법 2개로 만들었습니다.
swiper.css 에서 .gallery-thumbs 클래스 내용중 overflow: hidden; 속성을 주석처리 하고 보시면,
Swiper 옵션인 loopedslide 에 대해서 위에서 설명드렸지만 적용된 여부의 차이점을 확인하실 수 있으리라 생각됩니다.
@import 문법을 사용하면 외부에 모듈화 해서 분리해 놓은 Sass 파일을 불러와 병합하여 CSS로 컴파일할 수 있습니다.
또한 불러와 병합한 파일에 정의된 모든 변수 또는 믹스인을 주 파일에서 사용할 수 있습니다.
CSS @import는 사용할 때마다 http 호출을 매번 하기때문에 속도 저하를 가져올 수 있지만,
Sass @import는 CSS로 컴파일하여 바로 처리하기 때문에 http 호출이 필요하지 않아 속도 저하 문제를 발생시키지 않습니다.
기본 문법은 아래와 같습니다.
@import '파일경로/파일명'
@import 'font.scss'
@import 'font' //scss 파일 확장자명 생략가능
@import 실무에서 유용하게 사용하는 Tip
첫 번째, 변수와 @mixin은 따로 모듈화 분리하여 Sass 파일로 만들어서 @import 합니다.
이때 파일명 앞에 '_'를 붙이면 CSS로 컴파일될 때 '_'로 시작하는 파일명의 파일은 컴파일되지 않습니다.
예를 들어 _mixin.scss, _header.scss 파일명을 만들고, 주 파일에서 @import 하면 2개(_mixin.scss, _header.scss)의 파일 내용은 주 파일에 적용되지만 _mixin.scss, _header.scss 파일은 css로 컴파일 되지 않기 때문에 관리하기가 편리합니다.
두 번째, 하나의 @import로 여러 파일을 불러올 수 있습니다.
파일은 ',' 로 구분합니다.
@import '_mixin', 'header';
세 번째, 파일 확장자를 지정할 필요가 없습니다.
Sass에서는 당연히 파일명.scss 를 불러온다고 가정하기 때문입니다.
그러나 CSS 파일을 불러와야 할 경우에는 확장자명을 꼭 지정해 주어야 합니다.
마치며...
Sass는 현재의 포스팅을 마지막으로 기능과 사용법에 대해 모두 설명드렸습니다.
틈틈이 작성하여 3주 동안 6편의 내용으로 포스팅했습니다.
웹퍼블리싱 마크업 프로젝트를 마무리한 것 마냥 시원섭섭하네요!!ㅎㅎ
제가 작성한 Sass 관련 6편의 포스팅 내용을 정독하셨다면, 앞으로 Sass를 사용하시는데 큰 문제가 없을 것이라 생각됩니다.
/* 블록 주석은
컴파일 스타일에 따라 CSS에 따라 다르게 표현되며,
'neseted', 'expnaded' 컴파일되는 주석이 동일합니다.
*/
.btn {
color: #000;
&.active {
color:coral;
}
}
CSS 'nested', 'expanded' 주석 처리 컴파일 결과 코드 입니다.
/* 블록 주석은
컴파일 스타일에 따라 CSS에 따라 다르게 표현되며,
'neseted', 'expnaded' 컴파일되는 주석이 동일합니다.
*/
.btn {
color: #000;
}
.btn.active {
color: coral;
}
SASS 'compact' 주석 처리 문법 코드 입니다.
/* 블록 주석은
컴파일 스타일에 따라 CSS에 따라 다르게 표현되며,
'compact' 주석의 컴파일된 CSS 파일입니다.
*/
.btn {
color: #000;
&.active {
color:coral;
}
}
CSS 'compact' 주석 처리 컴파일 결과 코드 입니다.
/* 블록 주석은 컴파일 스타일에 따라 CSS에 따라 다르게 표현되며, 'compact' 주석의 컴파일된 CSS 파일입니다.
*/
.btn { color: #000; }
.btn.active { color: coral; }
SASS 'compressed' 주석 처리 문법 코드 입니다.
/* 블록 주석은
컴파일 스타일에 따라 CSS에 따라 다르게 표현되며,
'compressed' 주석은 CSS 파일에서 보여지지 않습니다.
*/
/*! 'compressed' 주석을 컴파일된 CSS 파일에에서 내용을 보고 싶다면,
!를 사용하면 됩니다.
*/
.btn {
color: #000;
&.active {
color:coral;
}
}
CSS 'compressed' 주석 처리 컴파일 결과 코드 입니다.
/*! 'compressed' 주석을 컴파일된 CSS 파일에에서 내용을 보고 싶다면, !를 사용하면 됩니다.
*/.btn{color:#000}.btn.active{color:coral}
주석에 변수 넣어서 사용하기
Sass의 Sass Script는 자바스크립트처럼 변수를 사용할 수 있습니다.
jQuery처럼 '$'를 넣어 변수를 설정할 수 있습니다.
Sass Script 변수에 대해서는 다음번에 자세하게 다루어 보겠습니다.
SASS '주석에 변수 넣기' 문법 코드 입니다.
$author_n1: 'KKS';
$author_n2: 'LSJ';
$author_n3: 'YSW';
/* Malgun Communication Web Standard Team Author #{$author_n1}, #{$author_n2}, #{$author_n3} */
CSS '주석에 변수 넣기' 컴파일 결과 코드 입니다.
/* Malgun Communication Web Standard Team Author KKS, LSJ, YSW */
연산자(Operations)
Sass는 연산 기능을 지원하고 있습니다.
연산자의 종류는 사칙 연산자, 비교 연산자, 논리 연산자가 있습니다.
사칙 연산
일반적으로 Sass에서 사칙 연산은 절대값인 px 단위로 연산을 하지만, 모바일 또는 반응형 웹을 웹퍼블리싱 할 때에는 상대값인 %, em, vw, vh 단위를 하기도 합니다.
Sass의 사전전 의미는 종속형 시트(CSS)로 해석 및 컴파일되는 스크립트 언어입니다. SassScript는 그 자체로 스크립트 언어이며, CSS pre-processor(전처리기)로서 CSS의 한계점을 극복하기 위한 CSS언어의 확장 언어입니다. 파일 확장자는 .scss 이며, SCSS는 2010년 5월 버전 3으로 업그레이드하면서 갖춰진 새로운 문법 체계입니다. SCSS는 기존 Sass 문법의 기능을 보다 강화하고, CSS 문법은 그대로 살렸다는 의도를 함께 담은 'Sass CSS'로도 해석할 수 있습니다. Sass의 공식 구현채는 오픈 소스이며, 루비로 코딩되어 있습니다. 또한 Sass는 중첩(Nesting), 변수(Variables), 믹스인(Mixin), 불러오기(Import), 셀렉터 상속의 메커니즘을 제공합니다.
Sass(SCSS) 장점과 단점
Sass에 대해 본격적으로 다루기 전에 솔직한 Sass에 대한 솔직한 저의 생각을 먼저 작성하겠습니다. Sass는 볼륨이 큰 웹퍼블리싱 작업에서 ¹mixin의 활용과, ²function 및 조건문 활용, ³중첩(Nesting)의 사용으로 모듈화 하기가 좋다고 말하며, CSS로 직접 코딩하는 것보다 효율적이라 장점이라고 말하는 사람들이 많습니다. 그러나 저는 위의 Sass에 장점에 대한 결론은 급하게 내린 섣부른 판단이라 생각됩니다.
¹ 저는 mixin의 무분별한 활용을 선호하지 않습니다. 이유는 Sass파일을 작업하는 웹퍼블리셔 입장에서만 편리한 기능이기 때문입니다. 실제 브라우저에서 실행시키기 위해서는 Sass파일이 아닌 컴파일(compiled)된 CSS 파일이 필요합니다. 컴파일(compiled)된 CSS 파일은 mixin을 통해 의미 없이 남발되어 반복하여 쓰인 CSS속성으로 코드가 지저분하며, 이로 인해 파일이 무거워져 웹사이트의 속도가 저하되게 하는 원인을 제공하기 때문입니다. 저는 mixin을 사용하기보다는 mixin에 사용할 CSS 속성들을 공통 클래스(class)로 만드는 것이 사용하기도 편리하고, 의미 없는 CSS의 남발이 아닌 진정한 모듈화라고 생각합니다. 반복되는 CSS속성이 많을 때 mixin을 쓰는 것이 아니라 클래스(class)를 쓰는 것이 맞다고 생각됩니다.
² function 및 조건문 활용을 통한 웹퍼블리싱 화면 구현은 많지 않으며, 필요할 경우에는 CSS Selector Level 1~3을 통해서 대부분 구현이 모두 가능하고, 현재 W3C에서 개발 중인 CSS Selector Level 4가 실무에서 쓰이게 된다면 어떻게 될까요? 다음에 기회가 된다면, CSS Selector Level 4에 대해서 포스팅할 수 있도록 하겠습니다.
³ 중첩(Nesting)의 기능은 웹퍼블리셔가 작업하는 Sass파일에서만 모듈화 되어 보이고 가독성 있어 보일 뿐입니다. 정작 실제 프로젝트에 반영되는 컴파일(compiled)된 CSS 파일은 Sass의 중첩(Nesting)으로 인해서 부모 선택자를 참조하기 때문에 재활용해서 사용해야 하는 클래스(class) 사용의 확장성 부분에서 제한적입니다.
위 내용의 이유로 저는 개인적으로 고객사가 먼저 요청하지 않는다면 Sass를 사용하지 않고, CSS 파일에서 직접 작업하는 것을 선호합니다. 편리함을 위해 만들어진 언어인 Sass가 내세우는 최고의 장점들이 오히려 단점으로 바뀐다면 그 기능들을 사용하는 의미가 없기 때문에 CSS파일에서 코딩하는 것과 동일하다고 생각합니다. 저는 Sass의 단점을 부각하기 위해서 포스팅하는 것이 아닙니다. 그럼 애초에 Sass에 사용방법을 포스팅할 생각도 하지 않았겠죠? Sass의 장점들도 많이 있습니다. 단지 무조건 앞뒤 없이 Sass가 장점만을 가지고 있지 않다는 의견을 드리고 싶었습니다. 저는 새로운 것에 대해 부정적인 시각으로 먼저 바라보는 것이 아닌, 새로운 기술을 프로젝트에서 여러 번 사용하며, 비교분석을 통해 솔직하게 포스팅하고 싶습니다. 이제 개인적인 견해는 뒤로하고, Sass에 대해 여러 편의 포스팅을 통해서 알아보겠습니다.
Sass(SCSS) 설치방법
Sass는 Node-sass, Gulp-sass, Ruby-sass를 이용한 3가지입니다. Node-sass는 node.js 버전에 의존적이기 때문에 Node가 업데이트될 경우 Node-sass 오류가 발생하며, Node-sass를 지우고 업데이트 버전을 새로 설치해야 하기 때문에 불편한 문제가 있다고 생각합니다. 그렇기에 필자는 Ruby-sass를 이용한 sass를 포스팅하고자 합니다. Ruby-sass를 선택한 이유는, 위에서도 언급했지만 sass가 Ruby로 코딩되었기 때문입니다.
--sourcemap : CSS와 mapping 되는 Sass의 정보를 알려주는 기본 옵션입니다. 컴파일되면 [CSS 파일명]. map 파일이 자동생성됩니다. 컴파일된 CSS 파일 하단에 mapping 된 파일의 정보를 나타내는 주석이 자동으로 생성됩니다. mapping 주석 내용은 아래와 같습니다.
/*# sourceMappingURL=layout.css.map */
--sourcemap 옵션 제거방법
sass --watch --sourcemap=none scss파일경로:css컴파일경로
Ⅳ. [--cache] : 캐시
--cache: Sass 코딩 및 Import 파일의 처리속도를 빠르게 할 수 있도록 캐시파일을 보관하는 기본 옵션입니다. 컴파일되면. sass-cache 폴더가 자동 생성되며 관련 내용이 캐시파일에 저장됩니다.
--cache 옵션 제거방법
sass --watch --no-cache scss파일경로:css컴파일경로
마치며
Sass의 장점과 단점에 대한 저의 생각을 포스팅하기 전에 많은 고민을 했습니다. Sass를 처음 접하는 입장에서는, 저의 Sass의 단점에 글을 보고 Sass에 대해서 별로 안 좋다고 생각하는 하는 선입견을 가질까 봐 불안했기 때문입니다. 제가 하고자 하는 말은 Sass를 사용하던지, CSS 하드코딩을 하던지 상황에 맞게 적절하게 사용하면 된다는 것을 알려드리고 싶었습니다. 제 글을 읽는 분들은 무조건 Sass가 최고! CSS 하드코딩이 최고! 라는 무조건적인 사고에 빠지지 않았으면 하는 마음에서 Sass의 장점과 단점에 대해서 포스팅하였습니다. 장점과 단점에 대한 저의 우려는 그만 각설하고, 이번에 작성한 Sass 소개 및 설치 방법과 컴파일 방법에 대한 내용이 Sass를 처음 접하는 웹퍼블리셔 분들에게 길잡이가 되었으면 합니다. 다음 Sass 포스팅은 중첩(Nesting), 변수(Variables), 믹스인(Mixin), 불러오기(Import), 실렉터 상속 문법에 대해서 1~2편의 글을 작성해 보겠습니다. 감사합니다.
이번 포스팅에서는 repeat(), repeatDelay(), delay(), yoyo(), start(), resume(), restart(), reverse(), isActive(), pause(), seek(), timeScale() 에 대해 예제와 설명을 통해 알아가 보겠습니다.
repeat(number)
애니메이션(트윈이라 정의) 반복 횟수 설정합니다.
기본값은 1이며, -1을 설정하면 무한반복됩니다. delay가 포함되어 있는 경우 첫 번째 트윈만 delay가 적용되고, repeat가 반복 실행되는 두 번째부터는 delay가 적용되지 않습니다.
프로젝트를 하다 보면 동적으로 웹 퍼블리싱해야 할 경우 jQuery animaion을 사용하거나, css animaition을 대부분 사용합니다. 애니메이션을 더 사용하기 쉽고 강력크한 퍼포먼스를 구현할 수 없을까? 바로~~ 바로!!! 트윈맥스 애니메이션 자바스크립트 라이브러리에 대해 여러 편에 걸쳐 포스팅하여 제대로 알아보겠습니다.
GSAP
GreenSock Animation Platform (GSAP)는 퍼블리싱을 하면서 애니메이션을 쉽게 사용할 수 있는 강력한 타임라인 기반의 전용 애니메이션 자바스크립트 라이브러리입니다.
GSAP는 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있습니다.
remote: support for password authentication was removed on august 13, 2021. please use a personal access token instead.remote: please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information. fatal: unable to access 'https://github.com/저장소 상세 경로/': the requested url returned error: 403
"비밀번호 인증 지원은 2021년 8월 13일에 제거되었습니다. 개인 액세스 토큰을 사용하세요."
프로젝트를 진행하면서, Push를 하려고 하는데, 위와 같은 에러 메시지가 발생했습니다.
당황하지 않고 에러 메시지가 시키는 대로 토큰 방식 인증하여 위의 에러 문제를 해결했습니다.
8월 13일 이후로 token or ssh 두 가지 중 하나로 인증을 해야 Github를 사용 가능합니다.
웹퍼블리싱 코딩 작업시 편집 프로그램을 사용하여 코딩을 합니다.
편집 프로그램은 다양하게 있으며, 각각 본인의 스타일에 맞는 편집기를 사용하게 됩니다.
(주)맑은커뮤니케이션 에서는 퍼블리셔들이 다양하게 편집 프로그램을 사용합니다.
이에 따라 편집 프로그램 중 Visual Studio Code(VS Code) 사용시 유용한 단축키 사용법을 알아보고자 합니다.
이유는 요즘 퍼블리셔, 개발자들이 많이 사용하기에 주제로 다루어 보았습니다.
사용 빈도가 높은 단축키는 (★)를 하였습니다.
기본 편집 단축키
단축키 구분
핵심 설명
Command ID
Ctrl + X 커서 위치 행 삭제(잘라내기)
커서 행 코드가 필요 없을 경우 드래그로 선택하지 않고, 해당 행에 커서를 놓고 Ctrl + X로 행을 삭제(잘라내기)합니다.
editor.action.clipboardCutAction
Ctrl + Shift + K 커서 위치 행 삭제
커서 행 코드가 필요 없을 경우 드래그로 선택하지 않고, 해당 행에 커서를 놓고 Ctrl + Shift + K로 행을 삭제합니다.
editor.action.deleteLines
Ctrl + C 커서 위치 행 복사
커서 행 코드를 반복해서 사용해야 할 경우, 해당 행에 커서를 놓고 Ctrl + C로 행을 복사합니다.
editor.action.clipboardCopyAction
Ctrl + Enter 커서 아래 행 빈줄 생성
커서를 맨 뒤로 보낸 후 Enter를 쳐서 빈 행을 생성할 수 있지만,
행의 코드 중간 부분에서도 Ctrl + Enter 단축키를 사용할 경우 더욱 쉽게 커서 아래에 빈 행을 생성 후 이동 가능합니다.
editor.action.insertLineAfter
Ctrl + Shift + Enter 커서 위 행 빈줄 생성
행의 코드 중간 부분에서도 Ctrl + Shift + Enter단축키를 사용할 경우 더욱 쉽게 커서 위에 빈 행을 생성 후 이동 가능합니다.
editor.action.insertLineBefore
alt + (↑)화살표 행을 위로 이동
커서가 있는 현재 행을 윗줄로 옮길때 alt + (↑)화살표를 할 경우 쉽게 행의 코드 윗줄과 순서를 바꿀 수 있습니다.
editor.action.moveLinesUpAction
alt + (↓)화살표 행을 아래로 이동
커서가 있는 현재 행을 아래로 옮길때 alt + (↓)화살표를 할 경우 쉽게 행의 코드 아랫줄과 순서를 바꿀 수 있습니다.
editor.action.moveLinesDownAction
Ctrl + alt + (↑)화살표 커서를 위에 추가(다중선택) (★)
동일하게 문자열을 수정시 Ctrl + alt + (↑)화살표로 윗행을 다중선택하여, 코드를 작성하면 동일하게 한번에 여러개를 수정할 수 있습니다.
editor.action.insertCursorAbove
Ctrl + alt + (↓)화살표 커서를 아래에 추가(다중선택) (★)
동일하게 문자열을 수정시 Ctrl + alt + (↓)화살표로 아래행 다중선택하여, 코드를 작성하면 동일하게 한번에 여러개를 수정할 수 있습니다.
editor.action.insertCursorBelow
Ctrl + / 한줄 주석처리 (★)
코드에 대한 설명 또는 필요에 의해 코드를 삭제하지 않고 브라우저에서 보여주고 싶지 않을 경우 Ctrl + / 단축키를 사용하면 됩니다.
퍼블리싱 작업시 자주 사용하는 단축키입니다.
해당 주석을 풀고 싶을 경우 Ctrl + / 단축키를 한번 더 누르면 됩니다.
editor.action.commentLine
Ctrl + K → Ctrl + C 블럭 주석 처리 (★)
한줄 주석(//)을 여러 행 한꺼번에 처리하는 블럭주석으로 Ctrl + K → Ctrl + C 단축키를 사용하면 됩니다.
editor.action.addCommentLine
Ctrl + K → Ctrl + U 주석 삭제 (★)
주석 처리한 부분을 해제 하고 싶을 경우 Ctrl + K → Ctrl + U 단축키를 사용하면 됩니다.
editor.action.removeCommentLine
Alt + Shift + A 블럭 주석 처리 (★)
커서 위치에서 /* */ 또는 드래그 하여 선택된 부분을 블럭 주석 처리 하고 싶을 경우 Alt + Shift + A 단축키를 사용하면 됩니다.
editor.action.blockComment
Ctrl + Shift + [ 커서 영역 접기
퍼블리싱 작업시 해당 블럭의 코딩을 완료 후 코드의 양이 많아서 코드가 보기 힘들 경우 가독성을 위해 커서 위치에서 Ctrl + Shift + [ 단축키를 사용하면 커서의 자식요소를 포함하여 접을 수 있습니다.
editor.foldRecursively
Ctrl + Shift + ] 커서 영역 펼치기
퍼블리싱 작업시 접었던 부분의 코드를 다시 수정하거나 보고 싶을 경우 Ctrl + Shift + [ 단축키를 사용하면 커서의 자식요소를 포함하여 펼칠수 있습니다.
editor.unfoldRecursively
검색관련 편집 단축키
단축키 구분
핵심 설명
Command ID
Ctrl + G 행(라인 번호)으로 이동 (★)
퍼블리싱 작업시 특정 줄 번호로 빠르기 이동하고 싶을 경우 Ctrl + G 단축키를 사용하면 빠르게 원하는 행으로 이동 가능합니다.
workbench.action.gotoLine
Ctrl + P 빠른 파일 열기 (★)
프로젝트 파일 폴더에서 일일이 클릭해서 파일을 찾는 수고로움을 피하고, 빠르게 파일을 찾고 싶을 경우 Ctrl + P 단축키를 사용하면 됩니다.
workbench.action.quickOpen
Ctrl + F 찾기
현재 파일에서 원하는 문자열을 찾고 싶을 경우 Ctrl + F 단축키를 사용하면 빠르게 찾아아서 이동 가능합니다.
actions.find
Ctrl + Shift + F 전체 파일에서 찾기
폴더에서 파일을 전체 검색하여 원하는 문자열을 찾고 싶을 경우 Ctrl + F 단축키를 사용하면 검색한 문자열이 있는 모든 파일을 찾을 수 있습니다.
그러나 전체 검색이다 보니, 파일이 많을 경우 시간이 오래 걸릴 수 있습니다.
workbench.view.search
Ctrl + H 현재페이지 문자열 수정하기 (★)
현재 퍼블리싱 중인 페이지에서 여러개의 동일하게 사용된 클래스, 태그, 텍스트 등을 찾아서 한번에 수정하고 싶을 경우 Ctrl + H 단축키를 사용하면 검색하여, 한 개 또는 모두를 한번에 수정할 수 있습니다.
한 개씩 확인하면서 바꾸고 싶을경우 Enter 하면 한 개씩 변경 가능하며, Ctrl + Alt + Enter 하면 모두 수정이 가능합니다.
editor.action.startFindReplaceAction
Ctrl + Shift + H 폴더 모든 페이지 문자열 수정하기 (★)
프로젝트 폴더 전체 페이지에서 동일하게 사용된 클래스, 태그, 텍스트 등을 찾아서 한번에 수정하고 싶을 경우 Ctrl + H 단축키를 사용하면 검색하여, 한 개 또는 모두를 한번에 수정할 수 있습니다.
workbench.action.replaceInFiles
F8 오류 또는 경고 찾기
HTML, JS, CSS 파일에서 오타로 인해서 오류를 확인하고자 할 경우 F8 단축키를 사용하면 쉽게 찾아서 수정할 수 있습니다.
editor.action.marker.next
파일 관리 편집 단축키
단축키 구분
핵심 설명
Command ID
Ctrl + N 새로운 편집 탭 열기
퍼블리싱을 하다보면 새로운 파일(HTML, CSS, JS)을 생성해야 할때가 있습니다.
이럴 경우 Ctrl + N 단축키를 사용하여 파일 탭을 생성합니다.
workbench.action.files.newUntitledFile
Ctrl + Shift + N 새로운 창 열기
VS Code 에디터에서 새로운 프로젝트 폴더를 생성한 후 열고 싶을 때 Ctrl + Shift + N 단축키를 사용합니다.
현재 작업중인 프로젝트에서 종류가 다른 프로젝트의 수행을 위해 새로운 창을 열고 싶을 때 사용하는 단축키 입니다.
workbench.action.newWindow
Ctrl + O 파일 열기
새로운 파일을 만드는 것이 아닌 프로젝트 폴더내에 이미 생성된 파일을 열고자 할 경우 Ctrl + O 단축키를 사용합니다.
workbench.action.files.openFile
Ctrl + W 파일 창 닫기 (★)
퍼블리싱 작업을 하다보면, 여러개의 창을 열어 놓을 경우가 있습니다.
해당 파일을 더이상 열어 놓을 필요가 없거나, 파일창이 너무 많아 일부분 닫아야 할 경우 Ctrl + W 단축키로 파일을 닫아 줍니다.
workbench.action.closeWindow
Ctrl + Shift + T 이전에 닫힌 편집파일 다시 열기 (★)
현재 파일에서 퍼블리싱 작업중, 이전에 닫았던 창을 다시 열어야 할 경우 Ctrl + Shift + T 단축키로 사용하면 됩니다.
workbench.action.reopenClosedEditor
Ctrl + S 파일 저장
신규 파일 저장이 아닌 현재 파일을 저장해야 할 경우 Ctrl + S 단축키로 파일을 저장하면 됩니다.
workbench.action.files.save
Ctrl + Shift + S 다른 이름으로 파일 저장
현재 파일을 새로운 이름의 파일로 생성하여 저장해야 할 경우 Ctrl + Shift + S 단축키로 파일을 저장하면 됩니다.
workbench.action.files.saveAs
Ctrl + \ 파일 화면 창 분할 (★)
한 개 이상의 파일 화면을 동시에 보면서 퍼블리싱 해야 할 경우 Ctrl + \ 단축키를 사용하여 화면 창을 분할하여 보면 편리합니다. Ctrl + \ 단축키를 누른 횟 수 만큼 화면 창이 분할 됩니다.
workbench.action.splitEditor
Ctrl + N(숫자) 화면 분할 창 위치 포커싱 (★)
화면을 여러 개 분할 후, 퍼블리싱 작업시 원하는 위치의 분할 창으로 이동해야 할 경우 Ctrl + N(숫자) 단축키를 사용하여 원하는 파일 분할창으로 쉽게 이동할 수 있습니다.
예를 들어 Ctrl + 2 단축키를 누르면 2번 파일 분할창으로 이동합니다. 마우스로 매번 분할창 클릭을 하지 않아도 됩니다.
언어 편집 단축키
단축키 구분
핵심 설명
Command ID
Ctrl + ← / Ctrl + → 단어별 커서 이동
한글자씩 커서 이동이 아닌, 단어별로 커서를 이동해야 할 경우 Ctrl + ← / Ctrl + → 단축키를 사용하여 좌우로 쉽게 이동할 수 있습니다.
Ctrl + Shift + ← / Ctrl + Shift + → 단어 선택
단어를 선택해야 할 경우 Ctrl + Shift + ← / Ctrl + Shift + → 단축키를 사용하면 됩니다.
Alt + Shift + → 선택 확장
문단 또는 태그 단위로 확장 선택을 해야 할 경우 Alt + Shift + → 단축키를 사용하면 됩니다.
editor.action.smartSelect.grow
Alt + Shift + ← 선택 축소
문단 또는 태그 단위로 축소 선택을 해야 할 경우 Alt + Shift + ← 단축키를 사용하면 됩니다.
editor.action.smartSelect.shrink
alt + 마우스 클릭 필요한 문자열을 골라서 커서 추가(다중선택) (★)
동일하지 않은 다양한 문자열을 수정시 alt + 마우스 클릭으로 작업자가 원하는 문자열을 선택하여, 한번에 여러개를 수정할 수 있습니다.
Ctrl + K → Ctrl + F 자동 정렬(★)
들여쓰기를 제대로 정리하지 못했을 경우 Ctrl + A 후 Ctrl + K → Ctrl + F 단축키를 사용하면 한번에 코드 자동정렬을 할 수 있다.
여러명의 퍼블리셔가 한개의 프로젝트를 진행할 경우 코드 정렬의 통일성 문제를 해결할 수 있기 때문에, 없어서는 안될 단축키 입니다.
editor.action.formatSelection
Ctrl + D 특정 문자열 여러개 찾기(★)
동일한 문자열 여러개를 한번에 수정해야 할 경우 Ctrl + D 단축키를 사용하여 한번에 수정할 수 있다.
다중 선택 방법은 Ctrl + D 를 누른 횟 수 만큼 동일한 문자열이 선택 된다.
예를 들어 AA라는 문자열 2개를 BB로 수정이 필요할 경우, AA에 커서를 두고 Ctrl + D 단축키를 2번 눌러 AA 문자열 2개를 선택한 후 BB로 문자를 수정하면 된다.
editor.action.addSelectionToNextFindMatch
Ctrl + Shift + L 특정 문자열 모두 선택
Ctrl + D는 동일한 문자열을 누르는 횟 수 만큼 선택 갯수가 확장되는 방식이라면 Ctrl + Shift + L 단축키를 사용하면 한번에 동일한 문자열을 선택하여 편집할 수 있습니다.
찾아야 할 문자열을 블럭선택 한 후 Ctrl + Shift + L 단축키를 누른 후 수정하면 됩니다.
editor.action.addSelectionToNextFindMatch
확장프로그램 단축키
확장프로그램
핵심 설명
단축키 구분
Live Server
라이브서버는 코딩하는 것을 실시간으로 브라우저에서 F5 새로고침 없이 바로 적용해서 확인 가능하도록 해주는 가상 서버 입니다.
사용방법은 확장프로그램을 설치한 후 , Alt + L → O 단축키를 사용하면 브라우저에서 실시간으로 코딩 상황를 확인 가능합니다.
Alt + L → O Live Server 실행 (★)
Live Server
라이브서버는 코딩하는 것을 실시간으로 브라우저에서 F5 새로고침 없이 바로 적용해서 확인 가능하도록 해주는 가상 서버 입니다.
사용방법은 확장프로그램을 설치한 후 , Alt + L → C 단축키를 사용하면 가상 서버를 종료 합니다.
Alt + L → C Live Server 종료 (★)
마치며..
Visual Studio Code(VS Code) 에디터 사용시 많이 사용하는 단축키 위주로 정리해 보았습니다.
다음글은 Visual Studio Code(VS Code) 사용시 편리한 확장프로그램 몇 종류와 용도에 대해 글을 쓰도록 하겠습니다.
잘못된 내용과 궁금하신 내용은 댓글 주시면 답변 드리겠습니다.
슬라이드의 진행 방향을 정합니다. horizontal = 가로(기본) | vertical = 세로
effect: 'slide'
'slide' | 'fade' | 'cube' | 'coverflow' | 'flip'
다섯 가지의 슬라이드 전환 효과를 부여할 수 있습니다.
effect: 'slide' // 기본 슬라이드 전환 effect: 'fade' // 희미해지면서 슬라이드 전환 effect: 'cube' // 큐브 형태로 전환 effect: 'coverflow' // 약간의 그림자와 함께 슬라이드를 밀어내며 전환 effect: 'flip' // 카드를 뒤집듯이 전환
enabled: false
슬라이드의 활성화 여부를 정할 수 있습니다. false 값을 넣으면 슬라이드의 모든 요소가 비활성화됩니다.
followFinger: false
슬라이더를 터치하고 놓을 때만 애니메이션이 적용됩니다. effect 옵션과 함께 사용하면 슬라이드 사용자가 터치로 슬라이드 애니메이션을 마음대로 움직일 수 없고 터치를 끝냈을 때만 적용됩니다.
