웹퍼블리싱 - 퍼블리싱 이야기 맑은커뮤니케이션

[SourceTree]소스트리(GIT GUI) Git 버전 커밋(commit) 관리 - 3편

퍼블리셔 — Tue, 21 Jun 2022 11:48:21 +0900

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]소스트리(GIT GUI) Git 작업환경 및 로컬 저장소 생성방법 - 2편

퍼블리셔 — Thu, 2 Jun 2022 14:05:44 +0900

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]소스트리(GIT GUI) 설치방법 - 1편

퍼블리셔 — Wed, 1 Jun 2022 00:15:24 +0900

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 ] 설치 및 사용방법(사용 가이드)

퍼블리셔 — Thu, 19 May 2022 16:01:25 +0900

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

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

※ 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 둘 중 어떤 것이 최고라고 말씀드리지는 않겠습니다.

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

감사합니다.

Visual Studio Code(VS Code) - Live Server 모바일에서 웹퍼블리싱 실시간 확인하기

퍼블리셔 — Mon, 25 Apr 2022 16:23:21 +0900

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] 스크롤매직 라이브러리 - 실무 응용 예제 (중급)

퍼블리셔 — Mon, 13 Dec 2021 14:33:59 +0900

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 - '실무 응용 예제 - Ⅰ' 예제 실습 파일

scrollmagic-animation-scroll-last1.zip

0.00MB

실무 응용 예제 - Ⅱ

아래 예제는 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-animation-scroll-last2.zip

0.00MB

마치며...

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

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

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

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

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

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

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

감사합니다.

[ScrollMagic] 스크롤매직 라이브러리 - Controller 옵션, 실무 응용 예제 (제 3편)

퍼블리셔 — Wed, 8 Dec 2021 15:15:24 +0900

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-9-container-scroll.zip

0.00MB

ScrollMagic Examples Site

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

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

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

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

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

Examples - ScrollMagic

ScrollMagic Examples Let's start showing off some magic... Please note: Most of the examples are not optimized for mobile devices, so the sourcecode can be as simple as possible. The obvious exceptions are the examples on mobile support.

scrollmagic.io

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(기본형)' 예제 실습 파일

scrollmagic-6-section-wipe.zip

0.00MB

Section Wipe(응용형)

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

scrollmagic-7-section-wipe.zip

0.00MB

Section Wipe(슬라이더)

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

scrollmagic-8-section-wipe.zip

0.00MB

ScrollMagic 실무 응용 예제

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

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

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

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

scrollmagic-experiment-service1.zip

0.00MB

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

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

scrollmagic-experiment-service2.zip

0.00MB

마치며...

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

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

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

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

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

감사합니다.

[ScrollMagic] 스크롤매직 라이브러리 - 기본 문법 및 메서드, 옵션 (제 2편)

퍼블리셔 — Mon, 29 Nov 2021 12:49:41 +0900

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' 예제 실습 파일

scrollmagic-2-duration.zip

0.00MB

reverse( scene 옵션 )

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

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

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

ScrollMagic - 'reverse' 예제 실습 파일

scrollmagic-2-reverse.zip

0.00MB

triggerHook( scene 옵션 )

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

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

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

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

ScrollMagic - 'triggerHook' 예제 실습 파일

scrollmagic-5-triggerHook.zip

0.00MB

offset( scene 옵션 )

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

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

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

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

setPin

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

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

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

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

scrollmagic-3-setPin,offset.zip

0.00MB

setClassToggle

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

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

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

ScrollMagic - 'setClassToggle' 예제 실습 파일

scrollmagic-4-setClassToggle.zip

0.00MB

마치며...

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

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

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

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

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

감사합니다.

[ScrollMagic] 스크롤매직 라이브러리 - 설치 방법 및 동작 원리 (제 1편)

퍼블리셔 — Thu, 25 Nov 2021 16:50:27 +0900

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-1.zip

0.00MB

마치며...

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

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

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

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

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

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

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

감사합니다.

[Swiper Slider] 페이징(pagination) 2개 적용 방법

퍼블리셔 — Mon, 22 Nov 2021 16:23:18 +0900

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 네 가지에 대해 알아보겠습니다.

'pagination type' : bullets 문법 코드 입니다.

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

✔ Swiper bullets Demo : https://swiperjs.com/demos#pagination

'pagination type' : progressbar 문법 코드 입니다.

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

✔ Swiper progressbar Demo : https://swiperjs.com/demos#pagination-progress

'pagination type' : fraction 문법 코드 입니다.

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

✔ Swiper fraction Demo : https://swiperjs.com/demos#pagination-fraction

'pagination type' : custom 문법 코드 입니다.

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 custom Demo : https://swiperjs.com/demos#pagination-custom

해결 방법

위에 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-pagination.zip

0.03MB

마치며..

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

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

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

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

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

감사합니다.

[Swiper Slider] Swiper 2개 연동과 제어(Controller)

퍼블리셔 — Wed, 17 Nov 2021 16:04:41 +0900

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개 연동 제어' 예제 실습 파일

swiper.zip

0.03MB

마치며..

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

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

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

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

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

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

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

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

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

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

[SassㆍSCSS] SASS 문법 6편 - @mixin, @extend, @import

퍼블리셔 — Wed, 10 Nov 2021 11:41:24 +0900

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 믹스인 이름

SASS '@mixin, @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;
}

CSS '@mixin, @include 기본 정의' 컴파일 결과 코드 입니다.

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 믹스인 이름(인수);

SASS '@mixin 인수 기본값이 없을 경우' 문법 코드 입니다.

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

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

CSS '@mixin 인수 기본값이 없을 경우' 컴파일 결과 코드 입니다.

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

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

SASS '@mixin 인수 기본값을 설정할 경우' 문법 코드 입니다.

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

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

CSS '@mixin 인수 기본값을 설정할 경우' 컴파일 결과 코드 입니다.

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

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

SASS '@mixin 키워드 인수' 문법 코드 입니다.

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

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

CSS '@mixin 키워드 인수' 컴파일 결과 코드 입니다.

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

@extend

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

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

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

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

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

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

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

@extend 선택자

SASS '@extend' 문법 코드 입니다.

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

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

CSS '@extend' 컴파일 결과 코드 입니다.

.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ㆍSCSS] SASS 문법 5편 - @each, @while

퍼블리셔 — Mon, 8 Nov 2021 10:31:20 +0900

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 리스트 또는 맵 데이터 {
	//반복 내용
}

SASS '@each list data 반복문' 문법 코드 입니다.

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

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

CSS '@each list data 반복' 컴파일 결과 코드 입니다.

.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");
}

SASS '@each 반복문에 두 개 이상의 변수 사용' 문법 코드 입니다.

.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');
        }
    }
}

CSS '@each 반복문에 두 개 이상의 변수 사용' 컴파일 결과 코드 입니다.

.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");
}

SASS '@each index 값이 필요할 경우 내장 함수' 문법 코드 입니다.

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

CSS '@each index 값이 필요할 경우 내장 함수' 컴파일 결과 코드 입니다.

.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의 고유 문법이며, 많은 양의 데이터를 컨트롤하기 위해서 반드시 필요합니다.

SASS '@each Map Data' 문법 코드 입니다.

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

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

CSS '@each Map Data' 컴파일 결과 코드 입니다.

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 조건 {
	//반복 내용
}

SASS '@while' 문법 코드 입니다.

$i : 6;

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

CSS '@while' 컴파일 결과 코드 입니다.

.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ㆍSCSS] SASS 문법 4편 - 조건문(@if), 반복문(@for)

퍼블리셔 — Thu, 4 Nov 2021 16:19:49 +0900

Sass

Syntactically awesome stylesheets

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

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

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

if(함수)

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

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

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

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

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

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

SASS 'if(삼항 연산자)' 문법 코드 입니다.

//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)
}

CSS 'if(삼항 연산자)' 컴파일 결과 코드 입니다.

.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 {
	//조건식이 모두 거짓일 때 표현식
}

SASS '@if @esle' 문법 코드 입니다.

//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;
    }
}

CSS '@if @else' 컴파일 결과 코드 입니다.

.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을 사용할 수 있습니다.

SASS '논리 연산자 and' 문법 코드 입니다.

//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;
    }
}

CSS '논리 연산자 and' 컴파일 결과 코드 입니다.

.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의 예제는 아래와 같습니다.

SASS '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
    }
}

CSS 'through, to' 컴파일 결과 코드 입니다.

.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ㆍSCSS] SASS 문법 3편 - 변수, !global, !default

퍼블리셔 — Mon, 1 Nov 2021 15:46:56 +0900

Sass

Syntactically awesome stylesheets

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

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

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

변수( Variables)

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

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

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

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

SASS '변수' 문법 코드 입니다.

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

변수의 유효 범위( Variables Scope)

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

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

전역 변수

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

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

SASS '전역 변수' 문법 코드 입니다.

$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;
}

CSS '전역 변수' 컴파일 결과 코드 입니다.

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

p {
  width: 50%;
}

지역 변수

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

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

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

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

SASS '지역 변수, !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;
}

CSS '지역 변수, !global' 컴파일 결과 코드 입니다.

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

p {
  width: 50%;
}

변수 재 할당

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

SASS '변수 재 할당' 문법 코드 입니다.

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

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

CSS '변수 재 할당' 컴파일 결과 코드 입니다.

.box-width {
  width: 100%;
}

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

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

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

SASS '변수값 초기화 설정' 문법 코드 입니다.

$color-base: pink; 

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

CSS '변수값 초기화 설정' 컴파일 결과 코드 입니다.

.box {
  color: pink;
}

#{ } (변수 문자 보간)

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

SASS '변수 문자 보간' 문법 코드 입니다.

$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;
}

CSS '변수 문자 보간' 컴파일 결과 코드 입니다.

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

.box-variables {
  width: 102px;
}

.box-string_v2 {
  width: 2577px;
}

마치며...

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

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

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

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

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

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

감사합니다.

[SassㆍSCSS] SASS 문법 2편 - 주석, 연산자

퍼블리셔 — Thu, 28 Oct 2021 16:36:48 +0900

Sass

Syntactically awesome stylesheets

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

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

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

주석(Comment)

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

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

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

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

인라인 주석

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

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

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

SASS '인라인 주석' 문법 코드 입니다.

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

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

CSS '인라인 주석' 컴파일 결과 코드 입니다.

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

블록 주석

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

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

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

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

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

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

SASS 'nested', 'expanded' 주석 처리 문법 코드 입니다.

/* 블록 주석은
    컴파일 스타일에 따라 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 단위를 하기도 합니다.

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

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

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

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

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

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

SASS '사칙 연산' 문법 코드 입니다.

.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(숫자함수) - 소수점 아래는 반올림
}

CSS '사칙 연산' 컴파일 결과 코드 입니다.

.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 : 부정(논리 부정)

SASS '비교 연산, 논리 연산' 문법 코드 입니다.

$width: 50px;

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

CSS '비교 연산, 논리 연산' 컴파일 결과 코드 입니다.

.box {
  height: 200px;
}

마치며...

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

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

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

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

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

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

감사합니다.

[SassㆍSCSS] SASS 문법 1편 - 중첩 규칙과 선택자

퍼블리셔 — Wed, 27 Oct 2021 10:56:56 +0900

Sass

Syntactically awesome stylesheets

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

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

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

중첩(Nesting)

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

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

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

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

규칙 중첩

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

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

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

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

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

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

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

SASS '규칙 중첩' 문법 코드 입니다.

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

CSS '규칙 중첩' 컴파일 결과 코드 입니다.

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

속성 중첩

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

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

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

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

SASS '속성 중첩' 문법 코드 입니다.

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

CSS '속성 중첩' 컴파일 결과 코드 입니다.

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

특수 선택자

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

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

부모 참조 선택자

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

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

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

SASS 부모 참조 선택자를 부모 엘리먼트와 결합한 문법 코드 입니다.

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

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

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

CSS 부모 참조 선택자를 부모 엘리먼트와 결합한 컴파일 결과 코드 입니다.

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

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

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

SASS 부모 참조 선택자를 하위 자식 선택자로 이용한 문법 코드 입니다.

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

CSS 부모 참조 선택자를 하위 자식 선택자로 이용한 컴파일 결과 코드 입니다.

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

플레이스홀더 선택자

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

SASS '플레이스홀더' 문법 코드 입니다.

#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; 
}

CSS '플레이스홀더' 컴파일 결과 코드 입니다.

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

h1, h2 {
  color: #000;
}

마치며...

이번 포스팅은 Sass 문법에서 중첩(Nesting), 특수 선택자에 대하여 알아보았습니다.

다음에는 Sass 문법 중 믹스인, 불러오기 등에 대해서 포스팅할 생각입니다.

맑은 커뮤니케이션 퍼블리셔들을 위한 공간이지만, 동종업에서 일하시는 모든 웹퍼블리셔 분들에게 조금이나마 도움이 되었으면 합니다.

감사합니다.

[SassㆍSCSS] 장ㆍ단점 소개, 설치방법 및 컴파일 명령어

퍼블리셔 — Mon, 25 Oct 2021 14:34:25 +0900

Sass

Syntactically awesome stylesheets

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로 코딩되었기 때문입니다.

Ⅰ. Ruby 설치하기

Ruby Installer 사이트에 접속 후 Ruby를 설치합니다.
Ruby 다운로드 : https://rubyinstaller.org/

Ⅱ. Ruby Sass 컴파일러 설치하기

cmd(윈도키+R키) 창을 열고, 아래와 같이 Ruby Sass 컴파일러 설치 명령어를 입력합니다.

gem install sass

Ruby를 이용한 Sass(SCSS) 컴파일 실행하기

Sass(SCSS) 파일은 웹브라우저에서 실행되지 않기 때문에 컴파일 과정을 거쳐서 CSS파일로 변환을 해주어야 합니다.

Ⅰ. [--watch] : 컴파일 자동실행

--watch : 이 옵션을 통해서 Sass 파일을 감시하다가 해당 파일이 수정되면 자동으로 CSS 파일로 컴파일하여 변환해 줍니다.
cmd(커맨드) 라인에 아래와 같이 명령어를 실행시켜 줍니다.

sass --watch scss파일경로:css컴파일경로

Ⅱ. [--style] : 컴파일 CSS 스타일 옵션

--style : 사용자의 취향에 따라 :nested, :expanded, :compact, :compressed 4가지의 컴파일 CSS 스타일을 설정할 수 있습니다.
cmd(커맨드) 라인에 아래와 같이 명령어를 실행시켜 줍니다.

sass --watch --style 스타일옵션 scss파일경로:css컴파일경로

✔ :nested : Sass의 기본 컴파일 스타일로, 각 속성은 한 줄에 작성하고 문서의 규칙은 중첩 정도에 따라 들여 쓰기 합니다.
:nested 옵션 명령어

sass --watch --style nested scss파일경로:css컴파일경로

:nested 컴파일 결과

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

✔ :expanded : CSS 속성은 클래스 안에서 들여쓰기하며 각 한 줄씩 작성하고, 클래스 기본 규칙은 들여쓰기하지 않습니다.
:expanded 옵션 명령어

sass --watch --style expanded scss파일경로:css컴파일경로

:expanded 컴파일 결과

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

✔ :compact : CSS 클래스를 한 줄에 나열하며, 클래스에 속한 모든 속성도 같은 줄에 작성합니다.
:compact 옵션 명령어

sass --watch --style compact scss파일경로:css컴파일경로

:compact 컴파일 결과

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

✔ :compressed : 압축한 CSS 형태로, 가독성을 고려하지 않고 모든 공백을 삭제하여 컴파일됩니다.
:compressed 옵션 명령어

sass --watch --style compressed scss파일경로:css컴파일경로

:compressed 컴파일 결과

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

Ⅲ. [--sourcemap] : 코드 맵핑

--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편의 글을 작성해 보겠습니다.
감사합니다.

Visual Studio Code(VS Code) 설치방법 및 내가 쓰는 확장 플러그인

퍼블리셔 — Wed, 20 Oct 2021 11:40:36 +0900

VS Code

Visual Studio Code

일전에 'VS Code 유용한 단축키 사용방법'을 포스팅하면서

다음에 VS Code 유용한 확장 플러그인 포스팅도 하겠다고 약속했는데 드디어 글을 쓰게 되었습니다.

이번 포스팅은 VS Code 설치방법과 제가 사용하는 확장 플러그인을 소개하겠습니다.

아시는 분들은 다 알겠지만 Visual Studio Code 에디터는 Microsoft의 오픈소스 기반의 크로스 플랫폼입니다.

다양한 개발언어를 지원하고, extension(확장 프로그램) 제공을 통해 쉽게 설치 및 삭제가 가능합니다.

그렇기에 코딩을 하면서 편리한 부분들이 많은 최고의 에디터입니다.

VS Code 설치방법

VS Code는 무료 에디터이며, 아래 공식 사이트에서 다운로드하여 설치하시면 됩니다.

Download : https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

Extension(확장 플러그인) 설치방법

VS Code에서 Extension 설치를 하려면 좌측 사이드바 하단의 Extension 아이콘 버튼을 클릭(Ctrl + Shift + X)합니다.

그리고 사용하고자 하는 확장 플러그인을 검색하여 설치하면 됩니다.

검색하기 전에는 현재 설치되어 있는 확장 플러그인을 확인할 수 있습니다.

Korea Language Pack for Visual Studio Code

한국어 버전으로 VS Code를 사용할 수 있도록 해주는 확장 플러그인입니다.

각국의 언어별 버전의 확장 플러그인을 설치할 수 있습니다.

Auto Close Tag

기본 설치 시 VS Code 에디터에 코드를 작성하려면 여는 태그와 닫는 태그를 일일이 입력해야 합니다.

하지만 Auto Close Tag 플러그인을 설치할 경우 여는 태그만 입력하면 자동으로 닫는 태그가 완성됩니다.

예를 들어 <p>를 입력해도 </p>가 자동으로 완성됩니다.

Auto Close Tag 실행 화면

Auto Rename Tag

커플링 태그(쌍 태그)인 시작 태그 또는 닫는 태그 중 하나를 수정하면 동시에 다른 한쪽 태그도 자동으로 수정되는 플러그인입니다.

예를 들어 <p> 태그를 <div> 태그로 변경하면 닫는 태그도 </p>에서 </div>로 변경됩니다.

Auto Rename Tag 실행 화면

Bracket Pair Colorizer

괄호들이 여러 개 겹쳐 있을 경우 괄호 커플링을 정확히 식별하기 위해 같은 컬러로 보여주는 플러그인입니다.

아래 이미지와 같이 커플링 되는 괄호의 색상이 동일하게 표시됨을 확인할 수 있습니다.

괄호가 중첩되는 경우 구분 지어 쉽게 볼 수 있게 해주는 플러그인입니다.

Bracket Pair Colorizer 실행 화면

Color Highlight

색을 설정하는 마크업을 할 때 rgb 또는 16진수의 색상 코드로 입력하면 해당 색상 코드의 색상을 배경 색상으로 보여줍니다.

Color Hightlight 실행 화면

CSS Peek

웹퍼블리싱을 하면서 id 또는 class에 적용한 내용을 다시 보거나 수정할 때 쉽게 볼 수 있는 플러그인입니다.

사용방법은 Ctrl 키를 누른 상태에서 id 또는 class명 위에 마우스를 클릭하면 작성된 CSS파일 내용을 레이어 팝업창으로 볼 수 있으며, 팝업창의 내용을 수정하면 CSS파일에도 바로 적용되어 수정이 됩니다.

그리고 해당 CSS파일로 이동하고 싶을 경우에는 레이어 팝업창의 상단 파일 경로를 클릭하면 CSS파일 해당 위치로 이동이 가능합니다.

Color Hightlight 실행 화면

indent-rainbow

4가지의 다른 색상으로 번갈아가며 들여 쓰기의 상태를 쉽게 파악할 수 있는 가독성을 주는 플러그인입니다.

코딩의 구조가 복잡하여 한 개의 구조를 찾기 어려울 때 또는 하위까지 복잡하게 들여 쓰기 되어 있을 경우

indent-rainbow 확장 플러그인을 사용하면 컬러의 구분으로 좀 더 쉽고, 빠르게 코딩 구조의 코드를 분석할 수 있습니다.

indent-rainbow 실행 화면

IntelliSense for CSS class names in HTML

HTML class 특성에 대한 CSS class 이름을 완성 제공하는 확장 플러그인입니다.

프로젝트하면서 반복 사용되는 만들어 놓은 공통 클래스 이름을 다 외울 수 없기에 편리한 플러그인입니다.

IntelliSense for CSS class names in HTML 실행 화면

Live Server

제가 VS Code를 쓰는 가장 큰 이유가 Live Server 확장 플러그인 때문입니다.

VS Code 에디터에 코드를 입력하면 실시간으로 브라우저에 바로 반영되어 확인 가능하도록 해주는 가상 서버입니다.

코딩을 하면서 확인을 위해 매번 브라우저에서 F5 새로고침을 하지 않아도 되는 신세계를 경험할 수 있습니다.

✔ Live Server 실행 : Alt + L 누른 후 Alt + O
✔ flex item 자식 속성 : Alt + L 누른 후 Alt + C

Live Server 실행 화면

Path Intellisense

파일이나 이미지 등의 경로를 지정할 때 자동으로 경로를 보여주며, 이를 선택해서 지정할 수 있는 확장 플러그인입니다.

이미지 태그 경로나 CSS 배경 이미지 경로를 찾아갈 때 매우 편리합니다.

Path Intellisense 실행 화면

마치며...

사실 저는 에디터를 다른 종류로 갈아타기 위해 여러 번 시도했었습니다.

Sublime text 외 여러 에디터를 사용해 보았지만, 하드 코딩할 때 드림위버처럼 편리한 확장 플러그인을 가지고 있는 에디터를 찾지 못했습니다.

그렇기에 여러 특정 에디터가 유행할 때도 몇 번 써보고 실망하여 다시 드림위버로 코딩을 했습니다.

그러나 VS Code의 Live Server 확장 플러그인을 사용해보고 새로고침(F5) 하지 않고, 브라우저에서 바로 반영되어 확인할 수 있다는 것은 신세계였습니다.

드림위버에는 없는 기능이었습니다. 저는 가차 없이 10년 넘게 사용한 에디터인 드림위버를 버리고 Live Server 확장 플러그인 하나만 보고 VS Code 에디터로 갈아탔습니다.

처음에는 Live Server 하나 때문에 에디터를 갈아탔으나 1년 넘게 사용해보니,

제가 드림위버에서 유용하게 썼던 기능들을 VS Code 확장 플러그인에 내에서 찾아 쓸 수 있게 되었고, 드림위버보다 더 편리한 확장 플러그인도 찾아서 쓸 수 있게 되었습니다.

웹퍼블리셔로서 웹퍼블리싱을 처음 시작하시거나,

에디터를 갈아타기 위해 이것저것 알아보시는 분이시라면 VS Code 추천드리며, 이번에 포스팅한 내용이 편리한 코딩 생활에 도움이 되었으면 합니다.

감사합니다.

CSS3 Flex(Flexible Box) 코딩 가이드

퍼블리셔 — Sun, 17 Oct 2021 17:51:17 +0900

CSS Flex

CSS Flexible Box Layout Module Level 1

일반적으로 웹페이지의 레이아웃은 display, float, position 등의 css 속성을 사용해 구현합니다.

하지만 복잡한 레이아웃의 경우에는 구현하기 어렵고, 한계점에 부딪칠 때가 있습니다.

이에 레이아웃을 좀 더 간결하고, 쉽게 구현하기 위해 W3C(World Wide Web Consortium)에서 CSS3에 새롭게 추가한

레이아웃 방식이 Flexbox입니다.

그런 만큼 CSS3 flex는 기존의 방식보다 레이아웃의 가변적 배치, 정렬, 순서 등을 유연하게

구현할 수 있는 강력한 기술입니다.

flex 브라우저 지원범위

Flexbox는 Chrome, Firefox, Edge, Safari, Opera 브라우저에서 모두 지원됩니다.

그러나 Internet Explorer 10, 11에서 부분 지원합니다.

Internet Explorer 11은 표준 스펙을 지원하기 때문에, 프로젝트 진행 시 크로스 브라우징 범위가 Internet Explorer 11 이상일 경우

flexbox 레이아웃을 사용한다면 간결하고, 직관적인 웹퍼블리싱을 할 수 있습니다.

하지만 Internet Explorer 10, 11 에서는 버그가 발견되기도 합니다.

이 버그들은 flexbox 속성들의 특징과 기능을 정확하게 파악하고 있다면 해결해 나갈 수 있는 버그들입니다.

또한 Internet Explorer 버그 이슈에 대해 'Can I use 사이트'의 'Known Issues' 탭을 보면 해결 방법을 제시하고 있습니다.

Flex Issues : https://caniuse.com/?search=flex

"flex" | Can I use... Support tables for HTML5, CSS3, etc

CSS Flexible Box Layout Module Method of positioning elements in horizontal or vertical stacks. Support includes all properties prefixed with `flex`, as well as `display: flex`, `display: inline-flex`, `align-content`, `align-items`, `align-self`, `justify

caniuse.com

flex 기본 문법 구조

Flexbox는 상위 부모 요소인 flex container와 그 복수의 자식 요소인 flex item로 구성됩니다.

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Flex</title>
        <style>
            .container{
                display:flex;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
</html>

display:flex; CSS속성이 적용된 div.container가 부모 요소인 flex container가 되고, 하위 요소인 div.item은 자식 요소인 flex item이라 부릅니다.

쉽게 말해서 flex container, flex item 부모 요소와 자식 요소는 ul과 li의 관계처럼 떼려야 뗄 수 없는 관계라고 생각하시면 이해하기 쉽습니다.

Flex 부모 요소와 자식 요소 CSS 속성 구분

위에서도 언급했지만 flex 속성은 크게 컨테이너 속성과 아이템 속성으로 두 가지로 나누어집니다.

✔ flex container 부모 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content
✔ flex item 자식 속성 : flex, flex-grow, flex-shrink, flex-basis, order

flex-direction

flex item 요소들의 배치되는 메인축의 방향을 결정하는 속성입니다.

item의 배치된 방향의 축을 메인축(main axis), 메인축과 수직인 축을 교차축(Cross Axis) 이라고 합니다.

메인축의 방향은 부모 요소인 container의 flex-direction 속성으로 결정합니다.

flex-direction 속성을 따로 지정하지 않으면 기본값인 row가 적용됩니다.

.container {
    flex-direction: row;
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */
}

메인축(Main Axis)과 교차축(Cross Axis) 구분 방법

✔ row(기본값) : Item이 행(수평축: 왼쪽에서 오른쪽) 방향으로 배치됩니다.
✔ row-reverse : Item이 row 반대축 방향으로, 요소들이 역순으로 배치됩니다.
✔ column : Item이 열(수직축: 위에서 아래) 방향으로 배치됩니다.
✔ column-reverse : Item이 column 반대축 방향으로, 요소들이 역순으로 배치됩니다.

CSS : flex-direction 예제 실습 파일

flex-direction.zip

0.03MB

flex-wrap

flex item이 flex container 영역을 넘어갈 경우 줄 바꿈을 할지를 결정하는 속성입니다.

flex-wrap 속성을 따로 지정하지 않으면 기본값인 nowrap이 적용됩니다.

.container {
    flex-wrap: nowrap;
    /* flex-wrap: wrap; */
    /* flex-wrap: wrap-reverse; */
}

✔ nowrap(기본값) : Item의 전체 값이 container의 영역 값을 넘치더라도 줄바꿈하지 않고 Item은 한줄로 배치됩니다.
✔ wrap : Item이 container의 영역값을 넘치면 줄 바꿈 되어 Item이 배치됩니다.
✔ wrap-reverse : Item이 wrap의 역순으로 배치됩니다.

CSS : flex-wrap 예제 실습 파일

flex-wrap.zip

0.03MB

flex-flow

flex-direction과 flex-wrap을 한 번에 같이 지정할 수 있는 축약 속성으로 단축해서 사용할 수입니다.

flex-direction, flex-wrap의 순으로 한 칸 떼고 써주면 됩니다.

.container {
    flex-flow: row wrap;
    /* 아래의 두 줄을 축약하여 위와 같이 작성 */
    /* flex-direction: row; */
    /* flex-wrap: wrap; */
}

justify-content

Item의 메인축을 정렬하는 속성입니다.

메인축은 flex-direction에서 설정합니다.

justify-content 속성을 따로 지정하지 않으면 기본값인 flex-start가 적용됩니다.

.container {
    justify-content: flex-start;
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    /* justify-content: space-around; */
}

✔ flex-start(기본값) : 메인축의 시작 지점을 기준으로 Item을 정렬합니다.
✔ flex-end : 메인축의 마지막 지점을 기준으로 Item을 정렬합니다.
✔ center : 메인축의 Item을 가운데 정렬합니다.
✔ space-between : 메인축의 첫 번째 Item은 시작점에 마지막 Item은 끝 지점 정렬하고, 나머지 item은 사이에 동일한 간격으로 정렬합니다.
✔ space-around : 메인축을 Item둘레에 동일한 간격으로 정렬합니다.

CSS : justify-content 예제 실습 파일

justify-content.zip

0.03MB

align-items

Item의 교차축을 정렬하는 속성입니다.

메인축에 수직인 축을 교차축이라고 합니다.

align-items 속성을 따로 지정하지 않으면 기본값인 stretch가 적용됩니다.

.container {
    align-items: stretch;
    /* align-items: flex-start; */
    /* align-items: flex-end; */
    /* align-items: center; */
    /* align-items: baseline; */
}

✔ stretch(기본값) : container의 높이만큼 교차축 방향으로 item을 늘려, 전체 높이를 채웁니다.
✔ flex-start : 교차축의 시작 지점을 기준으로 Item을 정렬합니다.
✔ flex-end : 교차축의 마지막 지점을 기준으로 Item을 정렬합니다.
✔ center : 교차축의 Item을 가운데 정렬합니다.
✔ baseline : 글꼴의 기준선인 baseline을 기준으로 Item을 정렬합니다.

CSS : align-items 예제 실습 파일

align-items.zip

0.03MB

align-content

Item의 교차축을 정렬하는 속성입니다.

주의해야 할 점은 align-items 속성과 비슷하다는 것입니다.

확실하게 다름을 구분해서 사용하는 방법은 align-items은 Item이 한 줄로 나열되었을 경우 사용할 수 있는 속성이고, align-content는 Item이 여러 줄(2줄 이상) 나열되어 있을 때 교차축 정렬을 위해 사용할 수 있는 속성입니다.

.container {
    flex-wrap: wrap;
    align-content: stretch;
    /* align-content: flex-start; */
    /* align-content: flex-end; */
    /* align-content: center; */
    /* align-content: space-between; */
    /* align-content: space-around; */
}

✔ stretch(기본값) : container의 높이만큼 교차축 방향으로 item을 늘려, 전체 높이를 채웁니다.
✔ flex-start : 교차축의 시작 지점을 기준으로 Item을 정렬합니다.
✔ flex-end : 교차축의 마지막 지점을 기준으로 Item을 정렬합니다.
✔ center : 교차축의 Item을 가운데 정렬합니다.
✔ space-between : 교차축의 첫 번째 Item은 시작점에 마지막 Item은 끝 지점 정렬하고, 나머지 item은 사이에 동일한 간격으로 정렬합니다.
✔ space-around : 교차축을 기준으로 Item둘레에 동일한 간격으로 정렬합니다.

CSS : align-content 예제 실습 파일

align-content.zip

0.03MB

flex-grow

flex Item의 확장 너비 비율을 설정하는 속성입니다.

flex-grow의 속성 값은 0과 양의 정수를 사용합니다.

기본값은 0이며, 기본값을 가지고 있을 때는 Item의 너비가 커지지 않고 원래 크기를 유지합니다.

그러나 속성 값이 1 이상일 경우 Item의 크기에 상관없이 유연한(Flexible) 박스로 변경되고,

원래 너비에 상관없이 너비가 확장되며 container의 빈 공간을 채우게 됩니다.

.item {
    flex-grow: 1;
    /* flex-grow: 0; */ /* 기본값 */
}

CSS : flex-grow 예제 실습 파일

flex-grow.zip

0.03MB

flex-shrink

flex Item의 축소 너비 비율을 설정하는 속성입니다.

flex-shrink의 속성 값은 0과 양의 정수를 사용합니다.

기본값은 1이며, 값이 0일 경우 Item의 너비가 축소되지 않고 원래 크기를 유지합니다.

그러나 속성 값이 1 이상일 경우 Item의 너비가 container 너비보다 클 경 크기에 상관없이 유연한(Flexible) 박스로 변경되고,

container의 전체 너비 안에서, 원래 너비에 상관없이 축소되어 공간을 채웁니다.

.item {
    flex-shrink: 0;
    /* flex-shrink: 1; */ /* 기본값 */
}

CSS : flex-shrink 예제 실습 파일

flex-shrink.zip

0.03MB

flex-basis

flex Item의 기본 너비를 설정하는 속성입니다.

flex-basis의 값은 auto입니다.

flex-basis 속성 값으로 auto와 0을 많이 사용합니다.

속성 값이 auto일 경우 Item의 값은 상대적인 기준이 되어 Item의 너비 기준대로 비율이 설정되며, 0일 경우 Item의 값은 절대적인 기준이되어 container를 기준으로 Item 너비 비율이 동일하게 설정됩니다.

✔ width와 basis 중 하나만 사용하는 것이 좋습니다.
✔속성 값 단위로 0, auto, px, em, %, fill, content, max-content, min-content, fit-content 사용 가능합니다.

flex

flex grow, flex-shrink, flex-basis를 한 번에 같이 지정할 수 있는 축약 속성으로 단축해서 사용할 수 있습니다.

.item {
    flex: 1;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
    flex: 1 1 auto;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
    flex: 1 100px;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 100px; */
}

flex 축약되는 키워드 값에 따른 축약되는 속성의 설정값은 다음표와 같습니다.

flex	flex-grow	flex-shrink	flex-basis
initial(기본값)	0	1	auto
none	0	0	auto
auto	1	1	auto
양의 정수	1	1	0

align-self

개별 Item의 교차축을 정렬하는 속성입니다.

align-items은 Container에 포함하는 모든 Item의 교차축을 정렬하는 속성이라면,

필요한 요소의 Item만 개별적으로 정렬을 변경하고자 할 경우 align-self 속성을 사용하면 됩니다.

align-self의 기본값은 auto입니다.

align-self는 align-items 속성보다 우선되어 적용됩니다.

이 말은 전체 설정보다 각각의 개별 설정이 우선된다는 것입니다.

기본값 auto 외에 align-items 속성 값과 동일합니다.

.item {
    align-self: auto;
    /* align-self: stretch; */
    /* align-self: flex-start; */
    /* align-self: flex-end; */
    /* align-self: center; */
    /* align-self: baseline; */
}

✔ auto(기본값) : container의 align-items 값을 기본적으로 상속받습니다.
✔ stretch : container의 높이만큼 교차축 방향으로 선택한 개별 item을 늘려, 전체 높이를 채웁니다.
✔ flex-start : 교차축의 시작 지점을 기준으로 선택한 개별 Item을 정렬합니다.
✔ flex-end : 교차축의 마지막 지점을 기준으로 선택한 개별 Item을 정렬합니다.
✔ center : 선택한 개별 교차축의 Item을 가운데 정렬합니다.
✔ baseline : 선택한 개별 글꼴의 기준선인 baseline을 기준으로 Item을 정렬합니다.

CSS : align-self 예제 실습 파일

align-self.zip

0.03MB

order

개별 Item의 '시각적' 나열 순서를 설정하는 속성입니다.

속성 값은 숫자로 설정하며, 숫자가 클수록 뒤에 배치되고, 숫자가 작을수록 앞에 배치됩니다.

음수 값도 설정 가능합니다.

.item:nth-child(1) { order: 3; } /* 세번째 배치 */
.item:nth-child(2) { order: 2; } /* 두번째 배치 */
.item:nth-child(3) { order: 1; } /* 첫번째 배치 */

CSS : order 예제 실습 파일

order.zip

0.03MB

마치며...

flex는 정말로 화면 구성 레이아웃을 퍼블리싱할 때 강력한 성능을 보여줍니다.

필자는 최근 2년 사이에 (주) 맑은 커뮤니케이션에서 일을 진행하면서 'Internet Explorer 10' 이상 크로브 라우징 하는 프로젝트가 대부분이었던 것 같습니다.

마이크로소프트에서도 2022년 6월부터는 'Internet Explorer 11' 보안지원을 중단한다고 했습니다.

고객사들도 의식이 많이 바뀌고 있다고 생각합니다.

아직도 display, float, position 등의 CSS 속성으로 레이아웃을 구성하시는 웹퍼블리셔 분들은 flexbox를 이용한 레이아웃 퍼블리싱을 도전해 보시길 추천드립니다.

오랜만에 CSS 관련 포스팅을 했습니다.

다른 글 쓸 때보다 2배 이상의 정성을 다해서 쓴 것 같습니다.

웹퍼블리셔 동료 여러분들의 응원이 필요합니다!!

감사합니다.

스크롤 애니메이션 효과를 줄 수 있는 라이브러리ㆍAOS.js

퍼블리셔 — Sat, 16 Oct 2021 22:21:20 +0900

AOS

Animate On Scroll Library

프로젝트에서 퍼블리싱 작업 중 세로로 긴 콘텐츠의 메인 또는 서브페이지를 코딩하다 보면,

고객사의 요청에 의해 스크롤되었을 때 콘텐츠 요소의 애니메이션 효과를 퍼블리싱해야 할 경우가 있습니다.

그럴 경우 AOS 또는 ScrollMagic 라이브러리를 사용하면 쉽게 스크롤 애니메이션 효과를 구현할 수 있습니다.

두 가지 모두 사용하기 쉽고, 좋은 스크롤 애니메이션 라이브러리입니다.

저는 이 두 가지 라이브러리를 프로젝트 상황에 따라 사용합니다.

ScrollMagic 라이브러리의 경우 GSAP TweenMax를 알아야 사용하기 편리합니다.

또한 자바스크립트와 jQuery를 알아야 합니다.

애니메이션 효과나 제어를 직접 해야 하기 때문에 시간 소요가 더 많이 됩니다.

그렇기에 AOS 라이브러리보다 애니메이션(속도, 시작 위치, 곡선 등)을 자유롭게 구현할 수 있습니다.

그러나 프로젝트의 시간이 촉박할 경우, ScrollMagic 라이브러리로 퍼블리싱하다 보면 야근이 눈에 훤하죠?

그럴 경우 AOS 라이브러리를 사용하면 쉽게 스크롤 애니메이션을 코딩할 수 있습니다.

AOS 라이브러리는 자바스크립트를 몰라도 쉽게 사용할 수 있습니다.

또한 많은 효과를 제공하기 때문에 ScrollMagic 라이브러리에 뒤떨어지지 않습니다.

'시간 투자 대비 가성비는 모든 스크롤 애니메이션 라이브러리 중 최고'라고 생각됩니다.

제가 왜 두 가지 라이브러리를 상황에 따라 골라서 사용하는지 AOS와 ScrollMagic 라이브러리의 차이를 아시겠죠?

그럼 지금부터 이번 포스팅의 주제인 AOS 라이브러리에 대해 알아보겠습니다.

Installation

기본적으로 <head> 태그 안에 aos.js와 aos.css 라이브러리 파일을 불러옵니다.

jQuery 라이브러리도 필요합니다.

aos.js, jQuery.js는 CDN으로 불러오겠습니다.

<head>
	<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css"> 
	<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
</head>

그다음 <header>, <body>, 스크립트 영역 중 한 곳에 AOS 라이브러리를 사용하기 위한 초기화 스크립트를 작성합니다.

여기까지가 AOS 라이브러리를 사용하기 위한 준비과정입니다.

<script> 
	AOS.init();
	/* 주석부분과 같이 AOS API - Global Setting 가능
	AOS.init({
		offset: 120,
		delay: 0,
		duration: 400,
		easing: 'ease',
		once: false,
		mirror: false,
		anchorPlacement: 'top-bottom'
	});    
	*/
</script>

사용방법(How to use AOS?)

기본 완성된 기본 사용방법은 아래와 같습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>AOS Animation</title> 
        <!-- AOS 라이브러리 불러오기-->
        <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css"> 
        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
    </head>
    <body>
        <!-- AOS 스크립트 초기화 -->
        <script> 
            AOS.init(); 
        </script>
        <!-- //AOS 스크립트 초기화 -->
        <div aos="fade-up" data-aos-offset="200" data-aos-easing="ease-out-cubic" data-aos-duration="500">
            <!-- 애니메이션 객체 요소 -->
            <!-- //애니메이션 객체 요소 -->
        </div>
    </body>
</html>

※ AOS 라이브러리 애니메이션은 블록 태그(Block Tag)에만 적용 가능합니다. 인라인 태그(Inline Tag)에는 효과가 적용되지 않습니다.

data-aos 옵션 속성

AOS 라이브러리 코드 사용방법을 알았으니, 이제 API 옵션에 대해 알아보겠습니다.

옵션 속성이 무엇인지 정확히 알아야 제대로 사용할 수 있기 때문입니다.

옵션 속성도 정확히 모른 상태에서 사용방법만 안다는 것은 무의미하겠죠?

API	API 핵심내용
data-aos	사용할 애니메이션 효과명
data-aos-easing	애니메이션 시간흐름에 따른 속도설정 옵션(default: ease)
data-aos-anchor	특정한 객체에 anchor를 설정하여, 어떤 객체를 기준으로 애니메이션이 시작 될지를 설정
data-aos-delay	애니메이션 재생 대기시간 설정(default: 0)
data-aos-offset	애니메이션 효과가 시작될 객체의 위치 설정
data-aos-duration	애니메이션의 재생시간 설정(default: 400)
data-aos-anchor-placement	애니메이션이 어느 위치에서부터 적용될지 설정(default: top-bottom)
data-aos-once	스크롤 할때마다 애니매이션이 재생될지를 설정(default: false)

※ delay와 duration은 0부터 3000까지 최대값을 설정할 수 있고, 50 단위로 설정 변경이 가능합니다.

data-aos : Attribute Value

Fade animation	✔ fade ✔ fade-up ✔ fade-down ✔ fade-left ✔ fade-right ✔ fade-up-left ✔ fade-up-right ✔ fade-down-left ✔ fade-down-right	Flip animation	✔ flip-up ✔ flip-down ✔ flip-left ✔ flip-right
Slide animation	✔ slide-up ✔ slide-down ✔ slide-left ✔ slide-right	Zoom animation	✔ zoom-in ✔ zoom-in-up ✔ zoom-in-down ✔ zoom-in-left ✔ zoom-in-right ✔ zoom-out ✔ zoom-out-up ✔ zoom-out-down ✔ zoom-out-left ✔ zoom-out-right

data-aos-easing : Attribute Value

✔ linear
✔ ease
✔ ease-in
✔ ease-out
✔ ease-in-out
✔ ease-in-back
✔ ease-out-back
✔ ease-in-out-back
✔ ease-in-sine
✔ ease-out-sine
✔ ease-in-out-sine
✔ ease-in-quad
✔ ease-out-quad
✔ ease-in-out-quad
✔ ease-in-cubic
✔ ease-out-cubic
✔ ease-in-quart
✔ ease-out-quart
✔ ease-in-out-quart

data-aos-anchor-placement : Attribute Value

✔ top-bottom
✔ top-center
✔ top-top
✔ center-bottom
✔ center-center
✔ center-top
✔ bottom-center
✔ bottom-top

AOS 라이브러리 예제 및 다운로드

AOS Library 공식 사이트 : https://michalsnik.github.io/aos/

AOS - Animate on scroll library

AOS Animate On Scroll Library Scroll down

michalsnik.github.io

AOS Library Github : https://github.com/michalsnik/aos

GitHub - michalsnik/aos: Animate on scroll library

Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub.

github.com

마치며...

여러 가지 스크롤 애니메이션 라이브러리가 있지만, 저는 AOS 라이브러리가 가장 사용하기 쉽다고 생각합니다.

자바스크립트를 잘 몰라도 쉽게 사용할 수 있기에 사용자의 범위도 신입부터 경력자까지 범용성 또한 좋다고 생각합니다.

시간이 촉박한 프로젝트에서 스크롤 애니메이션 퍼블리싱을 구현해야 할 경우, 작업시간이 부족해서 헤매지 마시고 AOS Library로 멋있고 동적인 사이트를 쉽게 만들어 보시기 바랍니다.

맑은커뮤니케이션 저희 퍼블리셔 직원분들도 파이팅!!

감사합니다.

[TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 심화2(곡선 애니메이션)

퍼블리셔 — Thu, 14 Oct 2021 13:56:12 +0900

TweenMax 곡선ㆍ라운드 애니메이션

프로젝트 퍼블리싱을 하다 보면, 디자이너 작업자들이 문의를 합니다.

혹시 곡선 형태의 애니메이션 처리 작업이 가능한가요?

퍼블리셔 : 음....

퍼블리셔 : 가능하지만 스크립트로 처리해야하고 0.0.1초 단위로 '가로 1px, 세로 1px씩 변할 때마다 엘리먼트의 좌표를 바꿔줘야 하고너무 복잡....블라 블라

ㆍ

디자이너 : 쉽게 말해주세요.

퍼블리셔 : 프로젝트 시간도 부족하고 해서 하기 힘들 것 같습니다.

디자이너 : 네ㅜㅜ

대부분의 곡선 애니메이션 구현을 요청하면 대부분의 퍼블리셔들은 이렇게 대답을 할 것 같습니다.

하지만 GSAP의 곡선을 처리하는 bezier 속성을 알게 된다면, 간편하게 곡선 애니메이션(라운드 움직임)의 효과를 만들 수 있습니다.

자바스크립트나 jQuery로는 구현할 수 없는 신세계??

그럼 바로 bezier curve에 대해서 알아보겠습니다.

이것을 알게되는 순간 퍼블리셔로써 큰 무기를 가지게 되는 것입니다.

bezier : Array

Target 객체를 정해진 좌표까지 이동을 직선으로 하는 것이 아닌 부드러운 곡선으로 이동합니다.

코드 작성 기본 규칙

☆ GSAP 라이브러리로는 bezier curve 곡선을 사용할 수 없습니다.

bezier 속성을 사용하기 위해서는 GSAP의 TweenMax 라이브러리를 사용해야 합니다.

저는 프로젝트 작업 시 GSAP 라이브러리보다는 TweenMax 라이브러리를 통합으로 사용합니다.

왜냐하면TweenMax 라이브러리에서는 GSAP 라이브러리가 가지고 있는 기능들을 모두 사용 가능합니다.

TweenMax library CDN : https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js

☆ bezier 코드는 CSS의 position 속성이 없다면 사용 불가능합니다. 그러나 애니메이션 키값을 'top', 'left'가 아닌 'x', 'y' 키값으로 좌표값을 작성하여 트윈 한다면 CSS position 속성 없이 애니메이션이 가능합니다.

☆ bezier 속성 안에 ease, repeat, yoyo 등의 gsap 속성을 사용할 수 있습니다. ease, repeat, yoyo 속성은 기초 1~3편 포스팅에서 작성했습니다. 기억나지 않으시면 다시 한번 보시길 추천드립니다.

bezier 속성인 curviness, autoRotate, type 속성을 이용한 bezier 곡선

curviness : 커브의 강도를 나타냅니다. 키값이 크면 클수록 역동적으로 애니메이션 됩니다.

autoRotate : true를 키값으로 주면 진행방향이 '곡선의 움직임 방향'으로 엘리먼트가 틀어져 애니메이션이 발생하며, false를 키값으로 주면 진행방향과 상관없이 target 모습 그대로 틀어짐 없이 애니메이션 됩니다.

type : 기본값은 "thru"이며 "soft", "quadratic", "cubic" 4가지입니다. 첨부해드리는 예제를 통해서 보시면 차이를 알 수 있습니다.

좌표 키값과, 기본 GSAP 속성을 사용한 bezier 곡선

TweenMax - bezier base 예제 실습 파일

gsap_bezier_base.zip

0.03MB

curviness, autoRotate 속성 값을 적용한 bezier 곡선

TweenMax - bezier curviness, autoRotate 예제 실습 파일

gsap_bezier_autoRotate.zip

0.03MB

type 속성 값을 적용한 bezier 곡선

TweenMax - bezier type 예제 실습 파일

gsap_bezier_type.zip

0.03MB

bezier 마치며...

GSAP bezier 곡선 움직임(애니메이션)에 대하여 모두 알아보았습니다.

코드 작성이 자바스크립트나, jQuery 작성이 직관적이고 쉽게 곡선 애니메이션을 만들 수 있다는 것을 보셨죠?

이것을 끝으로 GSAPㆍTweenMax 라이브러리 포스팅을 마무리하고자 합니다.

GSAP 설치방법부터 기초, 심화과정의 세분화 과정을 통해 여러 편에 걸쳐 포스팅하였습니다.

GSAP 라이브러리 포스팅을 시작할 때 정리해야 할 내용들이 많아서 걱정이 많이 됐는데, 완전히 끝나고 나니 시원 섭섭하네요!

GSAPㆍTweenMax 라이브러리 포스팅 전편이 퍼블리싱하는데 길잡이가 되길 바라며, 마무리하겠습니다.

감사합니다.

[TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 심화1(GSAP Callback)

퍼블리셔 — Tue, 12 Oct 2021 15:00:03 +0900

GSAP Callback (트윈 제어 - 콜백 함수)

callback은 이벤트에 전달해주는 콜백 함수입니다.

GSAP는 함수를 호출하고 파라미터를 넘기는 과정을 편하게 제어할 수 있습니다.

GSAP 콜백 함수는 onInit, onStart, onComplete, onUpdate, onRepeat, onReverseComplete 가 있습니다.

이번 포스팅에서는 위 콜백 함수에 대해 알아보고자 하며, 예제는 자주 사용하는 콜백 함수 위주로 작성할 것이며,

사용빈도가 낮은 콜백 함수는 간단하게 설명 위주로 포스팅하고자 합니다.

onInit

애니메이션(Tween)이 시작되기 바로 전에 함수를 호출합니다.

onStart와 별 차이가 없지만, 당연히 onStart 보다 빨리 호출됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onInit</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onInit: motionOnit
            });

            function motionOnit() {
                alert('GSAP Tween 콜백함수 시작 전'); //Tween이 시작되기 바로 전에 호출
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
    </style>
</head>
<body>
    <div class="tweenbox"></div>
</body>
</html>

GSAP - onInit 예제 실습 파일

gsap.onInit.zip

0.03MB

onStart

애니메이션(Tween)이 시작할 때 함수를 호출합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onStart</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onStart: motionStart
            });

            function motionStart() {
                alert('GSAP Tween 콜백함수 시작'); //Tween이 시작
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
    </style>
</head>
<body>
    <div class="tweenbox"></div>
</body>

GSAP - onStart 예제 실습 파일

gsap.onStart.zip

0.03MB

onComplete

애니메이션(Tween)이 종료되었을 때 함수를 호출합니다.

퍼블리셔가 프로젝트 퍼블리싱 작업 시 GSAP 콜백 함수 중 가장 사용빈도가 높습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onComplete</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onComplete: motionOncomplete
            });

            function motionOncomplete() {
                alert('GSAP Tween 콜백함수 종료');
                gsap.to('.tweenbox', 3, {
                    marginLeft: 0,
                    backgroundColor: 'lightcoral',
                    border: '2px solid crimson',
                    borderRadius: 0
                }); 
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
    </style>
</head>
<body>
    <div class="tweenbox"></div>
</body>
</html>

GSAP - onComplete 예제 실습 파일

gsap.onComplete.zip

0.03MB

Event(함수) + Params

애니메이션(Tween) 중 호출하고자 하는 함수 뒤에 Params 파라미터를 붙여 줄 수 있습니다.

코드 문법 규칙

Ⅰ. 배열의 형태로 값을 넘겨주어야 합니다.

Ⅱ. 자기 자신의 값을 넘겨줄 때에는 "{self}"라고 값을 주어야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onComplete</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            var outText = document.querySelector(".motion-message");
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onStart: motionMessage,
                onStartParams: ['GSAP Tween 콜백함수 시작 메시지','START'],
                onComplete: motionMessage,
                onCompleteParams: ['GSAP Tween 콜백함수 종료 메시지', 'END']
            });

            function motionMessage(message1, message2) {
                outText.innerHTML += message1 + '-' + message2 + '<br>';
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
        .motion-message{margin:30px 10px}
    </style>
</head>
<body>
    <div class="tweenbox"></div>
    <div class="motion-message"></div>
</body>
</html>

GSAP - params 예제 실습 파일

gsap.params.zip

0.03MB

onUpdate

애니메이션(Tween)이 계속 진행되는 동안 호출합니다.

해당 함수는 사용빈도가 낮으므로, 예제는 만들지 않고 위에 콜백 함수 설명으로 대신합니다.

onRepeat

애니메이션(Tween)이 반복될 때마다 호출합니다.

해당 콜백 함수는 사용빈도가 낮으므로, 예제는 만들지 않고 위에 콜백 함수 설명으로 대신합니다.

onReverseComplete

애니메이션(Tween)이 반전(Reverse) 된 후 모션이 완료되었을 때 호출합니다.

해당 콜백 함수는 사용빈도가 낮으므로, 예제는 만들지 않고 위에 콜백함수 설명으로 대신합니다.

GSAP Callback(콜백 함수) 마치며...

포스팅했던 GSAP 기초 1~기초 3까지 내용을 모두 학습하셨다면, 웹퍼블싱 하면서 동적인 화면 구현의 프로젝트는 충분히 수행 가능하리라 생각됩니다.

하지만 퍼블리셔로서 발전하고 싶은 욕구를 만족시키기 위해 콜백 함수까지 알고 있다면 더욱 좋다고 생각합니다.

가끔 프로젝트 작업 시 GSAP(트윈 맥스)를 사용하다 콜백 함수를 사용해야 할 경우도 있습니다.

다음 포스팅은 GSAP(TweenMax) 심화 마지막 편으로 곡선 방향의 애니메이션을 하는 방법을 알아보겠습니다.

감사합니다.

[TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 기초3(GSAP Controlling, Easing)

퍼블리셔 — Fri, 8 Oct 2021 15:59:48 +0900

GSAP Variables (트윈 제어 - Style Controlling )

이전 '기초 2 포스팅' 에서는 GSAP는 움직임을 제어할 수 이벤트 컨트롤링에 대해 알아보았습니다.

이번 포스팅 주제는 스타일 컨트롤하는 방법에 대해서 다루어 보겠습니다.

CSS를 잘 다루는 퍼블리셔라면 이번 주제의 내용을 쉽게 이해하실 수 있으리라 생각됩니다.

또한 Easing 컨트롤에 대해 같이 알아보겠습니다.

CSS Style 트윈 기본 문법

기본적인 문법은 CSS 작성방법과 동일하며, CSS 코드를 모두 사용 가능합니다.

그러나 background-color, margin-top, background-image와 같이 css에 '-' 가 포함되어 있는 문법을 사용해 트윈 스타일을 변경하고자 할 경우에는 카멜 표기법을 사용합니다.

카멜 표기법 사용방법은 '-' 뒤에 영문을 대문자로 작성합니다.

예를 들어 backgroundColor, marginTop, backgroundImage로 작성합니다.

gsap.to('.tweenbox', 3, {width:300, height:300, backgroundColor:'#ccc'});

GSAP - CSS Style Control 예제 실습 파일

gsap.css.style.zip

0.03MB

GSAP 제공하는 Style 트윈 기본 문법

CSS Style과 동일하게 gsap에 내장된 Style 변경 방법입니다.

장점은 CSS Style 보다 코드가 좀 간편합니다.

CSS만 사용해도 무리가 없으나, 더 알고 있다고 나쁜 건 없겠죠?

GSAP에서 제공하는 Style과 CSS Style의 문법 차이를 아래와 같이 간단하게 정리해 보겠습니다.

GSAP	CSS
x:300	transform: translateX(300px), margin-left: 300px
y:300	transform: translateY(300px), margin-top: 300px
scaleX:2	transfome: scaleX(2)
scaleY:2	transfome: scaleY(2)
rotation:360	transform: rotate(360deg)
rotationX:180	transform: rotateX(180deg)
rotationY:180	transform: rotateY(180deg)
skewY:45	transform: skewY(45deg)
xPercent:45	transform: translateX(45%)
yPercent:45	transform: translateY(45%)

GSAP Style Control 작성 문법

gsap.fromTo('.tweenbox', 1.5, { scaleX:1, scaleY:1, rotation:0, delay: 0 }, {scaleX:2, scaleY:2, rotation:180, delay: .5 });

GSAP - GSAP Style Control 예제 실습 파일

gsap_gsap.css.zip

0.03MB

GSAP Easing

GSAP는 Jquery처럼 easing 함수를 제공합니다.

easing의 function은 애니메이션이 진행됨에 따라 지정한 값의 속도 변화 움직임을 컨트롤하는 설정 값입니다.

그렇기 때문에 움직임을 표현할 때 없어서는 안 될 중요한 요소입니다.

GSAP에서 기본 easeing 값은 Power1.easeOut 입니다.

CDN - Easing 라이브러리 적용방법

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>GSAP</title>
	<!-- CDN GSAP, Easing -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/EasePack.min.js"></script>
</head>
<body>

</body>
</html>

Easing 코드 적용방법

TweenMax.staggerFrom('.tweenbox', 1, {
	ease: Back.easeOut,
	opacity: 0,
	y: 200,
	delay: 0.5
}, 0.2);

GSAP - GSAP Easing Control 예제 실습 파일

gsap_easing.zip

0.03MB

Easing의 종류는 GSAP 공식 사이트에서 easing을 종류별 구현하여 확인할 수 있습니다.

또한 예시, 실행을 해보고 easing 코드를 복사하면 쉽게 사용할 수 있습니다.

백 번 설명하여 포스팅하는 것보다는 직접 보시면 이해가 더 빠르리라 생각되어, GSAP 공식 사이트의 easing 메뉴 URL을 아래에 공유해 드립니다.

https://greensock.com/docs/Easing

GSAP Controlling, Easing 마치며...

GSAP Style, Easing Controlling에 대하여 정리해 보았습니다.

이전에 작성한 '기초 2', 이번에 작성한 '기초 3'을 통해 GSAP의 이벤트, 스타일, Easing 컨트롤에 대해 모두 다루어 보았습니다.

이 글을 보신 분들 모두 퍼블리싱하시면서 GSAP 애니메이션을 떡 주무르듯이 컨트롤하실 수 있는 고수가 되실 수 있었으면 합니다.

다음 포스팅은 GSAP eventCallback 함수에 대해 간단하게 알아 보겠습니다.

감사합니다.

[TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 기초2(GSAP Controlling)

퍼블리셔 — Thu, 7 Oct 2021 16:23:42 +0900

GSAP Variables (트윈 제어 - Tween Controlling )

GSAP는 움직임을 제어할 수 있는 메서드를 제공합니다.

이번 포스팅에서는 repeat(), repeatDelay(), delay(), yoyo(), start(), resume(), restart(), reverse(), isActive(), pause(), seek(), timeScale() 에 대해 예제와 설명을 통해 알아가 보겠습니다.

repeat(number)

애니메이션(트윈이라 정의) 반복 횟수 설정합니다.

기본값은 1이며, -1을 설정하면 무한반복됩니다. delay가 포함되어 있는 경우 첫 번째 트윈만 delay가 적용되고, repeat가 반복 실행되는 두 번째부터는 delay가 적용되지 않습니다.

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	gsap.to('.tweenbox', 3, {
		marginTop: 300,
		marginLeft: 300,
		backgroundColor: '#ccc',
		border: '2px solid #222',
		borderRadius: 30,
		repeat: 3 //repeat 값이 -1 일 경우 무한 반복
	});
});

//HTML
<div class="tweenbox"></div>

gsap.repeat() 예제 실습 파일

gsap.repeat().zip

0.03MB

repeatDelay(number)

트윈 반복 시 지연 시간을 초 단위로 설정합니다.

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	gsap.to('.tweenbox', 3, {
		marginTop: 300,
		marginLeft: 300,
		backgroundColor: '#ccc',
		border: '2px solid #222',
		borderRadius: 30,
		repeat: 3 //repeat 값이 -1 일 경우 무한 반복
		repeatDelay: 2 // 반복 지연시간 설정(초 단위)
	});
});

//HTML
<div class="tweenbox"></div>

gsap.repeatDelay() 예제 실습 파일

gsap.repeatDelay().zip

0.03MB

delay(number)

트윈 지연 시간을 초 단위로 설정합니다.

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	justify-content:center;
	padding:200px 0;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	$('.btn').click(function(){
		gsap.fromTo('.tweenbox', 1.5, { scaleX:1, scaleY:1, rotation:0, delay: 0 }, {scaleX:2, scaleY:2, rotation:180, delay: .5 });
	});
});

//HTML
<a href="#none" class="btn">Toggle Tween Delay</a>
<div class="content">
	<div class="tweenbox"></div>
</div>

gsap.delay() 예제 실습 파일

gsap.delay().zip

0.03MB

yoyo(Boolean)

트윈을 앞뒤로 반복하여 실행합니다.

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	TweenMax.to('.tweenbox', 3, {
		marginLeft: 300,
		backgroundColor: '#ccc',
		border: '2px solid #222',
		borderRadius: 30,
		repeat: -1, //repeat 값이 -1 일 경우 무한 반복
		yoyo: true // 애니메이션을 앞뒤로 반복하여 실행 시킴 - yoyo: Boolean 
	});
});

//HTML
<div class="tweenbox"></div>

gsap.yoyo() 예제 실습 파일

gsap.yoyo().zip

0.03MB

pause( ), resume( ), restart( )

pause( ) - 트윈의 현재 위치에서 일시 중지하는 설정합니다.

resume( ) - 방향을 바꾸지 않고 현재 위치에서 트윈을 재시작하는 설정합니다.

restart( ) - 트윈을 처음부터 다시 시작하는 설정합니다.

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox");
	tweenBox = TweenMax.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:500, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}

function tweenPause(){
	tweenBox.pause();   //멈춤
}

function tweenResume(){
	tweenBox.resume();  //재시작
}

function tweenRestart(){
	tweenBox.restart(); //처음부터 다시시작
}


//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenPause();" class="btn">Pause()</a>
<a href="javascript:tweenResume();" class="btn">Resume()</a>
<a href="javascript:tweenRestart();" class="btn">Restart()</a>
<div class="content">
    <div id="tweenBox" class="tweenbox"></div>
</div>

pause(), resume(), restart() 예제 실습 파일

start(),restart(),resume(),pause().zip

0.03MB

reverse( )

트윈 재생을 역방향으로 설정 합니다.

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox1");
	tweenBox = gsap.fromTo(motionBox, 2, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30})
}

function tweenReverse(){
	tweenBox.reverse();   //역방향으로 진행
}

//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenReverse();" class="btn">Reverse()</a>
<div class="content">
    <div id="tweenBox1" class="tweenbox"></div>
</div>

reverse() 예제 실습 파일

reverse().zip

0.03MB

isActive( )

트윈의 활성화 여부를 나타냅니다.

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}
button {margin:10px}

//JS
$(function(){
	var tween = gsap.to('.tweenbox', 2, {
		x: 300, 
		backgroundColor: '#ccc', 
		border: '2px solid #222', 
		borderRadius: 30,
		reversed: true //reversed() : 애니메이션의 역방향에 대한 여부 및 설정
	});

	$('#tweenBox').click(function(){
		if(!tween.isActive()){  //isActive() : 애니메이션 활성화 여부
			tween.reversed() ? tween.play() : tween.reverse();  //삼항연산자 :  조건 ? ture : false
		}
	});
});

//HTML
<div class="tweenbox"></div>
<button id="tweenBox">Toggle Tween Reverse</button>

isActive() 예제 실습 파일

isActive().zip

0.03MB

seek(number)

트윈을 지정한 위치로 이동 설정 합니다.

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox");
	tweenBox = gsap.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}

function tweenSeek(){
	tweenBox.seek(3);   //지정한 위치로 이동(3초 위치로)
}

//HTML
<div class="content">
    <div id="tweenBox" class="tweenbox"></div>
</div>

seek() 예제 실습 파일

seek().zip

0.03MB

timeScale(number)

트윈의 속도 증가와 감속을 설정합니다.

기본값은 1이며, 1보다 작을 경우 속도가 감소하며, 값이 1보다 클 경우 속도가 증가합니다.

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox");
	tweenBox = gsap.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:700, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}

function tweenTimescale(){
	tweenBox.timeScale(0.5); //배율, 속도 감소(0.5는 최초 속도의 절반 느려짐 의미함) / timeScale(2) - 속도가 2배 빨라짐 
}

//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenTimescale();" class="btn">Timescale(0.5)</a>
<div class="content">
    <div id="tweenBox" class="tweenbox"></div>
</div>

timeScale() 예제 실습 파일

timeScale().zip

0.03MB

GSAP Controlling을 마치며...

이번 포스팅은 트윈 컨트롤 중 이벤트 발생 시 트윈 컨트롤에 대해 주로 알아보았습니다.

GSAP 트윈 컨트롤 포스팅해드린 내용만 완벽하게 숙지하신다면, 웹퍼블리싱(이벤트 발생 시트 윈 컨트롤 ) 하는데 문제가 없으리라 생각됩니다.

다음 편에는 트윈 컨트롤 중 style 컨트롤에 대해서 포스팅 하고자 합니다.

퍼블리셔가 해야 할 공부가 너무 많죠??

다들 힘내서 퍼블리싱 합시다!! 파이팅!!!!!!

[TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 기초1(GSAP 메서드)

퍼블리셔 — Fri, 1 Oct 2021 13:09:56 +0900

GSAP 트윈 기본 문법

GSAP는 자바스크립트 객체의 숫자형 속성을 통해 애니메이션(앞으로 이것을 '트윈'이라 정의합니다.)을 실행합니다.

예를 들어, 특정 속성의 값을 3초 동안 모서리에 라운드 트윈을 주는 기본 문법 코드는 다음과 같습니다.

gsap.to('.tweenbox', 3, {borderRadius: 30});

첫 번째 파라미터 값은 트윈 할 목표 대상(Target), 두 번째 파라미터 값은 지속시간(Duration), 세 번째 파라미터 값은 트윈 할 목표 대상(Target)의 변화된 다른 속성(Properties) 값으로 변화가 발생하면서, 트윈이 표현됩니다.

GSAP 메서드 설명에 앞서서 기본 문법에 설명드렸습니다.

지금부터는 기본 메서드인 .to(), .from(), fromTo(), staggerTo(), staggerFrom(), TimelineMax()에 대해서 다루겠습니다.

gsap.to( )

this(Target) 속성에서 지정한 속성까지 트윈

//CSS
.tweenbox {
	width:100px;
 	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
gsap.to('.tweenbox', 3, {
	marginLeft: 300,
	backgroundColor: '#ccc',
	border: '2px solid #222',
	borderRadius: 30
});

gsap.to() 예제 실습 파일

gsap.to().zip

0.03MB

gsap.from( )

지정한 속성에서 this(Target) 속성까지 트윈

//CSS
.tweenbox {
	width:100px;
 	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
gsap.from('.tweenbox', 3, {
	marginLeft: 300,
	backgroundColor: '#ccc',
	border: '2px solid #222',
	borderRadius: 30
});

gsap.from() 예제 실습 파일

gsap.from().zip

0.03MB

gsap.fromTo( )

from에서 지정된 값에서 to가 지정된 값으로 트윈

gsap.fromTo(target, duration, {from vars}, {to vars});

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
gsap.fromTo('.tweenbox', 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});

gsap.fromTo() 예제 실습 파일

gsap.fromTo().zip

0.03MB

TweenMax.staggerTo( )

TweenMax.staggerTo(target(Array), duration, {vars}, 대상 배열 트윈 사이의 딜레이 시간);

여러 개의 배열(Array)인 this(Target) 속성을 순차적(시간 차)으로 지정한 속성까지 트윈 합니다.

stagger 메서드는 공식 문법이 gsap로 바뀌기 이전 버전(2.1.3 - Version)인 TweenMax 였을 때 존재했던 메서드이지만 gsap로 공식 문법(3.0.0 - Version)이 변경되고, TimelineMax 하나의 메서드로 통일된 것 같습니다.

stagger(Target 배열) : 각 배열 트윈 사이의 모션 실행, TimelineMax(트윈 배열) : this(Target) 트윈이 종료 후 모션 실행합니다.

이렇듯 엄연히 두 개의 메서드는 결이 다른데 왜 없어졌는지 모르겠습니다.

개인적으로 저는 stagger 메서드를 더 선호합니다.

그러나 현재 최신 버전에서도 하위 버전을 지원하므로 TweenMax.staggerTo()를 사용 가능합니다.

gsap를 몇 년 전부터 미리 알지 못했다면, 이렇게 좋은 메서드를 사용하지 못했을 메서드가 될 뻔했습니다.

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	padding:100px 30px;
	border:1px solid #000
}
ul {display:flex}
li.tweenbox {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	height:100px;
	margin:20px;
	background:lightcoral;
	border-radius:10px;
	list-style:none
}

//JS
function tweenStaggerTo(){
	var m0 = document.getElementById("e0");
	var m1 = document.getElementById("e1");
	var m2 = document.getElementById("e2");
	var m3 = document.getElementById("e3");
	var m4 = document.getElementById("e4");
	TweenMax.staggerTo([m0, m1, m2, m3, m4], 1, { rotation:180 }, 0.5);	//TweenMax.staggerTo([객체1, 객체2, 객체3], 시간, {트윈 모션}, 모션 사이의 딜레이 시간);
}

//HTML
<a href="javascript:tweenStaggerTo();" class="btn">Start</a>
<div class="content">
	<ul>
		<li id="e0" class="tweenbox">1</li>
		<li id="e1" class="tweenbox">2</li>
		<li id="e2" class="tweenbox">3</li>
		<li id="e3" class="tweenbox">4</li>
		<li id="e4" class="tweenbox">5</li>
	</ul>
</div>

TweenMax.staggerTo() 예제 실습 파일

TweenMax.staggerTo().zip

0.03MB

TweenMax.staggerFrom( )

여러 개의 배열(Array)을 지정한 속성에서 this(Target) 속성까지 순차적(시간 차)으로 트윈 합니다.

TweenMax.staggerFrom(target(Array), duration, {vars}, 대상 배열 트윈 사이의 딜레이 시간);

//CSS
ul {
	display:flex;
	justify-content:center;
}
li.tweenbox {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	height:100px;
	margin:20px;
	background:lightcoral;
	border-radius:10px;
	list-style:none
}

//JS
TweenMax.staggerFrom('.tweenbox', 1, {
	ease: Back.easeOut,
	opacity: 0,
	y: 200,
	delay: 0.5
}, 0.2);

//HTML
<ul>
	<li class="tweenbox">1</li>
	<li class="tweenbox">2</li>
	<li class="tweenbox">3</li>
	<li class="tweenbox">4</li>
	<li class="tweenbox">5</li>
</ul>

TweenMax.staggerFrom() 예제 실습 파일

TweenMax.staggerfrom().zip

0.03MB

TimelineMax( )

this(Target) 하나의 객체를 순차적으로 트윈 하는 타임라인 문법입니다.

gsap.to()가 연달아 있는 코드와 비슷합니다.

//CSS
ul {
	display:flex;
	justify-content:center
}
li.tweenbox {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	height:100px;
	margin:20px;
	background:lightcoral;
	border-radius:10px;
	color:#fff;
	list-style:none
}

//JS
var timeLine = new TimelineMax();
timeLine.to('.tweenbox', 1, { backgroundColor: '#ddd' })
	.to('.tweenbox', 1, { backgroundColor: 'cyan' })
	.to('.tweenbox', 1, { backgroundColor: '#ccc' });
        
//HTML
<ul>
	<li class="tweenbox">1</li>
</ul>

TimelineMax() 예제 실습 파일

TimelineMax().zip

0.03MB

GSAP 메서드(기초) 마치며...

GSAP 메서드는 이정도만 숙지하고 계셔도 동적인 화면을 만드실 때 문제가 없으시리 생각됩니다.

제가 포스팅한 GSAP 메서드(기초)편이 퍼블리싱하는데 도움이 되었으면 합니다.

다음 포스팅은 GSAP VARIABLES 대해서 알아 보겠습니다.

VARIABLES는 알아야 할 것들이 많기 때문에 2~3편의 글을 작성하고자 계획 중입니다.

기대해 주세요!!!

[TweenMaxㆍGSAP] 트윈맥스 제대로 배우기1 - 입문(세팅방법)

퍼블리셔 — Tue, 28 Sep 2021 15:12:33 +0900

프로젝트를 하다 보면 동적으로 웹 퍼블리싱해야 할 경우 jQuery animaion을 사용하거나, css animaition을 대부분 사용합니다.
애니메이션을 더 사용하기 쉽고 강력크한 퍼포먼스를 구현할 수 없을까?
바로~~ 바로!!!
트윈맥스 애니메이션 자바스크립트 라이브러리에 대해 여러 편에 걸쳐 포스팅하여 제대로 알아보겠습니다.

GSAP

GreenSock Animation Platform (GSAP)는 퍼블리싱을 하면서 애니메이션을 쉽게 사용할 수 있는 강력한 타임라인 기반의 전용 애니메이션 자바스크립트 라이브러리입니다.

GSAP는 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있습니다.

또한 GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋습니다.

이번 가이드에서는 GSAP의 세팅방법과 기본문법에 대해서 알아볼 것입니다.

Get GSAP (Installation)

코드를 작성하기 전에, HTML 파일에 GSAP 라이브러리를 추가해야 합니다.

CDN을 이용하여 추가해도 되고 파일을 다운로드하여 추가해도 됩니다.

당연히 NPM으로 설치도 가능합니다.

CDN 버전 선택 방법 : https://cdnjs.com/libraries/gsap/3.8.0

Download 방법 : https://greensock.com/docs/v3/Installation/#download

NPM 설치 방법 : https://greensock.com/docs/v3/Installation/#npm-club

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>GSAP</title>
	<!-- CDN -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>		
    
	<!-- local(download file) -->
	<script src="js/gsap.min.js"></script>
</head>
<body>

</body>
</html>

기본 문법

gsap.to(target:Object, duration:Number, {variables:Object});

.to()는 일반적으로 제이쿼리의 .animate()라고 생각하면 됩니다.

target : Object - 대상 오브젝트(인자)

duration : Number - 애니메이션 지속 시간 /(초)

variables : Object - target에 부여할 키 값

문법 작성 기본규칙

Ⅰ. CSS 키값은 동일하지만 border-radius, border-right 와 같이 '-' 문자가 들어가 있을 경우 카멜 표기법을 사용하면 됩니다. (EX : borderRadius, borderRight)

Ⅱ. target은 유연하게 사용 가능하기 때문에 제이쿼리 형태로 사용해도 되고 아니어도 됩니다. (EX : $(".tweenbox") , .tweenbox, 변수명 )

입문 가이드 마치며...

다음 포스팅은 GSAP의 메서드와 VARIABLES에 대해서 가이드할 계획입니다.

이번 입문 가이드에 대해서 이해 못하셔도 됩니다. 다음 포스팅에서는 예제를 작성하여 설명할 예정이니까요!!

좀 더 쉽겠죠??

저만의 생각은 아니겠죠??

제가 작성하고 공유하는 가이드가 웹퍼블리싱 하는데 도움이 되었으면 합니다.

Github 저장소 인증방식 변경으로 인한 오류 해결방법

퍼블리셔 — Wed, 25 Aug 2021 16:32:55 +0900

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를 사용 가능합니다.

해결방법 - token 발급방법

1. Github 로그인 후 상단 개인설정 클릭 → Setting 클릭

2. 좌측 메뉴 하단에 Developer settings 클릭 → Personal access tokens 클릭

3. 본문 우측 상단 Generate new token 버튼 클릭 후 token 허용범위 설정하여 토큰 생성 완료합니다.

token 명 작성, 범위는 기본적으로 repo만 선택해도 되지만, 글 작성자는 모두 선택했습니다.

★ 생성된 토큰 값은 잘 복사해서 잘 관리해야 합니다.

이유는 다시 토큰 값을 볼 수 없기 때문입니다.

해결방법 - git 저장소에 token 등록(소스트리)

저장소 메뉴 클릭 → 저장소 설정 메뉴 클릭 → 편집 버튼 클릭 → 발급받은 토큰 코드@ 추가

URL / 경로 : https://발급받은 토큰 코드@github.com/저장소 상세 경로.git

마치며

저장소에 토큰 등록을 하고 나면, push 진행 시 에러가 발생하지 않는 것을 확인할 수 있습니다.

검색을 해보면, 여러 가지 해결책들이 있었지만, 위와 같이 해결하는 것이 가장 간단하고 쉬운 것 같았습니다.

웹퍼블리싱 Workflow에 도움이 되었으면 합니다.

Visual Studio Code(VS Code) 유용한 단축키 사용 방법

퍼블리셔 — Mon, 21 Jun 2021 15:03:47 +0900

웹퍼블리싱 코딩 작업시 편집 프로그램을 사용하여 코딩을 합니다.
편집 프로그램은 다양하게 있으며, 각각 본인의 스타일에 맞는 편집기를 사용하게 됩니다.
(주)맑은커뮤니케이션 에서는 퍼블리셔들이 다양하게 편집 프로그램을 사용합니다.
이에 따라 편집 프로그램 중 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) 사용시 편리한 확장프로그램 몇 종류와 용도에 대해 글을 쓰도록 하겠습니다.
잘못된 내용과 궁금하신 내용은 댓글 주시면 답변 드리겠습니다.

[임시, 비공개] Swiper 수정 예정 글

프롬프터 — Thu, 17 Jun 2021 15:55:13 +0900

안녕하세요, 맑은커뮤니케이션의 퍼블리셔 윤상원입니다.

오늘은 IE10 이상을 지원하는 페이지 작업을 할 때 유용하게 쓰이는 Swiper에 대해 정리해보았습니다.

사용 방법

1단계: 연결(두 가지 방법)

CDN에서 Swiper 사용하기

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> // CSS 파일
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> // 스크립트 파일

주의사항: swiper에서 지원하는 min 파일의 주소가 몇 년 주기로 바뀔 수 있습니다.

위와 같은 연결 링크가 아닌 로컬 파일로 연결하면 변경 위험 없이 사용할 수 있습니다.

swiper-bundle.min.css

0.01MB

swiper-bundle.min.js

0.14MB

예시)

<!DOCTYPE html>
<html lang="ko">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css"> // CSS 파일 연결
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script> // 스크립트 파일 연결
</body>
</html>

2단계: 기본 레이아웃 추가

<div class="swiper-container">
  <div class="swiper-wrapper">
    // 메인 슬라이드
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  
  // 페이지네이션
  <div class="swiper-pagination"></div>

  // 슬라이드 좌,우 버튼
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  // 스크롤바
  <div class="swiper-scrollbar"></div>
</div>

swiper-container > swiper-wrapper > swiper-slide 순으로 감싸져있어야 하고,

swiper-slide가 슬라이드의 내용이 됩니다.

3단계: 스크립트로 Swiper 초기화

new Swiper('.swiper-container');

.swiper-container 클래스를 포함한 다른 레이아웃 클래스의 이름을 변경할 경우에는 css, js 파일에 있는 클래스 이름도 같이 변경해야 합니다.

슬라이드 옵션

Swiper에는 다양한 옵션들이 있습니다.

옵션을 사용하면 마우스로만 움직이는 슬라이드를 버튼 클릭으로 움직이게 하거나,

아무런 동작을 하지 않아도 자동으로 슬라이드가 넘어가게 하는 등 사용자가 더 편리하게 이용할 수 있습니다.

옵션 적용하는 방법

스크립트 파일에 넣는 코드입니다.

옵션이 필요없을 때

new Swiper('.swiper-container');

옵션을 적용해야 할 때

var mySwiper = new Swiper('.swiper-container', {

   // 여기에 옵션을 넣어야 합니다.

   // 예시 코드
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },

  autoplay: {
    delay: 3000
  }
});

자주 사용하는 Swiper API

예제처럼 필요한 옵션과 값을 적어주면 적용할 수 있습니다.

동작이 아닌 버튼이나 스크롤 바가 생기는 등의 옵션은 해당 html 코드도 같이 넣어주어야 합니다.

옵션 변수
예시 코드	코드 설명
allowTouchMove: false	false값을 넣을 경우 슬라이드를 터치를 통해 직접 움직일 수 없습니다. slidePrev, slideNext와 같은 슬라이드 조작 버튼이나 autoplay와 같은 외부 요소를 통해서는 움직일 수 있습니다.
autoHeight: true	true로 설정하면 슬라이드 내용의 높이에 따라 자동으로 슬라이드의 높이를 조정합니다.
breakpoints (예시 코드 →)	브라우저의 크기별로 반응형 설정을 할 수 있습니다. breakpoints: { // 브라우저 320px 크기일 경우 320: { slidesPerView: 3, spaceBetween: 20, }, // 브라우저 480px 크기일 경우 480: { slidesPerView: 3, spaceBetween: 30, }, // 브라우저 640px 크기일 경우 640: { slidesPerView: 4, spaceBetween: 40, } },
direction: 'horizontal' direction: 'vertical'	슬라이드의 진행 방향을 정합니다. 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 옵션과 함께 사용하면 슬라이드 사용자가 터치로 슬라이드 애니메이션을 마음대로 움직일 수 없고 터치를 끝냈을 때만 적용됩니다. 더보기 더보기 [followFinger: true(적용 전)] [followFinger: false(적용 후)]
grabCursor: true	데스크탑에서 슬라이드에 커서를 올렸을 때 그랩 커서를 보여줍니다.
loop: true	슬라이드를 계속 반복합니다. [슬라이드 순서] false: slide 1 → slide 2 → slide 3 → end true: slide 1 → slide 2 → slide 3 → slide 1 → ……
on	이벤트 핸들러를 등록할 때 사용합니다.
slidesPerView: 1	슬라이드 표시 개수입니다. 더보기 더보기 [slidesPerView: 2] [slidesPerView: 3]
spaceBetween: 0	슬라이드 간 거리를 조절합니다. (px 단위) 더보기 더보기 [spaceBetween: 20]
speed: 1000	슬라이드가 전환될 때의 시간을 지정합니다. (밀리초 단위, 1000 = 1초)
touchRatio: 1	터치 비율을 조정합니다. 숫자가 올라갈수록 슬라이드를 넘길 때 필요한 터치 동작이 줄어듭니다.

스와이퍼 공식 홈페이지에는 나오지 않는 방법들

한 페이지에서 스와이퍼를 여러 번 사용해야 할 때 선언하는 방법

스와이퍼를 한 페이지에서 여러 번 사용할 때가 있습니다.

그럴 때는 swiper-container 클래스마다 추가로 클래스를 넣고, 각자의 클래스를 스크립트에 선언해주면 됩니다.

[HTML]

// 첫번째 슬라이드입니다.
<div class="swiper-container swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

// 두번째 슬라이드입니다.
<div class="swiper-container swiper2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

[Javascript]

// 첫번째 슬라이드에 추가한 클래스를 선언해주세요.
var swiper1 = new Swiper('.swiper1', {

	// 옵션을 넣어주세요.
});

// 두번째 슬라이드에 추가한 클래스를 선언해주세요.
var swiper2 = new Swiper('.swiper2', {

	// 옵션을 넣어주세요.
});

슬라이드 버튼을 swiper-container 밖으로 이동시키는 방법

작업을 하다보면 슬라이드의 버튼을 컨테이너 밖으로 이동시키고 싶은데 화면에서 사라질 때가 있습니다.

그 이유는 .swiper-container 안에 들어간 overflow:hidden 속성 때문인데요,

슬라이드를 사용하기 위해선 overflow 속성을 끌 수 없으니 이 방법을 사용하면 해결할 수 있습니다.

[HTML] - 기존

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">슬라이드 1</div>
        <div class="swiper-slide">슬라이드 2</div>
        <div class="swiper-slide">슬라이드 3</div>
    </div>
        
    <div class="swiper-button-prev"></div> <!-- 이전 페이지 -->
    <div class="swiper-button-next"></div> <!-- 다음 페이지 -->
</div>

[HTML] - 수정 후

<div> // 임의의 DIV
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">슬라이드 1</div>
            <div class="swiper-slide">슬라이드 2</div>
            <div class="swiper-slide">슬라이드 3</div>
        </div>
    </div>
    
    <div class="swiper-button-prev"></div> <!-- 이전 페이지 -->
    <div class="swiper-button-next"></div> <!-- 다음 페이지 -->
</div>

기존에 .swiper-container 안에 있던 버튼 두 가지를 밖으로 빼내고 전체를 임의의 div를 새로 감싼 모습입니다.

그리고 이제 새로 감싼 div에 position:relative를 추가하고,

.swiper-container에 있던 position:relative를 position:static 으로 변경해주시면 됩니다.

[결과 화면]

스와이퍼 홈페이지에서 더 많은 옵션과 예제를 확인할 수 있습니다.

옵션: https://swiperjs.com/api/

예제: https://swiperjs.com/demos/

감사합니다.

반응형 슬라이더 Swiper (사용 방법/예제) 웹퍼블리싱

프롬프터 — Mon, 17 Feb 2020 11:15:43 +0900

안녕하세요, 맑은커뮤니케이션의 퍼블리셔 윤상원입니다.

오늘은 IE10 이상을 지원하는 페이지 작업을 할 때 유용하게 쓰이는 Swiper에 대해 정리해보았습니다.

사용 방법

1단계: 연결(두 가지 방법)

1. 파일을 다운로드하지 않고 html에서 CDN 연결

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

2. 파일을 다운로드해서 html 연결

https://github.com/nolimits4web/swiper/archive/v5.3.0.zip

예시)

<!DOCTYPE html>
<html lang="ko">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

CSS, JS 파일은 package 폴더 안에서 찾아볼 수 있습니다.

2단계: 기본 레이아웃 추가

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
</div>

swiper-container > swiper-wrapper > swiper-slide 순으로 감싸져있어야 하고,

swiper-slide가 슬라이드의 내용이 됩니다.

3단계: 자바스크립트에서 Swiper 초기화

new Swiper('.swiper-container');

swiper-container라는 클래스 이름은 변경하지 않아야 합니다.

예제

See the Pen 간단한 스와이퍼 예제 by 윤 시대 (@yoonsangwon) on CodePen.

다른 옵션을 넣지 않고 1번부터 3번까지의 내용을 적용한 예제입니다.

슬라이드 옵션

Swiper에는 다양한 옵션들이 있습니다.

옵션을 사용하면 마우스로만 움직이는 슬라이드를 버튼 클릭으로 움직이게 하거나,

아무런 동작을 하지 않아도 자동으로 슬라이드가 넘어가게 하는 등 사용자가 더 편리하게 이용할 수 있습니다.

슬라이드 옵션 예제

See the Pen 슬라이드 옵션 by 윤 시대 (@yoonsangwon) on CodePen.

예제처럼 필요한 옵션과 값을 적어주면 적용할 수 있습니다.

동작이 아닌 버튼이나 스크롤 바가 생기는 등의 옵션은 해당 html 코드도 같이 넣어주어야 합니다.

옵션 적용하는 방법

사용방법 3번이 Swiper를 초기화하는 방법(한 줄)이었다면 옵션을 추가할 때는 코드의 모양이 바뀌어야 합니다.(여러 줄)

옵션이 필요없을 때

new Swiper('.swiper-container');

옵션을 적용해야 할 때

var mySwiper = new Swiper('.swiper-container', {

   // 여기에 옵션을 넣어야 합니다.

});

자주 사용하는 옵션 목록 ('더보기'를 클릭하면 옵션을 볼 수 있습니다)

Navigation(페이지를 넘기는 버튼)

[HTML]

<div class="swiper-button-prev"></div> // 이전 페이지
<div class="swiper-button-next"></div> // 다음 페이지

[Javascript]

var mySwiper = new Swiper('.swiper-container', {
  navigation: {
    prevEl: '.swiper-button-prev',
    nextEl: '.swiper-button-next',
  },
});

See the Pen rNVevqd by 윤 시대 (@yoonsangwon) on CodePen.

Pagination(페이지의 순서를 나타내는 불릿)

[HTML]

<div class="swiper-pagination"></div>

[Javascript]

var mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
});

See the Pen WNvwJLp by 윤 시대 (@yoonsangwon) on CodePen.

자동 재생(1000 = 1초)

[Javascript]

var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 2000,
  },
});

See the Pen ExjKLGe by 윤 시대 (@yoonsangwon) on CodePen.

한 번에 여러 장의 슬라이드를 표현하는 방법 + 슬라이드 무한 반복

[Javascript]

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 3, // 보여지는 슬라이드 수
    spaceBetween: 30, // 슬라이드 간의 거리(px 단위)
    loop: true, // 슬라이드 무한 반복
    centeredSlides: true, // 다음 슬라이드의 모습이 50%만 보입니다.(중앙)
});

See the Pen xxGVJZO by 윤 시대 (@yoonsangwon) on CodePen.

스와이퍼 홈페이지에서 더 많은 옵션과 예제를 확인할 수 있습니다.

옵션: https://swiperjs.com/api/

예제: https://swiperjs.com/demos/

홈페이지에는 나오지 않는 방법들

한 페이지에서 스와이퍼를 여러 번 사용해야 할 때 선언하는 방법

스와이퍼를 한 페이지에서 여러 번 사용할 때가 있습니다.

그럴 때는 swiper-container 클래스마다 추가로 클래스를 넣고, 각자의 클래스를 스크립트에 선언해주면 됩니다.

[HTML]

// 첫번째 슬라이드입니다.
<div class="swiper-container swiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

// 두번째 슬라이드입니다.
<div class="swiper-container swiper2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

[Javascript]

// 첫번째 슬라이드에 추가한 클래스를 선언해주세요.
var swiper1 = new Swiper('.swiper1', {

	// 옵션을 넣어주세요.
});

// 두번째 슬라이드에 추가한 클래스를 선언해주세요.
var swiper2 = new Swiper('.swiper2', {

	// 옵션을 넣어주세요.
});

슬라이드 버튼을 swiper-container 밖으로 이동시키는 방법

작업을 하다보면 슬라이드의 버튼을 컨테이너 밖으로 이동시키고 싶은데 화면에서 사라질 때가 있습니다.

그 이유는 .swiper-container 안에 들어간 overflow:hidden 속성 때문인데요,

슬라이드를 사용하기 위해선 overflow 속성을 끌 수 없으니 이 방법을 사용하면 해결할 수 있습니다.

[HTML] - 기존

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">슬라이드 1</div>
        <div class="swiper-slide">슬라이드 2</div>
        <div class="swiper-slide">슬라이드 3</div>
    </div>
        
    <div class="swiper-button-prev"></div> <!-- 이전 페이지 -->
    <div class="swiper-button-next"></div> <!-- 다음 페이지 -->
</div>

[HTML] - 수정 후

<div> // 임의의 DIV
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">슬라이드 1</div>
            <div class="swiper-slide">슬라이드 2</div>
            <div class="swiper-slide">슬라이드 3</div>
        </div>
    </div>
    
    <div class="swiper-button-prev"></div> <!-- 이전 페이지 -->
    <div class="swiper-button-next"></div> <!-- 다음 페이지 -->
</div>

기존에 .swiper-container 안에 있던 버튼 두 가지를 밖으로 빼내고 전체를 임의의 div를 새로 감싼 모습입니다.

그리고 이제 새로 감싼 div에 position:relative를 추가하고,

.swiper-container에 있던 position:relative를 position:static 으로 변경해주시면 됩니다.

[결과 화면]

감사합니다.

placeholder 제대로 사용하기

알 수 없는 사용자 — Thu, 17 Jan 2019 18:01:10 +0900

안녕하세요

(주)맑은커뮤니케이션에 근무하는 유아영입니다.

오늘은 placeholder에 대해 알아보려고 하는데요,

HTML5의 placeholder 속성은 input 요소와 textarea 요소에 알맞은 힌트를 제공하는 목적으로 사용됩니다.

이러한 힌트는 사용자가 입력상자에 데이터를 입력하는데 도움을 줍니다.

사용 방법은 <input type="text" placeholder="내용을 입력하세요."> 이렇게 써줄 수가 있는데요.

chrome

Firefox

safari

10+ -ms

47+

4+ -moz-, 51+

하지만, IE 6~9 사이의 브라우저는 HTML5의 placeholder 속성을 지원하지 않습니다.

해결 방법을 알아볼까요?

1. https://github.com/mathiasbynens/jquery-placeholder

위의 url에서 스크립트를 다운받는다.

placeholder.js 를 사용하면 IE9 이하는 .placeholder 이라는 클래스가 자동으로 생성된다.

2. <script type="text/javascript" src="js/jquery.placeholder.js"></script>

코드를 추가한다.

3. js파일에 $('input, textarea').placeholder();

코드를 추가한다.

4. css.파일에 .placeholder 클래스를 이용해 속성을 주면 끝납니다.

위의 내용을 예제를 통해 한 번 살펴볼까요?

See the Pen dwBoOj by ahyoung (@ahyoung) on CodePen.

::placeholder 선택자로 선택하여 스타일을 줄 수 있습니다.

input::placeholder : Chrome, Firefox, Opera, Safari 최신 버전에서는 적용이 잘 됩니다.

하지만 Chrome, Firefox, Opera, Safari의 구버전과 IE에서는 적용되지 않습니다.

그 해결 방법은 아래와 같습니다.

input::-webkit-input-placeholder : Chrome

input:-ms-input-placeholder : IE

input:-mos-input-placeholder : Firefox

텍스트로만 보면 이해가 안 될 수 있는데요

예제를 통해 같이 한 번 알아볼까요?

See the Pen gZJYGb by ahyoung (@ahyoung) on CodePen.

Tip) 다 적용해도 파이어폭스에서 이상하게 뿌옇게 보이는 현상을 보실 수가 있는데요,

그럴 때는 input::placeholder { opacity: 1 } 을 넣어주면 해결이 됩니다.

placeholder를 사용하다 보면 줄바꿈을 하고싶어질 때가 있을텐데요

그 방법에 대해 알아볼까요?

See the Pen maZbdQ by ahyoung (@ahyoung) on CodePen.

설명


 : 줄바꿈을 하고 싶은 곳에 해당 코드를 추가해줍니다.

오늘은 placeholder에 대해 알아보았는데요

부족한 점이나 잘못된 점이 있으면 댓글 부탁드립니다!

감사합니다.

버전 관리 시스템 Git 기초!

알 수 없는 사용자 — Fri, 11 Jan 2019 17:07:39 +0900

안녕하세요!

맑은커뮤니케이션 웹퍼블리싱팀 정혜인 입니다.

이 게시글에서는 협업의 필수! 코드관리 시스템 Git의 기초에대해 열심히 설명해보려합니다!

INDEX

- 기초 git 명령어 (add / commit / push / pull)

Git

프로그램 등의 소스 코드 관리를 위한 분산 버전 관리 시스템(Distributed

Version Control System; DVCS)

프로젝트를 진행하다 보면 어떤게 최신 소스인지 작업자들이 어떤부분을 어떻게 수정하였는지 이력관리가 필요합니다.

이러한 소스 코드 관리를 위해 개발자들은 버전 관리 시스템을 개발하였고

git, svn 등 과 같은 소프트웨어들이 등장하였습니다.

버전 관리는 로컬 버전 관리 시스템 / 중앙 집중식 버전 관리 시스템 / 분산 버전 관리 시스템이 있으며

git은 분산 버전 관리 시스템을 사용하고 있습니다.

■ 분산 버전 관리 시스템

분산 버전 관리 시스템은 로컬 버전 관리, 중앙 집중식 버전 관리의 단점을 보완한 시스템입니

다. 이 시스템의 포인트는 아래와 같습니다.

1. 원격서버에 버전관리 시스템의 저장소(repository)를 둔다.

2. 작업자(client)들은 자신의 로컬에 원격서버 저장소(repository)를 통째로 복사해온다.

3. 원격서버에 문제가 있어도 작업자(client)들의 로컬 저장소는 영향을 받지 않는다.

4. 원격서버에 문제가 생길시 작업자(client)의 로컬 저장소를 사용하여 원격 서버를 복구할 수 있다.

■ 저장소 (Repository)

Git은 원격 저장소(Remote Repository)와 로컬 저장소(Local Repository)를 갖고있습니다.

원격 저장소(Remote Repository)

로컬 저장소(Local Repository)

인터넷(네트워크)을 이용하여

다수의 작업자(Client)들이 접근할 수 있는 저장소

소스를 올리거나(push) 내려받을(pull) 수 있음

작업자(Client)가 원격 저장소를 내려받은 장소

(개인용 PC,노트북 같은)

Git 저장소를 만드는 방법

1. 진행중인 프로젝트 Git 저장소로 만들기

- 프로젝트 디렉토리로 이동해서 $git init 명령어를 실행합니다.

- git init은 .git 이라는 하위 디렉토리를 만들며 이 디렉토리는 저장소에 필요한 파일들이 들어있습니다.

- git이 파일을 관리하게 하려면 작업파일들을 $git add . 명령어를 사용하여 추가한 후 $git commit -m "{커밋 메시지}"

명령어를 사용하여 커밋합니다.

이 후에 이 디렉토리에서 작업되는 파일들은 git을 통해 이력관리가 시작됩니다.

2. 다른 서버에 있는 저장소 복제하기(clone)

이미 진행중인 프로젝트에 참여하거나 다른 Git 저장소를 복사하고 싶을 때 $git clone {URL} 명령어를 사용하여

내 로컬 저장소에 복제할 수 있습니다.

GitHub 저장소 URL 복제 예시

1) git 주소 복사

2) 작업을 원하는 폴더에 명령프롬프트를 열어 $git clone {URL} 명령어 작성

저장소 복제 끝~~~!!!

■ 브랜치 (Branch)

Branch : 1. 나뭇가지 2. 지사, 분점 3. (큰 조직의) 분과

중심,기준이 되는 지점에서 같이 나와 다른 뱡향으로 뻗어나가는 가지들처럼

동일한 소스를 기반으로 서로 다른 작업을 수행하기 위한 독립적인 작업공간의 개념이라고 할 수 있습니다.

1. BASE 소스코드는 작업을 진행할 기반이 되는 소스입니다. (master)

ㄴBASE소스가 master브랜치일 필요는 없습니다.

2. 기반이 되는 소스(master)에서 종상이 작업/아영이 작업/혜인이 작업 이라는 폴더의 작업영역을 생성합니다.(브랜치 3개 생성)

ㄴ브랜치 생성시 BASE 소스코드가 그대로 복제되어 옵니다.

3. 각자의 작업영역에서 주어진 작업을 완료하면 하나의 소스로 취합을 하게됩니다. (merge)

브랜치는 주로 위 설명처럼 사용하게 되며 다수의 작업자들과 함께 작업하는 프로젝트에서 소스 관리를 하기에

굉장히 효율적이고 편리합니다.

브랜치 생성

$git branch {브랜치명}

{브랜치명}의 브랜치를 생성합니다.

$git branch

브랜치명을 제외하고 명령어를 치면 생성된 브랜치 전체목록을 볼 수 있으며

현재 브랜치의 위치도 알 수 있습니다.(현재 브랜치명 앞에 * 가 붙음)

브랜치 전환

$ git checkout {브랜치명}

{브랜치명}의 브랜치로 이동할 수 있습니다.

$git checkout -b {브랜치명}

{브랜치명}의 브랜치를 생성하고 동시에 생성한 브랜치로 이동시켜줍니다.

브랜치 삭제

$git branch -d {브랜치명}

{브랜치명}의 브랜치를 삭제합니다.

( 브랜치 병합 명령어인 merge와 rebase 관련 내용은 기초에서 다루지 않겠습니다ㅎㅎ;; 패쓰패쓰!!(쓩) =3 =3 )

■ add / commit / push / pull

git의 가장 기본적인 명령어는 add / commit / push / pull 입니다.

작업을 하며 가장 많이 사용하게 될 명령어이기도 합니다. ㅎㅎ

1. add

작업을 진행하면 변경 이력들이 working directory라는 가상공간에 기록이 됩니다.

commit하기위해서는 staging area에 변경 이력들이 보내져야 하는데요!

이 때 add를 사용하면 변경 이력들이 staging area에 올라가게 됩니다.

$git add {파일명}

{파일명}의 작업파일을 staging area에 올립니다.

$git add .

모든 변경이력들이 staging area에 올라갑니다.

2. commit

staging area에 올라온 변경 이력들을 원격저장소에 올리기 전에

간단하게 작업 내용을 기록하며 묶어(?)두어야 하는데 이 작업을 commit 이라고 합니다.

$git commit -m "{커밋메시지}" 명령어를 사용하여 commit 하고 메시지를 기록할 수 있습니다.

소스트리로 commit 메시지 확인하기

1) 명령 프롬프트에서 git commit -m "{커밋메시지}" 입력

2) 입력된 commit 메시지로 commit이 된 것을 확인할 수 있습니다.

3. push

commit까지 완료된 변경 이력들을 원격 저장소에 올리는 명령어입니다.

$git push {원격저장소명} {브랜치명} 명령어를 입력하면 원격저장소에 해당 브랜치에서

작업한 이력들이 올라가게 됩니다.

push가 되지 않을 때 --force

$git push origin master 명령어를 사용하여 원격저장소(origin)에 master 브랜치를 올렸는데

작업이 수행되지 않고 오류를 뱉어낼 때가 있습니다.

원격 저장소의 master브랜치와 로컬 저장소의 master브랜치가 충돌이 나기 때문인데요

이때는 $git push origin master --force 명령어를 사용하면 로컬 저장소 기준의 브랜치가

원격 저장소에 강제로 올라가게 됩니다.

--force 옵션을 막 사용하게 되면 함께 일하는 작업자들의 소스와 충돌이 나거나 꼬일 경우가 많으니

사용할 때는 작업자들과 커뮤니케이션이 꼭 필요합니다!

4. pull

git push로 내가 원격 저장소에 올린 이력들이 있다면 같은 저장소를 사용하고 있는 작업자들은

원격 저장소에 올라온 변경 이력들을 내려받을 수 있습니다.

원격 저장소의 변경 이력들과 로컬 저장소의 변경이력이 겹치지 않는다면 충돌이 나지 않고

문제 없이 pull이 완료됩니다.

마치며 ...

이 글로 git의 모든 것을 알 수는 없지만 대략 이러이런 것이라는 걸 알아두시고 공부하면 좋을 것 같습니다!

다음 git글에서는 좀 더 심화된 내용으로 찾아오겠습니다. 부족한 내용, 잘못된 내용 피드백 주시면 감사하겠습니다 : )

CSS탐방 - 1.border-image

미친개구리 — Fri, 4 Jan 2019 17:00:31 +0900

안녕하세요.

(주)맑은커뮤니케이션의 여전히 나이막내(?) 스물다섯스물하나입니다.

2019년이 되었는데요.

2018년에는 다들 어떠셨나요.?

잘 되신 분들은 앞으로도 잘 되시기를 바라고

잘 안되었던 분들은 앞으로 하는 일 모두 잘 되시기를 바랍니다.

웹퍼블리싱 작업을 하다보면 아무래도 매번 쓰던속성만 쓰게되어

가까운 길을 냅두고 먼길을 돌아가는 상황을

셀프(?)로 만들때가 종종 있더라구요.

뿌엥...

그래서 셀프뺑뺑이(?)를 방지하기 위해

CSS탐방을 떠나보기로 했습니다.

세상은 넓고 CSS는 무궁무진하게 많다!

(※ 세상은 넓지만 CSS는 무궁무진하게까지 많지는 않습니다)

원래는 CSS4가 어디까지 작업이 되고 있나 한번 구경을 가볼까 하였는데요.

아직도 안되는 것들이 많아서... 패쑤!

그럼 본격적으로 같이 한번 떠나보겠습니다!

(제 기준에서 작성된 내용입니다 ㅠㅜ

어떤분들은 자주 사용하는 속성일수도 있어요.)

오늘의 첫번재 주인공은 바로

border(보더) 입니다.

◎ border

◎ border-bottom

◎ border-bottom-color

◎ border-bottom-style

◎ border-bottom-width

◎ border-color

◎ border-left

◎ border-left-color

◎ border-left-style

◎ border-left-width

◎ border-radius

◎ border-right

◎ border-right-color

◎ border-right-style

◎ border-right-width

◎ border-style

· · ·

보더에는 다양한 속성들이 있는데요.

저는 주로

1px solid #컬러컬러 형식을

99%정도로 대단히 많이 사용하는 것 같습니다

라인은 자고로 쏠리드(?)가 제맛이죠

보더스타일은 솔리드 밖에 모르는 바보였는데

최근에 어마어마한 속성이 존재하다는 것을 알게 되었습니다.

바로 border-image입니다.

이름만 봐도 딱 느낌이 오시죠?

같이한번 알아보도록 하겠습니다.

`1.border-image`

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

`설명`

보더를 이미지로 지정

(기본적으로 border 스타일을 선언해 주어야 함)

속성

border-image : [ source slice width outset repeat ] | initial | inherit

border-image-source : 보더로 사용될 이미지 경로 (url형식으로 시작)

border-image-slice : 브라우저에게 테두리 조각을 만들기 위해 이미지를 슬라이스할 위치를 알려준다.

이미지는 4개 모서리, 4개 측면, 중앙의 9개 섹션으로 나뉜다.

border-image-width : 보더 이미지의 넓이를 제어

border-image-outset : 보더 이미지가 컨텐츠 영역 확장 거리를 제어

border-image-repeat : 보더영역을 채우기 위한 반복형태를 제어

IE	chrome	Firefox	safari
11+	4+ -webkit, 16+	3.5+ -moz-, 15+	3.1+ -webkit-, 6+

저는 이 속성을 한번도 사용해본적이 없는데요.

용어의 설명도 생소하여 생각보다 어려운 부분이 있었지만

이번에 여러분께 소개드리기 위해 학습을 해 보며 느낀점은

[최신브라우저만 맞춘다면 유용하게 쓰일것 같다] 였습니다.

저한테는 생소한 속성들이어서

조금 이해 안되는 부분만 짚어보도록 하겠습니다.

border-image-slice

브라우저에게 테두리 조각을 만들기 위해 이미지를 슬라이스할 위치를 알려준다.

border-image-slice: [ number | percentage ] | fill | initial | inherit

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

slice 속성은 padding , margin과 마찬가지로 4방향을 설정할수 있고, 위아래 및 좌우 까지

설정법은 똑같습니다.

참고

border-image-outset

보더 이미지가 컨텐츠 영역 확장 거리를 제어
 

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

border-image-repeat

보더영역을 채우기 위한 반복형태를 제어

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

reapeat 와 outset은 예제만 보더라도 바로 이해하실수 있을것 같아

별도의 설명은 생략하겠습니다.

border-image 속성을 이용하면 보더에 그라디언트를 넣을수 있습니다.

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

이런식으로 말이죠!

이 글을 적으면서 여러 사이트들을 훓어보던 중

보더와 그라디언트를 활용한 사이트 몇개가 눈에 띄었습니다.

허나 아직은 다들 많이 안쓰시는것 같아요(저 포함).

하지만 잘 활용만 한다면 멋진 사이트를 만들수 있을것 같습니다.

오늘은 보더에 대해서 탐방을 해 보았는데요.

다음번에는 더 재밌는 주제로 찾아오도록 할게요.

부족한부분, 잘못된 부분, 질문이 있으시다면 댓글 부탁드리겠습니다.

그럼 안녕~

jQuery란 무엇인가? jQuery 메서드 정리표 2편

퍼블리셔 — Tue, 13 Nov 2018 10:18:23 +0900

jQuery 메서드

jQuery 메서드를 이전 1편에 이어 정리하고자 합니다.
사용 용도에 따라 분류하였습니다.
맑은커뮤니케이션 웹퍼블리셔 및 웹퍼블리싱 업무중 스크립트를 작성하다 갑자기 메서드가 기억나지 않는 분들에 참고가 되었으면 합니다.

스타일 메서드

분류	핵심 내용	핵심 프로퍼티 및 메서드
스타일 다루기	스타일 값 구하기	$대상.css("스타일 속성 이름") $대상.css(["스타일 속성 이름", ...])
	스타일 값 설정하기	$대상.css("스타일 속성 이름",값) $대상.css({스타일 속성 이름:값, ...})
	클래스 추가	$대상.addClass("클래스 이름")
	클래스 삭제	$대상.removeClass("클래스 이름")

속성 메서드

분류	핵심 내용	핵심 프로퍼티 및 메서드
속성 다루기	속성값 구하기	$대상.attr("속성이름") $대상.data("data-속성이름")
속성 다루기	속성값 설정하기	$대상.attr("속성이름","값") $대상.data("data-속성이름","값")

이벤트 메서드

분류	핵심 내용	핵심 프로퍼티 및 메서드
이벤트 다루기	일반 이벤트 등록	$대상.on("이벤트 이름", 이벤트리스너)
	단축 이벤트 등록	$대상.단축 이벤트(이벤트리스너)
	등록한 이벤트 제거	$대상.off("click", 삭제하고 싶은 이벤트 리스너 명) $대상.off("click") $대상.off()
	이벤트 한 번만 실행	$대상.one("이벤트 이름", 이벤트리스너)
	기본 행동 취소	이벤트 객체.preventDefault()
	버블링 멈추기	이벤트 객체.stopPropagation()
	버블링 활용:하나의 이벤트	$대상.on("이벤트 이름", "선택자", 이벤트 리스너)

위치 및 크기 메서드

분류	핵심 내용	핵심 프로퍼티 및 메서드
요소의 위치 및 크기 관련 기능	부모 좌표 노드 구하기	$대상.offsetParent()
	지역 좌표 위치 다루기	지역 좌표 위치 구하기 $대상.position().left $대상.position().top 지역 좌표 위치 설정하기 $대상.css("left",위치값) $대상.css("top",위치값) 또는 $대상.css({left:위치값,top:위치값})
	전역 좌표 위치 다루기	전역 좌표 위치 구하기 $대상.offset().left $대상.offset().top 전역 표표위치 설정하기 $대상.offset({left:위치값,top:위치값})
	요소 크기 다루기	기본 크기 구하기 $대상.width() $대상.height() 기본 크기+padding 크기 구하기 $대상.innerWidth() $대상.innerHeight() 기본 크기+padding+border 크기 구하기 $대상.outerWidth() $대상.outerHeight() 기본 크기+padding+border+margin 크기 구하기 $대상.outerWidth(true) $대상.outerHeight(true) 기본 크기 설정하기 $대상.width(크기값) $대상.height(크기값) 기본 크기+padding 크기 설정하기 $대상.innerWidth(크기값) $대상.innerHeight(크기값)
요소의 위치 및 크기 관련 기능	요소의 스크롤 위치 다루기	스크롤 위치 구하기 $대상.scrollLeft() $대상.scrollTop() 스크롤 위치 설정하기 $대상.scrollLeft(위치값) $대상.scrollTop(위치값)
문서의 위치 및 크기 관련 기능	문서 크기 구하기	$(document).width() $(document).height()
화면의 위치 및 크기 관련 기능 윈도우의 위치 및 크기 관련 기능	전체 화면 크기 구하기	screen.width screen.height
	유효한 전체 화면 크기 구하기	screen.availWidth screnn.availHeight
	윈도우 크기 구하기	기본 크기 구하기 window.innerWidth window.innerHeight 기본 크기+메뉴바+툴바 영역이 포함된 크기 구하기 $(window).width() $(window).height() 기본 크기+메뉴바+툴바+스크롤바 영역이 포함된 크기 구하기 window.outerWidth window.outerHeight
	윈도우 크기 설정하기	window.resizeTo(width,height)
	윈도우 변경 이벤트 처리	$(window).on("resize", function(){})
	윈도우 위치 다루기	위치 값 구하기 window.screenLeft window.screenTop 위치 값 설정하기 window.moveTo(dx,dy) window.moveBy(dx,dy)
	윈도우 스크롤 다루기	스크롤 위치 값 구하기 window.pageXOffset window.pageYOffset 스크롤 위치 설정하기 window.scrollTo(x,y) window.scrollBy(x,y) 스크롤 이벤트 처리하기 $(window).on("scroll",function(){})
마우스의 위치 및 크기 관련 기능	클릭한 전역 위치	윈도우 영역을 기준으로 하는 전역 위치 mouseEvent.clientX mouseEvent.clientY 문서 영역을 기준으로 하는 전역 위치 mouseEvent.pageX mouseEvent.pageX
마우스의 위치 및 크기 관련 기능	클릭한 지역 위치	var offsetX = mouseEvent.pageX - $(타깃).offset().left var offsetY = mouseEvent.pageY - $(타깃).offset().top

애니메이션 효과 메서드

분류	핵심 내용	핵심 프로퍼티 및 메서드
일반 효과 다루기	나타나고 사라지는 효과	나타나기 $대상.show() 사라지기 $대상.hide()
	페이드 인/아웃 효과	페이드 인 $대상.fadeIn() 페이드 아웃 $대상.fadeOut()
	슬라이드 업/다운 효과	슬라이드 업 $대상.slideUp() 슬라이드 다운 $대상.slideDown()
사용자 정의 효과 다루기	사용자 정의 애니메이션 효과 만들기	$대상.animate({스타일 속성 이름:속성값, ...},애니메이션 시간)
사용자 정의 효과 다루기	애니메이션 효과 멈추기	$대상.stop()

참조 - (메소드 정리표)

자바스크립트 + jQuery 완전정복 스터디(김춘경 지음)

jQuery란 무엇인가? jQuery 메서드 정리표 1편

퍼블리셔 — Mon, 15 Oct 2018 17:41:58 +0900

jQuery 쓰는것이 좋은 것인가?

요즈음 웹퍼블리싱을 배우는 학생들의 이야기드를 들어보면, jQuery를 안쓰게 좋을것 같다고 또는 안쓰게 될 것 같다고 이야기 합니다.
그럼 Why? 라는 질문을 하면, 이유를 대답하지 못합니다.
개념조차 이해하지 못하고, 어디서 들은것 같다고만 이야기 하기 때문입니다.
물론 모든 학생이 모두 그렇게 이야기 하는것은 아닙니다.
그럼 저는 왜 jQuery를 써야 하는지 설명해 줍니다.

jQuery 사용하는 첫번째 이유

jQuery는 자바스크립트 DOM을 좀더 쉽게 작업하기 위한 라이브러리 입니다.
결론부터 말하자면 jQuery의 정체는 자바스크립트 문법 중 프로토타입 방식으로 만들어진 클래스입니다.
쉽게 이야기해 jQuery 메서드는 자바스크립트 DOM으로 이루어져 있습니다.
그렇기에 jQuery를 배운다는것은 메서드를 배우는 것이며, 이를 통해 자바스크립트로 코딩하면 10줄, jQuery로 코딩하면 2-3줄로 처리 할수 있을 만큼 효율적인
코드작업을 할 수 있습니다.
그렇다고 jQuery로 모든것을 다 할 수 있는것도 아니며 무조건 좋다는 말은 아닙니다.
제일 좋은 방법은 jQuery와 자바스크립트를 같이 사용하여 최적화 하는방법이 좋다고 말씀드리고 싶습니다.
jQuery는 쉬운데 자바스크립트는 어렵다고 하는 분들은 자바스크립트도 충실히 공부하셔야 합니다.

jQuery 사용하는 두번째 이유

jQuery는 DOM 제어보다 크로스 브라우징 처리가 편리합니다.
IE7은 비표준 브라우저이기 때문에 이벤트 등록시 자바스크립트로 처리할 경우 attachEvent(), addEventListener()를 사용하여 코드를 작성하여야,
IE7과 기타 브라우저의 크로스브라우징을 정상적으로 처리해야 합니다.
이와달리 jQuery 내부에는 이런 번거로운 작업들을 대신 처리해주기 때문에 이벤트를 아주 쉽게 처리할 수 있습니다.

jQuery 학습 방법 및 결론

자바스크립트의 경우 기본 문법을 모를 경우 공부하기가 힘듭니다.
그러나 jQuery의 경우 수많은 메서드로 구성되어 있기에 순서없이 메서드를 하나씩 학습하시면 됩니다.
굳이 공부하는 순서를 따져야 한다면, jQuery는 css와 연관성이 많기에 css를 기본적으로 이해하셔야 하며, 노드를 찾아가는 방법(체인기능) 메서드부터 진행하면 될 것 같습니다.
이것은 웹퍼블리싱을 전문적으로 하는 (주)맑은커뮤니케이션에서 진행하는 신입 퍼블리셔 교육방법 입니다.
아래는 jQuery 메서드 정리입니다. 메서드 정리는 사용 용도에 따라 1, 2부로 나누어 올릴 것 입다다

노드 메서드

노드를 선택하거나, 찾아가는 방법(체인기능)의 메서드 입니다.

분류	핵심 내용	핵심 프로퍼티 및 메서드
일반 노드 찾기	아이디 이름으로 노드 찾기	$("아이디 이름")
	태그 이름으로 노드 찾기	$("태그 이름")
	클래스 이름으로 노드 찾기	$("클래스 이름")
	속성으로 노드 찾기	$("[속성이름=값]")
찾은 노드 다루기	찾은 개수 구하기	$대상.length
	n번째 노드 접근하기	$대상.eq(index)
	자바스크립트 DOM 객체 접근하기	$대상.get(index) $대상[index]
	순차적으로 노드 접근하기	$대상.each(function(index){ $(this) 또는 $대상.eq(index); });
	찾은 노드 중에서 특정 노드만 찾기	$대상.filter("선택자")
	찾은 노드의 자손 노드 중 특정 노드만 찾기	$대상.find("선택자")
	인덱스 값 구하기	$대상.index() $목록.index($대상) $목록.index(대상 DOM 객체)
자식 노드 찾기	모든 자식 노드 찾기	$대상.children()
	특정 자식 노드만 찾기	$대상.children("선택자")
	첫 번째 자식 노드 찾기	$대상.children().first() $대상.children(":first") $대상.children().eq(0) $대상.children("eq(0)")
	마지막 번째 자식 노드 찾기	$대상.children().last() $대상.children(":last") $대상.children().eq($대상.children().length-1) $대상.children(":eq("+($대상.children().length-1)+")")
	n번째 자식 노드 찾기	$대상.children().eq(index) $대상.children(":eq("+index+")")
부모 노드 찾기	부모 노드 찾기	$대상.parent()
부모 노드 찾기	조상 노드 찾기	$대상.parents(["선택자"])
형제 노드 찾기	이전 형제 노드 찾기	$대상.prev() $대상.prevAll(["선택자"])
형제 노드 찾기	다음 형제 노드 찾기	$대상.next() $대상.nextAll(["선택자"])
노드 생성/ 추가	노드 생성	$("추가노드 DOM 문자열")
	첫 번째 자식 노드로 추가	$부모노드.prepend($추가노드) $추가노드.prependTo($부모노드)
	마지막 번째 자식 노드로 추가	$부모노드.append($추가노드) $추가노드.appendTo($부모노드)
	특정 노드의 이전 위치에 추가	$기준노드.before($추가노드) $추가노드.insertBefore($기준노드)
	특정 노드의 다음 위치에 추가	$기준노드.after($추가노드) $추가노드.insertAfter($기준노드)
노드제거	특정 노드 제거	$대상.remove()
노드제거	모든 자식 노드 제거	$대상.children().remove()
노드 내용 읽기 및 변경	노드 내용을 문자열로 읽기	$대상.html() //태그 내용 포함 $대상.text() //태그 내용 제외
	노드 내용 수정하기	$대상.html("수정할 태그 문자열") $대상.text("수정할 텍스")
	노드 내용을 이용해 여러 개의 자식 노드 추가하	$대상.html("추가할 태그 문자열")
	노드 내용을 이용해 모든 자식 노드 제거하기	$대상.html("")

참조 - (메소드 정리표)

자바스크립트 + jQuery 완전정복 스터디(김춘경 지음)

WAI-ARIA 웹퍼블리싱

알 수 없는 사용자 — Wed, 22 Aug 2018 16:00:04 +0900

WAI-ARIA

W3C에 의해 제정된 RIA(Rich Internet Applications)의 웹 접근성에 대한 표준 기술 규격을 의미함.

RIA(Rich Internet Applications)란?
정적인 HTMl과 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서 수준 높은 UX(User eXperience)를 제공하는 웹 애플리케이션

RIA(Rich Internet Applications)는 화려하고 편리한 웹 애플리케이션이지만 스크린리더와 같은 보조기술을 사용하는 장애인들이 접근하기에 취약하다.

자바스크립트, AJAX등을 활용하여 의미를 가지지 않는 요소(<div>,<span>)로 특정 컴포넌트를 구현할 때 스크린리더 등 보조기기에서 해당 컴포넌트의 기능을 명확하게 파학하기 어려움.
주식 시세나 RSS Feed 등 시간에 따라 정보가 자동으로 업데이트 되는 경우 스크린리더 등 보조기기에서 업데이트 된 정보를 파악하기 어려움

때문에 WAI-ARIA는 RIA에서 스크린리더 및 보조기기 등에서 접근성 및 상호 운용성을 향상시키기 위한 목적으로 탄생 했으며 웹 애플리케이션에 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 이를 개선 할 수 있도록 제공하고 있다.

Role (역할)

유저 인터페이스(User Interface, 이하 UI)에 포함된 특정 컴포넌트의 역할을 정의
Abstract Roles / Widget Roles / Document Structure Roles / Landmark Roles로 분류됨

Abstract RolesRoles의 분류체계를 만들고 역활들을 정의하기 위한 Roles
WAI-ARIA를 구축하는 기반
Abstract Roles 종류

Abstract Roles command / composite / input / landmark / range / roletype / section / sectionhead / select / structure / widget / window

Widget Roles독립형 사용자 인터페이스를 동작시키기 위한 목적의 Roles,
더 큰 Roles에 포함되거나 복합 위젯의 일부로 사용되기도 한다.

Widget Roles 종류
독립형 Widget Roles	button / checkbox / gridcell / link / menuitem / menuitemcheckbox / menuitemradio / option / progressbar / radio / scrollbar / searchbox / separator / slider / spinbutton / switch / tab / tabpanel / textbox / treeitem
복합형 Widget Roles (단독으로 쓰이지 않음)	combobox / grid / listbox / menu / menubar / radiogroup / tablist / tree / treegrid

"tablist"를 사용한 탭메뉴 예시

탭목록(tablist)과 본문(tabpanel)이 따로 나뉘어져 있는 마크업구조는 스크린리더 등 보조기기를 사용하는 사용자에게는 정보 접근이 어려울 수 있다. 이 때 Tab 관련 Widget Role을 사용하면 보조기기를 사용하는 사용자에게 보다 정확한 정보를 제공할 수 있다.

ㄴ [이미지설명] 탭메뉴 UI구조 (Role속성 위치)


	 
	
		
		탭메뉴1
		탭메뉴2
		탭메뉴3
	
    
	
		
		탭메뉴1의 본문
		탭메뉴2의 본문
		탭메뉴3의 본문

사용된 WAI-ARIA

role="tablist" : role="tab"과 함께 사용되는 복합형 Role속성이며 요소에 탭목록 역할을 부여한다.
role="tab" : role="tablist"의 자식속성으로 사용되며 탭 역할을 부여한다.
role="tabpanel" : 탭의 본문 역할을 부여한다.
aria-controls="" : 현재 요소가 제어하는 대상을 명시하는 속성으로 탭메뉴와 본문을 연결시켜준다. 상태 값은 tabpanel의 id명 입력
aria-selected="" : 탭메뉴 선택 유무를 알려준다. 상태 값은 선택되었을 때 true / 선택되지 않았을 때 false 입력
tabindex="" : 키보드로 포커스를 받을 수 없는 요소일 때 포커스를 받을 수 있게 해준다. 상태 값은 포커스를 받지 않을 때 -1 / 포커스 받을 때 0 / 우선으로 포커스 받을 때 1
aria-labelledby="" : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.

Document Structure Roles문서구조를 설명하는 목적의 Roles

Document Structure Roles 종류
Document Structure Roles	application / article / cell / columnheader / definition / directory / document / feed / figure / group / heading / img / list / listitem / math / none / note / presentation / row / rowgroup / rowheader / separator / table / term / toolbar / tooltip

"tooltip"을 사용한 툴팁 예시

생년월일

사용된 WAI-ARIA

role="tooltip" : 초점을 받으면 노출되는 컨텐츠 혹은 참고용 컨텐츠의 역할을 부여한다.
aria-describedby="" : 현재 요소에 설명을 제공하는 속성. 속성 값은 참조(연결)시킬 요소의 ID값을 작성

Landmark Roles웹 페이지의 각 영역을 명확하게 구분하는 목적의 Roles.
영역 역할을 지정할 수 있는 8개의 속성이 있다.

Landmark Roles 종류
Landmark Role	HTML5 섹션 관련 요소
role="application"	동일한 역할의 요소 없음. 주로 <div> 요소와 같이 그룹 역할을 하는 요소로 대체할 수 있다.
role="banner"	동일한 역할의 요소 없음. 비슷한 의미로 <header> 요소를 사용할 수 있으나 <header role="banner">로 사용하였다 면 한 페이지에서 한 개의 <header> 요소만 사용하길 권장한다.
role="navigation"	<nav> 요소. 다른 페이지 또는 페이지 내 특정 영역으로 이동하는 링크 콘텐츠 영역으로 주로 메인 메 뉴 및 서브 메뉴 등에 사용할 수 있다
role="main"	<main> 요소. 본문의 주요 콘텐츠 영역으로 한 페이지 내에 1개만 사용이 가능하며, <article>, <aside>, <footer> 요소의 하위 요소로 사용할 수 없다
role="complementary"	<aside> 요소. 주요 콘텐츠와 연관이 적은 의미있는 콘텐츠 영역으로 종종 사이드바로 표현할 수 있다. <aside> 영역에는 현재 날씨, 관련된 기사 또는 주식 정보등의 부가 콘텐츠를 포함 할 수 있다.
role="form"	<form> 요소. 폼과 관련된 요소의 모임을 표현하는 영역으로 서버에 전송될 수 있는 콘텐츠를 포함 할 수 있다.
role="search"	동일한 역할의 요소 없음. 검색의 역할을 담당하는 서식 영역임을 의미하며 <div> 또는 <form> 요소를 사용하는 것을 권장한다
role="contentinfo"	동일한 역할의 요소 없음. 비슷한 의미로 <footer> 요소를 사용할 수 있으나 <footer role="contentinfo">로 사용하였다면 한 페이지에서 한 개의 <footer> 요소만 사용하길 권장한다.

"banner"를 사용한 예시

콘텐츠를 포함하고 있는 컨테이너인 HTML 요소에 role 속성을 사용하여 콘텐츠의 역할을 지정


	로고
	
		메뉴1
		메뉴2
		메뉴3
		메뉴4
		메뉴5


	로고
	
		메뉴1
		메뉴2
		메뉴3
		메뉴4
		메뉴5

h1 요소의 의미를 role속성을 사용하여 다른 의미로 변경하면 안된다

ㄴ [이미지설명] Landmark Role 속성 관련 영역

Property (속성) & State (상태)

Property (속성) : 해당 컴포넌트의 특징이나 상황을 정의하며 속성명으로 "aria-*"라는 접두사를 사용

State (상태) :해당 컴포넌트의 상태 정보를 정의

Property (속성) & State (상태)는 Widget states / Live Regions / Drag and Drop / Relationships 로 분류됨

Widget states and properties사용자가 데이터를 입력하여 송/수신하는 환경(자동완성, 체크여부 등)에서 사용하며 widget roles과 함께 사용된다.

Widget states and properties 종류
Widget states and properties	autocomplete / checked / datatype / disabled / expanded / haspopup / invalid / level / multiline / multiselectable / pressed / readonly / required / secret / selected / valuemax / valuemin / valuenow

"combobox"를 사용한 자동완성 폼 예시


	
	
		성별 입력 (여성 or 남성)

사용된 WAI-ARIA

role="combobox" : 아래에 매뉴가 펼쳐지는 UI의 역할을 부여한다.
aria-expanded="" : 펼쳐지거나 닫힐 수 있는 컨텐츠의 상태를 표시하는 aria-속성. 상태 값은 펼침 true / 닫힘 false
aria-labelledby="" : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.
aria-autocomplete="" : 사용자 입력에 대한 자동완성 지원 여부를 설정하는 aria-속성. 상태 값은 inline / list / both / none(default)
aria-owns="" : 부모/자식 관계 형성하는 aria-속성. 상태 값은 자식으로 설정할 요소의 id값 (aria-controls와 관련)
aria-haspopup="" : 팝업요소가 하위에 존재하고 있다는걸 인식 시켜주는 aria-속성. 상태 값은 false(default) / true / menu / listbox / tree / gird / dialog

Live Regions 새로고침하지 않고도 컨텐츠 정보가 업데이트되는 환경에서 사용된다.
Live Regions 종류

Live Regions aria-live / aria-relevant / aria-atomic / and aria-busy
"aria-live"를 사용한 알럿창 예시
```
	접속 할 수 없습니다!
```
사용된 WAI-ARIA
- role="alert" : 경고,알림 등의 컨텐츠 역할 부여
- aria-live : 페이지의 어떤 위치에 있든 업데이트된 정보를 사용자에게 알려주는 aria-속성. 상태 값은 assertive / off(default) / polite
Drag and Drop드래그 앤 드롭 기능 환경에서 사용된다. ex) 트렐로 카드 옮기는 액션
Drag and Drop 종류

Drag and Drop aria-dropeffect / aria-grabbed
"aria-dropeffect"를 사용한 Sorting List 예시
```
	
	아이스크림
	파이
	케이크
	컵케이크
```
사용된 WAI-ARIA
- role="listbox" :role="option"과 함께쓰이는 복합형 Role 속성이며 선택가능한 옵션이 존재하는 리스트 역할을 부여한다.
- role="option" : role="listbox"와 함께 쓰이며 부모인 리스트의 옵션이라는 역할을 부여한다.
- aria-dropeffect="" : 요소가 드롭되었을 때 사용자에게 알려준다. 상태값은 true / false
- tabindex="" : 키보드로 포커스를 받을 수 없는 요소일 때 포커스를 받을 수 있게 해준다. 상태 값은 포커스를 받지 않을 때 -1 / 포커스 받을 때 0 / 우선으로 포커스 받을 때 1

Relationship요소 간의 관계 또는 연결을 나타내는 속성

Relationship 종류
Relationship	aria-activedescendant / aria-colcount / aria-colindex / aria-colspan / aria-controls / aria-describedby / aria-details / aria-errormessage / aria-flowto / aria-labelledby / aria-owns / aria-posinset / aria-rowcount / aria-rowindex / aria-rowspan / aria-setsize

"aria-aria-controls", "aria-labelledby" 을 사용한 탭메뉴 예시


	탭메뉴1
	탭메뉴2
	탭메뉴3


	탭메뉴1의 본문
	탭메뉴2의 본문
	탭메뉴3의 본문

사용된 WAI-ARIA

aria-labelledby="" : 레이블 제공을 위한 aria-속성. 상태 값은 연결시킬 레이블 id를 입력한다.
aria-controls="" : 현재 요소가 제어하는 대상을 명시하는 속성으로 탭메뉴와 본문을 연결시켜준다. 상태 값은 tabpanel의 id명 입력
aria-selected="" : 탭메뉴 선택 유무를 알려준다. 상태 값은 선택되었을 때 true / 선택되지 않았을 때 false 입력
tabindex="" : 키보드로 포커스를 받을 수 없는 요소일 때 포커스를 받을 수 있게 해준다. 상태 값은 포커스를 받지 않을 때 -1 / 포커스 받을 때 0 / 우선으로 포커스 받을 때 1

유의사항

W3C에서는 HTML5 섹션 관련 요소와 WAI-ARIA 규칙을 함께 사용할 경우 해당 기능이 무효화 되거나 충돌이 발생할 수 있으므로 중복해서 사용하지 않도록 주의를 당부하고 있다.
ex) <header role="banner"></header></span></li>(X)
원래의 HTML 요소의 의미를 변경하면 안된다.
ex) <h1 role="button"></h1>(X)
모든 RIA 컨텐츠는 키보드를 사용하여 접근할 수 있어야 한다.
모든 브라우저와 보조기기가 WAI-ARIA를 지원하지 않기 때문에 지원하는 브라우저와 기기 정보를 확인하고 적용해야한다.

참고사이트

W3C - WAI-ARIA : https://www.w3.org/TR/wai-aria-1.1
MDN - ARIA 접근성 : https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA

잘못된 정보가 있으면 알려주세여ㅎ.ㅎ
- 맑은커뮤니케이션 마크업 개발팀 -

웹퍼블리셔가 알고있어야 할 display: table 속성!

미친개구리 — Wed, 8 Aug 2018 14:55:35 +0900

안녕하세요.! 글 작성하다가 방금 꿀밤을 한대 맞은(힁 ㅠㅠ....)

맑은 커뮤니케이션의 나이 막내(?) 스물다섯스물하나입니다.!

오늘 다룰 주제는

사이트에서 많이 사용되는 형태인

동일한 넓이와 간격을 가지고 있는 컨텐츠 (정확한 명칭을 몰라서 ㅎㅎ....)

에 대해 알아보도록 하겠습니다.

(글이 지루하신 분은 Ctrl + F 를 눌러 '결론' 을 검색해 주시지 마세요. 읽고서 댓글로 짱똘 던져주세요 +_+ ㅎㅎㅎ;;;)

아마 위의 사진과 비슷한 형태를 작업해 보신 분들이 많을거라고 생각되는데요.

제가 웹퍼블리싱을 배울때

float으로 컨텐츠를 띄워 붙이고(왼쪽이나 오른쪽!)

width값을 100%/ n(갯수) 만큼 주면

동일한 간격으로 정렬이 된다고 배웠습니다!

4개 정렬 = 25%

5개 정렬 = 20%

6개 정렬 = 16.66%

· · ·

이런식으로 말이죠.

많이들 알고 있는 공식(?) 이시잖아요~

저 또한 저 방법을 이용하여 작업을 했었습니다!(과거형!)

작업자님~~~

디자인 파일 메일로 보내드렸어요~!!

확인 부탁드려요!

네~~~

(딸깍딸깍)

별거 없군! 금방 끝내주겠어!!

(다다다다다다다다다다다다다다다닥다다닥)

.boxwrap {
	overflow: hidden;	
}

.boxwrap .box {
	float:left;
	width:25%;
}

짜잔~~! 다했따아~~

집에 가야지

개발자님~

작업물 푸시 했어요!

확인 부탁드려용~

이봐 스물쿤!! 갯수가 3개일때 이상하게 나오는데..?

확인좀 오네가이!

우씨... 알았어요..!

.boxwrap .box.length3 {
    width:33.33%;
}

3개 일때는 length3 클래스 추가해주세요!

됐죠??

그럼 전 20,000....

어이어이~

2개일때는!!!? 5개일때는!!?? 6개 일때는..!!?

(저 개ㅈ....ㅏ......ㅅ...)

훗.. 금방 해드리죠!!

.boxwrap .box.length2 {
	width:50%;
}

.boxwrap .box.length5 {
	width:20%;
}

.boxwrap .box.length6 {
	width:16.66%;
}

자요!! 됐죠!!?

전 진짜 20,000~~ 수고하세용~~

· · · ·

저 개ㅅ.....

사진=영화 '어벤져스: 인피니티 워 닉퓨리역의 사무엘 잭슨 '

어머니....

----------------------------------------------------------------------------------------------------------------------------

자... 지금까지 스물쿤의 작업을 보셨습니다.

개발독은 스물쿤의 소스가 무척이나 별로라고 생각 할겁니다.

(끄덕끄덕)

프로젝트 마다 다르겠지만

컨텐츠의 갯수가 고정적으로 정해져 있을수도,

유동적으로 변할수도 있습니다!.

과거의 퍼린이 였던 스물쿤은 이런점을 생각하지 못했었습니다.

스물쿤의 소스를 한번 최종적으로 볼까요??

.boxwrap {
	overflow: hidden;	
}

.boxwrap .box {
	float:left;
	width:25%;
}

.boxwrap .box.length2 {
	width:50%;
}

.boxwrap .box.length3 {
	width:33.33%;
}

.boxwrap .box.length5 {
	width:20%;
}

.boxwrap .box.length6 {
	width:16.66%;
}

이 소스가 결코 잘못되었다 고! 말할수는 없습니다.

이것도 방법이라면 방법이니까요.

하지만 좋은 방법은 아니죠.

갯수 제어 때문에 넓이를 조절하는 css가 4개나 더 늘었어요!!

만약 한줄에 7개, 8개 9개 10개 등등등... 갯수가 더 추가된다면

더 많아지겠죠!?!?!?

이쯤 되면 결코 좋은 소스라고 할수 없습니다.

이러한 넓이를 제어하는 CSS를

싹!! 없애버릴수 있는 방법이 있습니다.

그거슨 바로!!

table 과 table-cell 입니다~!

(이말 하나 하려고 참 오래도 걸린다 임마!!)

부모태그에 display : table을 선언해 주고!

자식태그에 display : table-cell을 선언해주면

갯수가 몇개가 되든 동일한 간격으로 영역 가지게 됩니다

(100개,200개가 되면 찌부가 될수 있겠죠...? 그렇게 가지는 않을테고..)

----------------------------------------------------------------------------------------------------------------------------

(다다다다다다닥)

.boxwrap {
	display:table;
	width: 100%;	
}

.boxwrap .box {
	display:table-cell;
	vertical-align: middle;
}

???: 에이 안되는구만

???: 동일하긴 뭐가 동일합니까!!

길쭉해 지는구만.....

(에잇... 괜히 읽었어!!)

하하하....

제가 실수로 빼먹은게 있네요...

.boxwrap {
	display:table;
	width:100%;
	table-layout: fixed;
}

.boxwrap .box {
	display:table-cell;
	vertical-align: middle;
}

부모태그에 table-layout: fixed를 선언해 주시면!

짜잔~~~!

동일한 넓이를 가지게 됩니다~!!

신기하죠~~~~~~!!!?!?!?!?!?

ㅅ....시....신...기....

하...ㅅ...ㅣ..죠...?;;

----------------------------------------------------------------------------------------------------------------------------

(야.. 왜 갑자기 말돌려...)

넵.! 저는 오늘 여러분에게

CSS 속성인

- display: table- display: table-cell- table-layout: fixed

의 존재 에 대해 말씀 드리고 싶었습니다!

이 속성이 '어떻게' 쓰이고 '무엇무엇' 이다~

라는 부가적인 설명은 안하고자 합니다.

왜냐하면 스물쿤도 퍼린이 시절..

새로운것 ,신기한 것을 발견하면

그 속성에 대해 열심히 찾아보았거든요 ㅎㅎ...

그러면서 재미도 느끼고 뭔가, 내가 발전해 간다는게 느껴져서 뿌듯했었죠.

저 보다도 먼저 이러한 속성을 잘~ 정리해 주신 분들이 많답니다 ㅎㅎ

??? : 괜히 모르ㄴ...

(쌰랍)

----------------------------------------------------------------------------------------------------------------------------

아무튼... 끝으로!!

처음에는 flex라는 속성으로 작업을 했었는데

이게 익스에 하위버전에서는 안되어 어쩔줄 몰라 하고 있었는데

그때 알게된 방법이 바로 display table 속성 이었죠!

(플롯밖에 몰랐던 나란 퍼린이...)

부족하고 노잼인 제 글을 읽어 주신분들께는 1감사 1따봉을 드리며

짧게 요약을 하고 저는 이만 물러 가겠습니다~!

(사장님 저 퇴근.....)

결론

1. display: table , table-cell 쓰세요.

2. table-layout : fixed도 쓰세용

3. 아래 링크에서 해보세영!

http://jsfiddle.net/209p16n5/21/

여러분 안녕~~

----------------------------------------------------------------------------------------------------------------------------

???: 그러니까 결론은 css table 쓰라는거 아냐

??? : 하.......

CSS3 Transform 속성 : scale(), rotate(), translate(), skew() - 실무예제 첨부파일 포함

퍼블리셔 — Thu, 2 Aug 2018 16:56:02 +0900

최근 웹퍼블리싱을 하다보면 브라우저 크로스브라우징을 IE10이상 하게 되는 경우가 많다보니,
Jquery animation 보다는 CSS animate를 사용하게 되는 경우가 많아졌다.
그리고 특히 CSS animate를 하다보면 transform 속성을 많이 사용하게 될 것이다.
이유는 transform속성은 웹요소의 위치를 이동시키거나 크기 조절 및 회전시킬 수 있는 강력한 기능을 가지고 있기 때문이다.
그렇다면, transform 속성에 대해 자세히 알아보고, 실무에서 만들었던 파일을 같이 공유하여 이해를 돕도록 하겠다.

transform 속성

scale(), rotate(), translate(), skew()

브라우저	ie IE	chrome 크롬	firefox 파이어 폭스	safari 사파리	opera 오페라
지원현황	IE10	36.0	16.0	9.0	23.0

transform:scale() - X 또는 Y축으로 확대/ 축소

scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킬 수 있습니다.
사용방법은 아래와 같습니다.

transform:scaleX(x축 비율);          // x축으로 확대, 축소
transform:scaleY(y축 비율);          // y축으로 확대, 축소
transform:scale(x축 비율, y축 비율);  // x축, y축으로 확대, 축소

transform:rotate() - 지정 요소 회전

rotate는 요소를 지정한 각도만큼 회전시킵니다.
회전 각도가 플러스 값일 경우 시계 방향, 마이너스 값일 경우 반시계 방향으로 회전합니다.
사용방법은 아래와 같습니다.

transform:rotateX(Ndeg);  // x축 기준으로 N도 만큼 회전
transform:rotateY(Ndeg);  // y축 기준으로 N도 만큼 회전
transform:rotate(Ndeg);   // N도 만큼 회전

transform:translate() - 지정 요소 X 또는 Y축으로 이동

translate는 요소를 지정한 위치로 X 또는 Y축만큼 이동 시킵니다.
사용방법은 아래와 같습니다.

transform:translateX(10px);        // X축으로 10px 이동
transform:translateY(10px);        // Y축으로 10px 이동
transform:translate(-10px, -10px); // X축으로 -10px, Y축으로 -10px 이동

transform:skew() - 지정 요소 X 또는 Y축으로 기울이기

skew는 요소를 지정한 만큼 X 또는 Y축으로 기울입니다.
사용방법은 아래와 같습니다.

transform:skewX(Ndeg);             // x축으로 N도 만큼 기울이기
transform:skewY(Ndeg);             // y축으로 N도 만큼 기울이기
transform:skew(x축 Ndeg, y축 Ndeg); // x축, y축으로 N도 만큼 기울이기

transform-origin 속성

위의 transform 속성인 scale(), rotate(), translate(), skew()들을 한번씩 연습해 보았다면, 지정 요소의 중심을 기준으로 동작한다는 것을 알 수 있을 것 입니다.
하지만 transform-origin 을 사용하면 지정 요소의 기준점을 변경할 수 있습니다.
사용방법은 아래와 같습니다

transform-origin:x축 y축;  // px, 백분율(%), left, center, right 중에서 사용할 수 있습니다.

transform을 이용한 애니메이션 실무 예제 다운로드(꽃입 떨어지는 효과)

(주)맑은 커뮤니케이션에서 실무로 만든 예제이며, transform 애니메이션을 공부하는 분들에게 도움이 되었으면 합니다.

transform.zip

다운로드

마이크로소프트(MS) 엣지(Edge) 브라우저 CSS @import 버그

퍼블리셔 — Mon, 30 Jul 2018 14:33:31 +0900

최근 웹퍼블리싱을 하다보면 고객사의 요청에 의해 마이크로소프트(MS) 엣지(Edge) 브라우저를 크로스브라우징하여 마크업 진행하는 경우가 종종 있다.
크롬 또는 익스플로러 브라우저와 같이 크로스브라우징을 하면서 아직은 크게 어려움은 없었으나, 최근 엣지(Edge) 브라우저 크로스브라우징을 하다 페이지 전부 CSS가 깨져버린 상황을 겪었다.
그동안 엣지(Edge) 브라우저 크로스브라우징을 하면서 그런일은 없었기에 적지 않게 놀랐다.
작업했던 마크업 파일은 기존 우리 회사(맑은커뮤니케이션)에서 마크업하던 작업물이 아닌, 타 업체로 부터 인계를 받아 유지/보수 진행하던 마크업이라 더 난감한 상황이였다.
하지만, 구글링을 해봐도 css들이 왜 적용안되는지 알 길이 없었다.
혹시나 하여 css 처리방식이 @import 방식으로 처리되어 있어, link 방식으로 변경하였더니 멀정하게 반영되는 것이다.
문제의 답은 간단했다. 엣지(Edge) 브라우저는 @import 방식을 처리하지 못했던 것이다. 헉....
우리 회사(맑은커뮤니케이션)에서는 css 처리방식을 @import 방식을 쓰지 않고 link 방식만을 쓰기 때문에 그동안 문제를 발견하지 못했던 것이다.
하지만 많은 회사들이 @import방식을 아직도 많이 사용하기에 공유하고자 글을 작성한다.

Link 방식 vs @import 방식

결과적으로 보면 같아 보일 수 있겠지만, 사실은 Link 방식을 사용하는 것이 @import 방식을 사용하는 것보다 페이지의 로딩 속도 측면에서 뛰어나다.

@import 방식의 장, 단점

CSS파일 내에 @import를 이용하여 CSS를 연결하는 방식이다.
하나의 CSS파일에 여러개의 페이지 CSS를 로드시켜 편리하다고 생각하면, 편리하다고도 할 수 있다.
그러나 성능을 생각한다면 그리 좋은 방법은 아니다. @import를 많이 사용한다면, 익스플로러에서는 다운로드 순서가 다르게 작동하여 문제가 발생할 수 있으며, 병렬방식이 아닌 직렬방식으로 다운로드 하기때문에 전체 로딩시간이 길어지는 문제점이 있기에, 추천하는 방법은 아니다.
그리고 이 글의 주제처럼 엣지(Edge) 브라우저에서 @import 방식을 사용할 경우 @import된 CSS파일을 적용하지 못한다.

사용방법은 아래와 같습니다.

@import url("reset.css");
@import url("content.css");

Link 방식의 장, 단점

HTML의 Link태그를 사용하는 CSS연결 방식이다.
필자가 사용하는 CSS연결 방식으로 하나의 파일에 여러 페이지의 스타일을 일괄 수정 및 추가 등 유지/보수에 용이하며, 직렬방식이 아닌 병렬방식으로 다운로드 하기에 로딩속도가 빠르고, CSS파일 여러개를 Link 방식으로 다운로드 하더라도 익스플로러에서 순서가 동일하게 작동한다.
그리고 이 글의 주제처럼 엣지(Edge) 브라우저에서 CSS파일을 다운로드 하지 않는 일이 발생하지 않는다.

사용방법은 아래와 같습니다.

마치며...

처음 이 글을 작성하고자 한 이유는 엣지(Edge) 브라우저가 @import 방식을 처리 안된다는 것을 공유하고자 작성하였으나, @import방식과 Link방식의 차이점을 설명하여 엣지(Edge) 브라우저의 버그문제도 있지만 Link 방식을 사용하는 것이 더 이롭다는것을 알려드리고 싶었습니다.
아직도 많은 회사들이 @import 방식을 많이 사용하는데, 이럴경우 접속자가 많은 사이트의 경우 로딩속도가 현저하게 늦어지며, 엣지(Edge) 브라우저에서 CSS가 적용안된 사이트를 보게 될 수 있기에 이 글을 작성하게 되었습니다.

iOS 10 viewport 스케일링을 비활성화 방법

퍼블리셔 — Wed, 15 Feb 2017 13:31:08 +0900

'맑은커뮤니케이션 마크업' 개발팀에서는 iOS 10의 첫 번째 베타 버전이 출시되었을 때 일부 웹 퍼블리셔들은 viewport 메타태그의 user-scalable=no 가 사이트에서 작동 않는다는 사실을 발견하기까지는 오래 걸리지 않았습니다.
곧 Stack Overflow에서 이슈화 되기 시작했고, 이미 일부 퍼블리셔들은 JS 플러그인을 사용하여 이 문제를 해결하였습니다.
그러나 iOS 10의 첫 번째 베타 릴리스 노트에서 알 수 있듯이 버그가 아니며, Apple은 실제로 user-scalable=no 를 의도적으로 사용 중지했습니다.
user-scalable=no의 기능을 중지한 이유는 휴대 전화의 가장 분명하고 유용한 제스처 중 하나 인 핀치 투 줌(pinch-to-zoom)을 자유롭게 사용할 수 있게 함으로서
시각 장애가 있는 사용자에게 웹의 접근성을 확보 할 수 있는 희망적인 이유이기 때문이다.

iOS 10 릴리즈 노트

Safari의 웹 사이트에 대한 접근성을 향상시키기 위해 웹 사이트에서 뷰어에 user-scalable=no 를 설정 한 경우에도 사용자가 손가락으로 확대/축소 할 수 있습니다.

iOS 10 릴리즈 노트 Apple의 올바른 생각

user-scalable=no은 다양한 호환성과 UX 문제가 많이 있습니다.
iOS 10 릴리즈 노트의 변화는 사용자가 페이지와 크기를 제어 할 수 있기 때문에 Apple 좋은 움직임이라고 생각합니다.
"사용자 컨트롤 제공"은 항상 모든 UX 사용자를 위한 최상위의 조건이라고 생각합니다.
예를 들어, 눈이 너무 나쁘거나 시각장애인 의 경우 텍스트를 읽을 수 없는 경우 확대/축소를 할 수 있어야 합니다.
다양한 사용자에 대해 고려를 해야 하며, 우리는 개인적인 관점을 생각하지 말아야 합니다.

그래도 user-scalable=no 사용해야 한다면?

고객사를 설득하여 사용을 자제하도록 해야 하지만, 현실적으로 설득이 힘들다고 한다면 아래와 같이 사용하시면 됩니다.

document.documentElement.addEventListener('touchstart', function (event) { 
	if (event.touches.length > 1) { 
		event.preventDefault(); 
	}
}, false);

CSS3 - calc() 사용 웹퍼블리싱

알 수 없는 사용자 — Mon, 13 Feb 2017 16:54:32 +0900

css3 - calc()

반응형이나 모바일 코딩을 하다 보면 %로 값을 주기가 애매한 것들이 있습니다.
이러한 것들을 float이나 position absolute 또는 fixed를 사용하거나 정확한 px 값을 지정하여 미디어 쿼리를 사용하여 해상도별로 나누어 해결하곤 하는데, calc() 함수를 사용하여 값을 쉽게 지정해 줄 수 있습니다.

calc()함수 사용

검사버튼 삭제버튼 calc() 함수는 width, height, margin, padding 값을 사칙연산자를 이용하여 표현할 수 있습니다.
각각 사용방법을 알아보겠습니다.

※ width

float값으로 width값의 %를 나누기 애매할 경우에 사용하기에 유용합니다.

Markup

위와 같이 lst_width class로 쌓여있는 li태그들을 7등분 하기 위해 calc()함수를 이용하여 간단하게 처리 할 수 있습니다.

css

.lst_width>li{
	float:left;width:calc(100% / 7);
	height:50px;
	color:#fff;
	text-align:center;
}
.lst_width>li:nth-child(odd){
	background:#333;
}
.lst_width>li:nth-child(even){
	background:#999;
}

width값 예시 보기

※ height

반응형이나 모바일에서 높이 값을 쉽게 잡을 수 있습니다.
위에서 언급했지만 position absolute 또는 fixed를 사용하거나 정확한 px 값을 지정하지 않아도 처리가 가능합니다.

height-calc.zip

다운로드

위 첨부파일은 모바일 햄버거 메뉴로 예제를 만들어 봤습니다.

후기

반응형 웹과 모바일 코딩을 하면서 width와 height의 값을 %로 사용하면서 길이가 깔끔하게 떨어지지 않을 때에 소수점으로 li:first-child{width:33.34%} li{width:33.33%} 이런 식으로 써줘도 상관없지만 calc() 함수를 이용하여 코딩을 한다면 한층 더 간결하고 깔끔한 코드가 되겠네요.

크로스브라우징이 가능한 비디오 플레이어 JW Player

알 수 없는 사용자 — Mon, 22 Jul 2013 17:16:31 +0900

-->

JW Player란?

동영상을 보기 위해 플레이어들이 많이 있다. 네이버 플레이어, 다음플레이어, 유투브...둥등 JW Player도 동영상을 재생하기 위한 플레이어 종류중 하나이다. JW Player는 플래시 기반의 플레이어로써 FLV, H.264, MP4, MP3, AAC, JPG, PNG, GIF 포맷들이 플레이가 가능하다. 네이버, 다음 등 포털사이트의 플레이어 영상은 자체 인코딩 과정을 거치기 때문에 화질열화의 단점을 갖고 있다. 하지만 JW Player는 원본 그대로 재생해주기 때문에 저장 공간만 있다면 아무런 제약없이 고화질의 영상도 재생시켜준다.

JW Player 사용법

JW Player로 동영상을 재생하기 위해서는 jwplayer.js와 player.swf 그리고 동영상 파일이 있어야한다.

jwplayer.js
- JW Embedder 방식으로 JW Player를 실행시킬 때 필요. JW Embedder 방식을 사용하지 않을 경우에는 없어도 상관이 없다.
player.swf
- JW Player의 기본 실행파일. 여타의 비디오 및 오디오 자료를 플레이 시킬 때 사용한다.

jwplayer.js와 player.swf 는 http://www.longtailvideo.com/jw-player 홈페이지에서 받을 수 있다.

※ 기본 구조

<head>
		
</head>
<body>	

	
	동영상이 재생되는 부분
	
	
	
</body>

※ 사용 예


	

	플레이어 불러오는 중...

※ 참고사항

간혹 JW Player가 특정 브라우저에서 재생이 안될때가 있는데 Adobe Flash player를 설치하면 모든 브라우저에서 동영상 재생이 가능하다.
http://get.adobe.com/kr/flashplayer

후기

JW Player는 현재 6버전까지 나와있는 상태이다. JW Player 6버전에서 구현되지 않고 있는 기능들...JW Player 6자체 문제라기 보다는 HTML 5 의 기능적 한계때문에 구현이 어려운 부분들이 많다.

JW Player 5버전에서 6버전으로 업그레이드 되면서 가능 크게 바뀐건 flash 기반의 플레이어를 추구하다가 6버전에서는 기본 모드가 HTML 5로 바뀐다. 아울러서 기존에 지원하던 <embed> 방식과 SWFObject 방식의 플레이는 더 이상 지원 안한다. 이제는 Embedder 방식만을 지원. HTML5와 Flash 기반의 두 가지 방식을 여전히 지원을 하지만 자바 스크립트를 사용을 하는 Embedder 방식으로만 플레이 할 수 있다. 예를 들어 자바 스크립트를 지원하는 티스토리에는 JW Player 6을 가능하지만, 네이버와 같이 자바 스크립트를 지원하지 않는 사이트에서는 JW Player 6을 사용 할 수 없다.

전제척으로 봤을 때 JW Player 6버전은 기본적 플레이가 되는데 편의성 부분에서는 아직은 이런 저런 기능들이 부족한 것이 많아 보인다. 플래시 기반의 JW Player 5버전에서의 편의성을 따라가지 못하는 것 같다.

맑은커뮤니케이션에서 웹퍼블리싱 업무시 JW Player를 사용해본 결과 현재 나와있는 6버전보다는 그 아래 버전인 5.2버전, 5.9버전이 크로스 브라우징을 하기엔 더 용이하다.

※ 참고사항

유투브 영상을 플레이 할 때는 스킨을 쓰면 플레이가 안 된다. 스킨을 제거해야 플레이가 정상적으로 이루어 진다.

유튜브 플러그인은 아직은 플래시 기반이다.. 이것은 JW Player 6의 문제가 아니라. 유튜브 자체의 문제. 유튜브에서 다른 프로그램이 유튜브 영상을 플레이 하도록 도와주는 API를 제공을 하고, JW Player와 같은 플레이어들은 유튜브에서 제공하는 API를 통해서만 유튜브의 영상을 플레이 할 수 있도록 되어 있다. 아마도 유튜브의 영상을 통해서 제공하는 광고 때문에 그런 것 같다. 다른 플레이어를 통해서 유튜브 영상을 시청 하도라더 정상적으로 광고가 나가도록 하기 위해서. 그런데 유튜브에서 자체적으로 제공하는 API가 현재는 플래시 기반으로 되어 있어서 유튜브 영상을 플레이 할 때는 아직은 플래시 기반을 벗어날 수 없다. 당연히 안드로이드나 iPad같은 기기에서는 문제가 생긴다.. 이 문제는 유튜브에서 iFrame 기반의 API를 시험적으로 내놓고 있기 때문에 이 iFrame 기반의 API가 안정되면 해결 될 것으로 기대 한다.

[CSS3] @font-face(웹 폰트) 웹퍼블리싱

알 수 없는 사용자 — Mon, 4 Mar 2013 18:12:53 +0900

@font-face는 css3라고 알고 있지만, 사실 이전부터(css2) 있던 규칙이다.
다만 Embedded Open Type(EOT)포맷 라이센스로 인해 Microsoft의 웹 브라우저인 인터넷 익스플로어에서만 사용되어 왔다.
그러나 사파리 3.1의 릴리즈와 함께 라이센스 문제를 해결한 Tyue Type Font(TTF)와 Open Type Font(OTF)를 웹 페이지에 웹 폰트처럼 사용 할 수 있게 되었다.
웹 브라우저가 웹 폰트 형식의 Downloadable Font를 다른 포맷으로 지원하기 시작하고, Web Open Font Format(WOFF) 지원이 일반화되었다.

font-face란?

font-face규칙은 CSS3에 새로 추가된 웹 글꼴명세로 시스템에서 지원해주지 않는 글꼴을 웹 서버에서 내려 받아 화면에 표시해 주는 방법으로 MS가 독자적으로 IE6~8 브라우저에 지원하던 명세였는데 W3C에 제안하여 현재 CSS3 표준 초안이 되었다.

font-face 문제점 및 사용방법

font-face는 웹 서버에서 글꼴을 내려 받아 사용하므로 글꼴이 없는 사용자가 이용하는데 좋다.
하지만 font-face를 사용하기 전에 다음과 같은 몇 가지 문제를 확실히 알고 있어야 한다.

* TTF(True Type Font)는 용량이 커서 EOT(Embedding Open Type)나 WOFF(Web Open Font Format)를 쓰는 것이 일반적이다.
(TTF형식일 경우 영문 글꼴은 크기가 작지만, 한글 글꼴의 경우 크기가 상대적으로 큼. TTF형식은 압축되지 않은 타입으로 웹에서 사용하긴 무리)
※ 예) 나눔고딕.TTF 는 2.23MB(한자 포함 4.13MB), EOT,WOFF로 변환하면 나눔고딕.EOT는 846KB, 나눔고딕.WOFF는 981KB
해결방법

TTF형식 파일을 EOT, WOFF형식 파일로 변환하여 사용.
(EOT, WOFF형식으로 변환시 상대적으로 최대는 30%~70%의 용량으로 압축효과가 있다.)
- - TTF -> EOT 변환프로그램 : http://eotfast.com
- - TTF -> WOFF 변환프로그램 : http://people.mozila.com/~jkew/woff
* IE6~8 브라우저는 EOT형식 글꼴만 지원, 크롬, 사파리, 파이어폭스, 오페라는 WOFF형식 글꼴만 지원.
(IE9 브라우저는 EOT, WOFF형식 글꼴 둘다 지원함)

ie IE chrome 크롬 firefox 파이어 폭스 safari 사파리 opera 오페라

WOFF 9부터 지원 지원 지원 지원 지원

EOT 6~9지원 미지원 미지원 미지원 미지원
* 기본문법
```
@font-face{
	font-family: <a-remote-font-name>;
	src: <source>;
	font-weight: <weight>;
	font-style: <style>
}
```
속성값(Values)

<a-remote-font-name>

font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.

<source>

원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하는 속성이다.

<weight>

폰트의 굵기(font weight) 값(생략 가능).

<style>

폰트 스타일(font style) 값(생략 가능).
사용자의 로컬환경(local computer)에 설치된 폰트는 local() 이라는 구문을 사용하여 지정이 가능하다.
만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을때까지 폰트를 검색작업을 계속 할 것이다.
* 모든 브라우저에서 글꼴을 표시하기 위해 font-face규칙을 두번 선언해야 한다.
```
@font-face{font-family:ngwoff; src:url(NanumGothic.woff)}
@font-face{font-family:ngeot; src:url(NanumGothic.eot)}
body{font-family:나눔고딕, NanumGothic, ngwoff, ngeot}
```
font-face규칙을 두번 사용할 경우 시스템 글꼴이 없는 경우 IE6~9 브라우저에서 EOT형식 외에 WOFF형식도 요청하기 때문에 사용자는 불필요한 1MB미만의 파일을 추가로 내려받는 셈이다.
해결방법위에서 봤듯이 IE6~8 브라우저는 EOT를 지원한다. 그렇기 때문에 불필요하게 WOFF파일까지 요청 할 필요가 없다.
때문에 IE6~8에서는 local(※)이라는 구문을 넣어서 WOFF의 요청을 막아준다.local(※) 값의 괄호 안쪽에 포함된 ※ 기호는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정한 것. 굳이 2byte짜리 특수문자를 사용한 이유는 Mac OS에서 2byte짜리 문자열로 된 시스템 글꼴 이름은 아예 처리하지 않기 때문이다.
(IE6~8 브라우저가 두번째 src속성을 해석하지 못하도록 하기 위함. local값의 용도는 사용자 로컬 시스템 글꼴이 있는 경우 참조하는 것인데 Mac 컴퓨터는 시스템 글꼴 이름이 모두 1바이트로 되어 있기 때문에 2바이트 이름을 사용해서 아예 제외. local값은 비워두면 안되기 때문에 반드시 넣어야 하고 여기에 로컬에 전혀 없을만한 글꼴이름을 넣는다.)☞ font-face 명세에 따르면 'EOT'글꼴에 대한 format('eot') 선언이 없기 때문에 선언을 굳이 안함.
format('woff') 포맷 타입이 선언되어있는데, format(‘woff’) 값을 명시적으로 작성하면 이 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있다.
값은 반드시 홀따옴표 또는 쌍따옴표 안에 있어야 하며 작성하지 않는 경우 지원 여부에 무관하게 모든 형식의 글꼴을 내려받는것이 명세이다.
글꼴을 지원하지 않으면서도 내려받는 상황을 예방하기 위해 이 형식을 지원하는 경우에만 외부 글꼴을 내려받도록 명시적으로 코드를 작성한 것이다.
IE 7~8 브라우저는 이 코드를 해석하지 못하기 때문에 woff 글꼴을 추가로 요청하지 않도록 만든 것이다.
local(※) 값은 외부 자원을 참조하기 이전에 시스템에 설치된 글꼴을 우선 참조할 수 있도록 만들어 준다. 그러나 이코드에서는 IE6~8 브라우저가 local() 값을 처리하지 못하는 특징을 이용하여 WOFF 글꼴을 추가로 요청하지 않도록 해준다.

@font-face{
	font-family:ng;
	src:url(NanumGothic.eot);
	src:local(※), url(NanumGothic.woff) format('woff')
}

body{font-family:나눔고딕, NanumGothic, ng}

참고

미디어 쿼리를 이용하여 @media 구문 안쪽에 @font-face규칙을 선언하는 경우 IE9 브라우저는 미디어쿼리 안의 @font-face를 무시하기 때문에 표시하지 못한다.

해결방법

* IE9 조건부 주석문 사용

<!–-[if IE 9]>
<style>
	/* This code is used only in IE 9 */
	@font-face{
		font-family:ng;
		src:url(NanumGothic.eot);
	}
	
	body{font-family:나눔고딕, NanumGothic, ng}
</style>
<![endif]-–>

* 나머지 브라우저에선 미디어쿼리를 이용

/* IE 9 does not support @font-face within @media */
@media all and (min-width:768px) {
	@font-face{
		font-family:ng;
		src:url(NanumGothic.eot);
		src:local(※), url(NanumGothic.woff) format(‘woff’);
	}

	body{font-family:나눔고딕, NanumGothic, ng}
}

해결방법

* @font-face 규칙을 미디어쿼리 밖에 선언

/* IE 9 does not support @font-face within @media */
@font-face{
	font-family:ng;
	src:url(NanumGothic.eot);
	src:local(※), url(NanumGothic.woff) format(‘woff’);
}

@media all and (min-width:768px) {
	body{font-family:나눔고딕, NanumGothic, ng}
}

IE6~8 브라우저는 미디어쿼리를 지원하기 위해 respond.min.js 파일을 사용해야 한다.(미디어쿼리 구문 안쪽에 @font-face 규칙을 추가하는 경우도 있다.)

마치며...

Font-Face(웹 폰트)의 성가신 점은 바로 브라우저 호환성이다. 브라우저마다 다르게 보인다, 브라우저마다 적용이 안 된다 등등
여러 가지 말들이 많지만, 맑은커뮤니케이션에서 테스트 해본 결과 위와 같은 방법을 사용하면 왠 만한 이슈는 예방하고 정상적으로 사용 할 수 있게끔 해준다.
이상!!!!!!!!!!

미디어쿼리를 이용한 반응형웹 만들기 웹퍼블리싱 핵심속성

퍼블리셔 — Wed, 27 Feb 2013 10:57:39 +0900

반응형웹은 데스크탑, 노트북, 넷북, 태블릿, 스마트폰, 스마트TV 등 N-Screen의 Multi Device에 어떠한 사용자도 제약없이 접근할 수 있도록 제공하는 웹을 말한다.
반응형웹에서 가장 중시되어야 할 것은 모바일을 우선순위로 해야한다.
최적화된 반응형웹 접근방식으로서 모바일을 우선에 두고 CSS를 작성하는 방법으로 가장 단순한 기기, 최소성능의 Device에 우선을 두고 작업을 하며, 이렇게 작업을 하면 기준치 이하의 Device에 과도한 짐을 지우지 않으면서, 최신 브라우저를 사용하는 사용자에게 풍부한 경험을 제공한다.
또한 웹의 창시자 팀 버너스 리 경(Tim Berners - Lee , W3C Director and inventor of the World Wide Web)은 이렇게 이야기 했다.
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

반응형웹의 등장배경

현재 다양한 IT Device 등장함에 따라 N-Screen 욕구가 생겨나게 되고, 이에따라 Multi Device환경에 최적화된 디자인과 기능을 보여주어야 한다. 기존에는 이를 위해 사용자 브라우저 UA(User Agent) 정보를 감지하여 사용자 접속시 모바일 전용페이지로 이동할지 데스크탑 전용 페이지에 머무르게 해야 할지 판단했기에 새로운 Device가 등장할 때마다 개발자는 고민해야 햇다.
그리고 새로운 모바일 브라우저가 등장하면 개발자가 새로운 코드를 추가했다. 데스크톱과 모바일 이외에도 그 중간 정도 크기의 해상도인 태블릿 PC를 많이 사용하는 요즘과 같은 상황에는 유연하게 대응하지 못하는 방식이다. 만약 기존의 방식대로 대응한다면 태블릿 PC 전용 페이지를 추가로 개발하고 UA 정보를 추가한 다음 태블릿 PC 사용자 접속 시 태블릿 PC 전용 페이지로 이동하는 코드를 추가해야 한다.

이와 달리 반응형 웹은 사용자의 해상도와 같은 장치 특성을 해석해서 단 하나의 HTML 페이지가 여러 패턴의 CSS 뷰를 갖도록 만들어 준다. 특정 해상도에 최적화된 페이지를 만드는 것이 아니라 모든 해상도에 대응하는 페이지를 만들기 때문에 현존하는 모든 장치의 해상도를 일일이 파악할 필요가 없다. CSS3 미디어쿼리 규칙이 등장하면서 서버 측 개발자가 해야만 했던 일을 이제는 클라이언트 개발자가 할 수 있게 된 것이다. 이렇듯 웹은 데스크탑의 차원을 넘어서야 했다.

반응형웹 마크업 가이드 제작 전 고민사항

1. 미디어쿼리 해상도 분기문제
2. IE8 브라우저의 하위 호환성
3. 모바일 환경에서의 성능문제
4. 가변적 그리드 기반의 레이아웃
5. 웹폰트를 기본글꼴로 사용시 브라우저 호환성 및 모바일 성능저하 문제

고민사항1 : 미디어쿼리 해상도 분기문제 해결방법

다양한 Device를 어떻게 미디어쿼리로 분기 할 것인가에 대한 고민은 반응형웹 프로젝트를 진행하는 개발자라면 누구나 고민할 것이다.
모바일 페이지를 기본CSS로 작성하고 미디어쿼리를 사용하여 데스크탑 페이지, 테블릿페이지로 개발하면 된다.

1. 데스크탑 페이지
최근 고해상도 사용자가 많아짐에 따라 1280px 이상(데스크탑 페이지 가운데 정렬 디자인이 대부분이므로 CSS는 컨텐츠 영역을 PX로 고정한다.)으로 미디어쿼리 작성한다.
2. 노트북 및 태블릿 페이지
태블릿과 노트북은 가로사이즈가 1024px로 동일하다. 태블릿에서는 틸팅(화면회전)이 되므로 가로사이즈를 width="auto"로 CSS를 작성한다.
미디어쿼리의 해상도는 768px 이상 ~ 1025px 이하로 작성한다.
3. 모바일 페이지
미디어쿼리를 적용하지 않고 기본 CSS로 작성한다.
태블릿과 같이 틸팅(화면회전)이 되므로 가로사이즈를 width="auto"로 CSS를 작성한다.

@media all and (min-width:768px) and (max-width:1024px){
/* 태블릿 및 노트북 CSS 작성 */
}

@media all and (min-width:1025px){
/* 데스크탑 CSS 작성 */
}

고민사항2 : IE8 브라우저의 하위 호환성 해결방법

반응형웹이란 IT Device에 반응하는 것이지 화면을 Resize해서 반응하는 것이 아니며, 그것이 본질이다. 그렇기에 데스크탑 페이지에서 Resize 해도 반응하지 않아도 무방하다.
그러나 클라이언트는 반응형웹의 본질에 대해서 모르는 경우가 대부분이다. 무조건 Resize되어야 반응형이라고 생각한다. 그렇기 때문에 논리적으로 설득하는것이 가장 좋은 방법이나, 안될 경우에는 Internet Exploer 6~8 버전 브라우저에서도 미디어쿼리를 해석할 수 있도록 만들어 주는 JavaScript 라이브러리가 있다.
respond.min.js라고 부르는 이 파일은 약 4KB 정도의 용량이다. 어떤 용도로 사용해도 제한이 없는 MIT 또는 BSD 라이선스를 가지고 있기 때문에 소스 코드에 포함된 라이선스 명시 조항만 지우지 않으면 github에서 언제든 내려받아 사용할 수 있다.

respond.min.js 내려받기 : https://github.com/scottjehl/Respond

respond.min.js 파일을 HTML 문서의 <head> 태그 부분에 다음과 같은 방식으로 삽입하면 Internet Exploer 6~8 버전 브라우저가 미디어쿼리를 해석할 수 있게 된다. 로컬(local)에서는 확인이 불가능 하며, 서버에 올린 후 적용된 것을 확인할 수 있다.

<!--[if lt IE 9]>
<script type="text/javascript" src="/js/respond.min.js"></script>
<![endif]-->

Internet Explorer 브라우저만 해석할 수 있는 조건부 주석을 사용했기 때문에 다른 표준 브라우저들은 이 코드를 무시하고 JS 파일을 요청하지 않으며 IE9 미만인 IE6 ~ IE8 에서만 사용된다.

고민사항3 : 모바일 환경에서의 성능문제 해결방법

데스크탑은 성능이 좋아 속도에 문제가 없지만, 모바일 Device 경우 낮은성능으로 인하여 최적화를 고려해야 한다.

1. 모바일 CSS
모바일 CSS를 기본으로 작성하고, 태블릿과 데스크탑 페이지를 미디어쿼리로 작성하여 모바일에 불필요한 CSS는 요청하지 않게 한다. 미디어쿼리의 경우 해당 해상도가 아닐경우 CSS를 요청하지 않아 성능을 최적화 할 수 있다.
2. Sprite 기법 사용
여러개의 잘개 쪼개진 이미지는 서버에 많은 요청을 유발하므로 의미가 비슷한 이미지의 경우 병합하여 사용함으로서 서버측에 이미지 요청 횟수를 줄여 성능을 최적화 한다.
3. 들여쓰기 및 띄워쓰기 최소화
CSS 및 마크업 들여쓰기 및 띄워쓰기를 최소화하여 성능을 높여준다.

NHN Markup Coding Convention : http://html.nhncorp.com/
4. 웹폰트 요청분기
웹폰트사용 시 기본 CSS로 작성하지 않고 해당 데스크탑 미디어쿼리부분에 작성하여 모바일 Device의 성능을 올려준다.

고민사항4 : 가변적 그리드 기반의 레이아웃 해결방법

1. 컨텓츠 레이아웃 시 rem, %를 사용하여 개발할 경우 아직 출시되지 않은 device에 대비한다.
2. 이미지와 미디어들도 감싸 있는 그리드에 맞게 max-width:100% 넣어준다.

고민사항5 : 웹폰트를 기본글꼴로 사용시 브라우저 호환성 및 모바일 성능저하 문제 해결방법

IE9은 @media 규칙 내부에 @font-face 허용 안하기 때문에 @media 구문 안쪽에 @font-face 규칙을 선언하는 경우 IE9 브라우저는 외부 글꼴을 요청하지 않기 때문에 표시하지 못합니다.
그렇기 때문에 웹폰트 사용 시 IE9 조건부 주석을 사용하여 IE9에서만 해석할 수 있도록 개발해야 한다.

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="iefont9.css">
<![endif]-->

반응형웹 기본가이드 다운로드

맑은커뮤니케이션에서 만든 반응형웹 기본가이드는 미디어쿼리 및 자바스크립트로 분기하는 방법 2가지 자료를 첨부하였습니다.
사용 시 작성자 주석부분 지우지 말고 사용해 주세요.

참고블로그 : http://helloworld.naver.com/helloworld/81480

달력(캘린더), 스케쥴 관리표

알 수 없는 사용자 — Mon, 25 Feb 2013 15:12:03 +0900

지난 2013년 2월 NHNCompany에서 학교에 첫 정시 입학이 이루어졌습니다.
그러면서 이번에 (주)맑은커뮤니케이션에서 웹퍼블리싱 작업하게된 부분은 타 사이버 교육기관처럼 교수님들과 학생들의 필요한 웹페이지의 관리 프로그램이었습니다.
그중 이번에 소개할 내용은 멀티 디바이스를 지향하는 달력(캘린더)/스케쥴관리 MarkUp 부분입니다.
현재 정상적으로 관리되고 있는 사이트나 작업 진행중인 사이트들 중 꼭 필요하지않지만 대학교나,정규화된 회사들은 스케쥴표나 달력을 필요로 하고 있습니다. 또한 스케쥴표와 달력을 꼭 필요로한 홈페이지들도 많이 늘어나고있습니다.
그 중심에는 스마트폰을 활용해 PC와 동기화를 가능하게 하여 언제 어디서나 어떤 기기를 사용해 자신의 스케쥴을 관리할수 있게 발전이 되었기 때문입니다.
이런 흐름에 맞춰 작업을 진행하게 되었으며 포스팅 하게될 내용은 PC버전과 어떤 기종의 모바일에서도 출력이가능하고 개발도 용의한 테이블 스케쥴표를 만들게된 과정과 에러사항/해결에 대해서 정리해보겠습니다.

웹퍼블리싱 제작과정

1.테이블 마크업

- 여타 다를것 없는 기본 테이블로 월~금요일까지의 칸 입력 후 시간대별 교시를 입력합니다.
클릭시 해당데이터를 입력하거나 다른 폼에서 데이터 입력시 데이터 삽입도 가능하도록 마크업한 상태입니다.

2. 개발시 데이터 출력될 스케쥴 마크업

강의 시간표
	월	화	수	목	금	토
0교시 (08:00)	자바스크립트 (01반)강의실A - 홍길동	JAVA (02반)강의실B - 홍길동	C++ (03반)강의실C - 홍길동		유비쿼터스 (04반)강의실D - 홍길동
1교시 (09:00)		자바스크립트 jQuery API (01반)강의실A - 홍길동		Node.js Dart.js강의실E - 홍길동		JAVASCRIPT ACTIONSCRIPT HTML/CSS 객체지향프로그램 (01반)강의실1 - 홍길동
2교시 (10:00)


	강의 시간표
	
		
		
		
		
		
		
		
	
	
		
			 
			월
			화
			수
			목
			금
			토
		
	
	
		
			0교시 (08:00)
			
				
					자바스크립트 (01반)강의실A - 홍길동
					
				
			
			
				
					JAVA (02반)강의실B - 홍길동
					
				
			
			
				
					C++ (03반)강의실C - 홍길동
					
				
			
			 
			
				
					유비쿼터스 (04반)강의실D - 홍길동
					
				
			
			 
		
		
			1교시 (09:00)
			 
			
				
					자바스크립트
jQuery API (01반)강의실A - 홍길동
					
				
			
			 
			
				
					Node.js
Dart.js강의실E - 홍길동
					
				
			
			 
			
				
					JAVASCRIPT
ACTIONSCRIPT
HTML/CSS
객체지향프로그램 (01반)강의실1 - 홍길동 
					
				
			
		
		
			2교시 (10:00)

Css (아래의 에러사항들의 문제를 주석으로 처리)

 
.bbs_table{width:100%;border:1px solid #d0d4d9;line-height:16px;/* IE7 수정 */*border-right:0/* IE7 수정 */}
.bbs_table th:first-child,.bbs_tbl_type2 td:first-child{border-left:0}
.bbs_table th{padding:10px 9px 7px;border-width:0 0 0 1px;border-color:#dcdee2;border-style:solid;text-align:center;background-color:#eff0f2;color:#333}
.bbs_table td{padding:10px 9px 7px;border-width:1px 0 0 1px;border-color:#edeef0 #dcdee2;border-style:solid;text-align:center;line-height:33px;color:#666;/* IE7 수정 */*border-left:0;*border-top:0;*border-bottom:1px solid #edeef0;*border-right:1px solid #dcdee2;/* IE7 수정 */}
.bbs_table td input[type=text],.bbs_tbl_type2 td select,.bbs_tbl_type2 td a.fron{margin:-6px 0 -2px}
.bbs_table td:hover{border:1px solid #666 !important}
.bbs_table tr:first-child td{border-top:1px solid #dcdee2}
.bbs_table tr:first-child td:hover{border-top:1px solid #666 !important}
.schu_line_bg{border:1px solid #999 !important;background-color:#f9fafa}
.schedule_area_v1{position:relative;/* IE7 수정 */*top:3px;/* IE7 수정 */padding:18px 5px 16px;line-height:18px;font-size:12px}
.schedule_area_v1 a{display:block;position:relative;color:#333}
.schedule_area_v1 a:hover{font-weight:bold}
.schedule_close{display:block;position:absolute;top:2px;right:2px;width:15px;height:15px;cursor:pointer;border:0;background-color:#f9fafa;color:#333}

* 옵션사항

- 테이터 출력되면 해당 컬럼에 필요 문구가 입력됩니다.

- 데이터 출력시 빈 컬럼과 구분하기위해 백그라운드 색과 보더 라인을 입혀줍니다.

- 데이터 출력반환시 X(이미지로 대체가능)표시를 클릭합니다

제작후 데이터 입력시 에러사항들

첫째. 각 컬럼별 테이터입력시 위,아래,양옆 사방으로 보더라인 두줄표현문제

둘째. 최상단 컬럼과 타이틀 컬럼부분 보더라인 겹침문제 (IE7)

셋째. 타이틀 컬럼 제외 데이터가 출력될 모든 컬럼 '행'의 내용이 길어진 만큼 컬럼높이값이 같이 늘어나야하는 문제

에러사항과 해결방안

첫째. 각 컬럼별 테이터입력시 위,아래,양옆 사방으로 보더라인 두줄표현문제

1. 컬럼 td 안에 div섹션을 구현 absolute 위치값을 상단으로 겹치도록 올림.

2. 위,아래,양옆 데이터가 입력되어도 겹쳐보이도록표현해 라인이 한줄로 표현.

3. 컬럼 td에는 보더값만 지정, 나머지 부속성들은 div섹션에 삽입.

4. IE7에서는 우측,하단 부분의 라인이 겹쳐지는 문제가 발생.

5. absolute의 위치값이 적용되지 않고 그대로 배출하여 정상처럼 두줄로 표현하지않고 밑쪽으로 내려감.

6. 해결책은 td의 반대 좌측,상단 보더를 없애 겹침을 유지시켜 줍니다

둘째. 최상단 컬럼과 타이틀 컬럼부분 보더라인 겹침문제 (IE7)

- 해당 타이틀컬럼(thead)부분의 하단 보더라인 삭제와 컬럼의 제일 첫번째 컬럼만 상단 보더를 넣어주면 문제가 해결됩니다.

셋째. 월~금요일에 해당하는 교시의 내용이 길어진 만큼 컬럼높이값이 같이 늘어나야하는 문제

- 보더라인을 IE7버그로 최초 div섹션이 주었으나 섹션별로 높이값이 데이터별로 일정하지않아, 어쩔수없이 상위클레스 td에 주었으며, 위사항들의 보더라인의 해결로 인해 자연적으로 해결.

작업완성/작업평

최초 컨펌후 작업진행 되었을때는 기존 달력들과 스케줄 소스를 조그만 수정해서 쓰면 된다는 식으로 작업하였으나, 생각외로 에러사항이 많이 생겼고(IE7) 시대의 흐름에 맞게 PC뿐만아니라 멀티 디바이스도 신경써야했기 때문에 해결방안을 찾는데도 너무 많은 시간을 투자했습니다. 언제나 그렇듯이 PSD상에서는 가볍게 느껴지는 작업도 개발로 이뤄지면 항상 생각지도 못한 에러사항이 발생합니다. 이 소스를 보고 조금이나 도움이 되는 부분이 있었으면 좋겠습니다.

감사합니다.

스케줄표 다운로드

schedule.html

다운로드

[CSS3] 새로운 스타일

알 수 없는 사용자 — Fri, 30 Nov 2012 18:07:31 +0900

Property	지원 Browser	설명	추가설명
Border Radius	ie9 firefox chrome safari opera	둥근 모서리를 넣기	× border-radius border요소에 둥근 모서리를 추가합니다 CSS #example1 { border:2px solid #a1a1a1 background:#dddddd; width:100px; height:100px; border-radius:25px; -moz-border-radius:25px 25px 25px 25px; // 왼쪽위, 오른쪽위, 오른쪽아래, 왼쪽아래 (시계방향) } HTML <div id="example1" style="text-align:center;"> <span style="line-height:100px;">example</span> </div> EXAMPLE스타일적용하기 example
Box-shadow	ie9 firefox chrome safari opera	박스에 그림자 효과 주는 속성	× box-shadow 상자에 그림자를 추가하합니다. CSS #example2 { border:2px solid #a1a1a1 background:#dddddd; width:100px; height:100px; box-shadow: 5px 5px 5px #888888; // 오른쪽위치, 아래위치, 블러, 색상 } HTML <div id="example1" style="text-align:center;"> <span style="line-height:100px;">example</span> </div> EXAMPLE스타일적용하기 example
Text-shadow	firefox chrome safari opera	텍스트에 그림자 효과 주는 속성	× text-shadow 그림자의 색상, 수평위치, 수직위치, 그림자 선명도를 지정할 수 있다 CSS #example1 { text-shadow: rgba(64, 64, 64, 0.5) 10px 5px 2px; } HTML <div id="example1">example</div> EXAMPLE스타일적용하기 example
Multiple Colummns	firefox chrome safari	텍스트 레이아웃에 대해 여러 개의 열을 주는 속성	× Multiple Colummns 다중 컬럼 레이아웃 스타일을 사용하면 다수의 컬럼(세로단)에 텍스트를 배치 할 수 있어 마치 신문과 같은 레이아웃을 구성할 수 있다 CSS #example3_1 { -moz-column-count:3; -webkit-column-count:3; column-count:3; // 열 } #example3_2 { -moz-column-count:3; -webkit-column-count:3; column-count:3; -moz-column-gap:40px; -webkit-column-gap:40px; column-gap:40px; // 열사이간격 } #example3_3 { -moz-column-count:3; -webkit-column-count:3; column-count:3; -moz-column-rule:3px solid #ff00ff; -webkit-column-rule:3px solid #ff00ff; column-rule:3px solid #ff00ff; // 열사이 보더값속성 } HTML <div id="example3_1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> EXAMPLE스타일적용하기 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Transitions	firefox chrome safari opera	css 값의 변화를 부드러운 애니메이션으로 표현함	× Transition (CSS 속성에 에니메이션 효과를 주다) 개체에 적용된 스타일을 대상으로 주어진 시간과 조건으로 부드럽게 상태를 변화시키는 기술이다 예를 들어 색상이나 위치와 같은 CSS 속성을 다른 색상, 다른 위치로 변경 시킬 수 있어 일종의 에니메이션 효과를 줄 수 있다는 것이다 Transition 조건을 위한 속성 Transition 을 위한 다음 4가지의 조건 설정이 가능하다 1) transition-property 색상이나 위치 등 변화의 대상이 되는 CSS 속성을 지정한다. ex) background-color transition-property 로 지정된 CSS 속성은 이후 변화가 있을 때마다 transition 조건에 영향을 받는다 2) transition-duration A스타일 -> B스타일로의 변화에 걸리는 시간을 초단위로 지정한다. ex) 4s 이 시간 설정으로 인해 스타일의 변화가 서서히 전개 되는 것이다 3) transition-delay 변화가 시작되기 전 시간을 초 단위로 지정한다. ex) 1s 스타일의 변화를 주기전에 일정 시간 대기(지체)해야 할 경우 사용한다 4) transition-timing-function Transition 을 통한 효과를 줄 때 변화되어 가는 흐름, 시간에 따른 변화 속도와 같은 일종의 변화되어 가는 정도를 지정하게 된다. 보통 플래시나 익스프레션 블랜드와 같은 디자인 툴에서 에니메이션 효과를 줄 때 자주 사용된다. 큐빅 베지어(cubic-bezier) 값을 이용하여 제어하게 되는데 미리 정해둔 5개의 키워드가 제공된다. 다음의 제공되는 키워드와 그의 값이다 ease: cubic-bezier(0.25, 0.1, 0.25, 1.0) , 기본값 linear: cubic-bezier(0.0, 0.0, 1.0, 1.0) ease-in: cubic-bezier(0.42, 0, 1.0, 1.0) ease-out: cubic-bezier(0, 0, 0.58, 1.0) ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0) 만일 이 5개의 키워드 외에 직접 값을 제어하고 싶을 경우 다음과 같이 직접 지정 하면 된다 cubic-bezier(0.2, 0.4, 0.7, 0.8) CSS example4_1 { opacity:0.2; -webkit-transition-property:opacity; -webkit-transition-duration:1s; -webkit-transition-delay:1s; -webkit-transition-timing-function:ease; } #example4_1:hover {opacity:1;} HTML <img id="example4_1" src="fizz_op.JPG"> EXAMPLE스타일적용하기 CSS #example4_2 { opacity:0.2; width:150px; -webkit-transition: width 1s ease-out, opacity 3s ease; } #example4_2:hover { opacity:1; width:300px; } HTML <img id="example4_2" src="fizz_op.JPG"> EXAMPLE스타일적용하기 CSS script 구현하기 HTML <img id="example4_3" src="fizz_op.JPG"> <script type="text/javascript"> $(document).ready(function(){ $('#example4_3').toggle(first1, second1); }); function first1(){ $(this).css({'width':'150px','transition':'width 1s'}); } function second1(){ $(this).css({'width':'300px','transition':'width 1s'}); } </script> EXAMPLE스타일적용하기 CSS #example4_4.right { margin-left: 620px; } #example4_4 { -webkit-transition: margin-left 1s ease-in-out; } HTML <img id="example4_4" src="fizz_op.JPG"> <script type="text/javascript"> $(document).ready(function(){ $('#example4_4').toggle(first, second); }); function first(){ $(this).addClass('right'); } function second(){ $(this).removeClass('right'); } </script> EXAMPLE스타일적용하기
Transform	firefox chrome safari opera	회전 효과, 스케일링(확대/축소)효과, 기울임 조절, 위치 변경	× Transform (개체를 변형시키다) CSS3의 Transform 특성을 이용하면 웹 페이지에 표시되는 개체의 다양한 변형 효과를 줄 수 있다 (보통 웹 페이지에 표현되는 각종 개체를 태그의 입장에서 바라 봤을 때 Element 라 부르지만 개체라 불러도 무방하다고 본다) 회전 효과, 스케일링(확대/축소) 효과, 기울임 조절, 위치 변경과 같은 흥미로운 변형 처리가 가능하다 Rotate (회전 효과) 개체를 주어진 각도로 회전 시킬 수 있다 각도의 범위는 +- 0 ~ +- 360 도 중 하나의 각도를 선택할 수 있다 참고로 'ㅡ' (마이너스) 각도는 시계 반대 방향으로 회전 시킨다 CSS #example5_1:hover { -webkit-transform:rotate(45deg); } HTML <div id="example5_1"> <img id="example5_1" src="fizz_op.JPG"> </div> EXAMPLE스타일적용하기 Scale (확대/축소 효과) 개체의 크기를 조절 할 수 있다. 확대/축소 비율을 지정하여 크기를 조절한다 개체의 원래 크기는 1 이며 2배,3배,... N배 와 같이 확대 수치를 지정한다 확대 수치는 소수점도 가능하여 1.5배, 1.12 배 등도 사용 가능하다 그리고 확대/축소 시 가로,세로 방향을 지정할 수 있다 예) scaleX(2): 가로로 2배 확대, scaleY(2): 세로로 2배 확대 CSS #example5_2:hover { -webkit-transform: scale(1.5); } HTML <div id="example5_2"> <img id="example5_2" src="fizz_op.JPG"> </div> EXAMPLE스타일적용하기 Skew (기울임 효과) 개체를 주어진 각도로 기울일 수 있다 X, Y 축을 기준으로 기울이게 되는데 X축은 좌/우로, Y축은 상/하로 기울이는 효과를 준다 X 축에 +(플러스) 각도는 우측으로 , -(마이너스) 각도는 좌측으로 기울이는 효과이며 Y 축에 +(플러스) 각도는 아래쪽으로, -(마이너스) 각도는 윗쪽으로 기울이는 효과를 준다 예) skewX(+-10deg);skewY(+-10deg); skew(+-10deg,+-10deg); CSS #example5_3:hover { -webkit-transform: skew(10deg,10deg); } HTML <div id="example5_3"> <img id="example5_1" src="fizz_op.JPG"> </div> EXAMPLE스타일적용하기 Translate 개체의 위치를 옮길 수 있다. 주어진 크기 만큼 좌/우, 상/하로 위치가 조정된다 translateX, translateY 로 각 축을 따로 지정할 수도 있다 CSS #example5_4:hover { -webkit-transform:translate(10px, 20px); } HTML <div id="example5_4"> <img id="example5_1" src="fizz_op.JPG"> </div> EXAMPLE스타일적용하기 Transform 과 Transition 의 조화 웹 페이지의 개체에 대한 각종 변형을 지원하는 Transform 과 CSS 속성 변경에 대한 부드러운 처리 과정을 지원하는 Transition 을 조합하면 그럴싸한 에니메이션 효과를 줄 수 있게 된다 즉 Transform 역시 스타일에 관련한 CSS속성이기 때문에 Transition 효과의 대상이 될 수 있으며 이 둘의 조합으로 흥미롭고 유용한 동적 스타일 효과를 줄 수 있다는 것이다 예를 들어 skew 로 이미지가 기울어 지게 하는데 Transition 효과를 주어 서서히 그리고 점점 기울어 지게 할 수 있다. 즉 Transform 의 변형과정을 Transition 으로 조절하여 에니메이션 효과를 준다는 것이다 CSS #example5_5 {-webkit-transition: -webkit-transform 2s ease-in-out; } #example5_5:hover { -webkit-transform: skew(10deg,10deg); } HTML <div id="example5_5"> <img id="example5_1" src="fizz_op.JPG"> </div> EXAMPLE스타일적용하기
Animation	chrome safari	개체에 동적인 효과를 주기	× Animation (개체에 애니메이션 효과를 주다) Animation 에서 제어할 수 있는 변화의 시작점과 종료점은 키프레임(keyframe)이라는 개념으로 설명된다. 플래시나 다른 동적 효과를 다루는 툴을 다뤄봤다만 키프레임이라는 단어가 익숙할 것이다 키프레임을 간단히 설명하면, 애니메이션을 구성하는 동작의 키가 되는 프레임을 말하며 이 프레임들의 연결 및 이동으로 자연스러운 동적 효과의 처리가 가능하다 키프레임 Animation 효과 중심이 되는 개념이라 할 수 있다 애니메이션 효과를 위한 CSS속성을 각각의 프레임으로 정의하고 이 프레임들이 연결되어 동적효과를 주게 된다. 즉 애니메이션을 위한 시작~종료 사이의 동적 효과를 각각의 프레임으로 정의하는 것이다 애니메이션 속성 키프레임으로 동적효과를 위한 각 변화의 지점을 정의한 후 이 프레임들이 어떤식으로 연결되는지를 설정하는 애니메이션 속성을 정의해야 한다. 애니메이션 속성으로 애니메이션이 실행되는 시간, 반복 횟수, 변화의 정도, 프레임 연결 방향등을 지정하게 된다 -webkit-animation-name 키 프레임을 지정한다. 앞서 키프레임의 이름을 여기에 매핑 시킨다 -webkit-animation-duration 애니메이션이 실행되는 총 시간을 지정한다. 이 시간내에 키프레임이 연결되어 애니메이션이 실행된다(기본 값: 0) -webkit-animation-iteration-count 애니메이션의 반복횟수를 지정한다. 기본적로 키프레임은 시작~종료까지 한번만 실행된다 두번이상 실행하고 싶으면 이 속성에 반복하고자 하는 횟수를 지정하면 된다 만일 계속 실행(무한 실행)하고 싶을 경우 infinite 를 지정하면 된다 (기본 값: 1) -webkit-animation-direction 키프레임의 연결 방향을 지정한다. 기본적으로 키프레임은 from(혹은 0%) ~ to(혹은 100%) 방향으로 연결된다. 만일 역방향으로의 연결을 원한다면 alternate 를 지정하면 된다 (기본 값: normal) -webkit-animation-timing-function 키프레임간 변화의 정도를 지정한다. Transition의 그것과 동일하다.(기본 값: ease) -webkit-animation-play-state 애니메이션의 실행 상태를 지정한다. running 와 paused 값이 있다(기본값: running) 애니메이션 실행 도중 일시정지, 재시작 시킬 경우 이용한다 -webkit-animation-delay 애니메이션이 시작되기 전 대기시간을 지정한다 (기본 값: 0, 즉시 시작) CSS @-webkit-keyframes myAnimation { from { opacity:0.1; width:300px; -webkit-transform:rotate(15deg); } to { opacity:1.0; width:150px; -webkit-transform:rotate(0deg); } } #example6_1 { -webkit-animation-name:myAnimation ; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction:alternate; } HTML <div id="example6_1"> <img id="example5_1" src="fizz_op.JPG"> </div> EXAMPLE스타일적용하기
Text-overflow	ie7 ie8 ie9 firefox chrome safari opera	텍스트 랩핑(Wrapping)과 관련되는 스타일	× text-overflow 영역을 벗어나는 텍스트를 오버플러된 텍스트라 하는데 이렇게 오버플러된 텍스트를 '생략 부호(…)' 로 처리할 수 있도록 한다. 이전버전 파이어폭스에서는 지원이 안되서 개발에서 처리했지만 지금은 지원함. CSS #example8 { padding: 10px 10px; border: 1px solid #000000; height: 1.1em; overflow: hidden; white-space: nowrap; width:20%; text-overflow: ellipsis; } HTML <div id="example1">CSS3 text-overflow:ellipsis 텍스트 오버플러</div> EXAMPLE스타일적용하기 CSS3 text-overflow:ellipsis 텍스트 오버플러
Background-Size	ie9 firefox chrome safari opera	백그라운드에 깔린 이미지의 사이징을 조절	× background-Size 기본 값(auto): 원본 이미지 크기 그대로 표시된다, background-size:auto; 가로,세로 길이 지정: 지정된 크기로 이미지가 조정 된다, background-size:250px 20px; 퍼센트 지정: 개체의 크기가 변경될 때 같은 비율로 확대/축소 된다, background-size:50% 70% contain: 개체의 가로,세로 크기에 맞춰 이미지 사이즈가 변경된다, 개체의 가로,세로의 같은 변화에만 반응한다 (ex: 가로만 늘리면 이미지 크기는 확대 되지 않음) cover: contain과 유사히지만 개체의 한 방향(가로 혹은 세로) 크기 변화에도 이미지가 조절된다 (ex: 가로만 늘리면 이미지의 크기도 같이 확대 된다) CSS #example9 { border:1px solid black; width:12em; height:17em; background:url(fizz.JPG) center center no-repeat; background-size:contain; overflow:auto; } HTML <div id="example9"></div> EXAMPLE스타일적용하기

웹퍼블리싱을 위한 JQUERY Plugin

알 수 없는 사용자 — Fri, 25 May 2012 14:48:48 +0900

저는 웹퍼블리싱을 시작하면서 젤 큰 고민이 스크립트 구현 영역에 관한 부분이었던것 같습니다.
저의 결론은 스크립트는 개발영역이 포함되지 않는 부분까지 구현하도록 하고 있습니다.

동적인 움직임을 주기 위해서는 자바스크립트를 사용했는데요 현재는 제이쿼리라는 오픈소스를 많이 활용합니다.

제이쿼리는 오픈소스를 무료로 사용이 가능하고 만들어진 플러그인이 많아서 사용하기 좋기 때문입니다. 그리고 움직임이 자바스크립트 보다는 부드럽고 화려해서 사용자의 반응도 좋더라구요~

그래서 이번에는 코딩할때 많이 쓰이는 제이쿼리 플러그인들을 공유하려고 합니다.

저도 코딩할때 활용하는 플러그인이라서 문제없이 사용하 실 수 있을것 같아요~

메인페이지의 비주얼은 개발소스가 전혀 들어가지 않기 때문에 메인비주얼의 동적인 움직임을 스크립트로 표현해 주어야 하는데요.
이 플러그인은 이미지가 좌우로 슬라이드되는 플러그인으로 기본 메인비주얼 스크립트로 가장 많이 쓰일거라고 생각됩니다.
FlexSlider.zip
두번째도 메인비주얼영역에 사용할 수 있는 플러그인입니다.
아코디언 플러그인으로 가로아코디언이라서 메인비주얼에 사용 가능합니다.
accordion.zip
이 플러그인은 toggle 관련된 플러그인인데요.
아래 슬라이드로 열었다 닫았다하고 싶을때 사용해 주세요!
toggle.zip
페이드 관련된 플러그인입니다.
텍스트, 이미지등이 페이드되는 예제가 들어있습니다.
요것도 쓸때가 많을것 같죠?^^
innerfade.zip
6가지 움직임 활용이 가능한 플러그인입니다.
메인비쥬얼 혹은 특이한 포토갤러리 같은 곳에 사용이 가능 할 수 있을 것같아요
cycle.html
드래그 관련된 플러그인입니다.
레이어팝업을 이리저리 움직이게 하고싶다는 요청이 있을 때 사용해주시면 될 것같습니다.
easydrag.html

drag.html
lightbox라고 하는 플러그인입니다.
레이어를 띄울때 주위(배경)를 어둡게 하고 그 위에 레이어를 띄우는 플러그인입니다.
lightbox.zip
placeholder 플러그인입니다.
placehilder는 input의 입력값 작성에 도움을 주는 역할을 하는데요. 접근성에 맞추기 위해 placeholder를 작성하는것이 좋다고 되어있습니다.
하지만 placeholder속성은 html5에 해당하는 속성으로 IE6,7,8에서는 사용이 불가능합니다.
이 플러그인은 비표준브라우저에서도 html5처럼 속성값으로 사용할 수 있으니까 편리하게 사용이 가능할 것 같습니다.
placeholder.html
탭메뉴 플러그인입니다.
아이디를 이용한 탭메뉴입니다. 탭은 설명이 필요없을 듯하네요^^

tabmenu.zip

tab.zip
마지막은 툴팁 플러그인을 소개합니다.
툴팁은 어려운 용어가 많은 금융권이나 공공기관 같은 사이트에서 잘 사용하 실 수 있을 것 같아요.

tooltipmenu.zip

tooltip.html

웹접근성을 향상시키기 위한 태그 속성을 알아보자~

알 수 없는 사용자 — Fri, 18 May 2012 14:07:02 +0900

alt과 title의 차이점

alt 속성이란?

이미지를 볼 수 없는 환경에서도 내용을 확인할 수 있게 합니다. 즉, 대체 텍스트라고 합니다.

title 속성이란?

해당 객제에 대한 제목이나 특성을 설명하기 위한 것(참고의 의미)

title 속성과 alt 속성의 의미는 전혀 다르므로 의미에 맞게 사용하셔야 합니다. 또한, title 속성을 alt 속성 대신 사용해선 안됩니다.

alt 속성

alt 속성을 사용할 수 있는 태그

alt 속성 사용시 유의사항

명쾌하고 짧은 대체 텍스트를 제공
파일명을 대체 텍스트로 제공 지양
이미지 맵에 대한 대체 텍스트 제공
의미없는 이미지에는 공백으로 대체
의미를 제대로 파악할 수 없는 대체 텍스트 지양
의미있는 이미지에 무의미한 대체 텍스트 제공 지양
'~ 하십시오.', '~ 됩니다.' 등 친절한 설명을 자제하고 간단 명료하게
'링크', '여기', '클릭', '바로가기' 등의 목적지를 구체적으로 알려주지 않는 단어 사용하지 말자

잘못된 예

		<img src="bullet.gif" alt="블릿" />
		<img src="naver.gif" alt="바로가기" />
		<img src="next.gif" alt="버튼을 누르시면 다음페이지로 이동됩니다." />
		<img src="photo.jpg" alt="사진 1" />
		<img src="model.jpg" alt="model" />
		<img src="logo.png" alt="로고" />
		<ol>
			<li><img src="text1.gif" alt="" /></li>
			<li><img src="text2.gif" alt="" /></li>
			<li><img src="text3.gif" alt="" /></li>
		</ol>

올바른 예

		<!-- 의미없는 이미지일 경우 -->
		<img src="bullet.gif" alt="" />
		
		<!-- 대체 텍스트 사용 예제 -->
		<img src="naver.gif" alt="네이버" />
		<img src="next.gif" alt="다음페이지" />
		<img src="photo.jpg" alt="튤립" />
		<img src="model.jpg" alt="꽃무늬 원피스를 입고 있는 모델" />
		<img src="logo.png" alt="블루웨이브" />
		<input type="image" src="btn_writ.gif" alt="글쓰기" />
		
		<!-- 이미지 맵에 대한 대체 텍스트 -->
		<img src="languge.gif" alt="언어" usemap="#language" />
		<map name="language">
			<area sshape="rect" coords="10,5,66,19" href="/en/" alt="English">
			<area sshape="rect" coords="10,17,66,32" href="/ko/" alt="Korean">
		</map>
		
		<!-- 다이어그램 또는 그래프 경우 -->
		<img src="graph.gif" alt="2004년 반도체 수출액 2,538억원, 수입액 265억원, 2005년 반도체 수출액 3,538억원, 수입액 302억원" />

title 속성

title 속성을 사용할 수 있는 태그

<html>, <head>, <title>, <base>, <basefont>, <meta>, <script>, <param>을 제외한 모든 태그에 사용할 수 있습니다.

a 태그

이동할 목적지에 대해서 좀 더 명확하게 이해할 수 있게 title를 제공해야 합니다.

		<a href="http://www.naver.com" title="네이버(새창)" target="_blank"><img src="naver.gif" alt="네이버" /></a>

abbr 태그

약자로 'WWW', 'URL', 'HTML', 'IT' 등 한 문자씩 발음하는 단어를 정의하는 태그

		<abbr title="World Health Organization">WHO</abbr>

acronym 태그

두문자어로 'NATO', 'NASA', 'SOHO' 등 한 단어로 발음하는 단어를 정의하는 태그
HTML5 에서는 삭제되는 태그, abbr의 의미와 혼동 되어 abbr로 통합해서 사용됩니다.

		<acronym title="North Atlantic Treaty Organization">NATO</acronym>

input 태그

input 종류 : button, checkbox, file, image, password, radio, text, submit 등

		<input type="file" name="" value="" title="파일을 선택하세요" />
		<input type="text" name="" value="" title="텍스트를 입력하세요." />
		<input type="radio" name="" value="" />
		<input type="image" name="" src="이미지 주소" alt="" />
		<input type="button" name="" value="button" />
		<input type="submit" name="" value="submit" />
		<input type="checkbox" name="" value="" />
		<input type="password" name="" value="" title="비밀번호 입력하세요." />

iframe 태그(사용을 가능한 지양합니다.)

프레임 제목은 프레임의 내용을 인식할 수 있도록 짧고 간결하게 제목을 제공해야 합니다.
또한, 내용이 없는 빈 프레임의 경우에도 title="빈 프레임" or "내용 없는 프레임" 과 같이 title를 제공해야 합니다.

		<iframe src="briefing.html" title="국정브리핑 정책속보" name="briefing"></iframe>

위의 내용을 제외한 웹접근성 향상을 위한 방법

테이블의 내용을 이해할 수 있도록 summary 속성, caption 태그를 제공해야 한다.

					<table class="tbl_view" summary="1월부터 12월까지의 평균 강수량을 나타낸 표, 장마 기간이 있는 6~7월에 강수량이 가장 많고, 11월~2월 사이의 강수량이 가장 낮다.">
						<caption>한국의 월별 강수량</caption><!-- 생략 -->

테이블을 제공할 경우, 머리글<thead>, 바닥글<tfoot>, 본문<tbody>을 구분하여야 한다.

* 주의사항 : <thead>, <tfoot>, <tbody> 순으로 작업되어야 합니다.

					<table class="bbs_list" summary="공지사항 리스트">
						<thead>
							<tr>
								<th>번호</th>
								<th>제목</th>
								<th>작성일</th>
								<th>조회수</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>제목</td>
								<td>2012-05-15</td>
								<td>111</td>
							</tr>
						</tbody>
					</table>
					
					<table>
						<caption>3일 일기예보</caption>
						<tbody>
							<tr>
								<th>오늘<br />5.15(화)</th>
								<td><img src="p_02.gif" alt="구름 조금" /></td>
								<td>구름 조금</td>
							</tr>
							<tr>
								<th>예상기온/th>
								<td colspan="2">최고 33도 / 최저 24도</td>
							</tr>
						</tobdy>
					</table>

서식을 제공할 경우 <label>을 제공해야 한다.
* <label> 태그의 for와 <input />의 id가 동일하여야 합니다.
* <label>이 <input>, <select> 등의 입력창과 제목을 연결시켜 문서 파악을 용이하게 합니다.
* checkbox와 radio 경우 <label>을 이용하여 텍스트를 클릭해도 선택되게 작업할 수 있으며, 사용자들은 클릭영역이 넓어져 사용이 편리해집니다.
```
					<dl>
						<dt><label for="uid">아이디</label></dt>
						<dd><input type="text" id="uid" title="아이디 입력" /></dd>
					</dl>
					<dl>
						<dt><label for="upw">비밀번호</label></dt>
						<dd><input type="password" id="upw" title="비밀번호 입력" /></dd>
					</dl>
```

<form>안에 여러 컨트롤(입력 받는 서식)이 있을 떄, <fieldset>으로 그룹화 하고 <legend>로 제목을 표기합니다.

					<fieldset>
						<legend>로그인 </legend>
						<dl>
							<dt><label for="uid">아이디</label></dt>
							<dd><input type="text" id="uid" title="아이디 입력" /></dd>
						</dl>
						<dl>
							<dt><label for="upw">비밀번호</label></dt>
							<dd><input type="password" id="upw" title="비밀번호 입력" /></dd>
						</dl>
					</fieldset>

웹접근성을 향상하기 위해선 위 방법 말고도 많은 부분이 더 있는데요~
그 부분들은 http://biew.co.kr/17 여기에서 참고하세요~

마치며

많은 분들이 웹퍼블리싱 작업을 하시면서 헷갈려 하시는 부분을 위주로 정리를 해보았습니다.
저 또한 매번 작업을 할 때 마다 헷갈리는 부분이 많았는데요.~ 다른분들께서도 이 글을 보시고 조금이나마 도움이 되셨으면 좋겠습니다.

퍼블리셔를 위한 기본 자바스크립트 강좌(1편)

퍼블리셔 — Thu, 12 Apr 2012 11:04:14 +0900

웹퍼블리싱을 실무에서 하다보면 자바스크립트를 꼭 해야하나?
해야 한다면 과연 어디까지 해야하나? 에 대해 많은 퍼블리셔들은 고민을 할 것입니다. 저 또한 이런 문제로 고민할 때가 많았습니다. 그 고민에 대한 결과로 퍼블리셔는 front end, 또는 UI에 관련된 부분만 작업하는 것이라고 저는 정의 내리고 있습니다.
예를 들어 메인 페이지부분의 개발 소스가 들어가지 않는 부분을 말하는 것입니다. 비쥬얼 움직임이 그 예 입니다. 개발이 들어가는 부분에 대해서는 간단한 자바스크립트라 하더라도 하지 않는게 제 원칙입니다. 나중에 프로젝트 완료시 그부분이 제대로 작동하지 않을시 서로 책임을 떠 넘기는 식의 문제가 발생하기 때문입니다. 그래서 저는 프로젝트 시작 시 그부분에 대해 명확히 개발자 분들과 이야기 합니다. 그렇게 하다보면 대략 웹페이지 같은 경우는 20가지 정도 기능의 스크립트 예제만 있어도 어떤 홈페이지든 제작이 가능합니다.
하지만 예제가 있더라도 소스를 읽지 못한다거나 간단한 수정을 할 수 없다면 무용 지물이겠지요? 그래서 퍼블리셔분들의 개발자만큼 스크립트를 다루지 않더라도 일하는데 지장이 되지 않을 정도의 부담없이 배울수 있는 강좌를 하려고 합니다.
모르시는 분들을 위해 완전 기초부터 시작하겠습니다.

페이지 내에 자바스크립트 추가하기

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	
</head>

외부 자바스크립트 파일

페이지 내 <script> 태그를 사용하면 자바스크립트를 하나의 페이지에 추가할 수 있습니다. 하지만 대부분의 경우에는, 하나의 스크립트를 여러페이지에서 사용하게 될 것입니다. 예를 들어 메인 메뉴 스크립트는 한페이지가 아닌 모든 페이지에서 사용하게 될 것 입니다. 모든 페이지에 메인메뉴 스크립트를 사용하기 위해 자바스크립트 코드를 복사하고 붙인다면, 이는 효율적이지 않을 것입니다.
또한 자바스크립트 코드 변경하거나 개선하려고 한다면 모든페이지를 다시 열어서 수정해야하는 수고를 하게 될 것입니다.
프로그램 코드가 모든 페이지에 다 있다면 각 페이지는 덩치가 꽤 커져서 다운로드 속도를 더 늦추게 될 것입니다. 이 모든것들을 해결하기 위한 접근법으로 사용하는 것이 외부 자바스크립트 파일을 사용하는 방법입니다. 이는 .js라는 파일 확장자 텍스트 파일을 <script> 태그를 사용해 웹 페이지에 자바스크립트 코드를 포함한 파일을 링크하면 되는 것입니다.

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	
</head>

웹페이지에 텍스트 쓰기

자바스크립트를 사용해서 웹 페이지에 바로 메시지를 출력하는 방법에 대해 알아보겠습니다. 이것을 보고 너무 시시하다고 느꼇을지도 모르겠습니다. 하지만 기본을 완벽하게 이해하는 것이 중요하기 때문입니다.

<script type="text/javascript">
	document.write('Hello world!');
</script>

alert() 함수처럼, document.write()는 여는 괄호와 닫는 괄호 사이에 있는 문장을 출력하는 명령어 입니다. alert() 함수가 새창을 띄워 문장을 출력하는 것이라면 document.write() 는 페이지 내에서 문장을 출력 합니다.

에러추적하기

스크립트를 작성하면서 할 수 있는 실수는 단순한 오타부터 로직상의 복잡한 에러까지 다양합니다. 자바스크립트 프로그래밍 초보라면 실수의 대부분은 오타입니다. 세미콜론, 따옴표, 괄호 등을 빼먹거나, 자바스크립트 명령어를 잘 못 치기도 합니다.
그러면 간단한 몇 가지 예를 들어 보겠습니다.

실수의 종류	검사결과
인수 목록 뒤에 닫는 괄호 ')'를 빼먹는 경우	명령어의 마지막 닫는 괄호를 깜박할 수 있습니다. 예를 들어 'hellow' 뒤에 닫는 괄호를 빠뜨려서 alert('hello';가 되는 등의 경우가 있습니다.
종료되지 않은 문자열	문자열(string)은 따옴표로 감싼 문자들의 집합니다. 'hello'는 alert('hello')라는 코드 안에 있는 문자열입니다. 열거나 닫는 부호를 빼먹기 쉽습니다.
복합문에서 }를 빼먹는 경우	프로그램을 작성하다 보면 괄호와 따옴표뿐만 아니라 {}기호와 같은 다른 형태의 구두 기호도 사용하게 될 것입니다. 이런 류의 오류를 만나면, 여는 괄호와 닫는 괄호의 쌍을 제대로 맞추었는지 확인해야 합니다.
복합문에서 }XXX가 정의되지 않았습니다.	자바스크립트 명령어에 aler('hello')처럼 오타가 있는 경우, 명령어가 정의되지 않았다는 에러 메시지를 받습니다. 인터넷 익스플로러에서는 "aler는 정의되지 않았습니다." 라는 메시지가 나타납니다.
문법상 실수	문법상 실수라는 것은 오타는 아니지만 허용되지 않는 방식으로 하나 혹은 하나 이상의 자바스크립트 문장이 섞였을 때 나타나는 에러를 통칭합니다.

마치며

위 예제는 '거침없이 배우는 자바스크립트' 책의 예제를 사용 하였습니다.
처음에 어려운 것보다는 기본부터 쉽게 부담가지지 않고 접근할 수 있는 간단한 것부터 정리해 보았습니다.

	ie IE	chrome 크롬	firefox 파이어 폭스	safari 사파리	opera 오페라
WOFF	9부터 지원	지원	지원	지원	지원
EOT	6~9지원	미지원	미지원	미지원	미지원