HTML5는 태그를 의미론적으로 정확하게 만들 수 있는 방법입니다.
요소 유형에 액세스할 수 있도록 만들어야 화면 판독기가 콘텐츠를 읽는 방법을 인식합니다.
빠른 태그 편집기는 이미 생성한 태그로 돌아가 정리하거나 다른 태그를 실험해보거나 즉시 편집해야 하는 경우 유용합니다.
이 비디오에서는 빠른 태그 편집기의 세 가지 모드에서 작업하는 방법을 살펴보겠습니다.
먼저 디자인 작업 영역으로 전환해보죠.
빠른 태그 편집기를 통해 라이브 뷰에서 세 개 방법 중 하나로 요소 코드를 편집할 수 있습니다.
태그 콘텐츠를 추가하거나 다른 태그로 태그를 감싸거나 태그를 삽입합니다.
빠른 태그 편집기를 실행하려면 라이브 뷰에서 요소를 선택한 다음 Ctrl + T 또는 Mac의 경우 Command + T를 누릅니다.
그러면 빠른 태그 편집기의 편집 모드가 표시됩니다.
다시 Ctrl + T 또는 Command + T를 누르면 줄 바꿈 모드로 전환되고 다시 Ctrl + T 또는 Command + T를 누르면 삽입 모드로 전환됩니다.
이 프로세스를 통해 라이브 뷰에서 해당 요소의 코드에 액세스하고 편집할 수 있습니다.
이제 빠른 태그 편집기를 살펴보겠습니다.
먼저 HTML5 섹션 태그에 div 태그를 업데이트한 다음 이미지 속성을 추가해보죠.
라이브 뷰에서 feature 이미지를 선택하고 위쪽 화살표 키를 눌러 선택 영역을 이미지를 감싸는 div로 변경합니다.
빠른 태그 편집기의 편집 모드를 열고 div 태그를 선택하고 삭제합니다. "se"를 입력하면 코드 힌트가 section 태그를 표시합니다.
Enter를 눌러 태그를 변경한 다음 다시 Enter를 눌러 변경 사항을 적용합니다.
코드 뷰를 보면 변경 사항이 업데이트되어 있습니다.
닫기 태그도 자동으로 업데이트됩니다.
이 방식을 사용하여 레이아웃 태그 사이를 손쉽게 감쌀 수 있습니다. image 태그를 업데이트하려면 이를 선택하고 빠른 태그 편집기의 편집 모드를 엽니다.
소스 경로를 "images/feature2.png"로 변경한 다음 Enter를 누릅니다.
라이브 뷰를 보면 새 이미지가 업데이트되어 있고 코드 뷰에서는 변경된 코드가 적용된 것을 확인할 수 있습니다.
이제 이미지를 anchor 태그 안에 감싸 클릭 가능하도록 만들어볼 텐데요.
빠른 태그 편집기를 사용하면 수월합니다.
다시 이미지를 선택하고 Ctrl + T 또는 Command + T를 두 번 눌러 빠른 태그 편집기의 줄 바꿈 모드를 엽니다.
그러면 빠른 태그 편집기의 태그 옵션이 있는 코드 핸드 메뉴가 표시됩니다.
첫 번째 옵션인 anchor 태그를 선택한 다음 스페이스바를 누르고 "hr"을 입력하면 코드 핸드가 "href"로 이동합니다.
Enter를 누르고 URL 링크를 입력합니다.
다시 Enter를 누르고 코드 뷰를 보면 anchor 태그로 업데이트되어 있고 section 태그로 감싸져 있습니다.
또한 닫기 태그가 자동으로 생성되어 있죠.
빠른 태그 편집기의 마지막 모드를 사용하면 기존 HTML 요소 앞에 새로운 것을 삽입할 수 있습니다. image 태그 위에 div 태그를 삽입하려면 삽입 모드를 사용합니다.
이미지를 선택하고 빠른 태그 편집기의 삽입 모드를 엽니다. "di"를 입력하고 Enter를 눌러 코드 핸드에 있는 div 태그를 선택합니다.
다시 Enter를 눌러 코드를 적용하면 코드 뷰가 업데이트됩니다.
라이브 뷰는 코드를 일치시키고 생성하는 데 필요한 다양한 툴과 단축키를 제공합니다.
빠른 태그 편집기는 라이브 뷰에서 작업하는 동안 빠르게 코드를 편집하는 데 사용할 수 있는 간단하면서도 강력한 기능입니다.
이제 Dreamweaver CC에서 디자인 작업을 할 경우 빠른 태그 편집기의 이 세 가지 모드를 직접 사용해 보시기 바랍니다.
