- Dreamweaver 사용 안내서
- 소개
- Dreamweaver 및 Creative Cloud
- Dreamweaver 작업 영역 및 보기 옵션
- 사이트 설정
- 파일 관리
- 레이아웃 및 디자인
- CSS
- 페이지 내용 및 에셋
- 페이지 속성 설정
- CSS 머리글 속성 및 CSS 링크 속성 설정
- 텍스트 작업
- 텍스트, 태그, 속성 찾기 및 바꾸기
- DOM 패널
- 라이브 뷰에서 편집
- Dreamweaver에서 문서 인코딩
- 문서 창에서 요소 선택 및 보기
- 속성 관리자에서 텍스트 속성 설정
- 웹 페이지 맞춤법 검사
- Dreamweaver에서 가로줄 사용
- Dreamweaver에서 글꼴 조합 추가 및 수정
- 에셋을 사용하여 작업
- Dreamweaver에서 날짜 삽입 및 업데이트
- Dreamweaver에서 즐겨찾기 에셋 만들기 및 관리
- Dreamweaver에서 이미지 삽입 및 편집
- 미디어 오브젝트 추가
- Dreamweaver에서 비디오 추가
- HTML5 비디오 삽입
- SWF 파일 삽입
- 오디오 효과 추가
- Dreamweaver에서 HTML5 오디오 삽입
- 라이브러리 항목을 사용하여 작업
- Dreamweaver에서 아랍어 및 히브리어 텍스트 사용
- 링크 및 내비게이션
- jQuery 위젯 및 효과
- 웹 사이트 코딩
- Dreamweaver에서의 코딩 정보
- Dreamweaver의 코딩 환경
- 코딩 환경 설정
- 코드 색상 표시 맞춤 설정
- 코드 작성 및 편집
- 코드 힌트 및 코드 완성
- 코드 축소 및 확장
- 스니펫으로 코드 재사용
- 코드 린트
- 코드 최적화
- 디자인 뷰에서 코드 편집
- 페이지의 헤드 내용 작업
- Dreamweaver에 서버측 포함 삽입
- Dreamweaver에서 태그 라이브러리 사용
- Dreamweaver에 사용자 정의 태그 가져오기
- JavaScript 비헤이비어 사용(일반 지침)
- 빌트인 JavaScript 비헤이비어 적용
- XML 및 XSLT 정보
- Dreamweaver에서 서버측 XSL 변환 수행
- Dreamweaver에서 클라이언트측 XSL 변환 수행
- Dreamweaver에서 XSLT의 문자 엔티티 추가
- 코드 서식 지정
- 제품 간 워크플로
- 템플릿
- Dreamweaver 템플릿 정보
- 템플릿 및 템플릿 기반 문서 인식
- Dreamweaver 템플릿 만들기
- 템플릿에서 편집 가능 영역 만들기
- Dreamweaver에서 반복 영역 및 표 만들기
- 템플릿의 옵션 영역 사용
- Dreamweaver에서 편집 가능 태그 속성 정의
- Dreamweaver에서 중첩 템플릿을 만드는 방법
- 템플릿 편집, 업데이트 및 삭제
- Dreamweaver에서 xml 내용 내보내기 및 가져오기
- 기존 문서에서 템플릿 적용 또는 제거
- Dreamweaver 템플릿의 내용 편집
- Dreamweaver에서 템플릿 태그에 대한 구문 규칙
- 템플릿 영역의 강조 표시 환경 설정
- Dreamweaver에서 템플릿 사용 시 이점
- 모바일 및 멀티스크린
- 다이내믹 사이트, 페이지 및 웹 양식
- 웹 애플리케이션 이해
- 애플리케이션 개발용 컴퓨터 설정
- 데이터베이스 연결 문제 해결
- Dreamweaver에서 연결 스크립트 제거
- 다이내믹 페이지 디자인
- 다이내믹 콘텐츠 소스 개요
- 다이내믹 콘텐츠의 소스 정의
- 페이지에 다이내믹 콘텐츠 추가
- Dreamweaver에서 다이내믹 콘텐츠 변경
- 데이터베이스 레코드 표시
- Dreamweaver에서 라이브 데이터 제공 및 문제 해결
- Dreamweaver에서 사용자 정의 서버 비헤이비어 추가
- Dreamweaver를 사용하여 양식 구성
- 양식을 사용하여 사용자 정보 수집
- Dreamweaver에서 ColdFusion 양식 작성 및 활성화
- 웹 양식 제작
- 양식 요소를 위한 HTML5 지원 개선
- Dreamweaver를 사용하여 양식 개발
- 애플리케이션의 시각적 구성
- 웹 사이트 테스트, 미리보기 및 게시
- 문제 해결
이 항목을 통해 CSS Designer 패널을 사용하여 웹 페이지 배경에 그레이디언트를 적용하고 편집하는 방법을 살펴보시기 바랍니다.
CSS Designer 패널을 사용하여 웹 사이트의 배경에 그레이디언트를 적용할 수 있습니다. 그레이디언트 속성은 배경 범주에 있습니다.
그레이디언트 속성 옆에 있는 
를 클릭하여 그레이디언트 패널을 엽니다. 이 패널을 사용하여 다음과 같은 작업을 할 수 있습니다.
- 다양한 색상 모델(RGBa, Hexadecimal 또는 HSLa) 중에서 색상을 선택합니다. 그런 다음 여러 색상 조합을 색상 견본으로 저장합니다.
- 새 색상을 원래 색상으로 재설정하려면 원래 색상(K)을 클릭합니다.
- 색상 견본의 순서를 변경하려면 색상 견본을 원하는 위치로 드래그합니다.
- 색상 견본을 삭제하려면 색상 견본을 패널 밖으로 드래그합니다.
- 색상 변환점을 사용하여 복잡한 그레이디언트를 생성합니다. 기본 색상 변환점 사이의 원하는 지점을 클릭하여 색상 변환점을 생성합니다. 색상 변환점을 삭제하려면 색상 변환점을 패널 밖으로 드래그합니다.
- 선형 그레이디언트의 각도를 지정합니다.
- 패턴을 반복하려면 [Background-repeat] 속성을 편집합니다.
- 사용자 정의 그레이디언트를 색상 견본으로 저장합니다.
다음 코드를 살펴보십시오.
background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
- 57deg: 선형 그레이디언트의 각도를 의미
- rgba(255, 255, 255, 1.00): 첫 번째 색상 변환점의 색상
- 0%: 색상 변환점을 의미
Dreamweaver에서는 색상 변환점에 '%' 값만 지원됩니다. px 또는 em과 같은 다른 값을 사용할 경우 Dreamweaver에서 이러한 값을 'nil'로 읽습니다. 또한 Dreamweaver는 CSS 색상을 지원하지 않으며, 코드에 이러한 색상을 지정할 경우 'nil'로 읽습니다.
웹 브라우저에서 그레이디언트 렌더링
그레이디언트를 배경으로 사용할 경우 여러 웹 브라우저에서 그레이디언트를 적절히 렌더링하도록 Dreamweaver를 구성할 수 있습니다. Dreamweaver는 웹 브라우저가 그레이디언트를 적절히 표시하는 데 사용되는 코드에 적절한 공급업체 접두사를 추가합니다.
Dreamweaver는 w3c 포맷과 함께 다음 공급업체 접두어를 추가할 수 있습니다.
- Webkit
- Firefox
- Opera
Dreamweaver는 기본적으로 Webkit과 Dreamweaver 라이브 뷰의 공급업체 접두어를 추가합니다. 환경 설정 대화 상자에서 원하는 다른 공급업체를 선택할 수 있습니다(환경 설정 > CSS 스타일).
상자 그림자의 경우 환경 설정에서의 선택 여부에 관계없이 Webkit과 w3c 접두어가 항상 생성됩니다.
그레이디언트에 대한 모든 변경 사항은 공급업체별 구문에도 반영됩니다. Dreamweaver CC에서 공급업체별 구문을 포함하는 기존 파일을 열 경우 환경 설정에서 원하는 공급업체 접두어를 선택하십시오. Dreamweaver에서는 그레이디언트를 사용하거나 변경할 때 기본적으로 Webkit과 Dreamweaver 라이브 뷰 관련 코드만 업데이트되기 때문입니다. 따라서 코드의 다른 업체별 구문은 업데이트되지 않습니다.
배경 이미지 및 그레이디언트 교체
배경 이미지와 그레이디언트의 순서(코드에서 나타나는 순서)를 클릭 한 번으로 변경할 수 있습니다.
CSS Designer에서 url 또는 gradient 속성 옆에 있는 화살표를 클릭합니다.
Dreamweaver CC에는 기본적인 수준의 배경 교체 기능이 포함되어 있습니다. 여러 값 또는 이미지가 있는 경우 교체가 예상대로 작동하지 않을 수 있습니다. 또한 첫 번째 이미지, 두 번째 이미지, 배경에 적용된 그레이디언트가 있다고 가정해 보십시오. 그레이디언트를 교체하면 그레이디언트, 두 번째 이미지, 첫 번째 이미지의 순서가 됩니다.
