비디오: PSD TO HTML 01 [Simple PSD] - 포토샵참조 코딩하기 기초 - 파트1 2025
Adobe Creative Suite 5 (Adobe CS5)에서 웹 페이지 만들기 Dreamweaver는 간단한 작업입니다. 기본 HTML을 이해하려면 약간의 설명이 필요합니다. 웹 페이지는 원하는만큼 복잡하거나 간단 할 수 있으며 두 가지 유형 모두 올바르게 작성하면 똑같이 효과적입니다.
Dreamweaver는 백그라운드에서 작동하여 새 페이지가 Firefox, Internet Explorer 및 Safari와 같은 일반적인 웹 브라우저의 모든 최신 버전에서 작동하는지 확인합니다. 웹 브라우저가 HTML 및 HTML 버전을 인식 할 수 있도록 많은 코드가 만들어집니다.
기본적으로 Dreamweaver에서는 새 HTML 페이지를 만들 때마다 XHTML 1.0 Transitional 표준을 사용합니다. XHTML은 XML (Extensible Markup Language)의 엄격 성을 HTML 태그와 결합하여 웹 브라우저와 휴대 전화 및 PDA와 같은 새 장치에서 안정적이고 일관되게 작동하는 언어를 만듭니다.
-
빈 페이지를 만들려면 파일 → 새로 만들기 → 빈 페이지 → HTML →을 선택하고 만들기를 클릭합니다.
비어있는 제목없는 HTML 페이지가 나타납니다. 테이블이나 레이어를 추가 할 때까지 서식이 없습니다.
-
페이지에 텍스트 (예: 사용자 이름)를 입력하고 문서 도구 모음에서 코드 버튼을 클릭하십시오.
문서에 페이지를 입력하면 텍스트가 웹 페이지에 나타납니다. 그러나 그것보다 훨씬 더 많은 것이 있습니다.
-
문서 도구 모음에서 분할 단추를 클릭하여 분할보기를 선택하십시오.
이 작업은 디자인과 코드보기를 동시에 표시하므로 변경 사항이 장면 뒤에서 HTML에 어떤 영향을 주는지 확인할 수 있습니다.
분할보기로 작업하면 HTML 태그를 사용하여 페이지 요소를 만들고 서식을 지정하는 방법을 볼 수 있습니다. -
텍스트를 선택하십시오.
-
삽입 패널의 일반 드롭 다운 목록에서 텍스트 옵션을 선택합니다.
B (굵게 표시)를 선택하여 선택한 텍스트를 굵게 표시한다고 가정하십시오. 페이지의 코드보기에서 텍스트 앞에 태그가 추가되었고 텍스트 뒤에 태그가 추가 된 것을 볼 수 있습니다.
분할보기에서보기의 방향과 배열을 변경할 수 있습니다. 디자인보기를 오른쪽에서 왼쪽으로 전환하려면보기 → 왼쪽에서 디자인보기를 선택합니다. 보기를 세로로 정렬하려면보기 → 세로로 분할을 선택하십시오. 참고:보기 메뉴의 동일한 옵션 에서처럼 쉽게 이러한 옵션을 취소 할 수 있습니다.
