이 항목을 통해 CSS Designer 패널을 사용하여 웹 페이지 배경에 그레이디언트를 적용하고 편집하는 방법을 살펴보시기 바랍니다.
CSS Designer 패널을 사용하여 웹 사이트의 배경에 그레이디언트를 적용할 수 있습니다. 그레이디언트 속성은 배경 범주에 있습니다.
그레이디언트 속성 옆에 있는 를 클릭하여 그레이디언트 패널을 엽니다. 이 패널을 사용하여 다음과 같은 작업을 할 수 있습니다.
다음 코드를 살펴보십시오.
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%)
Dreamweaver에서는 색상 변환점에 '%' 값만 지원됩니다. px 또는 em과 같은 다른 값을 사용할 경우 Dreamweaver에서 이러한 값을 'nil'로 읽습니다. 또한 Dreamweaver는 CSS 색상을 지원하지 않으며, 코드에 이러한 색상을 지정할 경우 'nil'로 읽습니다.
그레이디언트를 배경으로 사용할 경우 여러 웹 브라우저에서 그레이디언트를 적절히 렌더링하도록 Dreamweaver를 구성할 수 있습니다. Dreamweaver는 웹 브라우저가 그레이디언트를 적절히 표시하는 데 사용되는 코드에 적절한 공급업체 접두사를 추가합니다.
Dreamweaver는 w3c 포맷과 함께 다음 공급업체 접두어를 추가할 수 있습니다.
Dreamweaver는 기본적으로 Webkit과 Dreamweaver 라이브 뷰의 공급업체 접두어를 추가합니다. 환경 설정 대화 상자에서 원하는 다른 공급업체를 선택할 수 있습니다(환경 설정 > CSS 스타일).
상자 그림자의 경우 환경 설정에서의 선택 여부에 관계없이 Webkit과 w3c 접두어가 항상 생성됩니다.
그레이디언트에 대한 모든 변경 사항은 공급업체별 구문에도 반영됩니다. Dreamweaver CC에서 공급업체별 구문을 포함하는 기존 파일을 열 경우 환경 설정에서 원하는 공급업체 접두어를 선택하십시오. Dreamweaver에서는 그레이디언트를 사용하거나 변경할 때 기본적으로 Webkit과 Dreamweaver 라이브 뷰 관련 코드만 업데이트되기 때문입니다. 따라서 코드의 다른 업체별 구문은 업데이트되지 않습니다.
배경 이미지와 그레이디언트의 순서(코드에서 나타나는 순서)를 클릭 한 번으로 변경할 수 있습니다.
CSS Designer에서 url 또는 gradient 속성 옆에 있는 화살표를 클릭합니다.
Dreamweaver CC에는 기본적인 수준의 배경 교체 기능이 포함되어 있습니다. 여러 값 또는 이미지가 있는 경우 교체가 예상대로 작동하지 않을 수 있습니다. 또한 첫 번째 이미지, 두 번째 이미지, 배경에 적용된 그레이디언트가 있다고 가정해 보십시오. 그레이디언트를 교체하면 그레이디언트, 두 번째 이미지, 첫 번째 이미지의 순서가 됩니다.
내 계정 로그인