Dreamweaver CC 이미지와 배경 추가하기
Table of Contents
- 소개
- 이미지와 배경 추가하기
- 이미지와 배경의 차이
- 디자인 뷰에서 이미지 가져오기
- 이미지 프로퍼티 수정하기
- 배경 추가하기
- 색상으로 배경 추가하기
- 이미지로 배경 추가하기
- 그라데이션으로 배경 추가하기
- 이미지 vs 배경: 어떤 것을 사용해야 할까요?
- 요약
- FAQ
이미지와 배경 추가하기
안녕하세요! 이 비디오에서는 Adobe Dreamweaver CC를 사용하여 이미지와 배경을 추가하는 방법을 알아보겠습니다. 이전 비디오를 따라왔다면 이 간단한 기본 구조를 만들 수 있을 것입니다. 어렵게 느껴진다면 비디오 설명란에서 다운로드할 수도 있습니다. 더 잘 이해하기 위해, 우리는 모든 Div 태그에 검은 테두리를 추가했습니다.
이미지와 배경의 차이
Dreamweaver에서 이미지와 배경을 구별해야 합니다. "이미지"는 Div 태그 안에 포함된 파일로 간주됩니다. 이 경우, Div 태그 상자의 크기가 변경되더라도 이미지는 크기가 유지됩니다. "배경"은 Div 태그를 항상 완전히 덮는 이미지입니다. 따라서 Div 태그의 크기가 변경되면 배경도 따라가게 됩니다.
디자인 뷰에서 이미지 가져오기
이미지나 사진 또는 캡션은 "디자인 뷰"에서 일반적으로 가져올 수 있습니다. 예를 들어, 복사하여 붙여 넣거나 파일 자체를 드래그할 수 있습니다. 이미지는 "img src=..." 명령을 통해 가져옵니다. 너비와 높이는 픽셀 단위로 지정되며, 이미지의 작은 사각형을 드래그하여 편집할 수 있습니다. 이미지를 선택하고 드래그하여 이동할 수도 있습니다. 이미지를 삭제하려면 그냥 선택하고 "Ctrl + X"를 사용하면 됩니다.
이미지 프로퍼티 수정하기
"Property Inspector"에서는 모든 이미지 속성을 확인할 수 있습니다. "Live View"가 꺼진 경우에 선택하면 됩니다. "Src"는 어떤 이미지를 사용할지 설정하고, "Link"는 이미지를 클릭했을 때 이동할 웹 주소를 추가합니다. 오른쪽에는 "W"와 "H"가 이미지의 크기를 나타냅니다. 종횡비를 유지하기 위해 잠금을 해제하세요. "Edit" 옆에는 이미지에 간단한 편집을 적용할 수 있습니다. 더 나은 편집을 위해 Photoshop을 사용할 수도 있습니다. 모든 편집은 영구적이므로 되돌리기 위해 "Edit Undo"를 사용해야 할 수도 있습니다. "Alt"는 이미지가 어떤 이유로 표시되지 않을 경우 이미지를 대체하는 텍스트입니다.
배경 추가하기
배경을 추가하기 위해 Div 태그를 선택하고 "Selectors list"에서 관심 있는 Div 태그를 선택한 후 "Background" 아이콘으로 이동합니다. 예를 들어, 단순한 단색을 넣을 수 있습니다. 이 색상은 배경이 없는 Div 태그에도 영향을 미칠 것입니다. 배경으로 사진을 사용할 수도 있습니다. "background-image" 아래의 "url"로 이동하고 폴더 버튼을 통해 이미지를 찾습니다. 이렇게 하면 이전에 넣은 단색을 덮게 됩니다. 그라데이션을 넣을 수도 있습니다. 그러나 사용된 이미지의 크기가 잘못될 수 있습니다. 그냥 "background-size"로 이동하여 "pixels"를 선택하고 적절한 크기를 설정하면 됩니다. "Live View"를 켜두세요. 배경이므로 관련 Div 태그의 텍스트가 표시됩니다. 또한, 배경 위에 있는 다른 Div 태그에 배경을 넣으면 그 위에 표시됩니다. 단락과 제목에도 배경을 넣을 수 있지만, 라인 전체가 덮여서 실제 길이를 제어할 수 없습니다.
이미지 vs 배경: 어떤 것을 사용해야 할까요?
텍스트가 없거나 Div 태그의 크기가 사용자의 화면에 따라 변경될 때 이미지의 크기를 조정할 필요가 없는 경우 첫 번째 경우가 더 좋습니다. 이미지가 무언가의 캡션일 경우, 다양한 화면 크기에 대응하는 유연한 웹 사이트를 만들어야 한다면, 주로 배경을 사용하는 것이 좋습니다.
요약
이제 배너에 이미지를 가져오고 배경에는 배경 태그를 넣고, 원한다면 열의 배경에는 섬세한 단색을 넣을 수 있습니다. 당신의 선택입니다! 이미지를 가져올 경우 레이아웃을 조정해야 할 수도 있습니다. 각 컬럼의 내용을 나타내는 작은 이미지를 추가할 수도 있습니다. 연습해 보세요!
정말 감사합니다! 다음 비디오에서는 객체를 배치하고 위치를 지정하는 방법을 알려드리겠습니다. 이 비디오 시청해 주셔서 감사합니다.
WHY YOU SHOULD CHOOSE Proseoai
