HTML과 CSS를 사용하여 웹 디자인에 이미지를 배치하는 방법을 살펴보세요.
CSS와 HTML을 사용하여 이미지를 손쉽게 추가하는 방법을 살펴보았으므로 이번에는 자신의 프로젝트에서 직접 해보시기 바랍니다. 웹 디자인에서 이미지를 사용하여 작업하는 경우 이미지에 대한 저작권을 보유하고 있거나 소유자의 허가를 받아야 합니다. 또한 신뢰를 위해 소유자의 지침을 따라야 합니다.
이미지는 웹 페이지의 모양과 느낌을 더욱 살려주고 방문자에게 연관 관계를 추가적으로 제공할 수 있습니다. CSS 또는 HTML을 사용하여 페이지에 이미지를 배치할 수 있습니다.
콘텐츠 섹션에 하나의 배너 이미지와 두 개의 이미지를 추가해 봅니다.
프로젝트 파일을 다운로드하고 저장합니다. Dreamweaver에서 html-images.html 을 열고 분할 뷰에서 style.css 를 표시합니다.
참고: Dreamweaver에서 전체 웹 페이지를 볼 수 없는 경우 웹 페이지가 모두 표시될 때까지 코드 뷰와 라이브 뷰 창 사이에 있는 구분선을 드래그합니다.
CSS를 사용하여 배경 이미지, 머리글 이미지 등의 스타일과 장식에 사용할 이미지를 설정합니다.
/* -- Step 1: Start Here -- */ 섹션을 찾아 background-image 속성을 #headerimg CSS 선택기에 추가합니다.
이미지 폴더에서 europa_header.jpg 를 찾아 열기를 클릭합니다. 높이가 이미지 컨테이너에 맞게 설정될 때까지 이미지가 표시되지 않습니다. height: 속성을 추가하고 값을 500px 로 설정합니다.
#headerImg {
...
background-image:url(images/europa_header.jpg);
height:500px;
}
이미지가 콘텐츠의 일부이거나 액세스 가능성(장애가 있는 사용자 지원)을 위해 사용되는 경우 HTML에서 태그를 사용하여 이미지를 배치합니다.
소스 코드(Source Code) 를 클릭하고 42행 부근에 있는 섹션으로 스크롤합니다.
보시는 바와 같이 이미지가 컨테이너에 비해 너무 크고 제대로 표시되지 않습니다. 이에 맞게 이미지 크기를 변경합니다.
참고: 태그는 / 를 > 앞에 추가하면 자동으로 닫힙니다.
HTML 이미지는 기본적으로 전체 크기로 추가됩니다. width 와 height 를 사용하여 이미지 크기를 조절할 수 있습니다.
다음 속성을 태그에 추가합니다.
width="500px" height="500px"
alt 속성은 이미지가 사용자의 브라우저에 로드되지 않거나 장애가 있는 사용자가 화면 판독기로 읽을 때 이미지의 간단한 설명을 보여줍니다.
다음 속성을 태그에 추가합니다.
alt="Jupiter's Great Red Spot"
56행 부근에 있는 섹션을 찾습니다.
콘텐츠에 다른 이미지를 추가하려면 방금 학습한 내용을 반복합니다.
다음 속성을 태그에 추가합니다.
브라우저에서 미리보기(Preview in Browser) 를 클릭하여 원하는 브라우저를 선택하고 이미지를 확인합니다.
변경 내용을 확인하려면 파일을 저장합니다.