안녕하세요.
이 비디오에서는 Dreamweaver의 고급 코딩 기법을 살펴볼 텐데요.
Emmet을 사용하여 코딩 단축키를 설명하고 다중 커서를 사용하여 신속하게 편집하는 방법을 살펴보겠습니다.
또한 린트를 통해 빠르게 오류를 해결하는 방법도 살펴보겠습니다.
이 튜토리얼을 따라 하려면 이와 같이 사이트를 정의해야 하는데요.
상단에 있는 사이트에서 새 사이트를 선택하면 됩니다.
그러면 파일을 효율적으로 관리할 수 있습니다.
이 시간에는 사이트 정의 방법을 다루지 않을 텐데요.
사이트 정의 방법을 다룬 튜토리얼이 제공되고 있으므로 확인해 보시기 바랍니다.
그럼 먼저 Emmet을 살펴보죠.
Emmet은 Dreamweaver에 통합된 단축키 그룹입니다.
이러한 Emmet 단축키를 사용하여 이 페이지를 만들어 보죠.
완성되면 이와 같은 페이지가 만들어집니다.
이것은 시작 파일인데요.
보시다시피 상단에 있는 이 머리글 위에 아무것도 없습니다.
완성된 버전에는 이미지와 내비게이션이 있죠.
이 시간에는 코딩 단축키를 집중적으로 살펴보겠습니다.
다시 Dreamweaver로 돌아가 보죠.
이 튜토리얼에서는 표준이 아니라 개발자 모드에서 작업해 보겠습니다.
이 튜토리얼을 따라 하려면 개발자로 전환하고 왼쪽에 있는 파일 패널에서 index-start.html을 엽니다.
이 파일을 사용해 볼 텐데요.
두 번 클릭하면 됩니다.
먼저 단축키를 사용하여 머리글을 추가해 보죠.
이 주석 아래에 머리글을 추가해 볼 텐데요.
Tab 키를 누르고 여기에 머리글을 입력해 보죠.
이제 새로운 단축키를 사용해 볼 텐데요.
꺾쇠 괄호를 사용하여 여는 태그와 닫는 태그를 입력하지 않고도 "header"를 입력하고 Return이 아니라 키보드의 Tab 키를 누르면 자동으로 채워집니다.
양쪽에 꺾쇠 괄호가 추가되고 닫는 태그도 자동으로 입력됩니다.
이제 Return을 누릅니다.
이 방법은 태그 하나만 추가할 경우 매우 유용합니다.
하지만 내비게이션을 추가할 때에는 태그가 여러 개 필요한데요. "nav"를 입력하고 이 안에 "ul"을 입력하는 방식으로 개별적으로 생성할 수도 있는데요.
이보다 더 간편한 방법이 있습니다.
먼저 완성된 버전을 확인해 보죠.
상단을 보면 내비게이션이 있는데요. "nav" 안에 목록을 나타내는 "ul"이 있습니다.
모든 목록 항목은 이 안에 포함되어야 하고 이러한 모든 목록 항목은 하이퍼링크로 되어 클릭할 수 있어야 합니다.
그러면 이 모양을 빠르게 만들어 보겠습니다.
먼저 "nav"를 입력하고 Tab 키를 누르지 않고 꺾쇠 괄호를 입력합니다.
이 꺾쇠 괄호 다음에 오는 요소가 이 nav의 자식이 됩니다.
다시 말해 이 "nav" 안에 포함된다는 것입니다.
이 "nav" 안에 "ul"을 포함하고 "ul" 안에는 목록 항목을 포함합니다.
이제 "li" 안에 "a" 태그를 추가해 보겠습니다. "a" 태그는 앵커 태그입니다.
이제 Tab 키를 누르면 이렇게 변합니다. "a" 태그를 보면 하이퍼링크 참조가 된다는 것을 추측하고 모든 구문이 자동으로 채워집니다.
또한 깔끔하게 정리되어 있는데, 이것이 바로 Emmet의 탁월한 기능입니다.
이것도 훌륭한데 이보다 더 좋은 기능이 있습니다.
현재 링크가 하나만 만들어져 있는데요.
편집 > 실행 취소를 선택하고 다시 입력해 보겠습니다.
목록 항목까지 입력하고 앵커 태그를 입력하기 전에 곱하기 기호를 삽입해 보죠.
별표를 입력한 다음 5를 입력합니다.
그런 다음 "a" 태그를 입력합니다.
모두 입력한 다음 Tab 키를 누르면 이렇게 입력됩니다.
Emmet의 장점은 구문은 기억하기 매우 쉽고 조금만 연습하면 작업 시간을 크게 단축할 수 있다는 것입니다.
놀라운 단축키의 이점을 계속해서 살펴보겠습니다.
이번에는 다중 커서라는 기능을 설명해 드리죠.
예를 들어 링크를 추가해 보겠습니다.
이 부분에 하이퍼링크를 삽입해 보죠.
하이퍼링크를 각각 입력하지 않고 첫 번째 하이퍼링크를 클릭하고 Option 키를 누른 상태에서 PC의 경우 Alt 키를 누른 상태에서 이 부분의 가운데를 클릭하고 드래그합니다.
큰 커서가 만들어졌네요.
이제 입력하면 되는데요.
URL을 입력해 보죠.
매우 유용합니다.
5개 줄에 모두 입력되었습니다.
같은 링크를 사용하지 않을 것이므로 모두 삭제하고 다중 커서의 또 다른 기능을 보여드리죠.
아래로 내려가 보면 "span" 태그가 두 개 있습니다.
이 두 태그에 class를 추가해 보죠.
이 두 태그는 동일한 class가 적용됩니다.
여기를 클릭하고 페이지의 다른 곳에도 커서가 깜박이게 해야 하는데요.
아무 데나 상관없습니다.
Mac의 경우 Command 키를, PC의 Ctrl 키를 누른 상태에서 여기를 클릭해 보겠습니다.
그러면 두 개의 커서가 깜박입니다.
이제 class를 추가하면 동시에 입력됩니다.
아래에 있는 이 태그와 위에 있는 이 태그에 적용됩니다. class가 추가되었네요.
이제 이 class를 제거하고 Emmet의 단축키를 좀 더 살펴보겠습니다.
지금까지 한 작업을 살펴보면 상단에서 태그를 추가해 보았는데요. "header"의 여는 태그와 닫는 태그를 만들고 아래에서 다중 커서를 사용하여 class를 추가해 보았습니다.
이번에는 한 번의 클릭으로 입력해 볼 텐데요.
Emmet으로 가능합니다.
그러면 해 보죠.
이 "header" 바로 아래에 로고를 추가해 보겠습니다.
클릭 가능한 로고를 만들기 위해 "a" 태그를 입력합니다.
꺾쇠 괄호를 입력하지 않고 이 "a" 태그에 바로 class를 추가해 보죠.
마침표를 입력하고 "site-logo"라는 class 이름을 입력한 다음 Tab 키를 누르면 자동으로 하이퍼링크 참조가 추가됩니다.
하이퍼링크는 자리 표시자인 해시 기호를 입력해 보죠.
한 번의 클릭으로 class가 추가되었습니다.
이 이미지도 동일합니다. "img"를 입력하고 class를 추가해 보죠.
이 경우 "site-logo-white"를 입력하고 Tab 키를 누릅니다.
이제 이미지와 소스가 모두 입력되었는데요.
Emmet을 통해 alt 텍스트와 class 모두 자동으로 채워집니다.
Emmet은 Dreamweaver에 포함되어 있고 Dreamweaver는 많은 코드 힌트 기능을 제공합니다.
이 코드 힌트를 사용하여 소스를 입력할 수 있습니다.
이미지가 저장된 위치를 삽입하면 되는데요. "i"를 입력해 보죠.
이때 "i"만 입력해도 images 폴더가 자동으로 제시되므로 선택하면 됩니다.
그런 다음 이미지 파일이 다시 제시되므로 선택하면 됩니다.
이와 같이 이미지 파일들이 제시되는 이유는 이 프로젝트를 설정할 때 사이트에서 정의했기 때문입니다.
현재 images 폴더가 설정되어 있어 이 폴더에 있는 모든 것이 표시됩니다.
코드 힌트에서 원하는 이미지가 없는 경우 검색을 클릭합니다.
이 경우 아래를 스크롤하여 찾거나 "l"을 입력하여 "l"로 시작하는 파일을 찾습니다.
그러면 두 개의 파일이 표시되는데요. "l"로 시작하는 "logo-dark"와 "logo-white"가 있습니다.
이렇게 하면 매우 간단합니다. "logo-dark"도 있는데, 이름을 잘 지었네요.
흰색 로고를 사용할 것입니다.
필요한 경우 이 두 파일을 클릭하여 변경할 수 있고 키보드의 화살표를 사용하여 위아래로 이동할 수도 있죠.
흰색 로고를 선택해 보죠.
브라우저에서 빠르게 확인해 보죠.
원하는 흰색 이미지 로고가 보이네요.
내비게이션은 마음에 들지 않으므로 수정해 보죠.
내비게이션에 class를 추가해 보겠습니다.
이때 Dreamweaver의 유용한 코드 힌트를 보여드리죠. class를 입력하고 Return을 누르면 모든 구문이 채워집니다.
이 경우 "site-nav"를 선택하고 브라우저에서 미리 보겠습니다.
여기에 있네요.
글머리 기호는 같지만 화면 상단에 스타일이 지정되어 있습니다.
다음으로 일부 본문 카피를 페이지에 추가해 보겠습니다.
개인적으로 사이트를 제작할 때에는 디자인 작업을 많이 하기도 하지만 카피도 작성합니다.
이제 자리 표시자 텍스트를 추가해야 하는데요.
이전에는 lorem ipsum을 찾아 추가했었는데요.
이제는 간편하게 가능합니다.
먼저 "p" 태그를 입력해 보죠.
이 "intro" 섹션에 추가해 보겠습니다. "p" 태그에 본문 카피를 삽입해 볼 텐데요. "p"를 입력한 다음 Tab 키를 눌러 "p" 태그를 만듭니다.
이 안을 자리 표시자 텍스트로 채워 보겠습니다.
일반적으로 "lorem ipsum"을 사용하는데요.
라틴어입니다.
이때 Dreamweaver에서 바로 "lorem"을 입력하고 Tab 키를 누르면 자동으로 채워집니다.
이렇게 말이죠.
이제 실행 취소하고 Tab 키를 누르기 전에 "10"을 입력하면 10개의 단어가 채워집니다.
이렇게 사이트를 디자인할 수 있습니다.
작가는 단어 수 단위로 작업하는데요.
200개까지 원한다면 200을 입력하면 됩니다.
모든 스타일이 올바로 지정되었는지 확인하고 카피를 가져오면 됩니다.
이 부분을 삭제하고 이번에는 지금까지 한 작업을 한 번에 입력해 보겠습니다. "div" 태그를 입력하고 "intro-text" class를 입력합니다.
이 안에 "p" 태그를 삽입하는데, "p" 태그는 4개가 필요합니다.
이러한 "p" 태그 안에 "lorem ipsum"이 삽입되도록 입력합니다.
모두 완료하면 많은 양의 콘텐츠가 생성됩니다.
약간의 문자열만으로 만들어졌죠.
단락을 보면 모두 "lorem ipsum"의 다른 내용이 삽입되어 있습니다.
따라서 실제 카피와 유사하게 만들 수 있습니다.
이에 대해서 잠시 후에 살펴보겠습니다.
저와 같이 시작할 때 기본 단축키를 사용할 수 있습니다.
이 간단한 언어를 통해 더욱 신속하고 간편하게 이러한 모든 요소를 입력하고 class를 추가할 수 있습니다.
다소 시행착오도 있겠지만 작업 시간을 단축하여 작업 효율성을 높일 수 있습니다.
이 경우 하나의 "p" 태그만 사용하면 되므로 나머지는 삭제해 보죠.
다음으로 살펴볼 것은 린트라는 기능으로, 기본적으로 잠재적인 오류를 해결해 줍니다.
매우 유용하죠.
그러면 지금 이 기능을 살펴보겠습니다.
제 경우 이 줄 번호를 항상 확인하는데요.
아래로 스크롤하면 이와 같이 빨간색으로 표시됩니다.
이 위로 마우스를 가져가면 오류를 알려주는데, 현재 특수 문자가 누락되어 있네요.
따라서 꺾쇠 괄호를 입력하지 않은 곳을 바로 확인할 수 있습니다.
오류를 수정하면 두 번째 오류 표시도 사라집니다.
이 때문에 이 두 개의 오류가 발생했었는데요.
작업 중에 발생한 것이었죠.
이제 작업이 마무리되어 가고 있을 때 지금까지 한 작업을 점검해야 하는데요.
이것을 실행 취소하면 다시 오류가 표시됩니다.
표시되었네요.
작업을 하다보면 알아차리지 못할 수 있습니다.
미리 보기에서는 아무런 문제가 없어 보이지만 한 번 확인하는 것이 좋습니다.
이때 출력 창을 엽니다.
출력 창에서 검색하고 잘못된 것이 있는지 확인합니다.
윈도우로 이동하여 아래에 있는 결과를 선택하면 출력 옵션이 있습니다.
출력을 열어 놓은 상태에서 실행할 수 있는데요.
오류를 수정하면 여기에 있는 오류가 자동으로 업데이트됩니다.
현재 앞서 본 오류가 표시되어 있네요.
이것을 두 번 클릭하면 해당 줄로 이동됩니다.
여기에 있네요.
수정해 보죠.
따라서 이 린트를 활용하면 간편하게 점검할 수 있습니다.
특히 모든 작업이 마무리되어 갈 때 출력 창을 열어 놓고 모든 것이 제 기능을 하는지 확인하는 것이 좋습니다.
출력 창에 오류가 표시되는 것은 좋지 않지만 어쨌든 오류 원인과 오류를 해결하는 방법을 알 수 있습니다.
이제 문서를 저장하면 이 출력 창이 업데이트됩니다.
이제 모두 해결되었네요.
출력 창을 두 번 클릭하여 닫습니다.
다시 Emmet을 살펴보죠.
지금까지 Emmet과 HTML을 사용했는데요.
Emmet은 CSS에서도 사용할 수 있습니다.
그러면 styles.css를 열고 위로 스크롤해 보죠.
17번 줄에서 사용해 보겠습니다.
이 이미지에 폭을 추가해 보죠.
이때 Emmet을 사용할 수 있습니다. "w"를 입력한 다음 "100"을 입력하고 Tab 키를 누릅니다.
그러면 100픽셀이 추가됩니다.
훌륭합니다.
측정 단위를 추가하지 않은 경우 픽셀이 기본값으로 설정됩니다.
이제 실행 취소하고 100픽셀이 아니라 백분율로 바꾼 다음 Tab을 누르면 폭이 100%로 입력됩니다.
HTML의 6번 줄에서 작업을 더 해 보죠.
여백을 추가해 볼 텐데요. "m"을 입력한 다음 "0"을 입력하고 Tab을 누르면 채워집니다.
패딩도 "0"으로 입력해 보죠. "p0"을 입력한 다음 Tab을 누릅니다.
훌륭합니다.
속성 단축키 중에는 그 기능을 인식하는 데 시간이 조금 걸리는 것도 있습니다.
그러나 Emmet은 아주 간단하므로 단축키라고 생각되는 모든 것이 Emmet입니다.
단축키 목록을 알고 싶은 경우 인터넷에 다양한 리소스가 있습니다.
먼저 Emmet.io에서 제공되는 개요서를 확인해 보시기 바랍니다.
주소는 emmet.io입니다.
설명서 섹션에 개요서가 있습니다.
이번에는 body에서 사용해 보죠.
배경색을 추가해 볼 텐데요.
배경색의 단축키는 배경을 나타내는 "bg"와 색상을 나타내는 "c"입니다.
Tab 키를 누르면 배경색이 추가됩니다.
기본적으로 흰색이 추가되는데, 가장 일반적으로 사용되기 때문이죠.
물론 업데이트 가능합니다.
흰색 배경을 원하지 않는 경우 여기를 선택하고 삭제합니다.
해시 기호를 추가하면 색상 피커가 열립니다.
여기에서 원하는 색상을 선택하면 됩니다.
색조도 제공되죠.
원하는 색상을 선택한 다음 Return을 누릅니다.
이 위로 마우스를 가져가면 코드 뷰에서도 미리 보기가 표시되므로 매우 유용합니다.
배경색을 흰색인 #fff로 다시 바꿔 보죠.
마우스를 가져가면 흰색이 표시됩니다.
이제 아래로 내려가 340번 줄로 이동해 보겠습니다.
이번에는 배경 이미지를 추가해 보죠.
Emmet에 대해 전혀 알지 못해도 짐작할 수 있을 텐데요. 'bgi'입니다. background-image죠.
Tab을 누릅니다.
이미지를 삽입하기 위해 "url"을 입력하고 이미지를 따옴표 안에 삽입해야 하는데요.
이 안에 "i"를 입력하면 앞서 한 것처럼 images 폴더가 제시됩니다.
현재 이미지가 많이 있는데요. "ri"를 입력하면 오른쪽 화살표 이미지가 표시됩니다.
이 경우 흰색 화살표를 사용해 보죠.
이 아래에 작은 미리 보기가 표시되고 크기도 알 수 있어 아주 유용합니다.
따라서 스타일 시트는 HTML과 같이 Emmet을 지원합니다.
HTML에서처럼 이 기법을 사용하여 CSS 속성도 추가할 수 있는데요.
동일한 린트와 오류 감지 기능이 있습니다.
한 번 살펴보죠.
먼저 린트 기능을 살펴보면 예를 들어 경로가 잘못되었다고 해 보죠. "r"을 하나 추가하여 파일 이름을 바꾸면 이미지를 찾을 수 없는데요.
그러면 이미지를 찾을 수 없다는 메시지가 표시됩니다.
훌륭합니다.
HTML에서처럼 이 줄 번호를 보면 오류가 표시됩니다.
여기를 보면 중괄호가 하나 더 있네요.
HTML처럼 출력 창을 열어 놓을 수 있는데요.
현재 359번 줄에 오류가 있음을 알 수 있습니다.
따라서 원하는 방식으로 사용하면 됩니다.
마지막으로 살펴볼 기능은 사이트에서 링크를 점검하는 방법입니다.
모든 것이 제 위치에 연결되고 끊기지 않았는지 확인하는 작업인데요.
제작하는 동안 이러한 작업을 하는 것은 좋지만 테스트를 하거나 클라이언트에게 전송할 때 특히 좋습니다.
따라서 모든 링크, 즉 메뉴 항목이나 외부 하이퍼링크와 같은 요소가 잘 작동하고 끊기지 않았는지 확인합니다.
이를 위해 소스 코드로 이동해 보겠습니다.
이제 HTML에서 링크가 잘 연결되었는지 점검해 보죠.
사이트로 이동하여 아래에 있는 사이트 옵션에서 사이트 전체 링크 확인을 선택합니다.
기본적으로 끊긴 링크로 설정되어 있는데요.
제대로 작동하지 않는 링크가 표시됩니다.
이 옵션을 사용하기 전에 다른 옵션을 잠시 살펴보죠.
외부 링크를 살펴보겠습니다.
이 링크는 잘못된 것이 없네요.
다른 웹 사이트와 실제로 연결되어 있는 링크가 표시됩니다.
링크 점검은 흥미로운 작업이죠.
다른 옵션은 "고립된 파일"입니다.
이러한 파일은 로컬 사이트에 있지만 웹 사이트에 사용되지 않는 파일입니다.
로컬 폴더에 있는 파일로, 사이트 정의에서 정의한 것인데요.
하지만 페이지에서 사용되지 않았습니다.
실제로 어떤 곳에도 추가되지 않았죠.
이미지는 어디에서도 사용되지 않았으므로 이때 페이지에 실제 이미지를 추가하면 됩니다.
이 옵션을 사용하거나 일부 파일이 다른 폴더에 포함되어 있는 것을 우연히 발견할 수 있을 것입니다.
이 파일이 어느 폴더에 포함되어 있는지 확인하고 해당 폴더로 다시 가져올 수 있습니다.
이제 끊긴 링크 옵션에 대해 집중적으로 살펴보죠.
확인 작업을 하는 동안 화면 상단에 있는 재생 버튼을 누르면 현재 문서에서 링크를 확인할 수 있습니다.
현재 문서란 현재 열려 있는 문서를 말합니다.
또한 현재 로컬 사이트의 전체 링크를 확인할 수 있습니다.
이 경우 간단한 사이트이므로 아무런 문제가 없습니다.
물론 복잡한 사이트에서 링크를 확인할 수 있습니다.
일부 파일 링크를 확인하고 싶은 경우 파일 패널에서 파일을 선택합니다.
원하는 파일을 선택한 다음 이 옵션을 실행할 수 있습니다.
이제 현재 문서를 사용해 보죠.
이것을 클릭하면 확인 작업을 통해 두 개의 링크가 끊겼다고 표시됩니다.
해당 링크를 찾아 보면 이 링크가 index.html로 연결된 것을 알 수 있는데요.
일반적이죠.
그렇지만 이 튜토리얼에서 index-start.html로 지정했으므로 올바른 위치에 연결되어 있지 않습니다.
이 링크를 두 번 클릭하고 여기에서 변경할 수 있는데요.
탐색 버튼을 클릭하여 해당 파일을 찾아 연결할 수 있습니다.
맞춤법 실수가 있을 수도 있고 이 경우와 같이 파일의 링크가 존재하지 않을 수도 있습니다.
속성을 닫으면 index.html이 사라지고 올바른 파일 이름으로 변경되었습니다.
여기를 보면 사라지지 않았는데요.
다시 실행하면 업데이트됩니다.
첫 번째 끊긴 링크는 사라졌는데 이 링크는 아직도 끊겨 있습니다.
이것은 끊긴 외부 링크로, www.adobe.com으로 연결됩니다.
이것을 두 번 클릭하면 "http"가 잘못 적혀 있네요. "t"를 하나 더 추가하고 다시 보면 코드가 변경되었습니다.
재생을 누르고 링크 확인을 누르면 더 이상 끊긴 링크가 없습니다.
이제 이 링크 확인 기능은 CSS에서도 지원됩니다.
CSS 문서를 열어 실행할 수 있죠.
현재 문서에서 링크 확인을 클릭하거나 여기에서처럼 HTML 문서에서 하나씩 살펴보면서 전체 현재 사이트를 확인할 수 있습니다.
그러면 현재 열려 있는 이 페이지를 테스트하고 CSS를 비롯하여 사이트를 구성하는 다른 모든 문서까지 확인합니다.
이제 링크 확인기를 닫습니다.
이상입니다.
지금까지 신속하게 코드를 작성하고 작업하는 동안 오류를 줄일 수 있는 기법과 팁을 살펴보았습니다.
Emmet과 린트 기능도 살펴보았고 Dreamweaver의 코드 힌트 기능과 링크 확인 기능까지 살펴보았습니다.
유용한 기능을 다루는 다양한 튜토리얼이 제공되고 있습니다.
이제 웹 디자이너는 신속하게 코드를 작성하고 오류를 줄일 수 있습니다.
모두 Dreamweaver에서 가능합니다.
