안녕하세요.
웹 프로젝트 작업 시 같은 코드나 유사한 코드를 여러 번 반복 작성해야 하는 경우 Dreamweaver CC의 코드 단편은 완벽한 툴입니다.
코드 단편은 미리 만들어진 재사용 가능한 코드이므로 모든 웹 프로젝트에 간편하게 추가할 수 있습니다.
코드 단편 패널이 보이지 않는다면 윈도우 메뉴 아래에 있는 코드 단편을 선택하면 됩니다.
좋습니다.
여기에는 Bootstrap_Snippets, CSS_Snippets, Responsive_Design_Snippets도 있습니다.
제가 개인적으로 자주 사용하는 HTML_Snippets도 있죠.
보시다시피 코드 단편마다 이름이 있는데 어떤 건 이름이 너무 길어서 잘려서 표시됩니다.
이때 마우스를 갖다 대면 전체 이름을 확인할 수 있죠.
이제 간편한 코드 단편을 추가해볼 텐데 먼저 'Adding a Mailto Link'를 사용해 보겠습니다.
이 유용한 코드 단편은 한 줄짜리 코드로 된 링크로 누군가 이 링크를 클릭하면 저한테 이메일이 전송됩니다.
보통 'Mailto'라고 코드를 부르는데 코드에 콜론을 사용해야 하는지 물음표를 사용해야 하는지 기억이 나지 않을 때 코드 단편을 사용하면 아주 편리합니다.
바닥글에 있는 p 태그 사이에 Mailto를 추가해 보겠습니다.
커서가 깜빡이는 상태에서 코드 단편의 여기를 두 번 클릭합니다.
그러면 이메일 주소를 바꾸는 것을 잊지 말라는 짧은 주석이 추가됩니다.
유용하죠.
제 이메일 주소를 입력하여 업데이트한 다음 위에 있는 라이브 뷰를 보면 'Email Us' 버튼에 적합한 구문이 추가되었습니다.
이게 바로 코드 단편을 추가하는 방법이었고 이번에는 기존의 코드 단편을 편집해 보겠습니다.
페이지 리디렉션을 수행해야 하는 경우를 가정해 보죠.
많은 페이지 중에 특정 페이지를 다른 사이트나 페이지로 리디렉션해야 하는 경우 이 코드 단편을 선택하고 여기에 있는 옵션 중에서 코드 단편 편집 버튼을 클릭합니다.
현재 http://website.com/으로 연결되도록 설정되었는데 이것을 자리 표시자라고 부릅니다.
이 자리 표시자를 http://adobe.com/으로 변경합니다.
다른 페이지에서도 이 작업을 반복해야 하므로 트리거 키 필드를 편집하겠습니다.
단축키와 같은 거죠.
미리 고유한 트리거를 만들어 놨는데 redirect라고 이름을 지정했습니다.
이제 확인을 클릭합니다.
그러면 트리거 키 redirect가 여기에 추가됩니다.
이제 위쪽에 있는 head 섹션으로 이동합니다.
여기는 페이지가 로드되기 전에 표시되는 화면인데 이 부분을 다른 페이지로 리디렉션되게 하겠습니다.
Tab 키를 눌러 보죠.
앞서 빠르게 코드 단편을 추가하는 방법을 살펴봤지만 트리거를 특히 자주 이용하는 코드 단편에 추가하면 훨씬 빠르게 작업할 수 있습니다.
이제 나만의 코드 단편을 만드는 방법을 살펴보겠습니다.
사이트를 만들 때 여러 번 반복 사용하는 코드가 있죠.
특정 클라이언트가 색상과 글꼴 그룹을 요구하는 경우 반복 적용해야 합니다.
이때 작업 속도를 단축하기 위해 고유한 그룹을 만들 수 있습니다.
이 코드 단편 폴더 아이콘을 눌러 폴더를 생성하고 폴더 이름을 입력합니다.
저는 My Snippet이라고 하겠습니다.
현재 HTML_Snippets 안에 포함되어 있는데 클릭하고 여기 아래로 드래그하여 별도의 그룹으로 분리합니다.
이제 HTML_Snippets는 닫겠습니다.
폴더가 선택된 상태에서 '새 코드 단편' 아이콘을 누르고 코드 단편의 이름을 입력합니다.
간단한 것으로 만들어 보겠습니다.
CSS에서 반복 사용하는 Corporate Green을 만들어 보죠.
여기 아래에 코드를 입력합니다.
이제 확인을 클릭합니다.
CSS로 이동하여 어디에 넣을지 살펴봅니다.
이것은 도입부 텍스트인데 이 텍스트에 Corporate Green을 적용하고 싶습니다.
이 텍스트를 제어하는 선택기를 찾아야 합니다.
여기에 있네요.
Corporate Green을 두 번 클릭합니다.
아주 훌륭합니다.
작성할 코드가 많아질수록 코드 단편은 더욱 유용합니다.
여기에 있는 header 태그를 모두 선택하겠습니다.
이처럼 대부분의 웹 프로젝트는 간단한 header를 이용해 시작합니다.
모두 선택하고 '새 코드 단편'을 클릭하여 새 코드 단편을 생성합니다.
이미 선택했기 때문에 코드 삽입 필드에 해당 코드가 이미 추가되어 있습니다.
이름을 입력하고 트리거 이름을 입력합니다.
이 경우 nav라고 하면 훌륭한 이름은 아니죠. nav가 이미 Emmet에서 사용된 단축키이기 때문입니다.
따라서 HTML 요소와 똑같은 이름은 사용하지 않는 것이 좋습니다.
고유한 이름을 사용하시기 바랍니다.
이 경우 mynav라고 하겠습니다.
확인을 클릭합니다.
이제 새 문서를 만들어 처음 시작하는 경우 여기 상단에 있는 body에 mynav를 입력하고 Tab 키를 누릅니다.
보시다시피 3개의 글자와 한 번의 Tab 키만으로 HTML 구조가 만들어집니다.
이처럼 매우 유용한 코드 단편은 기존 코드 단편을 편집할 때도 사용할 수 있고 마지막 예시에서처럼 나만의 코드 단편도 만들 수 있습니다.
나만의 코드 단편을 만들 때는 동기화 설정이 활성화되어 있어야 합니다.
오른쪽 상단에 있는 이 아이콘을 누르면 되는데 이 코드 단편은 클라우드와 동기화되므로 Dreamweaver CC를 재설치한 경우 또는 다른 컴퓨터에서 Dreamweaver CC를 사용하는 경우에도 동일한 코드 단편을 이용할 수 있습니다.
마지막으로 뛰어난 코드 단편과 Dreamweaver CC에 감사하고 시청해주신 여러분께도 감사드립니다.
Dreamweaver CC에 대한 더 많은 튜토리얼이 있으므로 다른 튜토리얼도 확인하시기 바랍니다.
