HTML과 CSS를 사용하여 웹 디자인에 이미지를 배치하는 방법을 살펴봅니다.
work-with-html-images_1408x792

CSS와 HTML을 사용하여 이미지를 손쉽게 추가하는 방법을 살펴보았으므로 이번에는 자신의 프로젝트에서 직접 해보시기 바랍니다. 웹 디자인에서 이미지를 사용하여 작업하는 경우 이미지에 대한 저작권을 보유하고 있거나 소유자의 허가를 받아야 합니다. 또한 신뢰를 위해 소유자의 지침을 따라야 합니다.

images-web-design-step1

이미지는 웹 페이지의 모양과 느낌을 더욱 살려주고 방문자에게 연관 관계를 추가적으로 제공할 수 있습니다. CSS 또는 HTML을 사용하여 페이지에 이미지를 배치할 수 있습니다.

콘텐츠 섹션에 하나의 배너 이미지와 두 개의 이미지를 추가해 봅니다.

시작하기 전에

프로젝트 파일을 다운로드하고 저장합니다. Dreamweaver에서 html-images.html을 열고 분할 뷰에서 style.css를 표시합니다.

참고: Dreamweaver에서 전체 웹 페이지를 볼 수 없는 경우 웹 페이지가 모두 표시될 때까지 코드 뷰와 라이브 뷰 창 사이에 있는 구분선을 드래그합니다.

images-web-design-step0

CSS를 사용하여 머리글 이미지 추가

CSS를 사용하여 배경 이미지, 머리글 이미지 등의 스타일과 장식에 사용할 이미지를 설정합니다.

/* -- Step 1: Start Here -- */ 섹션을 찾아 background-image 속성을 #headerimg CSS 선택기에 추가합니다.

이미지 폴더에서 europa_header.jpg를 찾아 열기를 클릭합니다. 높이가 이미지 컨테이너에 맞게 설정될 때까지 이미지가 표시되지 않습니다. height: 속성을 추가하고 값을 500px로 설정합니다.

images-web-design-step2a

CSS

#headerImg {
  ...
  background-image:url(images/europa_header.jpg);
  height:500px;
}

images-web-design-step2b

HTML을 사용하여 이미지 추가

이미지가 콘텐츠의 일부이거나 액세스 가능성(장애가 있는 사용자 지원)을 위해 사용되는 경우 HTML에서 <img> 태그를 사용하여 이미지를 배치합니다.

소스 코드(Source Code)를 클릭하고 42행 부근에 있는 <!--- Add second image here ---> 섹션으로 스크롤합니다.

<img src=" 태그를 입력하고 이미지 폴더에서 jupiter_body.jpg 파일을 찾은 다음 열기를 클릭합니다.

보시는 바와 같이 이미지가 컨테이너에 비해 너무 크고 제대로 표시되지 않습니다. 이에 맞게 이미지 크기를 변경합니다.

참고: <img> 태그는 /> 앞에 추가하면 자동으로 닫힙니다.

images-web-design-step3a

HTML

<img src="images/jupiter_body.jpg" />

images-web-design-step3b

width, height, alt 속성 설정

HTML 이미지는 기본적으로 전체 크기로 추가됩니다. widthheight를 사용하여 이미지 크기를 조절할 수 있습니다.

다음 속성을 <img> 태그에 추가합니다.

width="500px" height="500px"

 

images-web-design-step4

alt 속성은 이미지가 사용자의 브라우저에 로드되지 않거나 장애가 있는 사용자가 화면 판독기로 읽을 때 이미지의 간단한 설명을 보여줍니다.

다음 속성을 <img> 태그에 추가합니다.

alt="Jupiter's Great Red Spot"

images-web-design-step4b

다른 이미지 추가

56행 부근에 있는 <!--- Add third image here ---> 섹션을 찾습니다.

콘텐츠에 다른 이미지를 추가하려면 방금 학습한 내용을 반복합니다. <img src=" 태그를 입력하고 이미지 폴더에서 sunrise_body.jpg를 찾은 다음 열기를 클릭합니다.

다음 속성을 <img> 태그에 추가합니다.

<img src="images/sunrise_body.jpg" width="500px" height="500px" alt="Gale Crater" />

images-web-design-step5

브라우저에서 미리보기(Preview in Browser)를 클릭하여 원하는 브라우저를 선택하고 이미지를 확인합니다.

변경 내용을 확인하려면 파일을 저장합니다.

images-web-design-step6
04/11/2018
이 페이지가 도움이 되었습니까?