Dreamweaver를 사용하여 웹 페이지 태그를 빠르게 편집
저자：Eve Cole
업데이트 시간：2009-06-01 01:02:43
혹시 손으로 코드를 작성하는 습관이 있으신지 궁금합니다. 예: CSS 코드나 Javascript 코드를 셀에 삽입하려는 경우 어떻게 빠르고 편리하게 삽입할 수 있습니까?
Dreamweaver에서 코드 보기를 제공했지만 여전히 수동으로 찾아서 전환해야 합니다. 코드 보기와 편집 보기를 함께 사용할 수도 있지만 화면 공간의 절반을 차지하므로 이미 작은 편집 영역이 더욱 혼잡해집니다. 더 좋은 방법이 있나요? 대답은 '예'입니다.
모든 사람의 Dreamweaver 패널 레이아웃이 기본 레이아웃이라고 가정하고 Dreamweaver 8을 예로 들어 보겠습니다. 속성 패널 위에 작은 레이블 행이 있는지 확인하세요. (MX를 사용하지 않는 경우 태그는 상태 표시줄에 있습니다.) 예를 들어 빈 HTML 문서를 새로 만드는 경우 위의 작은 태그는 <body>여야 합니다. 아래 그림을 보십시오:
사진에 빨간색 테두리로 표시된 곳이 오늘의 주인공입니다. 먼저 "랩 태그"를 살펴보겠습니다. 페이지에 몇 단어를 입력하고 선택한 후 마우스 오른쪽 버튼 클릭 메뉴에서 "Wrap Tags"를 선택하고 팝업 Wrap Tags 대화 상자에 "<strong>"(인용 부호 제외)를 입력한 다음 Enter 키를 누릅니다. 이전에 선택한 텍스트가 굵게 표시되었습니까? 소스 코드로 이동하여 선택한 텍스트가 <strong> 태그로 둘러싸여 있습니까? <a>, <p>와 같은 다른 태그를 추가해 볼 수 있습니다. 여기에 속성을 직접 입력할 수도 있습니다. 예: <p style="color:#CC0000">. 여기에는 일반적인 설명이 포함되어 있습니다. 질문이 있는 경우 Dreamweaver의 도움말을 확인하세요.
태그 선택기를 적용하는 방법에 대해 알아보겠습니다.
지금 바로 굵은 글씨로 커서를 이동해 보면 <body> 뒤에 <strong>이 추가로 있는 것을 확인할 수 있습니다. 이는 커서가 위치한 텍스트 외부에 <strong> 태그가 있고, <strong> 태그 외부에 <body> 태그가 있음을 의미합니다. 다음으로, 다른 테이블을 추가하고 테이블 안으로 커서를 이동하여 태그의 구조를 살펴보겠습니다. HTML에 대한 기본적인 지식이 있는 친구라면 쉽게 이해할 수 있을 것이라고 생각합니다.
이제 표를 삽입하고 CSS를 사용하여 표를 10픽셀 아래로 이동한다고 가정해 보겠습니다. 먼저 테이블을 삽입한 다음 커서를 테이블로 이동합니다. 이때 태그 선택기에 <body><table><tr><td>라는 단어가 표시되어야 합니다. 그런 다음 테이블 레이블을 마우스 오른쪽 버튼으로 클릭하면 네 가지 옵션이 표시됩니다. 태그를 삭제하고, 태그를 편집하고, 클래스를 설정하고, ID를 설정합니다.
태그 삭제: 태그를 삭제합니다. (삭제할 수 없는 특수 태그도 있습니다. 예: <table>, <tr>, <td>, <body>...)
태그 편집: 태그에 속성 첨부, 속성 수정 등
클래스 설정: 이 태그에 클래스를 연결합니다. (즉, CSS 카테고리)
ID 설정: 이 태그에 ID를 연결합니다. (예: CSS ID)
여기서는 태그를 편집한 다음 끝에 style="margin-top:10px" 속성을 추가하도록 선택합니다. 이는 일반적인 소스 코드 작성 방법과 동일합니다. 그런 다음 Enter를 누르십시오. 편집이 완료되었습니다. Dreamweaver에서 효과를 볼 수 없는 경우 브라우저를 사용하여 미리 보십시오.
당신이 좋아할 만한 또 다른 방법이 있습니다. Window → Tag Inspector를 선택하세요. 태그를 선택하면 현재 선택한 태그의 모든 속성이 여기에 표시됩니다. 여기에서 빠르게 편집할 수도 있습니다. 여기에 입력한 속성에는 따옴표를 포함할 필요가 없습니다. 편집 후 Enter를 눌러 확인하세요.
여기서는 방법만 설명하고 모든 사람이 그로부터 혜택을 받을 수 있기를 바랍니다.
