SourceTree

Simplicity and power in a beautiful Git GUI

규모가 큰 웹퍼블리싱 프로젝트는 여러 명의  퍼블리셔가 협업하여 프로젝트를 진행합니다.

이러한 프로젝트를 할 경우 협업은 매우 중요한 요소입니다.

 그렇기 때문에 코딩을 잘하는 것도 중요하지만 협업 시 필요한 '버전 관리 시스템(Version Control System)'을

잘 다루는 것 또한 매우 중요한 요소입니다.

버전 관리 시스템을 잘 다루는 퍼블리셔는 자연스럽게 프로젝트 내에서 중요한 사람이 되고 큰 힘을 가지게 됩니다.

버전 관리 시스템 중 하나로 Git 이 있으며,

Git과 관련하여 가장 권위 있는 도구 중 하나로 손꼽히는 Atlansian Sourcetree 가 있습니다.

파일의 이름을 더럽히지 않고, 모든 변경사항을 보존 가능하며,

각각의 변경사항 내용을 풍부하게 설명할 수 있는 Git을 쉽게 사용할 수 있는 도구입니다.

지금부터 Sourcetree Git의 버전(commit) 생성 방법에 대해 알아보고,

하나의 버전(commit)에 여러 개의 파일 및 버전(commit) 쪼개기 방법에 대하여 알아보겠습니다.

Git 버전 커밋(Commit)이란? 

저장소(Repository)는 ¹로컬 저장소(Local Repository)와 ²원격 저장소(Remote Repository)로 나눌 수 있습니다.

개인의 ¹로컬 저장소(Local Repository)에서 특정 파일들의 생성, 변경, 수정이 일어날 때마다  해당 내용을 저장(기록) 하는 각각의 버전을

Git에서는 Commit이라고 부릅니다.

Commit에 대하여 자세히 설명하자면, staging area(Index)에 올라와 있는 파일을  ¹로컬 저장소(Local Repository)로 변경이력을 저장하는 것입니다.

Commit을 하게 되면, 이전 commit 상태부터 현재의 상태까지 변경이력(버전)이 기록된 Commit들이 만들어지며 시간순으로 저장됩니다.

이로써 변경이력(버전)을 통해 과거의 코드를 알 수 있습니다.

또한 개인의 ¹로컬 저장소(Local Repository)에서  Commit 된 버전을 통해서  ²원격 저장소(Remote Repository)로 push라는 명령어로 파일을 올릴 수도 있습니다.

push 명령어의 용어 상세 설명은 ²원격 저장소(Remote Repository) 생성 방법 및 사용 방법 포스팅에서 다루도록 하겠습니다.

실습 1 - 버전(Commit) 생성하기

소스트리에서 실제로 버전(commit) 생성을 어떻게 하는지 순차적으로 아래에 상세히 설명하겠습니다.

Ⅰ.  Commit을 하기 위한 파일 생성하기

프로젝트를 위한 html 코드 파일이라 가정하고, commit 위한 예제 파일을 생성합니다.

• ✔ 1단계 : [GIT GUI] 2편 실습에서와 같이 로컬 저장소(Local Repository) 디렉토리를 생성합니다.
• ✔ 2단계 : 1단계에서 생성한 저장소 폴더 안에  .txt 파일을 생성하고, 파일명을 google.txt 만듭니다.
• ✔ 3단계 : google.txt 파일을 열고, 첫째줄에 숫자 "1" 이라고 작성하고 저장을 합니다.
• ✔ 4단계 : 소스트리 GUI를 실행하여 좌측 '파일상태' 메뉴를 클릭하면 저장소에서 작성한 google.txt 파일을 확인할 수 있습니다. 

Ⅱ.  Staging Area에 Commit 할 파일 올리기

staging area는 Commit 하기 전에 파일들을 옮겨두는 공간입니다.

Commit 할 파일들을 선택하는 행위를 'stage 한다.' 라고 말합니다.

또한 무조건 stage(Index)에 올라간 파일들만 Commit 할 수 있습니다.

• ✔ 1단계 : google.txt(Working Directory)를 클릭하면 '선택 내용 스테이지에 올리기' 버튼이 활성화됩니다.
• ✔ 2단계 : '선택 내용 스테이지에 올리기' 버튼을 클릭하면 Staging Area로 파일이 이동하여 Commit 대기 상태가 됩니다.

Ⅲ.  Commit 실행하기

Commit을 한다는 것은 하나의 버전으로 기록한다는 의미입니다.

• ✔ 1단계 : Workspace History에 Commit 버전에 대한 설명으로  Commit 메시지를 기록해 줍니다.
• ✔ 2단계 : Commit 메시지 창의 오른쪽 하단에 있는 Commit 버튼 클릭하면 Commit이 완료됩니다.
• ✔ 3단계 : 소스트리 GUI 좌측의 'History' 버튼을 클릭하여 정상적으로 Commit 되었는지 확인합니다.

※ Working History : commit 버전들의 설명을 기록하는 commit 메시지 창입니다.

실습 2 - 한개의 버전(Commit), 여러개의 파일

소스트리에서 실제로 한개의 버전(commit)에 여러개의 파일을 묶어서 Commit을  어떻게 하는지 순차적으로 아래에 상세히 설명하겠습니다.

실습1 폴더에서 파일삭제 없이 계속 이어서 진행하시면 됩니다.

Ⅰ.  Commit을 하기 위한 추가 파일 생성하기

프로젝트를 진행하면서 여러개의 html 코딩 파일을 한개의 버전(Commit)에 기록해야 한다고 가정하고,  추가 예제 파일을 생성합니다. 

• ✔ 1단계 : google.txt 파일을 열고, 둘째줄에 숫자 "2" 이라고 작성하고 저장을 합니다.
• ✔ 2단계 : naver.txt 신규 파일을 파일을 생성하고, 첫째줄에 숫자 "3" 이라고 작성하고 저장을 합니다.
• ✔ 3단계 : 소스트리 GUI를 실행하여 좌측 '파일상태' 메뉴를 클릭하면 저장소에서 작성한 naver.txt, google.txt 파일을 확인할 수 있습니다. 

Ⅱ.  Staging Area에 Commit 할 파일 올리기

staging area에 여러개의 파일을 올릴 수 있는 두 가지의 방법이 있습니다.

• ✔ 방법 1 : Working Directory 오른쪽 상단의 '모두 스테이지에 올리기' 버튼을 클릭합니다.
• ✔ 방법 2 : 'Shift 키'를 누른 상태에서 각각의 Working Directory를 클릭하면 중복 선택이 되며, 그 후 '선택 내용 스테이지에 올리기' 버튼을 클릭합니다.

Ⅲ.  Commit 실행하기

Commit을 한다는 것은 하나의 버전으로 기록한다는 의미입니다.

• ✔ 1단계 : Workspace History에 Commit 버전에 대한 설명으로  Commit 메시지를 기록해 줍니다.
• ✔ 2단계 : Commit 메시지 창의 오른쪽 하단에 있는 Commit 버튼 클릭하면 Commit이 완료됩니다.
• ✔ 3단계 : 소스트리 GUI 좌측의 'History' 버튼을 클릭하여 정상적으로 Commit 되었는지 확인합니다.

실습 3 - 버전(Commit) 쪼개기, 여러개의 파일

코딩을 바쁘게 하다보면 버전(Commit)을 만드는 것을 잊어버리고 퍼블리싱을 할 때가 있습니다.

그럴경우 Git을 이용하면 여러개 작업에 대한 버전을 뒤 늦게라도 나눌수 있으며, 지금부터 버전을 나누는 방법에 대하여 순차적으로 아래에 상세히 설명하겠습니다.

실습2 폴더에서 파일삭제 없이 계속 이어서 진행하시면 됩니다.

Ⅰ.  Commit 버전을 쪼개기 위한 여러개의 파일 작성하기

프로젝트 진행을 하면서 파일을 두 개의 버전(Commit)으로 나누어야 하는데 이를 잊었다고 가정하고, 

작업 파일을 두 개의 버전으로 나누기 위해 '실습2'의 여러개의 파일을 수정 및 신규 추가 생성합니다.

• ✔ 1단계 : google.txt 파일을 열고, 셋째줄에 숫자 "3" 이라고 작성하고 저장을 합니다.
• ✔ 2단계 : naver.txt 파일을 열고, 둘째줄에 숫자 "4" 이라고 작성하고 저장을 합니다.
• ✔ 3단계 : daum.txt 신규 파일을 파일을 생성하고, 첫째줄에 숫자 "5" 이라고 작성하고 저장을 합니다.
• ✔ 4단계 : 소스트리 GUI를 실행하여 좌측 '파일상태' 메뉴를 클릭하면 저장소에서 작성한 naver.txt, google.txt, daum.txt 파일을 확인할 수 있습니다. 

Ⅱ.  Staging Area에 첫번째 버전으로 나누어 Commit 할 파일 올리기

staging area에 두개의 버전으로 나누어질 파일 중 첫번째 Commit 할 버전의 파일을 올립니다.

• ✔ 1단계 : google.txt 파일 선택 →  Working Directory 오른쪽 상단의 '선택 내용을 스테이지에 올리기' 버튼을 클릭합니다.
• ✔ 2단계 : naver.txt 파일 선택→ Working Directory 오른쪽 상단의 '선택 내용을 스테이지에 올리기' 버튼을 클릭합니다.

Ⅲ.  첫번째 버전의 파일을 Commit 실행하기

두개의 버전 중 첫번째 버전으로 나누어질 파일을 기록(Commit)합니다.

• ✔ 1단계 : Workspace History에 Commit 버전에 대한 설명으로  Commit 메시지를 작성해 줍니다.
• ✔ 2단계 : Commit 메시지 창의 오른쪽 하단에 있는 Commit 버튼 클릭하면 Commit이 완료됩니다.

Ⅳ.  Staging Area에 두번째 버전으로 나누어 Commit 할 파일 올리기

staging area에 두개의 버전으로 나누어질 파일 중 두번째 Commit 할 버전의 파일을 올립니다.

• ✔ 1단계 : daum.txt 파일 선택 →  Working Directory 오른쪽 상단의 '선택 내용을 스테이지에 올리기' 버튼을 클릭합니다.

Ⅴ.  두번째 버전의 파일을 Commit 실행하기

두개의 버전 중 두번째 버전으로 나누어질 파일을 기록(Commit)합니다.

• ✔ 1단계 : Workspace History에 Commit 버전에 대한 설명으로  Commit 메시지를 작성해 줍니다.
• ✔ 2단계 : Commit 메시지 창의 오른쪽 하단에 있는 Commit 버튼 클릭하면 Commit이 완료됩니다.
• ✔ 3단계 : 소스트리 GUI 좌측의 'History' 버튼을 클릭하여 정상적으로 두개의 버전이 각각 Commit 되었는지 확인합니다.

글 작성자 SNS

댓글이나 메일로 글을 보시는 분들과 소통하고 있지만, 더 많은 소통을 위하여 인스타그램을 공유합니다.

많은 퍼블리셔 분들과 DM 또는 일상생활을 공유하고 싶습니다. 

인스타그램 : https://www.instagram.com/kwangsung_kim/

마치며...

이번 포스팅에서는 소스트리에서 Git 버전(Commit) 관리하는 방법에 대하여 다루었습니다.

다음 편에는 소스트리를 사용하여 Remote Repository(원격 저장소) 생성, Push 하는 방법을 다루어 보겠습니다.

감사합니다.

SourceTree

Simplicity and power in a beautiful Git GUI

규모가 큰 웹퍼블리싱 프로젝트는 여러 명의  퍼블리셔가 협업하여 프로젝트를 진행합니다.

이러한 프로젝트를 할 경우 협업은 매우 중요한 요소입니다.

 그렇기 때문에 코딩을 잘하는 것도 중요하지만 협업 시 필요한 '버전 관리 시스템(Version Control System)'을

잘 다루는 것 또한 매우 중요한 요소입니다.

버전 관리 시스템을 잘 다루는 퍼블리셔는 자연스럽게 프로젝트 내에서 중요한 사람이 되고 큰 힘을 가지게 됩니다.

버전 관리 시스템 중 하나로 Git 이 있으며,

Git과 관련하여 가장 권위 있는 도구 중 하나로 손꼽히는 Atlansian Sourcetree 가 있습니다.

파일의 이름을 더럽히지 않고, 모든 변경사항을 보존 가능하며,

각각의 변경사항 내용을 풍부하게 설명할 수 있는 Git을 쉽게 사용할 수 있는 도구입니다.

지금부터 Git의 작업환경과 용어에 대해 알아보고,

Sourcetree에서 로컬 저장소(Local  Repository)를 만드는 방법에 대하여 알아보겠습니다.

Git 작업환경 및 용어설명 

소스트리는 Git GUI 이기 때문에 Git flow 기본적인 이해 없이 소스트리를 사용한다면 소스트리의 인터페이스를 제대로 이해할 수 없을 뿐만 아니라

기능 또한 제대로 사용할 수 없게 됩니다.

그렇기에 Git flow(작업환경)에 대한 용어와 설명을 먼저 시작하겠습니다.

• ✔ Working Directory : Git으로 버전 관리하고 있는 프로젝트 폴더의 파일을 말합니다.
• ✔ Staging Area : 버전(Commit)을 저장하기 위해 준비된 파일들을 옮겨놓는 공간을 말합니다.
• ✔ Local Repository : PC에 저장되는 프로젝트 파일들의 폴더로써 사용자의 개인 로컬 저장소를 말합니다.
• ✔ Remote Repository : GitHub, GitLab, Bitbucket 온라인 서버에서 여러 사람이 백업하고 공유하기 위한 원격 저장소를 말합니다.

Git 저장소란 무엇인가? 

신규 프로젝프를 진행하기 위해서 우리는 PC에 새 폴더를 만들고 프로젝트 파일들을 보관할 것입니다.

이 파일들은 형상관리를 위해 Git으로 버전 관리할 것이며, 이 파일들이 보관되어 있는 폴더를 Git 로컬 저장소(Local Repository)라고 합니다.

소스트리(SourceTree) 로컬 저장소 생성 방법

소스트리 인터페이스 및 로컬 저장소 만드는 방법에 대하여 먼저 포스팅하고 향후 소스트리 사용방법을 계속 다루면서

원격 저장소 만드는 방법과 로컬 저장소를 연결하여 백업하는 방법 또한 다루도록 하겠습니다.

Ⅰ.  소스트리(SourceTree) 화면 인터페이스(Interface)

소스트리 로컬 저장소 또는 원격 저장소가 연결되기 전, 화면 인터페이스는 아래와 같습니다.

• ✔ Local : 생성된 로컬 저장소(Local Repository) 목록
• ✔ Remote : 연결된 원격 저장소(Remote Repository) 목록
• ✔ Clone : 원격 저장소에서 로컬 저장소로 복제(저장소 공유)하여 개발해야 할 경우에 사용합니다.(원격 저장소 → 로컬 저장소)
• ✔ Add : 로컬 저장소에서 초기화된 원격 저장소로 연결하여 개발해야 할 경우에 사용합니다.(로컬 저장소 → 원격 저장소)
• ✔ Create : 로컬 저장소를 생성할 경우 사용합니다.

Ⅱ.  로컬 저장소로 사용할 신규 폴더 생성

사용자 각자 원하는 PC의 위치에 Git 로컬 저장소로 사용하고자 하는 신규 폴더를 생성합니다.

신규 폴더는 소스트리를 이용하여 로컬 저장소로 생성할 것입니다.

Ⅲ.  소스트리 실행 후, Create 탭 클릭

상단 파일 메뉴 선택 →  복제 / 생성 메뉴 선택 → Create 탭 클릭을 합니다.

Ⅰ. 소스트리 화면 인터페이스 설명에서 Create가 로컬 저장소 생성이라는 것을 설명해 드렸습니다.

Ⅳ.  로컬 저장소로 사용할 신규 폴더의 경로 설정

탐색 버튼 클릭 → 신규 생성 폴더 경로 지정 → 생성 버튼 클릭 → '디렉토리 에러'라는 팝업창이 뜰 경우 로컬 저장소 생성을 확인하는

팝업이므로 '예 또는 OK' 버튼 클릭을 합니다.

Ⅴ.  로컬 저장소 생성 완료

위의 과정을 제대로 진행했다면 로컬 저장소가 생성되며, 자동으로 소스트리 인터페이스가 로컬 저장소에 연동됩니다.

Ⅵ.  로컬 저장소 생성 폴더 확인

신규 폴더에 로컬 저장소를 생성하면 .git 폴더(Git Local Repository)가 자동 생성됩니다.

.git 폴더(Git 로컬 저장소)는 우리가 Git으로 버전 관리를 한 내역들을 자동 저장하는 디렉토리입니다.

그렇기에 .git 폴더(Git 로컬 저장소)는 삭제하시면 안 됩니다.

이것을 삭제한다는 것은 버전 관리한 내역들을 모두 지우는 것이기 때문입니다.

글 작성자 SNS

댓글이나 메일로 글을 보시는 분들과 소통하고 있지만, 더 많은 소통을 위하여 인스타그램을 공유합니다.

많은 퍼블리셔 분들과 DM 또는 일상생활을 공유하고 싶습니다. 

인스타그램 : https://www.instagram.com/kwangsung_kim/

마치며...

이번에는 이전 편에 약속드린 것과 같이 소스트리에서 Git 로컬 저장소를 생성하는 방법을 자세히 포스팅했습니다.

글 쓰는 것보다 이미지 편집이 더 오래 걸리는 것 같아요 ㅠ.ㅠ

다음 편에는 소스트리를 사용하여 버전 커밋(Commit), Reset, Revert 하는 방법을 다루어 보겠습니다.

감사합니다.

SourceTree

Simplicity and power in a beautiful Git GUI

규모가 큰 웹퍼블리싱 프로젝트는 여러 명의  퍼블리셔가 협업하여 프로젝트를 진행합니다.

이러한 프로젝트를 할 경우 협업은 매우 중요한 요소입니다.

 그렇기 때문에 코딩을 잘하는 것도 중요하지만 협업 시 필요한 '버전 관리 시스템(Version Control System)'을

잘 다루는 것 또한 매우 중요한 요소입니다.

버전 관리 시스템을 잘 다루는 퍼블리셔는 자연스럽게 프로젝트 내에서 중요한 사람이 되고 큰 힘을 가지게 됩니다.

버전 관리 시스템 중 하나로 Git 이 있으며,

Git과 관련하여 가장 권위 있는 도구 중 하나로 손꼽히는 Atlansian Sourcetree 가 있습니다.

파일의 이름을 더럽히지 않고, 모든 변경사항을 보존 가능하며,

각각의 변경사항 내용을 풍부하게 설명할 수 있는 Git을 쉽게 사용할 수 있는 도구입니다.

지금부터 버전 관리란 무엇인가?

버전 관리를 위한 도구인 Sourcetree의 설치방법 및 저장소 생성 방법에 대하여 알아보겠습니다.

버전 관리란? GIT GUI(버전 관리 도구) 

여러 명이 진행하는 협업 프로젝트에서 시간이 지날수록 또는 동시에 하나의 프로젝트를 진행하다 보면 어느 것이 최종 업데이트 파일인지 분간하기 어렵고,

각각 코딩한 파일을 누군가는 하나로 병합해야 합니다.

또한 이전에 작업한 소스코드 버전으로 돌아가서 새로운 소스코드를 작성해야 할 경우도 발생합니다.

이러한 소프트웨어 소스코드의 변경사항을 체계적으로 추적하고 통제하는 것을 형상관리라고 하며, 이러한 소스코드 등의 버전을

쉽게 관리하기 위해 사용하는 GIT, SVN 등을 '버전 관리 시스템(Version Control System)' 이라고 합니다.

여기에서 버전(Version)이란 의미있는 변화의 단계를 말하며 의미있는 변화란 기능 개선, 버그 수정, 고객 요청사항에 의한 고도화 등을 말합니다.

저는 버전 관리 시스템 중 GIT에 대해 다룰 것이며, GIT과 관련하여 가장 권위 있는 GUI 중 하나로 손꼽히는 소스트리에 대하여 이야기하겠습니다.

GIT - Sourcetree의 버전 관리란 크게 네 가지로 구분할 수 있습니다. 

• ✔ 버전 관리 : 특정 시점의 Commit 시 꼬리표(Tag)를 달아 버전을 표시 가능합니다.
• ✔ branch : 브랜치(branch)를 사용하여 여러 버전의 웹퍼블리싱 또는 개발 가능합니다.
• ✔ 백업(Backup)과 복구 : 버전 관리를 통하여 복구 또는 여러 원격 저장소(remote repository)로 백업이 가능합니다.
• ✔ 협업 : 프로젝트 개별 사용자의 수정사항을 쉽게 공유할 수 있습니다.

Git 설치하기 

소스트리는 Git GUI(Graphic User Interface)이기 때문에 Git 을 먼저 설치한 후 소스트리를 설치하여야 사용 가능합니다.

Git 설치방법은 아래 해당 페이지 방문하여 다운로드 후 설치를 진행하면 됩니다.

Git 다운로드 : https://git-scm.com/

소스트리(SourceTree) 설치하기 

Sourcetree는 Jira로 유명한 Atlassian에서 만든 Git GUI 로써 Git 을 보다 편리하게 사용할 수 있도록 도와주는 도구입니다.

설치방법에 대하여 자세히 알아보겠습니다.

Ⅰ.  소스트리(SourceTree) 공식 사이트 방문하여 다운로드 실행

공식 사이트 메인화면 좌측에 'Download for Windows' 버튼을 클릭하여 내려받기한 후 설치 진행을 시작합니다.

Sourcetree 다운로드 : https://www.sourcetreeapp.com/

Ⅱ.  소스트리(SourceTree) Install

Bitbucket Server 와 Bitbucket 원격 저장소(Remote Repository)를 사용하지 않으려면 건너뛰기 버튼을 누르시면 됩니다.

하지만 저는 Bitbucket 을 사용하기 때문에 Bitbucket 을 선택 후 다음 버튼을 누를 것입니다.

• ✔ Bitbucket Server : Bitbucket 개별 서버를 설치한 사용자
• ✔ Bitbucket : Bitbucket 회원 가입되어 있는 사용자
• ✔ 계정이 없을 경우 : Create one for free. 클릭하여 회원가입 후 Bitbucket 을 클릭합니다.

Ⅲ.  등록 완료

Bitbucket 로그인 정보를 입력하면, 등록 완료 메시지가 뜨며, 다음 버튼을 눌러서 다음 단계로 진행합니다.

Ⅳ.  Tools(Git) 설치

Git은 위 설명과정에서 설치한 후 소스트리 설치를 진행했기에 체크박스가 뜨지 않으며, 혹시나 Git 설치과정을 누락했다면 Git 체크박스를 클릭하시면 됩니다.

Mercurial도 Git과 유사한 형상관리 툴이기에 필요할 경우 체크해서 설치하면 됩니다.

하지만 저는 사용하지 않기 때문에 Mercurial 체크 해제 후 다음 버튼을 클릭합니다.

Ⅴ.  Preferences(기본 설정)

소스트리 사용자 이름과 이메일 주소의 기본 정보를 설정한 후 다음 버튼을 클릭합니다.

Ⅵ.  SSH

SSH 키를 사용할지 묻는 팝업창입니다.

SSH 키는 지역 저장소(Local Repository)와 원격 저장소(Remote Repository)가 안전한 통신을 하기 위해 사용되는 프로토콜입니다.

하지만 SSH 키를 만들지 않았기 때문에 '아니오' 버튼을 클릭합니다.

Ⅶ.  설치 완료

설치가 완료되면 아래와 같이 Git을 손쉽게 사용할 수 있는 소스트리 Git GUI(Graphic User Interface) 도구 창이 생성됩니다.

이로써, 소스트리를 사용할 수 있는 모든 준비가 완료 되었습니다. 

글 작성자 SNS

댓글이나 메일로 글을 보시는 분들과 소통하고 있지만, 더 많은 소통을 위하여 인스타그램을 공유합니다.

많은 퍼블리셔 분들과 DM 또는 일상생활을 공유하고 싶습니다. 

인스타그램 : https://www.instagram.com/kwangsung_kim/

마치며...

Git GUI - SourceTree는 여러 편의 포스팅이 필요하기에 부담감이 커서  작성을 미루다가 드디어 시작했습니다.

시작이 반이다!!

여러 편의 포스팅이 필요한 이유는 소스트리 설치방법, 저장소, 백업 등 많은 기능을 한 편의 포스팅 강의로는 힘들기 때문입니다.

무작정 Git  소스트리를 기능을 설명하기 보다는, 소스트리를 왜 사용해야 하는지?

자세하게 다루고 싶기에 서두가 길어졌고, 설치방법에 대해서도 쉽고, 자세하게 포스팅하고자 노력했습니다.

이로써 소스트리를 사용할 준비는 모두 끝났습니다.

다음 포스팅부터는 Git 과 SourceTree 를 활용한 기능들을 자세하게 나누어 포스팅하도록 하겠습니다. 

감사합니다.

Yarn

package Manager

웹퍼블리싱은 기본적으로 HTML, CSS, Javascript 언어를 사용하여 프로젝트를 진행합니다.

그리고 시간적 생산성과, 편리성, 필요성, 크로스 브라우징 등을 위해

jQuery, jQueryUi, bxSlide, Swiper, Bootstrap,  fontawesome, animate.css 등의 다양한 라이브러리를 사용하는데

이것을 디펜던시스(dependencies)라고 합니다.

이 라이브러리를 설치하고 사용하기 위해서는 각 각의 제공하는 사이트를 접속하여

파일을 다운로드하거나, CDN으로 연결하여 사용해야 합니다.

그렇기에 최신 버전의 라이브러리가 나오거나, 최신 버전의 새로운 CDN 경로를 알기 위해서는

매 번 해당 라이브러리 사이트에 방문해야 합니다.

이것은 상당히 번거롭고, 귀찮은 일 입니다.

위의 시간적 소모와 번거로움을 해결하기 위한 것이  Yarn  - Package Manager 입니다.

Package Manager를 사용하면 해당 사이트에 방문하지 않고, 최신 버전의 디펜던시스를 손쉽게 다운로드할 수 있습니다.

지금부터 npm - Package Manager 와 Yarn - Package Manager의 차이점과 설치 및 사용방법에 대하여 알아보겠습니다.

Npm vs Yarn

¹npm 또는 ²yarn은 자바스크립트 node.js 환경 기반의 Package Manager(패키지 매니저) 입니다.

Package(패키지)란?

전 세계의 개발자들이 제작한 다양한 자바스크립트 코드를 npm 온라인 데이터베이스에 업로드하여 게시하며 공유하는데 이것을 프로그램 Package(패키지)라고 하며,  

이러한 다양한 프로그램 패키지들은 누구나 사용 가능하며,  ¹npm 또는 ²yarn과 같은 Package Manager(패키지 매니저)를 통하여 다운로드가 가능합니다.

웹퍼블리셔로 ¹npm 과 ²yarn 을  모두 사용해본 후 개인적으로 느끼는 눈에 보이는 차이점은 다음과 같습니다.

¹npm 은 노드 패키지 매니저(Node Package Manager)의 줄임말로 node.js 설치할 때 자동으로 설치되는 기본 Package Manager(패키지 매니저) 입니다.  

npm은 필수 단계를 순차적으로 수행하기 때문에 한 개의 패키지 다운로드 완료해야 다음 패키지를 다운로드 할 수 있습니다.

²yarn 은 2016년 페이스북에서 발표한 Package Manager(패키지 매니저)로, npm의 부족한 부분들을 개선하기 위해 개발되었습니다.

yarn은  npm과 달리 동시에 여러 개의 패키지들을 다운로드할 수 있기 때문에 처음에 한 번 세팅을 해두면 시간적인 측면에서 편리하게 사용할 수 있습니다. 

또한 npm 보다 보안성이 더 좋다고 하는데 웹퍼블리싱 하면서 특별하게 느낄 수는 없었습니다.

Yarn 설치방법

yarn은 npm을 통해 설치해야 합니다.

위에서 언급한 바와 같이 node.js 를 설치하면 npm 패키지 매니저는 기본적으로 자동 설치됩니다.

Ⅰ.  node  설치하기

node.js 를 설치할 수 있는 경로는 아래와 같습니다.

node.js 파일은 아래 다운로드 경로로 사이트 진입하여 좌측의 안정적, 신뢰도 높음 버전을 다운로드 받아서 설치합니다. 

node.js 다운로드 : https://nodejs.org/ko/

※ node.js 설치 여부 확인방법 :  cmd(윈도키+R키) 창을 실행  → node --version 입력 후 Enter 키 실행 

Ⅱ. Yarn 설치하기

Yarn Install 방법은 Yarn 공식 사이트에서도 확인이 가능합니다.

yarn 공식 사이트 : https://classic.yarnpkg.com/lang/en/

• ✔  cmd(윈도키+R키) 창을 실행시켜 아래와 같이 입력합니다.
•      옵션 -g 는 global 뜻하기 때문에 yarn이 설치된 컴퓨터 어디서든 사용 가능하다는 뜻을 의미합니다.

npm install -g yarn

※ yarn 설치 여부 확인방법 :  cmd(윈도키+R키) 창을 실행  → yarn --version 입력 후 Enter 키 실행

Yarn 사용방법(사용 가이드)

yarn을 사용하여 jquery, bxslide, swiper, bootstrap 등 다양한 라이브러리 디펜던시스를 각 각의 사이트에 방문하여 매 번 다운로드하지 않고, 

처음에 Yarn 설정을 Setting 해 놓으면, Install 시 라이브러리 최신 버전을 한 번에 모두 다운로드 받을 수 있습니다.

개인적으로 추천하는 방법은 프로젝트 폴더에 yarn을 사용할 폴더를 생성하는 것보다는

따로 yarn 폴더를 생성하여 필요한 최신 라이브러리를 다운로드하여 프로젝트 폴더로 이동하는 방법이 좋을 것 같습니다.

이유는 yarn을 Install 할 때 여러 개의 파일이 생성되는데, 웹퍼블리싱에는 필요하지 않은 파일이기 때문입니다.

Ⅰ.  Yarn을 사용하기 위한 준비과정

라이브러리 디펜던시스를 다운로드 받아야 할 yarn을 실행할 폴더를 생성합니다.

• ✔  cmd(윈도키+R키) 창을 실행시켜 아래와 같이 입력합니다.
•      아래와 같이 입력하면,  빈 폴더에  node-modules 폴더가 생성되면서 yarn을 사용할 수 있는 환경이 Setting 됩니다.

yarn

※ Yarn Setting 순서 :  cmd(윈도키+R키) 창을 실행  → yarn을 실행할 폴더로 이동 →  yarn 입력 후 Enter 키 실행

Ⅱ. Yarn의 package.json 생성하기

yarn을 사용할  수 있는 환경이 Setting 된 후,  package.json을 생성해야 합니다.

yarn을 사용하여 라이브러리 디펜던시스를 자동으로 다운로드 받기 위해서는 package.json 파일과 연결을 해야 하기 때문입니다.

• ✔  cmd(윈도키+R키) 창이 실행된 상태에서 아래와 같이 입력합니다.

     아래와 같이 입력하면,  폴더에  package.json 파일이 생성되면서 라이브러리 디펜던시스와 연결할 수 있게 됩니다.

yarn init

※ Yarn package 생성 순서 :  cmd(윈도키+R키) 창을 실행  → yarn을 실행할 폴더로 이동 →  yarn 입력 후 Enter 키 실행 → yarn init 입력 후 Enter 키 실행

Ⅲ. Library(라이브러리) 디펜던시스를 package.json 에 연결 설정하기

명령어를 사용하여 yarn의 Package.json 에 사용하고자 하는 라이브러리를 모두 연결할 수 있습니다.

• ✔  cmd(윈도키+R키) 창이 실행된 상태에서 아래와 같이 입력합니다.

     아래와 같이 입력하여 사용하고자 하는 라이브러리를 모두 연결할 수 있습니다.

yarn add [package] //최신버전 다운로드 방법
yarn add [package@version] //버전설정하여 다운로드 방법

※ Yarn 라이브러리 연결 순서 :  cmd(윈도키+R키) 창을 실행  → yarn을 실행할 폴더로 이동 →  yarn 입력 후 Enter 키 실행 

→ yarn init 입력 후 Enter 키 실행 → yarn add [package] 입력 후 Enter 키 실행

Ⅳ. 연결된 Library(라이브러리) 다운로드

yarn의 Package.json 에 연결된 라이브러리를 명령어를 통해 모두 한 번에 다운로드 받을 수 있습니다.

설정된 package.json 파일이 있다면, 명령어를 통하여 라이브러리를 항상 최신 버전으로 다운로드 가능합니다.

• ✔  cmd(윈도키+R키) 창이 실행된 상태에서 아래와 같이 입력합니다.

     아래와 같이 명령어를 입력하면 node_modules 폴더에 최신 라이브러리 디펜던시스가 다운로드 되어있는 것을 확인할 수 있습니다. 

     마지막으로 다운로드 완료된 라이브러리를 복사 후 프로젝트 폴더로 복사하여 사용하시면 됩니다.

yarn install

※ Yarn 라이브러리 다운로드 과정 순서(최종)  :  cmd(윈도키+R키) 창을 실행  → yarn을 실행할 폴더로 이동 →  yarn 입력 후 Enter 키 실행 

→ yarn init 입력 후 Enter 키 실행 → yarn add [package] 입력 후 Enter 키 실행 → yarn install 입력 후 Enter 키 실행

글 작성자 SNS(인스타그램)

댓글이나 메일로 글을 보시는 분들과 소통하고 있지만, 더 많은 소통을 위하여 인스타그램을 공유합니다.

많은 퍼블리셔 분들과 DM 또는 일상생활을 공유하고 싶습니다. 

작성자 인스타그램 : https://www.instagram.com/kwangsung_kim/

마치며...

yarn - package manager 에 대하여 간단하게 설명하고 하였으나,

node와 npm을 잘 모르시는 퍼블리셔분들도 있을 것 같아서 최선을 다하여 패키지 매니저의 전반적인 것을  포스팅하고자 하였습니다.

또한 yarn을 어떻게 사용하는 것이 편리할까(활용법)에 대하여 개인적인 의견으로 도움을 드리고자 하였습니다. 

일단 마무리하며 정리해드리고자 하는 내용은 아래와 같습니다.

이번엔 yarn에 대하여 포스팅하였으나 npm - package manager 도 좋은 패키지 매니저입니다.

yarn이 npm의 개선된 버전으로 나왔다고는 하지만 단점도 존재합니다.

디스크 용량을 좀 더 많이 사용하게 됩니다. 

또한 npm도 계속 개선된 버전이 나오고 있기에 yarn과 속도는 별반 차이가 없다고 생각합니다.

결론적으로 npm과 yarn 둘 중 어떤 것이 최고라고 말씀드리지는 않겠습니다. 

둘 중 개인의 취향에 따라 선택하여 사용하시면 될 것 같습니다.

감사합니다.

VS Code

Visual Studio Code - Live Server

VS Code - 확장 플러그인 편 포스팅을 하면서 Live Server 확장 플러그인을 처음 접한다면,

웹퍼블리싱 코드 내용을 실시간으로 확인할 수 있는 신세계를 경험하는 것과 같다고 글을 작성했습니다.

지금도 그 생각은 변함이 없습니다.

그렇다면 PC local 에서 웹퍼블리싱한 코드를 FTP 업로드 또는 크롬 개발자 도구를 사용하지 않고,

모바일(핸드폰) 또는 태블릿에서 바로 실시간으로 확인할 수 있는 방법은 없을까요?

이번 포스팅 주제인 Live Server 확장 플러그인을 사용하면 가능합니다.

Live Server를 사용하여 반응형 또는 모바일 웹퍼블리싱을 할 때 PC, 태블릿, 모바일의 작업 현황을 실시간으로

동시 한 번에 확인할 수 있는 신세계를 경험해 보시길 추천드립니다.

사용 방법

VS Code에서 Live Server를 설치하신 이후부터의 사용 방법에 대한 진행순서를 설명할 것입니다.

Live Server 확장 플러그인 설치방법은 VS Code - 확장 플러그인 편 포스팅을 참조 부탁드립니다.

Ⅰ.  설정 버튼 클릭

아래 그림과 같이 톱니바퀴의 설정 버튼을 클릭 후 하위 메뉴인 확장 설정 메뉴를 클릭합니다.

Ⅱ.  Live Server  →  Settings: Host: Host

기본 설정은 127.0.0.1 이며, 본인이 코딩하고 있는 PC의 IP(아이피) 주소로 변경해 주면 모바일에서 확인 가능합니다.

Ⅲ.  WIFI(와이파이) IP 주소로 변경하기

• ✔ 윈도우 설정 : 네트워크 및 인터넷  → 속성  → IPv4 주소 확인 후 입력(Live Server - Settings: Host 기본 설정 IP 삭제 후 입력)
• ✔ 윈도우 검색 : 네트워크 상태  → 속성  → IPv4 주소 확인 후 입력(Live Server - Settings: Host 기본 설정 IP 삭제 후 입력)

Ⅳ.  모바일(핸드폰 또는 태블릿) 브라우저 접속

모바일 브라우저 주소창에 'IP주소:5500/실행하고자 하는 파일명' 을 입력하면 웹퍼블리싱 중인 파일 상태를 실시간으로 확인할 수 있습니다. 

• ✔ index 파일만 있을 경우 : 192.000.00.000:5500/index.html
• ✔ content 폴더 안에 list.html 파일이 있을 경우 : 192.000.00.000:5500/content/list.html

마치며...

VS Code - Live Server 확장 플러그인을 알기 이전에는 모바일 또는 반응형 웹퍼블리싱을 할 때에 크롬 개발자 도구에서

모바일 코딩 상태를 확인하거나 FTP에 업로드하여 번거롭게 확인하는 과정의 절차를 여러분들도 겪었을 것이라고 생각합니다.

그러나 이번 포스팅을 통해 많은 퍼블리셔 또는 개발자분들이 모바일과 반응형웹 코딩을 하면서,

실시간으로 코딩 상태를 확인할 수 있기에, 이전의 번거로운 확인 절차는 사라지고 작업시간을 효율적으로 단축시킬 수 있으리라 생각됩니다.

이전부터 알고 있던 내용이긴 하지만, 잘 모르셨던 분들에게 도움이 되었으면 하는 마음으로 작성하였습니다.

감사합니다.

ScrollMagic

Let's start showing off some magic

지금까지 ScrollMgic 라이브러리의 사용 방법부터 메서드, 기초 실무예제까지 총 4편의 포스팅을 하였습니다.

이번 포스팅은 ScrollMagic 라이브러리의 마지막으로, 메인 또는 프로모션 사이트에서 스크롤 애니메이션에서 사용할 법한,

조금은 더 화려하고 동적인 예제를 만들어 보여드리고자 합니다.

이전 포스팅 내용들을 확실하게 학습하셨다면, 코드를 분석하시는데 어려울 내용은 없습니다.

그렇기에 특별하게 코드 문법 설명은 없이 작성한 예제 2가지를 보여드릴 것이며, 이렇게도 응용이 가능하구나?

라고 생각하고 편하게 보시면 될 것 같습니다.

ScrollMgic 라이브러리를 웹퍼블리싱 실무에서 재미있게 사용하시길 바랍니다.

ScrollMagic 실무 응용 예제(응용)

이전 포스팅 내용을 바탕으로 실무에서 쓸만한 동적인 스크롤매직 예제 2가지를 보여드리겠습니다.

그렇기에 따로 문법 및 코드설명은 진행하지 않겠습니다.

실무 응용 예제 - Ⅰ

아래 예제는 script.js 파일 내용중 "TweenMax.to('#box', 1, {top:'+=400', width:100, height:100});" 에서 top:'+=400' 값만 잘 이해하시면 됩니다.

상대값을 나타내기 위해서 '+=' 또는 '-='을 문법을 사용합니다.

쉽게 말해서 top:'400' 으로 코드를 작성했다면 상단에서 아래로 400px 지점에 애니메이션 되며 #box 요소가 위치하겠지만, top:'+=400'으로  코드를 작성할 경우

#box 요소의 크기 높이값에 400px을 더한 값이 상단에서 아래로 위치하여 애니메이션이 발생합니다.

  ScrollMagic - '실무 응용 예제 - Ⅰ' 예제 실습 파일  

실무 응용 예제 - Ⅱ

아래 예제는 script.js 파일 GSAP 내용중 "from($innerS2, 1, {autoAlpha: 0}, '-=0.3');" 에서 '-=0.3' 문법적 의미가 무엇인지 알고 넘어가시면 됩니다.

이전 GSAP에서 포스팅한 내용이 아니기에, 이부분은 다루고 넘어가겠습니다.

 '-=0.3' 위치의 문법 코드는 작성하지 않을 경우 기본값은 '0' 이며, 

해당 위치에 값을 넣어줄 경우 애니메이션이 빠르게 시작되거나 늦게 시작되도록 설정할 수 있습니다.

 '-=0.3' 넣어준 값은 기본값인 '0' 보다 0.3초 빨리 실행하거나, 이전 애니메이션이 끝나기 0.3초전에 겹쳐서 실행하도록 설정하는 것입니다.

  ScrollMagic - '실무 응용 예제 - Ⅱ' 예제 실습 파일  

마치며...

이번 포스팅은 ScrollMagic 라이브러리 포스팅의 마지막 편으로 무겁지 않게 마무리 했습니다.

화려한(?) 동적 스크롤 애니메이션 응용예제를 2개 간단하게 작성하였고, 가볍게 보시고 따라해 해보시면 될 것 같습니다.

올해도  이제 보름밖에 남지 않았습니다.

제가 올해 초 목표했던 ScrollMagic 라이브러리까지 포스팅하게 되어 일단 기분이 너무 좋습니다.

다들 올 한해 목표했던 학습목표까지 이루셨는지 한번쯤 돌아보시고,

조금 부족하셨다 싶으시면  '맑은커뮤니케이션 '블로그를 통해서 그 목표에 조금이라도 더 가까이 도달하시길 바랍니다.

모두 힘내시고 웹퍼블리싱 공부 및 프로젝트에서 목표했던 바를 이루시길 바랍니다.

감사합니다.

ScrollMagic

Let's start showing off some magic

이전 포스팅이 ScrollMgic 라이브러리의 '메서드와 옵션' 에 대한 내용이 주요 내용이었다면,

이번에는 ScrollMgic 라이브러리의 메서드 전역(global) 설정 방법과 실무에서 쓸만한 예제를 몇 가지 만들어 보여 드리고자 합니다.

이전 편에서  ScrollMgic 라이브러리의 '메서드와 옵션'을 잘 이해하고 이번 포스팅을 보신다고 생각하여,

설명드렸던 메서드와 옵션의 관련 내용은 중복하여 작성하지 않겠습니다.

ScrollMagic - Controller 옵션

ScrollMagic 애니메이션을 실행하기 위한 Controller 메서드 옵션은 두 가지가 있습니다.

그것들을 알아보고 ScrollMagic 실무 적용할 만한 예제들을 알아보도록 하겠습니다.

globalSceneOptions

실무 웹퍼블리싱에서는 한 개의 프로젝트에서 ScrollMagic 애니메이션을 만들 때, 한 개를 구현하는 것이 아니라

2개 혹은 여러 개를 구현하게 될 상황이 자주 발생할 것이며 이에 따라 Scene을 여러 개 생성해야 합니다.

그렇다면 동일한 Scene 옵션을 반복해서 작성하지 않고, 스크롤 애니메이션 공통 요소는 한 번만 선언해서 사용하는 전역 설정 방법이 없을까요?

당연히 있지만 모르고 사용하지 않는 상황이 발생할 것입니다.

ScrollMagic 메서드 옵션 전역(global) 설정 문법은 간단합니다.

전역(global) 설정 옵션 문법 :  globalSceneOptions: Scene 옵션(duration, reverse, triggerHook, offset) 

var controller = new ScrollMagic.Controller({
	globalSceneOptions: {
		triggerHook: 'onLeave',
		duration: "100%"
	}
});

container

HTML에서 Body 영역에서 스크롤 시 trigger가 발생하는 것이 아닌, 지정한 container 영역 내부에서 스크롤 애니메이션이 동작하도록 만들 수 있습니다.

특정 영역 내부 스크롤 애니메이션 설정 옵션 문법 :  container: "컨테이너 명(ID 또는 Class)" 

var controller = new ScrollMagic.Controller({
	container: '#container'	//body 스크롤이 아닌, 컨테이너 내부 스크롤 컨트롤	
});

  ScrollMagic - 'Container Scroll' 예제 실습 파일  

ScrollMagic Examples Site

ScrollMagic 공식 사이트에서는 예제를 제공하고 있습니다.

본격적인 ScrollMagic 섹션 와이프(Section Wipe)와 실무 응용 예제 글 작성에 앞서서 공식 예제 사이트를 공유해 드리고자 합니다.

이유는 ScrollMagic 공식 사이트의 예제까지 모두 섭렵하신다면,

ScrollMagic 라이브러리를 더욱 완벽하게 이해하고 사용하실 수 있으리라고 생각되기 때문입니다.

• ✔ ScrollMagic Examples : http://scrollmagic.io/examples/index.html

Section Wipe

보여드릴 하위 예제는 모두 섹션 와이프(Section Wipe) 종류입니다.

섹션 와이프는 스크롤 시 다음 섹션이 나타나 화면에 고정되는 동작이며, 예제는 모두 다르게 보이지만 구현 원리는 모두 비슷합니다.

• 1. CSS로 Section DIV의 width: 100%, height: 100% 값을 설정하여 화면을 꽉 차게 만들어 줍니다.
• 2. Section Div의 Scene들의 triggerHook은 공통 옵션으로써 controller에서 global option으로 설정해 줍니다.
• 3. 각각의 Section Div가 스크롤 시 시작되는 부분에 닿았을 때 trigger 되어야 하기 때문에 TriggerHook의 값은 'onLeave' 또는 '0' 으로 작성합니다. 
• 4. Section Div가 스크롤될 때마다 triggerHook에 닿으면 setPin 메서드를 사용하여 고정시켜 줍니다.

Section Wipe(기본형)

  ScrollMagic - 'Section Wipe(기본형)' 예제 실습 파일  

Section Wipe(응용형)

  ScrollMagic - 'Section Wipe(응용형)' 예제 실습 파일  

Section Wipe(슬라이더)

  ScrollMagic - 'Section Wipe(슬라이더)' 예제 실습 파일  

ScrollMagic 실무 응용 예제

실무에서 자주 사용되는 스크롤 애니메이션을 몇 가지 소개하고자 합니다.

예제 위주로 되어있으며 이전 포스팅 내용들을 잘 학습하셨다면, 쉽게 이해하고 사용하실 수 있을 것입니다.

Fade-In, Fade-Out(기본형)

  ScrollMagic - 'Fade-In, Fade-Out(기본형)' 예제 실습 파일  

Fade-In, Fade-Out(응용형)

  ScrollMagic - 'Fade-In, Fade-Out(응용형)' 예제 실습 파일  

마치며...

최초 ScrollMagic 라이브러리 포스팅은 메서드와 옵션까지만 작성하려다가 마음을 고쳐먹고 실무에 쓸만한 예제까지 만들기로 하였습니다.

예제를 여러 개 만들어서 보여드리면 ScrollMagic 라이브러리의 매력을 한 명이라도 더 알지 않을까 하는 마음에서 입니다.

저의 노력이 헛되지 않았으면 좋겠습니다 :D

다음 편은 ScrollMagic 라이브러리의 최종 편으로서,이번 포스팅은 서브페이지 디자인에 ScrollMagic 라이브러리의 실무 적용 방법이라고 할 수 있다면,

다음 포스팅은 지금까지 모든 내용을 총집합 한 내용으로 메인에서도 쓸만한 퍼포먼스가 높은 예제로 보여드리고 마무리하겠습니다. 

감사합니다.

ScrollMagic

Let's start showing off some magic

이번 포스팅은 ScrollMgic 라이브러리 '설치방법과 동작 원리'에 이어서 이전 포스팅에 설명드리고 간단하게 보여드렸던,

예제를 바탕으로 문법 작성 방법을 순서대로 상세하게 설명드리고,

Scene 옵션에 대해 하나씩 파 해쳐 보도록 하겠습니다.

이전 포스팅에서도 말씀드렸지만 GSAP(TweenMax)로 애니메이션 오브젝트를 구현하기 때문에

GSAP(TweenMax)를 잘 모르실 경우 현재 블로그 포스팅 글 참조 부탁드립니다.

GSAP(TweenMax)는 현재 맑은커뮤니케이션 블로그에 포스팅되어 있기 때문에 따로 진행하지 않겠습니다.

ScrollMagic 기본 문법 작성방법

기본 문법은 전 편에 설명드렸던 동작원리를 순서대로 작성하시면 쉽습니다.

전 편의 예제 파일을 기본으로 동작원리 순서대로 문법을 세분화하여 공부해 보겠습니다.

기본 문법 코드 작성방법   

Ⅰ. ScrollMagic 애니메이션을 실행하기 위한 Controller를 생성합니다.

       new 키워드를 이용하여 새로운 인스턴스를 생성합니다.

var controller = new ScrollMagic.Controller();

Ⅱ. 스크롤 될때 필요한 애니메이션 오브젝트를 생성합니다.

       GSAP(TweenMax) 라이브러리를 사용하여 애니메이션 코드를 작성합니다.

var tween = TweenMax.to('#animate', 0.5, {
	backgroundColor: "#6431ff",
	scale: 2.5,
	rotation: 360,
	x: 600,
	y: 500
});

Ⅲ. ScrollMagic 상세 옵션 설정을 위한 Scene 오브젝트를 생성합니다.

var scene = new ScrollMagic.Scene();

Ⅳ. Scene 오브젝트에 어떠한 객체에서 동작해야 할 상세 스크롤(애니메이션 등)을 위한 옵션 설정을 합니다.

       첫째, 어떠한 객체(ex - .trigger 또는 #trigger)에서 Scene 이 발생할지 트리거를 설정해 주어야 합니다. 

       쉽게 말해서, 어떠한 객체에 스크롤이 닿으면 애니메이션이 발생할지 지정해 주는것 입니다. 

       트리거 설정(Scene 메서드 옵션) :  triggerElement: 'class 또는 ID' 

       둘째, GSAP(TweenMax) 애니메이션 오브젝트(Ⅱ)를 Scene 오브젝트(Ⅲ)에 추가 설정합니다.

       쉽게 말해서, 어떠한 객체에 스크롤이 닿으면 발생할 만들어둔 애니메이션 GSAP 오브젝트(Ⅱ)를 넣어 줍니다. 

       애니메이션 실행 설정 메서드 :  setTween( ) 

       셋째, 마지막으로 Scene 오브젝트에 ScrollMagic Controller(Ⅰ)를 추가하여 실행 설정 하는것 입니다.

       여기까지 오타없이 진행하셨다면, 스크롤에 따라서 애니메이션이 동작합니다. 

       Controller 실행 설정 메서드 :  addTo( ) 

       넷째, 디버깅을 위해서 인디케이터를 추가합니다.

       디버깅 후에는 삭제 합니다.

       디버깅 실행 설정 메서드 :  addIndicators( ) 

기본 문법 최종코드 및  결과물  

html + css + js + result 최종 결과물 코드 뷰 입니다.

ScrollMagic Scene 옵션 및 메서드

위에 기본 문법을 설명하면서 가장 기본 옵션 이라고 할 수 있는 'triggerElement(scene 메서드 옵션)', 'setTween', 'addTo' 메서드에 대하여 알아보았습니다.

그 외 Scene 옵션 및 메서드에 대하여 설명과 예제를 통해서 공부해 보겠습니다.

duration( scene  옵션 )

트리거의 애니메이션 시작지점부터 종료지점까지 재생시간을 나타내는 scene 메서드의 옵션 입니다.

단위는 숫자이며, 예를들어 'duration: 100' 이라고 코드를 작성하면 트리거 시작지점에서 종료지점은 y축으로 100px 스크롤 되는동안 애니메이션이 실행됩니다. 

트리거의 애니메이션 재생시간이 'duration: 100%' 일 경우 화면 높이에 따라 유동적으로 재생시간이 변화합니다.

재생시간 설정 옵션 문법 :  duration: 재생시간 

  ScrollMagic - 'duration' 예제 실습 파일  

reverse( scene  옵션 )

트리거의 애니메이션 시작지점부터 종료지점까지 키값을 한번만 실행시키는 scene 메서드의 옵션 입니다.

기본값은 true로 애니메이션의 키값은 스크롤 될때마다 실행되지만, 트리거의 키 값 애니메이션을 한번만 보여주고 싶을 경우에는 값을 false로 설정하면 됩니다.

트리거의 키값을 한번만 실행시키기 위한 옵션 문법 :  reverse: true 또는 false 

  ScrollMagic - 'reverse' 예제 실습 파일  

triggerHook( scene  옵션 )

스크롤 시 트리거 팁이 뷰포트에 대해 상대적으로 어느 시점에 애니메이션을 보여줄지 설정하는 scene 메서드의 옵션 입니다.

기본값은 onCenter(0.5)이며, 0 ~ 1 사이의 숫자 또는 문자열로 작성할 수 있습니다.

• ✔ 'onEnter' → 1
• ✔ 'onCenter' → 0.5
• ✔ 'onLeave' → 0

트리거 팁이 어느 시점에 보여야 하는지 설정을 위한 옵션 문법 :  triggerHook: 숫자 또는 문자열 

  ScrollMagic - 'triggerHook' 예제 실습 파일  

offset( scene  옵션 )

트리거의 애니메이션 시작 지점 트리거를 빠르거나 늦게 동작 시키는 scene 메서드의 옵션 입니다.

기본값은 0 이며, 양수값을 작성하면 시작 지점 트리거의 스크롤 애니메이션을 늦게 동작하며, 음수값을 작성하면 시작 지점 트리거의 스크롤 애니메이션이 빨리 시작됩니다.

예제는 아래 setPin 메서드 설명 후 offset 옵션과 같이 사용하여 보여드리겠습니다.

트리거의 시작 지점을 변경 시키는 옵션 문법 :  offset: 양수 또는 음수 

setPin   

트리거의 애니메이션 시작지점부터 종료지점까지 요소를 고정시키는 메서드입니다.

재생시간 동안  애니메이션 요소가 fixed 고정 상태가 되며, 애니메이션 재생 지점을 벗어나면  fixed 해제 상태가 되어 스크롤 됩니다. 

요소를 고정시키는 메서드 문법 :  setPin('고정 시키고자 하는 요소의 class 또는 ID') 

  ScrollMagic - 'offset, setPin' 예제 실습 파일  

setClassToggle   

트리거의 애니메이션 시작지점부터 종료지점까지 어떠한 대상에 클래스를 넣었다 뺏다(토글)하는 메서드입니다.

애니메이션 재생시간 동안 클래스가 토글되며,  jQuery의 toggleClass와 같다고 생각하시면 됩니다.

대상의 클래스를 토글하는 메서드 :  setClassToggle('클래스 넣어줄 대상', ' 넣어줄 클래스 이름') 

  ScrollMagic - 'setClassToggle' 예제 실습 파일  

마치며...

ScrollMagic Scene 옵션 및 그 외 메서드에 대하여 모두 알아보았습니다.

이번 포스팅 내용을 잘 이해하셨다면, 웹퍼블리싱 프로젝트에서 왠만한 스크롤 애니메이션은 구현 가능하다고 생각됩니다.

ScrollMagic은 생각보다 외울것도 없고 어렵지도 않습니다.

애니메이션을 위해서 GSAP(TweenMax) 라이브러리와 커스텀 문제만 잘 이해하시면 됩니다.

다음 포스팅은 ScrollerMagic의 controller에서 전역함수처럼 global 설정하는 방법과 응용예제 몇가지를 공부해 보도록 하겠습니다.

감사합니다.

ScrollMagic

Let's start showing off some magic

웹퍼블리싱 프로젝트를 하다 보면 고객사의 요청에 의해 스크롤에 따른 애니메이션(동적인 화면)을 구현해야 할 경우가 있습니다.

완성도 높고 화려한 메인 페이지를 만들기 위해서 스크롤 애니메이션을 요청하는 경우도 있습니다.

저의 경우를 말씀드리자면,

서브페이지의 스크롤 애니메이션 또는 간단한 스크롤 애니메이션은 AOS 라이브러리를 사용하고,

메인 페이지의 완성도 높고 복잡한 스크롤 애니메이션을 구현해야 할 경우

ScrollMagic과 GSAP(TweenMax)를 이용해서 웹퍼블리싱 합니다.

AOS 라이브러리 사용법은 블로그에 포스팅 되어 있습니다.  

이번 포스팅은 ScrollMagic의 설치 방법과 동작 원리, 

다음 편에는 ScrollMagic 옵션에 대하여 2편으로 나누어 다루어 보겠습니다.

참고로 ScrollMagic을 공부하시려면, GSAP(TweenMax) 라이브러리를 먼저 아셔야 합니다.

블로그에 작성되어 있으며, 어렵지 않으니 걱정하지 마시고 GSAP(TweenMax) 글을 보고 선행학습 부탁드립니다.

ScrollMagic 설치 방법

ScrollMagic 공식 사이트에서 제공하는 라이브러리 사용 방법은 CDN, Bower, NPM, Download 4가지입니다.

포스팅은 CDN 방법으로 진행할 예정이며, 각자 편한 방법으로 라이브러리 초기 설정을 하시면 됩니다.

• ✔ ScrollMagic 라이브러리 초기 설정 방법 : http://scrollmagic.io/

CDN 사용 방법

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>

위에 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 

  ScrollMagic - '기본 동작 원리' 예제 실습 파일  

마치며...

ScrollMagic 포스팅 계획은 올해 초반부터 계획하고 있었는데, 연말에 시작하게 되었습니다.

요즘 웹사이트 웹퍼블리싱 하다보면 스크롤 애니메이션은 자주 구현해야 하는 트렌드가 되었다고 생각됩니다.

그래서 더욱더 빨리 포스팅하고 싶었지만 늦었지만... 그래도 시작이 반이다??

AOS 라이브러리도 좋지만 위에 만들어서 보여드린 ScrollMagic의 간단한 동작 원리만 보셔도,

AOS 라이브러리에서는 구현할 수 없는 스크롤 애니메이션이라는 것을 확인하실 수 있습니다.

ScrolllMagic과 AOS 라이브러리를 상황에 맞게 사용하신다면, 웹퍼블리셔로서 커다란 본인만의 무기를 가지게 되는 것이라 생각됩니다.

다음 편 포스팅은 ScrollMagic의 옵션에 대하여 상세한 설명과 예제를 통해서 진행하도록 하겠습니다.

감사합니다.

Swiper

The Most Modern Mobile Touch Slider

웹퍼블리싱 프로젝트에서 슬라이더는 거의 빠지지 않고 들어가는 기능입니다.

Swiper 기본 라이브러리 옵션만 사용해서 구현 가능한 슬라이더를 만들 수 있는 프로젝트라면 괜찮지만, 

고객사의 요청으로 Swiper 기본 라이브러리 옵션으로 만들수 없는 슬라이더를 구현해야 하는 경우도 종종 발생합니다.

그럴 경우 매우 난감합니다.

예를 들어 한 개의 Swiper 슬라이더에 두 개의 Pagination(페이징)을 연동해서 제어해야 할 때가 있습니다.

이를 해결하기 위한 Swiper API 에 방법에 대하여 포스팅하겠습니다.

Pagination 정의

게시물의 양이 많을 경우 스크롤이 길어지고 서버로부터 읽어와야 하는 데이터의 양도 많아지게 됩니다.

따라서 페이지 로딩에 소요되는 시간이 늘어나게 되고, 페이지도 한눈에 보기 힘들어지게 됩니다.

이럴 경우 한 페이지에 사용자들이 보기 적당할 정도의 목록에 페이징을 적용하여 데이터를 보여주는 것을 페이징(pagination)이라 정의할 수 있습니다. 

Swiper API : Pagination

Swiper API의 Pagination은 목록 요소의 개수를 나타내 주는 UI 라고 말할 수 있습니다.

가장 일반적인 Swiper Pagination은 Swiper 요소의 하단의 숫자들입니다.

Swiper 라이브러리는, 공식적으로 한 개의 Swiper에서 Pagination은 오직 한 개의 옵션을 제공하며, 사용 가능합니다.

그렇기에 고객사의 요청에 의해 2개 이상의 Pagination Type 옵션을 사용해야 할 경우 pagination 기본 옵션만으로 구현이 불가능하며,

Swiper API 중에서 controller 를 활용하여 이 문제를 해결할 수 있습니다.

문제 해결 방안에 제시에 앞서  Swiper Pagination 명세서는 아래와 같습니다.

• ✔ Swiper API : paginaiton 명세서 : https://swiperjs.com/swiper-api#pagination

Pagination Type

Swiper Paginaiton은 총 네 가지의 종류입니다.

bullets, progressbar, fraction, custom 으로 구분할 수 있습니다.

위의 네 가지 Type 중에서 '두 가지 Pagination UI 기능을, 한 개의 Swiper 슬라이더에 적용하는 방법' 에 대하여 확인해 보겠습니다.

예제는 progressbar와 bullets에 숫자 custom을 적용을 예시로 포스팅하겠습니다.

각설하고 먼저 Pagination Type 네 가지에 대해 알아보겠습니다. 

var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_bullet",   //페이징 태그 클래스 설정 
		type : 'bullets'
	}
});

var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_progress",   //페이징 태그 클래스 설정 
		type : 'progressbar'
	}
});

var galleryTop = new Swiper('.gallery-top', {
	pagination: {   //페이징 사용자 설정
		el: ".pagination_fraction",   //페이징 태그 클래스 설정 
		type : 'fraction'
	}
});

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 Type에 대하여 알아보았습니다.

그렇다면 'Swiper Type 두 종류를, 한 개의 Swiper에 사용할 수 있는 방법'에 대해 설명드리겠습니다.

한 개의 Swiper에 progressbar와 cumtom 페이징을 사용한다고 가정할 때, progess와 cumstom 중 하나를 한 개의 Swiper 슬라이더에서 실행하고,

나머지 하나는 다른 페이징 형태로 실행합니다.

그리고 Swiper API 중에서 controller로 메인 Swiper가 다른 형태의 Swiper 페이징 형태를 제어하도록 합니다.

이해를 돕기 위해, 스크립트 작성 코드 및 예제 다운로드 파일을 아래와 같이 제공합니다.

var galleryTop = new Swiper('.gallery-top', {
	spaceBetween: 10,   //슬라이드 간격
	pagination: {   //페이징 사용자 설정
		el: ".pagination_bullet",   //페이징 태그 클래스 설정 
		clickable: true,    //버튼 클릭 여부
		type : 'bullets',   //페이징 타입 설정(종류: bullets, fraction, progressbar)   
		// Bullet Numbering 설정
		renderBullet: function (index, className) {
			return '<span class="' + className + '">' + (index + 1) + "</span>";
		},
	},
});

//progress Bar
var pagingSwiper = new Swiper(".gallery-top", {
	pagination: {
		el: ".pagination_progress",
		type: "progressbar",
	},
});

//Main Swiper로 progress Bar 제어
galleryTop.controller.control = pagingSwiper;

  Swiper - '페이징(pagination) 2개 연동 제어' 예제 실습 파일  

마치며..

웹퍼블리싱 프로젝트를 하다 보면 고객사 또는 디자이너의 요청으로, Swiper 기본 옵션으로 구현하기 힘든 경우가 종종 발생합니다.

이럴 경우 당황하지 마시고, Swiper API를 응용하고 병행하여 사용한다면 대부분 요청사항은 해결할 수 있는 문제들입니다.

이번 포스팅 주제인  '한 개의  Swiper에 두 개의 페이징(pagination) 연결 제어' 또한 결국은 Swiper API controller 이용하여 문제 해결방법을 찾아냈습니다.

사실 cotroller는 이전에도 한 번 포스팅했었고,이번 포스팅 내용은 Swiper API를 응용에 대해 보여드리고 싶었습니다.

이 글을 보시는 웹퍼블리셔 분들도 Swiper API 대하여 다시 한번 고민하는 시간을 가졌으면 합니다.

감사합니다.

Swiper

The Most Modern Mobile Touch Slider

웹퍼블리싱 프로젝트를 하다보면 슬라이더는 자주 사용하는 기능 중 하나입니다.

자바스크립트로 직접 코딩해서 만들수도 있겠지만, 고객사의 잦은 기능 변경 및 반응형에 대한 대응들을 생각한다면,

제한된 시간에 웹퍼블리싱 해야하기에 라이브러리(플러그인)를 사용하는 것이 작업에 효율적입니다.

많은 라이브러리들이 있지만 제가 사용하는 Swiper Slider 기능에 대해서 포스팅 하겠습니다.

Swiper는 다양한 사용자 옵션을 제공하고 있기에 사용하기 편리한 무료 라이브러리(플러그인) 입니다.

웹사이트, 모바일 네이티브, 하이브리드 앱 모두 호환하여 사용 가능합니다. 

Swiper의 기본설치 방법과 옵션에 대해서는 '반응형 슬라이더 Swiper (사용 방법/예제) 웹퍼블리싱' 참조 부탁드립니다.

프로젝트를 하다보면 2개의 슬라이더를 연동해서 제어해야 할 때가 있습니다.

이번에는 이를 해결하기 위한 Swiper API 에 대하여 알아 보겠습니다.

그 외에 이번 포스팅은 Swiper 라이브러리(플러그인)에서 많이 사용하는 기능에 대해서 종합적으로 정리하였습니다.

Swiper API - Controller

웹퍼블리싱 프로젝트를 하다보면 슬라이더 2개를 서로 연동하여 동작될수 있도록 구현해야 할 경우가 발생합니다.

여기서 말하는 연동이란?

A라는 Main 슬라이더가 있고 B라는 Thumbnail 슬라이더가 있다고 가정할 때, 

A라는 슬라이더를  동작할 경우 B라는 슬라이더도 동일하게 슬라이딩되고,

B라는 슬라이더를 동작하더라도 A라는 슬라이더가 동일하게 슬라이딩 되는, A와 B가 서로 연동되어 제어 가능한 상태를 말합니다.

이럴경우 Swiper API 중에서 Controller 모듈을 사용하면 문제를 해결할 수 있습니다.

지금부터 사용방법에 대해 쉽게 설명 드리겠습니다.

Use Swiper from CDN

Swiper 라이브러리(플러그인)를 사용하기 위한 설치방법은 여러가지가 있습니다.

이전에 포스팅한 Swiper Installation 중에서 CDN을 이용한 방법을 설명하지 않아서 CDN으로 Swiper Library를 사용하여 설명하겠습니다.

• ✔ Swiper CDN 사용방법 : https://swiperjs.com/get-started#use-swiper-from-cdn

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

Swiper API 사용 방법

Swiper 슬라이더를 2개로 연동 및 제어하기 위한 HTML 구조, JavaScript, Swiper 메서드 옵션에 대해 종합적으로 상세하게 설명하여 진행하겠습니다.

그리고 이 글의 작성 이유인 Swiper API 중 controller 파라미터 사용법에 대해서 다루어 보겠습니다.

HTML 

서로 연동되어 슬라이드 되어야 할 Main Swiper 와 Thumbnail Swiper를 마크업하여 만들고,

Swiper JS와 Swiper CSS 라이브러리를 CDN으로 연결합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta charset="utf-8">
	<title>Swiper - Swiper 2개 연동과 제어(Controller)</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">
</head>
<body>
<div class="swiper-container gallery-top">
	<div class="swiper-wrapper">
		<div class="swiper-slide"><div class="swiper-slide-container">Slide 1</div></div>
		<div class="swiper-slide"><div class="swiper-slide-container">Slide 2</div></div>
		<div class="swiper-slide"><div class="swiper-slide-container">Slide 3</div></div>
		<div class="swiper-slide"><div class="swiper-slide-container">Slide 4</div></div>
		<div class="swiper-slide"><div class="swiper-slide-container">Slide 5</div></div>
	</div>
	<div class="swiper-pagination"></div>
</div>
<div class="wrap_thumb_layout">
	<div class="swiper-container gallery-thumbs">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><div class="swiper-slide-container">Slide 1</div></div>
			<div class="swiper-slide"><div class="swiper-slide-container">Slide 2</div></div>
			<div class="swiper-slide"><div class="swiper-slide-container">Slide 3</div></div>
			<div class="swiper-slide"><div class="swiper-slide-container">Slide 4</div></div>
			<div class="swiper-slide"><div class="swiper-slide-container">Slide 5</div></div>
		</div>
	</div>
	<!-- Add Arrows -->
	<div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
</div>
</body>
</html>

JavaScript

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를 연결하여 제어할 수 있습니다.

사용방법은 및 Swiper API controller 명세서는 아래와 같습니다.

• ✔ Swiper API : controller 명세서 : https://swiperjs.com/swiper-api#controller

galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;

JavaScript  + Swiper API

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  에 대해서 위에서 설명드렸지만 적용된 여부의 차이점을 확인하실 수 있으리라 생각됩니다.  

  Swiper - '슬라이더 2개 연동 제어' 예제 실습 파일  

마치며..

웹퍼블리싱 프로젝트를 하다보면 꼭 빠지지 않는 요소가 슬라이더라고 생각 됩니다.

때문에 경력이 있는 웹퍼블리셔들은 주로 사용하는 슬라이더 라이브러리가 1~2개 쯤은 있다고 생각됩니다.

슬라이더 라이브러리는 아주 많이 존재합니다.

저도 몇 년 동안 프로젝트를 하면서 항상 슬라이드 구현은 빠지지 않았기에 여러가지 라이브러리를 사용하면서 저에게 맞는 라이브러리를 찾게 되었고,

Swiper Slider 를 현재는 주로 사용하고 있습니다.

매번 프로젝트 마다 사용하는 슬라이더이기에 쉽게 구현할수 있다고 생각하면 쉽지만, 상황에 따라 고객사의 요구사항이 복잡한 경우도 종종 발생합니다.

이럴경우 기본 라이브러 옵션만 가지고는 구현이 불가능하기 때문에 슬라이더 라이브러리에서 제공하는 API와 파라미터가 중요합니다.

Swiper 라이브러리(플러그인)는 이런부분 또한 디테일하게 제공하고 있기에 완성도가 높은 라이브러리라고 생각이 됩니다.

이번에 포스팅한 내용은 프로젝트에서 종종 발생하는 라이브러리의 기본옵션만 가지고 구현할 수 없는 내용에 대하여 다루었습니다.

이 글을 통해서 후배 웹퍼블리셔 분들께서 프로젝트에 투입되어 당황하지 않고, 문제를 조금더 쉽게 해결할 수 있도록 도움이 되었으면 합니다.

Sass

Syntactically awesome stylesheets

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 Sass의 @mixin, @extend, @import 에 대한 문법을 다루어 보겠습니다.

@mixin

mixin(믹스인)은 함수와 비슷한 동작을 하는 문법이며 CSS 스타일 시트에서 반복적으로 재사용할 CSS 스타일 그룹 선언을 정의하는 기능을 합니다.

단순하게 CSS 그룹으로 정의하여 적용할 수 있지만 인수를 활용하게 되면,

반복되는 CSS 속성을 한 개의 mixin(믹스인) 정의를 가지고 다양한 CSS 스타일을 만들어 낼 수 있습니다.

• ✔ 정의하기 : @mixin 믹스인 이름 { CSS 스타일 } 
• ✔ 호출하기 : @include 믹스인 이름

믹스인 기본 문법

@mixin을 정의해 만든 CSS 스타일을 @include 이용하여 참조해서 재사용할 수 있습니다.

@mixin, @include 옆에 사용되는 이름은 selector가 아닌 함수 이름처럼 mixin 이름입니다. 

//@mixin - 스타일 정의
@mixin 믹스인 이름 {
	//CSS 스타일 내용
}

//@include - 믹스인 호출
@include 믹스인 이름

//믹스인 정의
@mixin tit_text {
    position: relative;
    padding-left: 10px;
    font: {
        size: 30px;
        weight: bold;
    }
    color:#000;

    &::before {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 2px;
        height: 2px;
        margin-top: -2px;
        background-color: #ccc;
        content: '';
    }

    span.icon-check {
        display:inline-block;
        width: 10px;
        height:10px;
        background: url('../img/icon-check.png');
    }
}

//믹스인 호출
h1 {
    @include tit_text;
}

h1 {
  position: relative;
  padding-left: 10px;
  font-size: 30px;
  font-weight: bold;
  color: #000;
}
h1::before {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 2px;
  margin-top: -2px;
  background-color: #ccc;
  content: '';
}
h1 span.icon-check {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url("../img/icon-check.png");
}

인수(Arguments)

mixin은 함수처럼 인수를 가질 수 있습니다.

그렇기 때문에 하나의 mixin을 정의해도 다양한 결과를 만들어 낼 수 있습니다.

사용방법은 믹스인에서 매개변수를 지정해주고 include로 인수를 사용하면 됩니다. 

'매개변수'란 변수의 한 종류로, 제공되는 여러 데이터 중 하나를 가리키기 위해 사용됩니다.

제공되는 여러 데이터들을 '전달인수' 라고 부릅니다.

//정의하기
@mixin 믹스인 이름($매개변수) {
	//CSS 스타일 내용	
}

//호출하기
@include 믹스인 이름(인수);

@mixin border-line($width, $style) {
    border: $width $style #000;
}

.border-box1 {@include border-line(2px, solid);}
.border-box2 {@include border-line(4px, dotted);}

.border-box1 {
  border: 2px solid #000;
}

.border-box2 {
  border: 4px dotted #000;
}

@mixin border-line($width: 2px, $style: dotted) {
    border: $width $style #000;
}

.border-box1 {@include border-line;}
.border-box2 {@include border-line(6px);}

.border-box1 {
  border: 2px dotted #000;
}

.border-box2 {
  border: 6px dotted #000;
}

@mixin border-line($width: 2px, $style: dotted, $color: #000) {
    border: $width $style $color;
}

.border-box1 {@include border-line($width: 1px, $color: coral);}

.border-box1 {
  border: 1px dotted coral;
}

@extend

CSS 스타일을 정의하다 보면, 클래스 선택자의 모든 스타일은 동일하게 가져야 하지만 부분적으로 다른 경우가 발생합니다.

그럴 때 다중 클래스를 사용하거나 CSS 공통으로 사용하는 속성을 모아서 선언했을 것입니다. 

이럴 경우 @extend 를 사용하면 편리합니다.

그러나 @extend는 CSS 미디어쿼리 내에서 실행되지 않습니다.

그렇기에 반응형웹이나 모바일 웹퍼블리싱 작업 시에는 사용하지 않는 것이 좋습니다.

Sass Guideline 에서도 @extend는 사용을 권장하지 않습니다.

기본 문법은 아래와 같습니다.

@extend 선택자

.btn {
    padding: 10 15px;
    font: {
        size: 15px;
        weight: bold;
    }
    background-color: coral;
}

.ico {
    @extend .btn;
    background-color: #000;
}

.btn, .ico {
  padding: 10 15px;
  font-size: 15px;
  font-weight: bold;
  background-color: coral;
}

.ico {
  background-color: #000;
}

@import(불러오기)

@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를 사용하시는데 큰 문제가 없을 것이라 생각됩니다.

진짜 뿌듯함과 시원섭섭함이 교차하네요!!

다음번에도 좋은 주제의 내용을 새로 가지고, 포스팅하도록 하겠습니다.

감사합니다.

Sass

Syntactically awesome stylesheets

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 SassScript인 @each, @while 에 대한 문법을 다루어 보겠습니다.

@each

@each 는 List 와 Map 데이터를 반복할 때 사용합니다.

자바스크립트 for in 반복문과 비슷합니다.

List

하나의 데이터를 저장하기 위해 변수를 사용하는데, 여러 개의 데이터를 저장할 때에는 list  또는 뒤이어 설명할  map 이라는 형식으로 저장합니다.

예를 들어 'apple, banana, mango, orange' 총 4개의 과일을 변수에 저장해서 사용하려고 할 경우,

단순하게 각각의 변수에 저장할 수 있겠지만, 아래 예제와 같이 데이터들을 연관된 것끼리 모아서 하나의 변수에 저장함으로써 편하게 관리할 수 있습니다.

// @each 문법에 하나의 변수만 사용할 때 문법
@each $변수 in 리스트 또는 맵 데이터 {
	//반복 내용
}

//List Data
$fruits : (apple, banana, mango, orange);

.list_fruits {
    @each $fruit in $fruits {
        li.#{$fruit} {
            background: url('../img/#{fruit}.png');
        }
    }
}

.list_fruits li.apple {
  background: url("../img/fruit.png");
}
.list_fruits li.banana {
  background: url("../img/fruit.png");
}
.list_fruits li.mango {
  background: url("../img/fruit.png");
}
.list_fruits li.orange {
  background: url("../img/fruit.png");
}

.list-fruits {
    @each $fruit in apple, banana, mango, orange {
        li.#{$fruit} {
            background: url('../img/#{fruit}.png');
        }
    }
}

//리스트를 변수로 저장해서 사용 가능
$fruits : apple, banana, mango, orange;
.list_fruits {
    @each $fruit in $fruits {
        li.#{$fruit} {
            background: url('../img/#{fruit}.png');
        }
    }
}

.list-fruits li.apple {
  background: url("../img/fruit.png");
}
.list-fruits li.banana {
  background: url("../img/fruit.png");
}
.list-fruits li.mango {
  background: url("../img/fruit.png");
}
.list-fruits li.orange {
  background: url("../img/fruit.png");
}

.list_fruits li.apple {
  background: url("../img/fruit.png");
}
.list_fruits li.banana {
  background: url("../img/fruit.png");
}
.list_fruits li.mango {
  background: url("../img/fruit.png");
}
.list_fruits li.orange {
  background: url("../img/fruit.png");
}

//List Data
$fruits : (apple, banana, mango, orange);
.list_fruits {
    @each $fruit in $fruits {
        $i : index($fruits, $fruit);
        li:nth-child(#{$i}) {
            left: 100px * $i;
        }
    }
}

.list_fruits li:nth-child(1) {
  left: 100px;
}
.list_fruits li:nth-child(2) {
  left: 200px;
}
.list_fruits li:nth-child(3) {
  left: 300px;
}
.list_fruits li:nth-child(4) {
  left: 400px;
}

Map

사용목적과 방법은 list와 유사합니다.

특징은 각 값마다 매칭 된 키가 있기 때문에 동적으로 접근할 수 있습니다.

또한 CSS에 없는 Sass의 고유 문법이며, 많은 양의 데이터를 컨트롤하기 위해서 반드시 필요합니다.

// Map Data
$coffees : (mild: americano, soft: latte, strong: espresso, sweet: mocha);

@each $state, $menu in $coffees {
    #{$state}-icon {
        background: url('../img/#{$menu}.png');
    }
}

mild-icon {
  background: url("../img/americano.png");
}

soft-icon {
  background: url("../img/latte.png");
}

strong-icon {
  background: url("../img/espresso.png");
}

sweet-icon {
  background: url("../img/mocha.png");
}

@while

@while 은 조건이 false 를 반환할 때까지 내용을 반복합니다.

자바스크립트 while 문과 유사하여, 잘못된 조건으로 인해 컴파일 중 무한 루프에 빠질 수 있습니다.

그렇기에 사용을 권장하지 않습니다.

@while 조건 {
	//반복 내용
}

$i : 6;

@while $i > 0 {
    .list-#{$i} {
        width: 2px * $i;
    }
    $i : $i - 2;
}

.list-6 {
  width: 12px;
}

.list-4 {
  width: 8px;
}

.list-2 {
  width: 4px;
}

마치며...

드디어 SassScript 마무리로 @each, @while 에 대하여 포스팅하였습니다.

@each, @while 문법도 자바스크립트 each문과 while문과 비슷하기에 이해하기 어렵지는 않았을 것입니다.

그동안 SassScript 인 if함수, @if, @for, @each, @while 다루어 보았습니다.

웹퍼블리싱 작업 시 상황에 맞게 효율적으로 쓰게 된다면 아주 유용한 문법들입니다.

다음은 Sass  @mixin과 @extend에 대하여 알아보겠습니다.

감사합니다.

Sass

Syntactically awesome stylesheets

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 SassScript인 조건문(@if), 반복문(@for)에 대한 문법을 다루어 보겠습니다.

if(함수)

조건의 값(true, false)에 따라 두 개의 표현식 중 한 개만 반환합니다.

자바스크립트의 삼항 연산자와 비슷합니다.

조건의 값이 참(true) 일 경우, 표현식 1을,

조건의 값이 거짓(false) 일 경우, 표현식 2를 반환합니다. 

기본 문법은 아래와 같습니다.

if(조건식, 표현식1, 표현식2);

//HTML
<div class="section-v1"></div>
<div class="section-v2"></div> 


//SCSS

//변수설정
$section-v1:900px;
$section-v2:500px;

//공통 CSS
.section-v1, .section-v1 {
    height: 100px;
}

.section-v1 {
    width: $section-v1;
    background-color: if($section-v1 > 700, coral, orange)
}

.section-v2 {
    width: $section-v2;
    background-color: if($section-v2 > 700, coral, orange)
}

.section-v1, .section-v1 {
  height: 100px;
}

.section-v1 {
  width: 900px;
  background-color: coral;
}

.section-v2 {
  width: 500px;
  background-color: orange;
}

@if(조건문)

@if 지시어는 자바스크립트의 if문과 비슷합니다.

같이 사용할 수 있는 지시어는 @else, @else if 가 있습니다.

@else 지시어를 붙여 거짓(false)을 반환할 수 있고, @else if 지시어를 붙여 다중 if(조건)문 실행도 가능합니다.

기본 문법은 아래와 같습니다.

//기본 @if 지시문
@if(조건식) {
	//조건이 참일 때 표현식
}

//@if @else문
@if(조건식) {
	//조건이 참일 때 표현식
} @else {
	//조건이 거짓일 때 표현식
}


//다중 @if문
@if(조건식1) {
	//조건식1이 참일 때 표현식
} @else if(조건식2) {
	//조건식2가 참일 때 표현식
} @else {
	//조건식이 모두 거짓일 때 표현식
}

//HTML
<div class="section-v1"></div>
<div class="section-v2"></div>

//SCSS

//변수설정
$section-v1:900px;
$section-v2:500px;

//공통 CSS
.section-v1, .section-v1 {
    height: 100px;
}

.section-v1 {
    width: $section-v1;
    @if($section-v1 >= 700) {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

.section-v2 {
    width: $section-v2;
    @if($section-v2 >= 700) {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

.section-v1, .section-v1 {
  height: 100px;
}

.section-v1 {
  width: 900px;
  background-color: coral;
}

.section-v2 {
  width: 500px;
  background-color: orange;
}

@if(조건문) 문법 1

조건식에 (  ) 생략하여 작성이 가능합니다.

기본 문법은 아래와 같습니다.

.section-v1 {
    width: $section-v1;
    @if $section-v1 >= 700 {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

@if(조건문) 문법 2

조건식에 논리 연산자 and, or, not을 사용할 수 있습니다.

//HTML
<div class="section-v1"></div>
<div class="section-v2"></div>


//SCSS
//변수설정
$section-v1:900px;
$section-v2:500px;

//공통 CSS
.section-v1, .section-v1 {
    height: 100px;
}

.section-v1 {
    width: $section-v1;
    @if $section-v1 >= 0 and $section-v1 <= 1000 {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

.section-v2 {
    width: $section-v2;
    @if $section-v2 >= 0 and $section-v2 <= 300 {
        background-color: coral;
    } @else {
        background-color: orange;
    }
}

.section-v1, .section-v1 {
  height: 100px;
}

.section-v1 {
  width: 900px;
  background-color: coral;
}

.section-v2 {
  width: 500px;
  background-color: orange;
}

@for(반복문)

@for 는 클래스 스타일 또는 값을 일정하게 변화하면서 일정 횟수 반복하여 사용할 수 있는 문법입니다. 

자바스크립트의 for(반복문) 와 비슷합니다.

@for 는 through 를 사용하는 형식과 to 를 사용하는 형식으로 나누어집니다.

두 형식은 종료 조건의 해석이 다른 결과를 반환합니다. 

기본 문법은 아래와 같습니다.

// through - 시작부터 종료조건까지 반복
@for $변수 from 시작 through 종료 {
	// 반복내용
};

// to - 시작부터 종료조건 직전까지 반복
@for $변수 from 시작 to 종료 {
	//반복내용
};

through

from(시작)부터 through(종료) 조건까지 반복해야 할 경우 사용합니다.

변수는 관례상 $i 를 사용하도록 하겠습니다.

to

from(시작)부터 to(종료) 조건 직전까지 반복해야 할 경우 사용합니다.

변수는 관례상 $i 를 사용하도록 하겠습니다.

through와 to의 예제는 아래와 같습니다.

//1~3까지 반복
@for $i from 1 through 3 {
    .through:nth-child(3n + #{$i}) {
        width: 50px * $i
    }
}

//1~2까지 반복
@for $i from 1 to 3 {
    .to:nth-child(3n + #{$i}) {
        width: 50px * $i
    }
}

.through:nth-child(3n + 1) {
  width: 50px;
}

.through:nth-child(3n + 2) {
  width: 100px;
}

.through:nth-child(3n + 3) {
  width: 150px;
}

.to:nth-child(3n + 1) {
  width: 50px;
}

.to:nth-child(3n + 2) {
  width: 100px;
}

마치며...

이전 Sass 변수 포스팅 마무리에 이야기했던 @if(조건문)와 @for(반복문)에 대하여 포스팅하였습니다.

자바스크립트 if문과 for문을 알고 계신 웹퍼블리셔 분이라면 이번 포스팅은 쉽게 이해하고 넘어가셨을 것입니다.

그러나 자바스크립트를 잘 모르시더라도 이해하기 쉽게 포스팅하려고 상세히 작성하였습니다.

SassScript 중 @if(조건문)와 @for(반복문) 내용이 Sass 공부를 하시는데 조금이나마 도움이 되어,

실무에서 웹퍼블리싱을 하실 때 편리하게 사용하실 수 있었으면 좋겠습니다.

다음 포스팅은 SassScript 중 마지막으로 @each과 @while에 대하여 알아보겠습니다.

감사합니다.

Sass

Syntactically awesome stylesheets

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 SassScript인 변수에 대한 문법을 다루어 보겠습니다.

변수( Variables)

SassScript 문법에서 변수 설정은 변수 이름 앞에 항상 $ 기호를 넣어 시작합니다. 

반복되는 목적의 속성 값을 하나의 변수에 관리하여 여러 곳에 값을 할당하여 줄 수 있습니다. 

변수에서 사용 가능한 값은 문자열, 숫자, 색상,  불리언(true, false), 리스트(Array), null 입니다. 

변수를 정의하는 문법은 $변수명 : 값; 의 문법 형태를 가지고 있습니다.

$url-sprite: '../img/';
$color-red: #ff0000;

변수의 유효 범위( Variables Scope)

자바스크립트에서도 그렇듯이 SassScript 변수도 범위를 가지며, 전역 변수와 지역 변수 두 개로 나누어집니다.

그리고 변수에 변수를 할당, !default(변수값 초기화 설정), #{  }(문자 보간)을 이용하여 코드 어디서든 변수를 쓸 수 있습니다.

전역 변수

문서의 최상위에서 바로 작성한 변수를 전역 변수라고 부릅니다.

어떠한 규칙에도 포함되지 않으며, 문서 어디서나 사용 가능합니다. 

$url-sprite: '../img/'; //전역 변수
$color-red: #ff0000; //전역 변수
$width: 50%; //전역 변수

div {
    background: url($url-sprite + 'sp_icon.png') no-repeat 0 0;
    color: $color-red;
}

p {
    width: $width;
}

div {
  background: url("../img/sp_icon.png") no-repeat 0 0;
  color: #ff0000;
}

p {
  width: 50%;
}

지역 변수

문서의 최상위가 아닌 class 또는 id가 선언된 블록 코드 {  } 내에서만 유효 범위를 가집니다.

지역 변수는 규칙의 중첩 수준에 따라 사용할 수 있는 지역의 범위가 한정됩니다.

지역 변수는 정의한 블록의 상위 부모 블록에서 사용할 수 없습니다.

그러나 지역 변수에 !global 플래그를 사용하면 전역 변수로 사용할 수 있습니다. 

div {
    $url-sprite: '../img/'; //지역 변수
    $color-red: #ff0000; //지역 변수
    $width: 50% !global; // !global 전역 변수
    background: url($url-sprite + 'sp_icon.png') no-repeat 0 0;
    color: $color-red;
}

p {
    width: $width;
}

div {
  background: url("../img/sp_icon.png") no-repeat 0 0;
  color: #ff0000;
}

p {
  width: 50%;
}

변수 재 할당

변수에 변수를 할당해줄 수 있습니다.

$width: 100%;
$box-width: $width;

.box-width {
    width: $box-width;
}

.box-width {
  width: 100%;
}

!default (변수값 초기화 설정)

!default 플래그를 사용하여 할당되지 않은 변수의 초기값을 설정할 수 있습니다.

할당되어 있는 변수의 기존 할당 값을 초기값으로 사용합니다.

$color-base: pink; 

.box {
    $color-base: orange !default;
    color: $color-base;
}

.box {
  color: pink;
}

#{  } (변수 문자 보간)

#{  } 이용하여 어디서든 변수값을 문자열로 넣을 수 있습니다.

$line-left: left;
$value25: 25;
$value77: 77;

.box-string_v1 {
    border-#{$line-left}: 1px solid #333;   //문자 보간
}

// 숫자값인 변수를 + 연결하면 연산되어 102 값이 나옵니다.
.box-variables {
    width: $value25 + $value77 + px; 
}

// 문자 보간으로 변수를 + 연결하면 문자값인 2577 값이 나옵니다.
.box-string_v2 {
    width: #{$value25} + #{$value77} + px;
}

.box-string_v1 {
  border-left: 1px solid #333;
}

.box-variables {
  width: 102px;
}

.box-string_v2 {
  width: 2577px;
}

마치며...

Sass에서 변수는 반복되는 CSS 코드를 하나의 변수값으로 여러 곳에 할당함으로써 코드 재활용성 측면에서 보았을 때 좋습니다.

믹스인을 사용할 때도 매개변수와 인수를 이용하면 컴포넌트 코드의 확장성 측면에서도 편리하게 사용할 수 있습니다.

그렇기에 이번 포스팅은 SassScript 중 변수라는 주제 하나로 다루어 보았습니다.

그만큼 중요하다고 생각됩니다.

다음 포스팅은 SassScript 조건문과 반복문에 대하여 알아보겠습니다.

스크립트를 알고 계신 분들은 쉽게 이해하시겠지만, 모르시는 입문자 분들을 위하여 쉽게 설명하고자 노력하였습니다.

감사합니다.

Sass

Syntactically awesome stylesheets

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 Sass 주석과 연산자에 대한 문법을 다루어 보겠습니다.

주석(Comment)

Sass는 CSS 표준 문법과 동일하게 // 인라인(한 줄) 주석과 /* */ 블록(여러 줄) 주석을 기능을 지원하고 있습니다.

주석은 단지 코드를 실행하지 않는 용도가 아닌, 다양한  기능으로 사용되기 때문에 매우 중요한 역할을 합니다.

주석의 역할은 아래와 같습니다.

• ✔ 특정 기능을 실행시키지 않기 위해서 사용합니다.
• ✔ 특정 기능에  설명을 남겨두기 위해서 사용합니다.
• ✔ 디버깅 또는 특정 기능만 수행하기 위해서 사용합니다.

인라인 주석

인라인 주석은 // 입니다.

인라인 주석은 컴파일된 CSS 파일에 출력되지 않습니다.

그렇기 때문에 웹퍼블리싱 과정에서 사용되는 class 또는 id 용도에 대한 설명을 자유롭게 작성할 수 있습니다.

//인라인 주석은 컴파일 되지 않습니다.

.btn {
    color: #000;
    &.active {
        color:coral;
    }
}

.btn {
  color: #000;
}
.btn.active {
  color: coral;
}

블록 주석

블록 주석은 /*    */ 입니다.

블록 주석은 컴파일하는 스타일에 따라 다르게 나타납니다.

'nested', 'expanded'는 주석 그대로 컴파일되며,  'compact'는 여러 줄로 주석을 작성하였더라도 주석이 한 줄로 컴파일됩니다.

'compressed'는 인라인 주석처럼 컴파일되면 CSS 파일에 주석이 노출되지 않습니다.

하지만 'compressed' 스타일을 사용하더라도 블록 주석을 노출할 수 있습니다.

/*!      */ 문법으로 작성하면 주석이 삭제되지 않고 노출됩니다.

/* 블록 주석은
    컴파일 스타일에 따라 CSS에 따라 다르게 표현되며,    
    'neseted', 'expnaded' 컴파일되는 주석이 동일합니다.
*/

.btn {
    color: #000;
    &.active {
        color:coral;
    }
}

/* 블록 주석은
    컴파일 스타일에 따라 CSS에 따라 다르게 표현되며,    
    'neseted', 'expnaded' 컴파일되는 주석이 동일합니다.
*/
.btn {
  color: #000;
}
.btn.active {
  color: coral;
}

/* 블록 주석은
    컴파일 스타일에 따라 CSS에 따라 다르게 표현되며,
    'compact' 주석의 컴파일된 CSS 파일입니다.
*/

.btn {
    color: #000;
    &.active {
        color:coral;
    }
}

/* 블록 주석은 컴파일 스타일에 따라 CSS에 따라 다르게 표현되며, 'compact' 주석의 컴파일된 CSS 파일입니다.
*/
.btn { color: #000; }
.btn.active { color: coral; }

/* 블록 주석은
    컴파일 스타일에 따라 CSS에 따라 다르게 표현되며,
    'compressed' 주석은 CSS 파일에서 보여지지 않습니다.
*/

/*! 'compressed' 주석을 컴파일된 CSS 파일에에서 내용을 보고 싶다면,
    !를 사용하면 됩니다.
*/

.btn {
    color: #000;
    &.active {
        color:coral;
    }
}

/*! 'compressed' 주석을 컴파일된 CSS 파일에에서 내용을 보고 싶다면, !를 사용하면 됩니다.
*/.btn{color:#000}.btn.active{color:coral}

주석에 변수 넣어서 사용하기 

Sass의 Sass Script는 자바스크립트처럼 변수를 사용할 수 있습니다.

jQuery처럼 '$'를 넣어 변수를 설정할 수 있습니다.

Sass Script 변수에 대해서는 다음번에 자세하게 다루어 보겠습니다. 

$author_n1: 'KKS';
$author_n2: 'LSJ';
$author_n3: 'YSW';
/* Malgun Communication Web Standard Team Author #{$author_n1}, #{$author_n2}, #{$author_n3} */

/* Malgun Communication Web Standard Team Author KKS, LSJ, YSW */

연산자(Operations)

Sass는 연산 기능을 지원하고 있습니다.

연산자의 종류는 사칙 연산자,  비교 연산자, 논리 연산자가 있습니다.

사칙 연산 

일반적으로 Sass에서 사칙 연산은 절대값인 px 단위로 연산을 하지만, 모바일 또는 반응형 웹을 웹퍼블리싱 할 때에는 상대값인 %, em, vw, vh 단위를 하기도 합니다.

사칙연산에는 +(더하기), -(빼기), *(곱하기), /(나누기)가 있습니다.

그리고 사칙연산은 CSS calc(); 로 대체하여 웹퍼블리싱이 가능합니다.

CSS calc(); 를 모르시는 분들은 블로그에 포스팅되어 있으니, 참조 부탁드립니다.

☆ 나누기 연산 주의사항 : CSS를 축약(ex : font: 15px / 21px 'MalgunGothic';) 할 때 /를 허용하기 때문에 괄호( )로 감싸지 않는다면,

연산이 되지 않고 연산자만 컴파일됩니다.

나누기 연산을 할 때는 꼭 ( )괄호로 감싸야합니다.    

.section {
    width: 500px + 500px;   // 더하기
    height: 300px - 100px;  // 빼기
    margin: 10px * 2; // 곱하기
    padding: (10px / 2); // 나누기
    font-size: (4px + 20px) / 2; //더하기, 곱하기 연산 같이 사용하기

    //숫자함수 + 사칙연산
    position: absolute;
    top: floor(20px / 3); // floor(숫자함수) - 소수점 아래는 버림
    right: ceil(20px / 3); // floor(숫자함수) - 소수점 아래는 올림
    bottom: round(20px / 3); // floor(숫자함수) - 소수점 아래는 반올림
}

.section {
  width: 1000px;
  height: 200px;
  margin: 20px;
  padding: 5px;
  font-size: 12px;
  position: absolute;
  top: 6px;
  right: 7px;
  bottom: 7px;
}

비교 연산

Sass에서 비교 연산은 변수값 또는 논리 관계를 비교하는 연산자입니다.

자세한 예제는 'Sass 조건문' 포스팅할 때 자세하게 보여드릴 것을 약속드리며, 아래 논리 연산과 결합하여 간단한 예제로 보여드리겠습니다. 

비교 연산자의 종류는 아래와 같습니다.

• ✔ < : ~ 보다 작은
• ✔ > : ~ 보다 큰
• ✔ <= : ~ 보다 작거나 같은
• ✔ >= : ~ 보다 크거나 같은
• ✔ == : ~ 과 같은 경우
• ✔ != : ~ 과 다른 경우

논리 연산

Sass에서 논리 연산은 논리곱(AND), 논리합(OR), 논리 부정(NOT)의 기호 논리학의 규칙에 따른 연산입니다.

자바스크립트의 논리 연산자인 논리곱(&&), 논리합(||), 논리 부정(!)과 같다고 생각하시면 됩니다.

자세한 예제는 'Sass 조건문' 포스팅할 때 자세하게 다루겠습니다. 

논리 연산자의 종류는 아래와 같습니다.

• ✔ and : 그리고(논리곱)
• ✔ or :  또는(논리합)
• ✔ not : 부정(논리 부정)

$width: 50px;

.box {
    @if not ($width > 100px) {
        height: 200px;
    }
}

.box {
  height: 200px;
}

마치며...

이번 포스팅은 @mixin, @extend를 할 예정이었지만 관련 내용들을 깊게 다루기 위해서는 변수와 조건문을 먼저 알아야 할 것 같아,

변수와 조건문의 기초가 되는 주석과 연산자에 대해서 먼저 다루어 보았습니다.

다음은 Sass 변수와 연산자에 대해서 알아보도록 하겠습니다.

처음 Sass 포스팅을 시작할 때는 간단하게 3편의 글을 작성해서 마무리하려고 했지만,

포스팅하다 보니 욕심이 커져 내용이 좀 더 깊게 들어가면서 여러 편에 걸쳐 포스팅을 해야 할 것 같습니다.

기대해주시고, 재미있게 보시면서 공부해보시길 바랍니다.

감사합니다.

Sass

Syntactically awesome stylesheets

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 CSS 확장 언어로서의 기본이라고 생각되는 중첩과 선택자에 대해 다루어 보겠습니다.

중첩(Nesting)

Sass는 중첩(Nesting) 기능을 제공하고 있습니다.

상위 선택자의 반복을 피해서 편리하고 복잡한 구조를 작성할 수 있습니다.

이것은 선택자나 속성의 관계를 중첩 형태로 표현된 문법입니다. 

여기에는 선택자를 중첩하는 '규칙 중첩'과 CSS 속성을 중첩하는 '속성 중첩' 두 가지 문법으로 구분할 수 있습니다.

규칙 중첩

CSS 규칙을 중첩하여 작성하는 문법입니다.

규칙 중첩은 부모 선택자를 계속 반복하여 작성하지 않게 해 줍니다.

특히 복잡한 구조 형태의 웹퍼블리싱 작업에서 상위 선택자를 많이 상속해야 할 경우 CSS 규칙을 간단하게 작성할 수 있으며,

그 구조를 한눈에 볼 수 있게 모듈화 할 수 있습니다.

그렇다고 규칙 중첩을 무분별하게 사용하는 것은 권장하지 않습니다.

규칙 중첩에서 상위 선택자를 3 Depth 이상 사용할 경우, 재활용성이 제한적입니다.

이럴 경우에는 별개의 클래스를 만들어 사용하는 것이 좋습니다.  

#gnb {
    background-color: #fff;
    width: 200px;
    ul {
        display: flex;
        color: #111;
    }
}

#gnb {
  background-color: #fff;
  width: 200px;
}
#gnb ul {
  display: flex;
  color: #111;
}

속성 중첩

CSS의 공통된 네임스페이스 속성을 중첩하는 문법입니다.

예를 들어 'font-' 시작하는 네임스페이스 속성은 아래와 같습니다.

• ✔ font-family
• ✔ font-size
• ✔ font-style
• ✔ font-weight

위와 같이 CSS 속성 앞에 접두사로 'font-'를 반복해서 썼다면, 속성 중첩 문법을 이용하여 반복하여 작성하지 않아도 됩니다.

h1 {
    font: {
        family: 'Malgun Gothic';
        size: 25px;
        style: normal;
        weight: bold;
    }
    line-height: 1;
}

h1 {
  font-family: 'Malgun Gothic';
  font-size: 25px;
  font-style: normal;
  font-weight: bold;
  line-height: 1;
}

특수 선택자

Sass는 CSS 문법과 동일한 선택자 외에 특수 선택자 2가지 기능을 제공합니다. 

중첩 안에서 상위 엘리먼트를 참조하는 '부모 참조 선택자'와 @extend로 호출하는 '플레이스홀더 선택자'입니다.

부모 참조 선택자

중첩 안에서 '&(Ampersand)'를 사용하여 부모 엘리먼트를 참조할 수 있는 문법입니다.

가상 클래스, 가상 요소, 속성 선택자, id 또는 class 셀렉터를 사용할 때 편리하며, 두 가지 사용방법이 있습니다.

• ✔ 부모 참조 선택자를 부모 엘리먼트와 결합하여 사용하는 방법입니다.
• ✔ 부모 참조 선택자를 하위 자식 선택자로 이동하여 사용하는 방법입니다.

.btn {
    color: #000;
    &.active {
        color:coral;
    }
}

.list_gnb {
    li {
        &:first-child {
            margin-left: 0;
        }
    }
}

div {
    &[class^='section_'] {
        background-color: #ccc;
    }
}

.btn {
  color: #000;
}
.btn.active {
  color: coral;
}

.list_gnb li:first-child {
  margin-left: 0;
}

div[class^='section_'] {
  background-color: #ccc;
}

.list_gnb {
    li {
        &:first-child {
            margin-left: 0;
        }
        div.section & {
            margin-left: 20px;
        }
    }
}

.list_gnb li:first-child {
  margin-left: 0;
}
div.section .list_gnb li {
  margin-left: 20px;
}

플레이스홀더 선택자

@extend로 호출하며 '%(Percent)'를 사용하여, 함수나 변수를 사용하듯이 내가 원하는 요소에 불러와 사용할 수 있습니다.

#gnb {
    background-color: #fff;
    width: 200px;
    ul%box-type {
        display: flex;
        color: #111;
    }
}

.list_notice {
    @extend %box-type;
}

h1, %title-type {
    color: #000;
}

h2 {
    @extend %title-type; 
}