반응형

 

 

소스트리 로고

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 파일을 확인할 수 있습니다. 

 

 

소스트리 working directory

 

 

 

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

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

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

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

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

 

 

소스트리 Stage 올리기

 

 

 

Ⅲ.  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 파일을 확인할 수 있습니다. 

 

 

소스트리에 추가된 파일 및 수정된 파일의 working directory

 

 

 

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

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

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

 

 

소스트리의 여러개의 파일을 stage 올리기

 

 

 

Ⅲ.  Commit 실행하기

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

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

 

 

소스트리 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 파일을 확인할 수 있습니다. 

 

 

소스트리에 버전을 쪼개기 위해 추가된 파일 및 수정된 파일의 working directory

 

 

 

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

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

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

 

 

소스트리에 첫번째 버전으로 Commit 될 파일이 올라간 Stage

 

 

 

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

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

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

 

 

소스트리에 첫번째 버전으로 Commit될 메시지 입력

 

 

 

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

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

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

 

 

소스트리에 두번째 버전으로 Commit 될 파일이 올라간 Stage

 

 

 

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

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

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

 

 

소스트리에 두 개의 버전으로 기록된 commit 상태 확인

 

 

 

 

 

글 작성자 SNS

 

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

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

 

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

 

 

 

 

 

마치며...

 

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

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

감사합니다.

 

 

반응형
반응형

 

 

소스트리 로고

SourceTree

Simplicity and power in a beautiful Git GUI

 

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

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

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

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

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

 

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

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

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

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

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

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

 

 

 

 

 

Git 작업환경 및 용어설명 

 

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

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

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

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

 

 

소스트리 인터페이스 내 Git 작업환경

 

 

 

 

 

Git 저장소란 무엇인가? 

 

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

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

 

 

 

 

 

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

 

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

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

 

 

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

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

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

 

 

소스트리 화면 인터페이스

 

 

 

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

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

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

 

로컬 저장소로 사용할 신규 폴더

 

 

 

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

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

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

 

 

소스트리 Create 탭

 

 

 

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

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

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

 

 

소스트리 로컬 저장소 경로 설정

 

 

 

Ⅴ.  로컬 저장소 생성 완료

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

 

 

소스트리 로컬 저장소 생성 완료

 

 

 

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

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

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

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

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

 

로컬 저장소 생성된 폴더

 

 

 

 

 

글 작성자 SNS

 

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

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

 

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

 

 

 

 

 

마치며...

 

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

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

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

감사합니다.

 

 

반응형
반응형

 

 

소스트리 로고

SourceTree

Simplicity and power in a beautiful Git GUI

 

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

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

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

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

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

 

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

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

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

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

 

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

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

 

 

 

 

 

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

 

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

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

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

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

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

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

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

 

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

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

 

 

 

 

 

Git 설치하기 

 

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

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

 

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

 

 

 

 

 

소스트리(SourceTree) 설치하기 

 

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

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

 

 

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

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

 

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

 

 

소스트리 메인화면

 

 

 

Ⅱ.  소스트리(SourceTree) Install

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

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

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

 

소스트리 인스톨 화면

 

 

 

Ⅲ.  등록 완료

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

 

소스트리 등록 완료 메시지

 

 

 

Ⅳ.  Tools(Git) 설치

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

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

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

 

소스트리 Git 설치

 

 

 

Ⅴ.  Preferences(기본 설정)

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

 

소스트리 기본설정

 

 

 

Ⅵ.  SSH

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

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

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

 

소스트리 SSH 키 사용여부 확인

 

 

 

Ⅶ.  설치 완료

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

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

 

소스트리 인터페이스

 

 

 

 

 

글 작성자 SNS

 

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

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

 

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

 

 

 

 

 

마치며...

 

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

시작이 반이다!!

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

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

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

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

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

감사합니다.

 

 

반응형
반응형

 

 

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에 업로드하여 번거롭게 확인하는 과정의 절차를 여러분들도 겪었을 것이라고 생각합니다.

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

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

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

감사합니다.

 

 

반응형
반응형

 

 

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

Syntactically awesome stylesheets

 

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

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

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

 

 

 

 

 

@each

 

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

자바스크립트 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

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(반복문) 와 비슷합니다.

@forthrough 를 사용하는 형식과 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

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

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

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

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

 

 

반응형
반응형

 

 

 

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 추천드리며, 이번에 포스팅한 내용이 편리한 코딩 생활에 도움이 되었으면 합니다.

감사합니다.

 

 

반응형
반응형

웹퍼블리싱 코딩 작업시 편집 프로그램을 사용하여 코딩을 합니다.
편집 프로그램은 다양하게 있으며, 각각 본인의 스타일에 맞는 편집기를 사용하게 됩니다.
(주)맑은커뮤니케이션 에서는 퍼블리셔들이 다양하게 편집 프로그램을 사용합니다.
이에 따라 편집 프로그램 중 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) 사용시 편리한 확장프로그램 몇 종류와 용도에 대해 글을 쓰도록 하겠습니다.
잘못된 내용과 궁금하신 내용은 댓글 주시면 답변 드리겠습니다.

반응형
반응형


안녕하세요!

맑은커뮤니케이션 웹퍼블리싱팀 정혜인 입니다.

이 게시글에서는 협업의 필수! 코드관리 시스템 Git의 기초에대해 열심히 설명해보려합니다!


INDEX

- git이란?

- 분산 버전 관리 시스템

- 저장소 (Repository)

- 브랜치 (Branch)

- 기초 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글에서는 좀 더 심화된 내용으로 찾아오겠습니다. 부족한 내용, 잘못된 내용 피드백 주시면 감사하겠습니다 : )


반응형
반응형

드림위버는 많은 이지웍 기능으로 간편하게 코딩 할 수 있는 웹퍼블리싱 편집툴 입니다.
하드코딩이 어느정도 가능하신 분이시다면 그효과를 120% 발휘할 수 있습니다. 그리고 단축키를 숙지하신다면 더 많은 효과를 보실 수 있을 거라 생각합니다.
그래서 자주 사용할 수 있는 단축키에 대해 정리해 보았습니다.

편집(Edit)관련 단축키

  • Ctrl+Z : 실행취소
  • Ctrl+Y : 다시실행
  • Ctrl+X : 잘라내기
  • Ctrl+C : 복사하기
  • Ctrl+V : 붙여넣기
  • Ctrl+Shift+C : HTML 복사(디자인 뷰에서 선택한 영역을 HTML코드로 복사)
  • Ctrl+Shift+V : HTML 붙여넣기(외부에서 복사된 코드를 디자인 뷰에 붙여넣기)
  • Ctrl+A : 모두선택
  • Ctrl+[ : 부모 태그 선택
  • Ctrl+] : 자식 태그 선택
  • Ctrl+F : 찾기와 바꾸기
  • Ctrl+Space : 코드힌트 보기(코드 뷰 > 태그 요소 or 속성 선택 시)
  • Ctrl + J : Page Properties 대화상자
  • Ctrl+U : 환경설정

삽입(Insert)관련 단축키

  • Ctrl+Alt+I : 이미지 파일 삽입(gif, jpg, png)
  • Ctrl+Alt+F : 플래시 파일 삽입(swf)
  • Ctrl+Alt+D : Shockwave 파일 삽입
  • Ctrl+Alt+T : 표 삽입
  • Ctrl+Alt+A : 지정된 앵커(내부문서 링크 시 앵커 삽입)
  • h1~h6 : Ctrl+1 ~ Ctrl+6
  • p : Ctrl+Shift+P
  • strong : Ctrl+B
  • em : Ctrl+I
  • Ctrl+Shif+Space : 빈 공백 만들기

탭(Tab)관련 단축키

  • 열린 탭간 이동 : Ctrl+Tab
반응형

+ Recent posts