튜토리얼 문서

초보자

5분

웹 디자인에 이미지 사용

HTML과 CSS를 사용하여 웹 디자인에 이미지를 배치하는 방법을 살펴보세요.

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

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

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

시작하기 전에

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

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

1

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

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

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

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

CSS

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

2

HTML을 사용하여 이미지 추가

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

소스 코드(Source Code) 를 클릭하고 42행 부근에 있는 섹션으로 스크롤합니다.

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

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

HTML

3

width, height, alt 속성 설정

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

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

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

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

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

alt="Jupiter's Great Red Spot"

4

다른 이미지 추가

56행 부근에 있는 섹션을 찾습니다.

콘텐츠에 다른 이미지를 추가하려면 방금 학습한 내용을 반복합니다.

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

Gale Crater

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

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


2022년 3월 9일

Dreamweaver에서 이들 튜토리얼 사용해 보기

모던한 반응형 웹 페이지를 디자인하세요.